@import url("reset.css");

/* ============
css3 goodness

-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #000;
box-shadow: 10px 10px 25px #ccc;

-moz-border-radius: 20px;
-webkit-border-radius: 20px;

opacity: 0.5;  
============ */

h1 {font-size: 24px; font-weight: 400; margin-bottom: 2px;}
h2 {font-size: 16px;}

#container {margin: 0 auto; width: 960px;}

/*Columns*/
.one 	  {width: 60px;}
.two 	  {width: 140px;} 
.three 	{width: 220px;}
.four 	{width: 300px;} 
.five 	{width: 380px;}
.six 	  {width: 460px;} /* Half */
.seven  {width: 540px;}
.eight  {width: 620px;}
.nine   {width: 700px;}
.ten    {width: 780px;}
.eleven {width: 860px;}
.twelve {width: 940px;} /* Full */

/*Utilities*/
.gutterBoth   {margin: 0 10px;}
.gutterRight  {margin-right: 10px;}
.gutterLeft   {margin-left: 10px;}

.left   {float: left;}
.right  {float: right;}

.orange {background: #FF8000;}
li.orange a:hover {background: #ffa64c;}
.blue {background: #283A90;}
.red {background: #CD2626;}
.yellow {background: #FFB00F;}
.green {background: #006400;}
.gray {background: #999999;}

.debug {outline: red 1px solid;}

.boxLink {background: #4682B4; display: block; font-size: 13px; margin-bottom: 8px; padding: 1px 2px; text-align: center;}
a.boxLink {color: #fff;}
a:hover.boxLink {background: #9BC4E2;}

/*Gen Site styles*/
#header {outline: #eee 1px solid; padding: 10px 0;}
#header #masthead {float: left; height: 60px;}
#header #search {float: right; margin: 12px 12px 0 0;}
#header #nav {height: 20px; padding: 10px 0;}
#header #nav li {float: left; font-size: 13px; font-weight: bold; text-align: center; width: 140px;}
#header #nav li a {color: #fff; display: block; padding: 6px 0px;}
/*#header #nav li.dropDown {position: relative;}*/
#header #nav li.dropDown ul {background: #FF8000; display: none; z-index: 4;}
#header #nav li.dropDown:hover ul {display: block; position: absolute;}
#header #nav li.dropDown:hover ul li {float: none;}

#content {padding: 10px 0;}
#content h1 {font-size: 24px;}
#content .body {padding: 10px 0;}
#content .body p {line-height: 1.5em;}
#content .body a {color: green;}
#content .body a:hover {text-decoration: underline;}

#topColOne, #topColTwo, #topColThree {margin-bottom: 15px; min-height: 400px;}

#topColOne h1 {color: #666;}
#topColOne h2 {margin-bottom: 12px;}
#topColOne #announcements {border-bottom: 1px solid; font-size: 14px; min-height: 210px; padding: 10px; }
#topColOne #eEdition {background: url('/images/laptop2.jpg') no-repeat bottom right; height: 150px; padding: 10px;}
#topColOne #eEdition li {margin: 5px 0;}

#topColTwo #teacherResources {background: #C6E2FF; font-size: 14px; min-height: 380px; padding: 10px;}
#topColTwo h1 {color: #283A90;}

#topColThree h1 {color: #283A90;}
#topColThree h2 {margin-bottom: 12px;}
#topColThree #studentResources {background: #FFFFCC; font-size: 14px; min-height: 210px; padding: 10px; }
#topColThree #parentResources {background: #BCEE68; font-size: 14px; height: 140px; margin-top: 10px; padding: 10px;}

#botColOne, #botColTwo, #botColThree {margin-top: 10px; min-height: 300px;}

#botColOne #sponsors {border-right: #999 1px solid; height: 300px;}
#botColOne #sponsors h1 {color: #999; font-size: 12px; text-align: center; text-transform: uppercase;}

#botColTwo #coolStuff h1 {margin-bottom: 15px;}
#botColTwo #coolStuff #coolStuffSectionA, #botColTwo #coolStuff #coolStuffSectionB {min-height: 261px;}
#botColTwo #coolStuff #coolStuffSectionA {width: 220px;}
#botColTwo #coolStuff #coolStuffSectionB {border-left: #999 2px dotted; padding: 0 5px 0 10px; width: 212px;}

#botColThree #storyOfTheWeek {border-left: #999 1px solid; height: 300px; padding: 0 10px;}
#botColThree #storyOfTheWeek h1 {margin-bottom: 15px;}

#leftRail {background: #eee; border-bottom: #ccc 1px solid; border-right: #ccc 1px solid; font-size: 14px; margin-left: -1px;}
#leftRail ul, #leftRail h2 {padding: 2px 10px;}
#leftRail h2, #leftRail h2 a {color: green; font-family: Georgia, Times, serif; font-style: italic;}
#leftRail a {color: #222;}
#leftRail a:hover {text-decoration: underline;}

.searchHelper {font-size: 12px;}
#searchResults li {margin: 4px 0;}
#searchResults li a {color: blue;}
#searchResults li a:hover {text-decoration: underline;}

.tickercontainer { /* the outer div with the black border */
background: #9BC4E2; 
width: 960px; 
height: 27px; 
margin: 3px 0; 
padding: 0;
overflow: hidden; 
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 10px;
top: 8px;
width: 940px;
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 750px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #ff0000;
font: bold 10px Verdana;
margin: 0 0px 0 0;
} 
ul.newsticker span {
margin: 0 50px 0 0;
}