@media screen {

    /**
     * Global elements
     */

    body {
        color       : #333;
        background  : #fafafa;
        font-family : Verdana, Arial, Helvetica, sans-serif;
        font-size   : 0.75em;
    }

    h1 { font-size : 1.7em; margin-top : 0; }
    h2 { font-size : 1.5em; }
    h3 { font-size : 1.3em; }
    h4 { font-size : 1.1em; }
    h5 { font-size : 1.0em; }
    h1, h3, h4, h5 { font-family : Georgia, serif; color : #f22; }
    h2 {
    	font-family : Georgia, serif; 
    	color 		: #000;
    	background 	: #eee;
    	padding		: 5px;
    	text-align	: center;
    }   

    img { border : 0; margin : 5px 5px;}
    
    /**
     * Styles for images with captions
     */
     
    .captioned_photo {
		float: right;
		margin: .5em 0 .5em 1em;
		padding: 0;
		line-height: 1em;
		width: 220px;
	}
	
	.captioned_photo p {
		width: 100%;
		margin: 0;
		padding: 1em 0;
		font: .75em/1.75em Verdana, sans-serif;
		color: #666;
	}
	
	.captioned_photo img {
		margin: 0;
		padding: 0;
		display: block;
	}
	/* end */
	
    form { margin : 0; }

    a       { color : #f22; background : none; text-decoration : underline; }
    a:hover { color : #fff; background : #f22; text-decoration : none; }


    /**
     * Setup the 3 column layout
     *
     * infocraft.com approach
     */

    body { margin : 0; padding : 0 300px; min-width : 600px; }
	#header, #footer, #nav { margin : 0 -300px 0 -300px; }
	.column { float : left; position : relative; }
	#content-container { width : 100%; padding : 0; }
	/*#left-container { width : 300px; margin-left : -100%; right : 300px; }*/
	#right-container { width : 300px; margin-right : -300px; }
	#footer { clear : both; }
	/** html #left-container { left : 300px; } */
	
	#left-container{
  		width: 300px;             /* LC width */
  		margin-left: -100%;
  		left: -300px;              /* RC width for IE6 */
	}
	
	#content-container > #left-container{
  		left: -300px;             /* -LC width for others */
	}
		
    /**
     * Style the main page areas
     */
     
    #header {
        background    : url(../images/page_header.jpg) no-repeat center #ad0119;
        height        : 45px;
        /*border-bottom : 1px solid rgb(173,1,26);*/
    }

    #header img { display : none; }

	/**
	* Styles for containers
	*/
	
    #content-container { background : #fff; }
    
    #left-container .box {
        margin      : 0 10px 10px 10px;
        padding     : 3px;
        border      : 1px solid #eee;
        background  : none; /*#fafafa;*/
        font-size   : 0.9em;
        line-height : 1.6em;
    }
    
    #left-container .box li {
    	padding : 0px 1px 5px 0px;
    }
    
    #left-container .box a {
    	color : #B0C4DE; 
    	font-weight: bold; 
    	text-decoration : none; 
    }
    
    #left-container .box a:hover {background : #F5F5DC; color : #000;}
    
    #left-container .box .home-header {
    	color : #191970; 
    	text-transform : lowercase;
    	font-size : 1.1em;
    }
    
    #left-container .box .stud-header{
    	color : #000080;
    	text-transform : lowercase;
    	font-size : 1.1em;
    }
    
    #right-container .box {
    	margin      : 0 10px 10px 10px;
        padding     : 10px;
    	border      : 1px solid #fafafa;
        background  : none; /*#fff;*/
        font-size   : 0.9em;
        line-height : 1.6em;
    }   	

    #footer {
        color      : #999;
        font-size  : 0.8em;
        padding    : 10px;
        text-align : center;
    }

    #footernote a{ color	: #999;}
    #footernote a:hover{
    	background : #aaa;
    	color : #fff;
    	cursor : default;
    }

    #content {
        border      : 1px solid #eee;
        padding     : 10px;
        line-height : 1.8em;
    }
    /*
    * Styles for logged-in user
    */  
    
    #logged-in-user {
    	font-size   : 1.0em; 
    	color 	    : blue;
    	margin-left : 0px;
    }

    #breadcrumbs {
        font-size : 0.8em;
        color     : #ccc;
        margin-bottom : 10px;
    }

    #breadcrumbs a {
    	color : #aaa;
    	font-weight:bold;
    	text-decoration:none;
    	cursor:default;
    }

    #breadcrumbs a:hover { background : #fff; color : #aaa; }

    /**
     * Styles for forms
     */

    div.error {
        background : #fff;
        padding    : 5px;
        margin     : 5px 0;
        color      : #a00;
    }
    
    div#messages{ margin-bottom : 10px; color : #a00;}
    div#up, #bottom { padding-left : 550px;}
    div#up a, div#bottom a {color : #8B4513; text-decoration : none;}
    div#up a:hover, div#bottom a:hover { color : #000; background : #FFDAB9}
    
    /**
     Styles for login form 
    */
    h2#login {   	
    	color 		: #191970;
    	background 	: #eee;
    	padding		: 5px;
    	text-align : center;
    	text-transform : lowercase;
    	font-size : 1.1em;
    }
    div#login {background-color : #D3D3D3;}
    div#login .row label {
    	width : 80px; 
    	color : dimgray;
    	font-weight : normal; 
    	font-family : Georgia, serif;
    	font-size : 1.2em;  	
    }
    div#login input[type=text],div#login input[type=password] {
    	width : 125px;   	
    }   
    div#login input[type=text],div#login .row label#username{ margin-top : 12px;}
    div#login .submit {margin-left : 167px; margin-top : 0px; background : none;}
    div#login .reset{
    	margin-left : 45px; 
    	margin-top : 2px;
    	font-size : 1.3em;
    	font-family: Helvetica,sans-serif;
    	padding-bottom : 10px;
    }
    div#login .reset a {color : #808080; text-decoration:none;}
    div#login .reset a:hover { color : #000; background : #D3D3D3; text-decoration : none; }
    
    form .row div.error, form .date div.error {
        font-size : 0.8em;
        line-height : 1em;
    }

    form .row, form .date { margin : 10px 0; clear : both; margin-left : 20px;}

    form .row label, form .date label{
        width       : 150px;
        float       : left;
        display     : block;
        font-weight : bold;
    }     
    
    form .row label#test1, label#test4, label#exam {
		width : 50px;
		font-weight : bold;
	}
	
	form .row  label#assign1, label#assign4{
		width : 102px;
		font-weight : bold;
	}
	
	form .row label sup#sup, div sup#sup {color :red;}
    
    form .required, form .counter{
    	margin-left : 170px;
    }
    
    form .legend{
    	font-weight : normal;
    	font-size 	: 0.9em;
    	font-family : Georgia, serif;
    }
    
	form .questions { margin-left : 350px; background : #eee;}
	form .questions textarea {width : 250px; height : 100px;} 
	form .questions input[type=radio]{ margin-left : 10px; }
	
    form .row input[type=text] { width : 230px; }
    form .row input[type=password] { width : 230px; }
    form .row input[type=file]{ margin : 10px 0; width : 400px;}
    form .row input[readonly], .submit input[readonly] {width : 70px; }
    form .row input#form_identity[readonly], input#form_module_name[readonly] {width : 230px; }
    form .row textarea { width : 350px; height: 150px; }
    form .row textarea#form_module_lecturer { width : 230px; height: 60px; }
    form .row select { width : 230px; }
	form .row select#form_title,select#form_usertype, select#form_semester,
	select#form_year, select#form_module_code, select#form_student_num, select#form_username,
	select#form_results_type
	{ width: 130px; }	 
	
	form .row input#form_assign1,input#form_assign2,input#form_assign3,input#form_assign4,
	input#form_assign5,input#form_test1,input#form_test2,input#form_test3,input#form_test4,
	input#form_test5,input#form_exam,input#form_year {width : 70px }	
	
    form .captcha { margin-left : 165px; margin-top: 10px;}

    form .submit {
        padding    : 5px;
        margin-top : 15px;
        background : #eee;
    }    
    
    form .submit#left {float : right;}
    form .submit#group-left{float : center;}
        
    /**
    * Styles for Tables
    */
    
    table#no-style td {
    	padding : 4px; 
		text-align:left; 
		padding-top:0px; 
		padding-bottom:0px;
    }
    
	td, th {
		padding : 6px; 
		text-align:center; 
		padding-top:0px; 
		padding-bottom:0px;
	}
	tr.even{ background	: #eee; }
	thead {background-color:gray; color:#fff;}
	
	/**
	* Styles for Admin Page
	*/
	
	#admin-box h2 { background : #ad0119; color:#fff; } 
}

@media print {

    /**
     * Elements to hide
     */
    #nav, #left-container, #right-container { display : none; }
}