/* 
    Document   : screen
    Created on : Feb 3, 2010, 9:59:13 AM
    Author     : Doug Kelley
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

body{
    margin:0;
    padding:0;
    background-image: url("/images/bg_header.jpg");
    background-repeat: no-repeat;
    background-color: #101745;

    
}
#wrapper {
    margin-left: 10%;
    margin-right: 10%;
}
 
#header{
    height: 130px;
    /*background: orange;*/
    padding-top: 20px;
    padding-left: 10px;
    /*background-image: url(/images/)*/
     border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    /*box-shadow: 3px 3px 3px #666;
    -moz-box-shadow: 3px 3px 3px #666;
    -webkit-box-shadow: 3px 3px 3px #666;
    -o-box-shadow: 3px 3px 3px #666;*/

}
#header img{
 border: 0;
}
#tagline{
    height: 20px;
    color: white;
    font: caption;
    font-family: sans-serif;
    font-size: large;
    padding-left: 60px;
    /*background-color: green;*/

}
#header p{
    margin-top: 0;
    position: relative;

}
/*Top rigt toolbar*/
#header #tools{
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
}
/*#nav ul{
    margin: 0;
    list-style-type: none;

}
#nav li{
    display: inline;
    font-size: xx-large;
}*/

#nav {
    position: relative;
    padding:1em 1em 1.75em 1em; /*Why does this line of code mess everything up when it is commented out?*/
	margin:0;
	line-height:1em;
        height: auto;
    padding-top: 5px;
     border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    background-color: #bbb;
    
}
#nav ul {
	margin:0 0 0 0;
	padding:2px 0 0 0;
        /*font: bold medium;*/
}
#nav ul li {
        display: inline;
        float:left;
	margin:0;
	padding:0;
        list-style: none;
        text-align: center;
}

#nav ul li a {
	display: inline-block;
        width: 7em;
	padding:3px .5em 0 .5em;
        margin-left: 8px;
        border: 1px solid #ccc;
        background:#ddd;
	text-decoration:none;
	font-weight:bold;
	border-top-left-radius: .5em;
        border-top-right-radius: .5em;
        -moz-border-radius-topright: .5em;
	-moz-border-radius-topleft: .5em;
        -webkit-border-top-left-radius: .5em;
        -webkit-border-top-right-radius: .5em;
}
#nav a:link {
   color: #004B91;
}
#nav a:visited{
    color: #004B91;
    outline: none;
}
#nav a:hover {
	color: red;
	background: #fff;
        border-color: #aaa;
        border-bottom: 1px solid #fff;
	}
.home #nav a[title~=home],
.assignments #nav a[title~=assignments],
.family #nav a[title~=family]{
 color: #5d460e;
 background: #bbb;
 border-color: #933;
 border-bottom: none;
 cursor:default;
}
#centerbox{
    position: relative;
    overflow: auto;/*This says to include floats as content in centerbox*/
}
#subnav{
    width: 15%;
    min-height: 300px;
    background-color: #bbb;
    float: left;
    padding-right: 10px;
    margin-right: 5px;
    margin-top: 5px;

    /*Outside Border*/
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    

    
}
#subnav a:link {
   color: #004B91;
}
#subnav a:visited{
    color: #004B91;
}
#subnav a:hover {
	color: #FF0000;
	/*background-color: #333333;*/
	text-decoration: none;
	}

#content{
    width: 85%;
    background-color: #D3DCE6;
    float: left;
    max-width: 650px;
    min-height: 300px;
    margin-top: 5px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    box-shadow: 3px 3px 3px #666;
    -moz-box-shadow: inset 3px 1px 3px #666;
    -webkit-box-shadow: inset 3px 3px 3px #666;
    -o-box-shadow: inset 3px 3px 3px #666;
    
    
}
#content div{
    padding: 1em;

}
#content h1{
    margin-top: 0;
    color: #000000;
}
#content h2, li, p, dd, td, label, legend, th{
    color: #000000;
}
#content img{
    border: 0;
}
#content li.lrnrpt7 {
height: 50px;
width: 100px;
margin:0;
padding:0;
background-image:url("/images/lrnrpt7_tn2.jpg");
}

#content li.lrnrpt7 a, li.lrnrpt7 a:link, li.lrnrpt7 a:visited {
display:block;
}

#content li.lrnrpt7 img {
width:100px;
height:50px;
border:0;
}

#content li.lrnrpt7 a:hover img {
visibility:hidden;
}
#content a:link {
   color: #00A0A2;
}
#content a:visited{
    color: #00A0A2;
}
#table{padding: 2px; text-align: left; width: 90%; border: gray;}
th {text-align: center; font-weight: bold}
th { vertical-align: baseline }
td { vertical-align: middle }

#footer{height: 40px;
        width: 100%;
        color: #DCDCDC;
        padding-left: 10px;/*background-color: olive;*/
        padding-top: 10px;
        margin-bottom: 10px;
        margin-top: 10px;

       border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    box-shadow: 3px 3px 3px #666;
    -moz-box-shadow: inset 3px 1px 3px #666;
    -webkit-box-shadow: inset 3px 3px 3px #666;
    -o-box-shadow: inset 3px 3px 3px #666;
}
#footer img{
    border: 0;
}
#footer a:link {
   color: #004B91;
}
#footer a:visited{
    color: #004B91;
}
#footer a:hover {
	color: #FF0000;
	/*background-color: #333333;*/
	text-decoration: none;
	}

/*
CSS Selectors:
1- Element selector - you declare the element name. (e.g. body)
2- ID selector - it controls elemetns that have an id attribute (e.g. #header)
    selectors are case sensitive between code elements and attributes.
    id's 100% wide and variable height until changed.
CSS one must put px for pixles, in for inches, cm and mm also understood.
    pt (points)
    pi (picas typwriter measurement units) These are all fixed measurement units.
Flexible units:
    %
    em
        1- Font dependant
        2- Width of the Capital M is the legnth
    ex  
        1- the height of the lower case x in the font.
Screen configuration:
    Position functions
        relative
            top: 5% (it would move 5% down from its normal position from parent)
                    Usually you use two ex: top left top right etc.
            left:
            bottom:
            right:
        absolute
            The parent is Body... Always... Parent represents the same child parent relationship in a folder
            structure.

relative = from where it normally starts Footer = bottom etc.
absolute = from the body's top left corer.
*/