Click here to Skip to main content
15,860,972 members
Articles / Web Development / ASP.NET

YouGrade - Asp.NET MVC Multimedia Exam Suite

Rate me:
Please Sign up or sign in to vote.
4.93/5 (99 votes)
8 Jun 2011CPOL15 min read 230.5K   6.3K   192  
A multimedia exam suite built on Asp.NET and Youtube
/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body{ font: 100% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative; }
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}

/*
body {
    background-image: -webkit-gradient(linear, left top, left bottom, 
        color-stop(0.0, white),
		color-stop(1.0, white)
		);
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;

    font-family: "Segoe UI Light";
    font-size: 13.5px;
    overflow: hidden;
    clear: both;    
}
*/
a:link {
    color: #034af3;
    text-decoration: underline;
}

a:visited {
    color: #505abc;
}

a:hover {
    color: #1d60ff;
    text-decoration: none;
}

a:active {
    color: #12eb87;
}

p, ul {
    margin-bottom: 20px;
    line-height: 1.6em;
}

header,
footer,
nav,
section {
    display: block;
}

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    color: #000;
}

h1 {
    font-size: 13.5px;
    padding-bottom: 0;
    margin-bottom: 0;
}

h2 {
    padding: 0 0 10px 0;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
}

header, #header {
    position: relative;
    margin-bottom: 0px;
    color: #000;
    padding: 0;
}

header h1, #header h1 {
    
    padding: 5px 0;
    margin: 0;
    color: #000;
    border: none;
    line-height: 2em;
    font-size: 32px !important;
}

#main 
{
    background-image: -webkit-gradient(linear, left top, left bottom, 
        color-stop(0.0, rgba(255,255,255,0.5)),
		color-stop(1.0, rgba(255,255,255,0.5))
		);
    padding: 30px 30px 15px 30px;
    border-width: thick;
    border-radius: 20px 0 0 0;
    -webkit-border-radius: 20px 0 0 0;
    -moz-border-radius: 20px 0 0 0;
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;    
}

footer, 
#footer {    
    color: #999;
    padding: 10px 0;
    text-align: center;
    line-height: normal;
    margin: 0 0 0 0;
    font-size: .9em;
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
}

/* TAB MENU   
----------------------------------------------------------*/
ul#menu {
    font-size: 13px;    
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align: right;
}

ul#menu li {
    display: inline;
    list-style: none;
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;    
}

ul#menu li#greeting {
    padding: 10px 20px;
    
    text-decoration: none;
    line-height: 2.8em;
    color: #000;
}

ul#menu li a {
    padding: 10px 20px;
    
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #034af3;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: #000;
    text-decoration: none;
}

ul#menu li a:active {
    background-color: #a6e2a6;
    text-decoration: none;
}

ul#menu li.selected a {
    background-color: #000;
    color: #000;
}

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    
}

textarea {
    min-height: 75px;
}

input[type="text"], 
input[type="password"] {
    border: 1px solid #ccc;
    padding: 2px;
    font-size: 1.2em;
    color: #444;
    width: 200px;
}

select {
    border: 1px solid #ccc;
    padding: 2px;
    font-size: 1.2em;
    color: #444;
}

input[type="submit"] {
    font-size: 1.2em;
    padding: 5px;
}

/* TABLE
----------------------------------------------------------*/

table {
    border: solid 1px #e8eef4;
    border-collapse: collapse;
}

table td {
    padding: 5px;
    border: solid 1px #e8eef4;
}

table th {
    padding: 6px 5px;
    text-align: left;
    background-color: #e8eef4;
    border: solid 1px #e8eef4;
}

/* MISC  
----------------------------------------------------------*/
.clear {
    clear: both;
}

.error {
    color: Red;
}

nav, 
#menucontainer {
    margin-top: 40px;
}

div#title {
    display: block;
    float: left;
    text-align: left;
}

#logindisplay {
    font-size: 1.1em;
    display: block;
    text-align: right;
    margin: 10px;
    color: White;
}

#logindisplay a:link {
    color: white;
    text-decoration: underline;
}

#logindisplay a:visited {
    color: white;
    text-decoration: underline;
}

#logindisplay a:hover {
    color: white;
    text-decoration: none;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #ff0000;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid {
    display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label, 
.editor-label {
    margin: 1em 0 0 0;
}

.display-field, 
.editor-field {
    margin: 0.5em 0 0 0;
}

.text-box {
    width: 30em;
}

.text-box.multi-line {
    height: 6.5em;
}

.tri-state {
    width: 6em;
}

#background {
    width: 100%; 
    height: 100%;
    left: 0px;
    top: 0px;
    position: absolute; 
    z-index: -1;
}

.stretch {
    width:100%;
    height:100%;
}

#videoDiv 
{
    width: 100%; 
    height: 80%; 
    position: absolute; 
    top: 16;
    left: 16;
    margin-left: 16px;
}

.examTitle
{
    text-transform: lowercase;
    vertical-align:top;
    margin-left: 180px;
}

.questionText
{
    height:300px; 
}

/*
.examTitle
{
    font-size: 40px;
    font-family: "Segoe UI Light";
    color: #000;
    text-transform: lowercase;
    vertical-align:top;
    margin-left: 150px;
}

.questionTitle
{
    font-size: 25px;
    font-family: "Segoe UI Light";
    color: #000;
}

.questionText
{
    font-size: 20px;
    font-family: "Segoe UI Light";
    color: #000;
    height:300px; 
}

.alternatives
{
    font-size: 20px;
    font-family: "Segoe UI Light";
    color: #000;
}
*/

.alternatives
{
    height:150px; 
    margin-top: 20px;
}

.leftPanel
{
    position: relative;
    float:left;
    margin-left: 0%;   
    width: 50%;
    height: 100%;
}

.rightPanel
{
    position: relative;
    margin-left: 40%;
    margin-top: 0px;
    width: 50%;
}

img
{
    position:absolute;
}

.buttons
{
    vertical-align: top;
    position: absolute;
    margin-left: 75px;
    margin-top: 10px;
    width: 100%;
}

.button
{
    display: inline;
}

/*
.button
{
    position: absolute;
    background-image: url('/Content/Images/Buttons2.PNG');
    background-repeat: no-repeat;
    width: 45px;
    height: 80px;
    font-size: 20px;
    vertical-align: top;
}

.button a
{
    position: absolute;
    vertical-align: text-bottom;
    text-align: center;
    margin: 36px 0 0 0;    
}
*/

/*
.play
{
    background-position: -5px -2px;
    margin: 0 0px;
}

.previous
{
    background-position: -55px -2px;
    margin: 0 100px;
}

.next
{
    background-position: -100px -2px;
    margin: 0 200px;
}

.end
{
    background-position: -150px -2px;
    margin: 0 300px;
}
*/

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Instructor / Trainer Alura Cursos Online
Brazil Brazil

Comments and Discussions