/* CSS Document 
Site: RRTC Self-determination web site
URL: www.going-to-college.org
Updated: 2/16/2009
*/

@import url("reset.css");
@import url("overview.css");
@import url("module1.css");
@import url("module2.css");
@import url("module3.css");
@import url("portfolio.css");
@import url("results.css");

/* BODY
--------------------------------------------------------------------------------------*/
html {font-size:100%;}
body {background: #5a6282;text-align:center;font:63.125% Arial, sans-serif;color:#121212;}
		
/* Links
-------------------------------------------------------------------------------------*/
a:link, a:visited, a:active {color: #5a6282;}
a:hover {color: #000;}
a:active, a:focus {color: #000;}	
	
/* Layout
-------------------------------------------------------------------------------------*/

#wrapper {margin:0 auto;text-align:left;background:transparent;width:936px;background: #fff;}
#header {float: left;position: relative;width: 936px;height: 195px;margin: 0;padding: 0;}
#navigation {float: left;position: relative;width: 936px;height: 51px;}

#logo h1 {display: inline;margin: 0;padding: 0;float: left;}
#logo h1 a,
#logo h1 a:visited,
#logo h1 a:hover,
#logo h1 a:active {width: 257px; height: 111px; display: block; text-indent: -9999px;}
#logo h2 {display: inline;margin: 0;padding: 0;float: right;}
#logo h2 a,
#logo h2 a:visited,
#logo h2 a:hover,
#logo h2 a:active {display: block; text-indent: -9999px;}
#logo a, #logo a:hover {background: none; border: none;}
#logo img {border: none;}

#container {float: left;width:936px;margin:0;padding: 0;background: #fff url(../images/layout/container-bg.gif) repeat-y top;}
	body.activities #container,
	body.overview #container,
	body.intro #container {background: #fff url(../images/layout/container-act-bg.gif) repeat-y top;}
#sidebar-left {float: left;width: 196px;background: url(../images/layout/subnav_top_bg.gif) no-repeat top left;}
#content {float: left;margin:0;padding: 0;width: 536px;}
	body.activities #content,
	body.overview #content,
	body.intro #content {width: 675px;}
#content .gutter {padding: 0 20px;}
#sidebar-right {float: left;width: 204px;margin: 0;padding: 0;}

/* turn off right sidebar on Activities and Overview pages */
body.activities #sidebar-right,
body.overview #sidebar-right,
body.portfolio #sidebar-right,
body.intro #sidebar-right {display: none;}

/* Page title
-------------------------------------------------------------------------------------*/
#content h2.title {font-size:2.2em;font-family: "trebuchet ms", arial, sans-serif;font-weight: bold;text-align: left;padding: 0;margin: 0 0 .75em 0; line-height:normal;}

/* graphic headers for top ten tips, reaching my goals, teacher's toolbox */
body.topten #content h2.title {text-indent: -9999px; background: url(../images/layout/top10_title.gif) no-repeat; margin: 0; width: 216px; height: 54px;}
body.teacher #content h2.title {text-indent: -9999px; background: url(../images/layout/toolbox_header.gif) no-repeat; margin: 0; width: 262px; height: 54px; margin-bottom: 20px;}
body.reaching #content h2.title {text-indent: -9999px; background: url(../images/layout/reaching.gif) no-repeat; margin: 0; width: 220px; height: 78px; margin-bottom: 20px;}
	
/* CONTENT typography
-------------------------------------------------------------------------------------*/
#content p {font-size:1.3em;margin-top:0;margin-bottom: 1em;line-height: 1.4em;}
#content ul,
#content ol {margin:1.5em 0 1.5em 1.5em; font-size: 1.0em;}
#content ul li {background: url(../images/layout/li-bullet.gif) .6em .1em no-repeat;margin: 0 0 5px 0;padding-left: 30px;font-size: 1.3em;line-height: 1.4em;}
#content ol li {margin: 0 0 1em 30px; font-size: 1.3em; background: none;list-style: decimal; line-height: 1.4em; padding-left: 0;}

#content li ul,
#content li ol {font-size: 1.0em; margin: .5em 0 .5em .5em;}
#content li ul li {background: url(../images/layout/li-bullet2.gif) left 0 no-repeat;padding-left:20px;list-style: none;}
#content li li {font-size: 1em; list-style: lower-alpha;}
#content li li li {font-size: 1em; list-style: lower-roman;}

#content li p {font-size: 1em;}
#content li th {font-size: .9em;}

#content blockquote {margin: 20px; background: #f1f1f1; padding: 1.25em 1em .5em 1.25em;}

/* ordered lists with number graphics */
#content ol.graphics {margin: 1.5em 0 1.5em 1em;}
#content ol.graphics li {list-style: none; margin: 0 0 1.25em 0; padding-left: 30px;}
#content ol.graphics li.one {background: url(../images/layout/bullet-1.gif) left .1em no-repeat;}
#content ol.graphics li.two {background: url(../images/layout/bullet-2.gif) left .1em no-repeat;}
#content ol.graphics li.three {background: url(../images/layout/bullet-3.gif) left .1em no-repeat;}
#content ol.graphics li.four {background: url(../images/layout/bullet-4.gif) left .1em no-repeat;}
#content ol.graphics li.five {background: url(../images/layout/bullet-5.gif) left .1em no-repeat;}
#content ol.graphics li.six {background: url(../images/layout/bullet-6.gif) left .1em no-repeat;}
#content ol.graphics li.seven {background: url(../images/layout/bullet-7.gif) left .1em no-repeat;}
#content ol.graphics li.eight {background: url(../images/layout/bullet-8.gif) left .1em no-repeat;}
#content ol.graphics li.nine {background: url(../images/layout/bullet-9.gif) left .1em no-repeat;}
#content ol.graphics li.ten{background: url(../images/layout/bullet-10.gif) left .1em no-repeat;}

/* Headers */
#content h1, h2, h3, h4, h5, ul, ol, dl {margin-bottom:1em;}

/* Default header for page content */
h1 {font-size:2em;}
#content h3 {font-weight: bold; font-size: 1.6em;line-height:1.5em;margin:1.5em 0 .5em 0;}
#content h3.first {margin-top: 0;}
#content h4 {font-weight: bold; font-size: 1.3em;line-height:1.5em;margin:1em 0 .5em 0;}
#content h5 {font-weight:bold; font-size:1.2em;margin-bottom:1em;padding-bottom:0;color:#121212;}

/* Back to top link */
.toplink {padding-left:14px;background: url(../images/layout/icon-toplink.gif) top left no-repeat;}
.toplink:hover {padding-left:14px;background: #cdcdcd url(../images/layout/icon-toplink.gif) top left no-repeat;}

/* Miscellaneous */
.right {text-align: right;}
.clear {clear: both;}
em {font-style: italic;}
.center {text-align: center;}

/* Pullbox, highlight box */
.pullbox {margin: 30px 0 20px 0;}
#content .pullbox h3 {margin-top: 15px;}
.highlight {margin: 0 auto 20px auto; border: 1px solid #d1d1d2; background: #e6e6e7; width: 360px; padding: 20px 20px 10px 20px;}

/* Back to top link */
#content p.toplink, #content p.toplink:hover {padding-left:14px;background: url(../images/layout/icon-toplink.gif) top left no-repeat; font-size: 1.1em;}

/* Transcript link */
#content p.duration {float: left; height: 20px; font-size: 1.1em; line-height: normal; margin: 0; padding: 2px 0 0 0; color: #666;}
#content p.transcript-link,
#content .TabbedPanelsContent p.transcript-link {/*float: right;*/ text-align: right; height: 20px; font-size: 1.1em; line-height: normal; margin: 0; padding: 0;}

/* Questions */
#content ol.question li {margin-bottom: .5em;}

/* Two-column lists */
.row1, .row2 {float:left; width: 45%;}
	
/* Navigation -- Main and secondary
-------------------------------------------------------------------------------------*/
ul#main-nav {list-style:none;margin:14px 20px 0 0;padding:0;float: right;width: 486px; height: 22px; overflow: hidden;}
ul#main-nav li {float:left;margin:0;padding:0;display:inline;}
ul#main-nav li a {border:0;text-decoration:none;text-indent:-9999px;display:block;margin:0;padding:0;background: url(../images/layout/mainnav-bg.gif) no-repeat; height: 22px;}			
ul#main-nav li a:focus,
ul#main-nav li a:active {border:0; outline: none;}

/* set width of main nav links */
ul#main-nav li.nav-overview a {width: 75px;}
ul#main-nav li.nav-module1 a {width: 72px;}
ul#main-nav li.nav-module2 a {width: 96px;}
ul#main-nav li.nav-module3 a {width: 151px;}
ul#main-nav li.nav-portfolio a {width: 92px;}
			
/* Sidebar Left (includes sub-navigation)
-------------------------------------------------------------------------------------*/
#sidebar-left ul {list-style-type:none;display:block;margin: 12px 0 20px 0;padding:0 0 10px 0;background: #b1b1b1 url(../images/layout/subnav_bottom_bg.gif) no-repeat bottom left;}
#sidebar-left li {list-style:none;margin:0 0 0 7px;padding:0;}
#sidebar-left li a {display:block; line-height: normal; text-decoration:none; padding: 4px 0 0 12px;margin: 0;font-size: 13px;font-weight: bold;color: #000;width: 179px;height: 25px;}
#sidebar-left ul li a:link, 
#sidebar-left ul li a:visited {display:block;color: #160000;text-decoration: none;}	
#sidebar-left ul li a:hover {background: url(../images/layout/subnav_hover2.gif) no-repeat;color: #fff;}

#topten {margin-top: 40px; margin-left: 20px;}
#topten a, #topten a:visited {background: url(../images/layout/top_ten2.gif) 0 0 no-repeat;width: 158px;height: 72px; display: block; text-indent: -9999px;}
#topten a:hover, #topten a:active {background: url(../images/layout/top_ten2.gif) 0 -72px no-repeat;}	
#goals {margin: 10px 0 10px 20px;}
#goals a, #goals a:visited {background: url(../images/layout/goals2.gif) no-repeat;width: 158px;height: 72px; display: block; text-indent: -9999px;}
#goals a:hover, #goals a:active {background: url(../images/layout/goals2.gif) 0 -72px no-repeat;}
#tools {margin: 10px 0 20px 30px;}
#tools a, #tools a:visited {background: url(../images/layout/toolbox.gif) no-repeat;width: 144px;height: 97px; display: block; text-indent: -9999px;}
#tools a:hover, #tools a:active {background: url(../images/layout/toolbox.gif) 0 0 no-repeat;}

/*turn off top ten tips, reaching goals and teacher's toolbox in overview section */
body.overview #topten,
body.overview #goals,
body.overview #tools {display: none;}
	
/* Sidebar Right
-------------------------------------------------------------------------------------*/
#activities-block {/*margin-top: 8px;*/}
#activities-block p {color: #333;font-size: 1.2em;margin-top:0;margin-bottom: .75em;line-height: 1.4em;padding: 0 15px 0 0;}
#activities-block h3 {width: 190px; height: 40px; text-indent: -9999px;}
#esources-block ul {color: #333;margin: 0;padding: 0 15px 0 0;}
#esources-block li {list-style: none;margin: 0 0 .75em 0;padding: 0;font-size: 1.2em;line-height: 1.4em;}
#esources-block h3 {width: 190px; height: 48px; text-indent: -9999px;}

/* Search field
-------------------------------------------------------------------------------------*/
#toolbar {width: 210px;height: 51px;margin-left: 205px;float: left;}
#search,
#cse-search-box {margin: 0;padding: 15px 0 0 2px;}
form#search input.field,
form#cse-search-box input.field {float:left;margin: 0 3px 0 0;padding: 0;width: 175px;voice-family: "\"}\"";voice-family:inherit;font: bold 1.2em Arial, sans-serif;background:#f2f2f2;border:1px solid #000;height: 15px;color: #565656;}
	html>body form#search input.field,
	html>body form#cse-search-box input.field {width: 175px;}
#search_btn {margin:0;padding:0;width:17px;height:17px;border:0;}
#search label,
form#cse-search-box label {display: none;}

/* Footer 
-------------------------------------------------------------------------------------*/
#footer {clear:both;width: 936px;margin:0 auto;padding:0;background: #d1d1d2 url(../images/layout/footer_bg.gif) no-repeat top;}
#footer .gutter {padding: 60px 20px 20px 20px;text-align: left;}
#footer p {margin: 0 0 1em; font-size: 1.1em;}
#footer p a {color: #5a6282;}
#footer ul {position:relative;display:block;list-style:none;clear:both;margin:0;padding: 20px 0 0 0;}
#footer .gutter li {font-size:1.1em;margin:0;padding:0;color: #333;}
/* set footer hover state */
#footer .gutter li a, 
#footer .gutter li a:link, 
#footer .gutter li a:visited,
#footer .gutter li a:active {border:0;font-weight:normal;margin:0;padding:0; color: #5a6282;}
#footer #cs-link {margin: 0; padding: 0 20px 0 0;position:absolute; top:20px;right:5px;}
	
/* Tables
-------------------------------------------------------------------------------------*/
table {border: 1px solid #c7b6d5; margin: 0 auto 15px auto;}
th {font-weight: bold;font-size: 1.2em;border-right: 1px solid #fff;border-bottom: 1px solid #4c365f;border-top: 1px solid #fff;letter-spacing: 0.1em;text-transform: uppercase;text-align: left;padding: 10px 6px 10px 12px;background: #d1d1d2; color: #4c365f;}
td {border-right: 1px solid #c7c7c7;border-bottom: 1px solid #c7c7c7;padding: 6px 6px 6px 12px;font-size: 1.2em; line-height:1.4em;}
#content td li {font-size: 1.0em;}
#content td ul {margin-left: 0;}
/* alternate bg color on table rows */
tr {background: #fff;}
tr.alt {background: #ededed;}

/* my place - teacher's toolbox */
table#myplace-tools {width:80%; margin-top: 5px;}
table#myplace-tools th {padding: 5px 3px 5px 6px; text-align:center;}

/* reaching my goals Q&A */
body.reaching table {border: none;}
body.reaching th {background: none; border: none; padding: 4px 4px 0 4px; margin: 0 0 0 10px;font-family: georgia, "times new roman", times, serif; font-weight: bold; font-size: 2.2em; text-indent: -9999px; display: block; width: 34px; height: 34px; vertical-align: top;}
body.reaching th.q {color: #f57f11; background: url(../images/layout/q.gif) 0 .4em no-repeat;}
body.reaching th.a {color: #52902D; background: url(../images/layout/a.gif) 0 top no-repeat;}
body.reaching th.star {color: #f57f11; background: url(../images/layout/star.gif) 8px .5em no-repeat;}
body.reaching tr {border-bottom: 1px solid #c8c8c8;}
body.reaching td {border: none; padding: 0 4px 10px 0;}
body.reaching td.q {padding-bottom: 0;}
body.reaching tr.no-border {border: none;}
body.reaching td.line {background: #c8c8c8; padding: 0; margin: 0; height: 1px;}

/* Notes
-------------------------------------------------------------------------------------*/
.note_to_client, .note_to_client a {color: #FF0000;}
.note_to_designer,
.note_to_designer a {color: #0033FF;}
p.note_to_editor, 
#activities-block p.note_to_editor, 
#activities-block p.note_to_editor a {color:#009933;}


/* Jump to content - for screen readers
-------------------------------------------------------------------------------------*/
#jumptocontent {position: absolute;top: -1000px;}

/* Photos
-------------------------------------------------------------------------------------*/
#content .imgright {float:right;margin:0 0 1em 1.5em; background:#fff;}
  
/* Video
-------------------------------------------------------------------------------------*/
#video-box {margin: 20px auto 5px auto; padding: 20px 40px 10px 40px; background: #e6e6e7; border: 1px solid #d2d2d3; width: 320px;}
#video, #video2, #video3 {display: block; width: 320px; font-size: 1.2em; line-height: 1.6em;}
#TabbedPanels1 #video,
#TabbedPanels1 #video2,
#TabbedPanels1 #video3 {background: none; border: none; padding: 0;}

/* Clearfix
-------------------------------------------------------------------------------------*/
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

/* Activities -- form
-------------------------------------------------------------------------------------*/
body.activities form {margin: 0 0 1em 0;}
#content form input.print-button {border: 1px solid #ddd; font-size: 80%; font-family: arial, sans-serif;background: #fff; padding: 2px; cursor: pointer; color: #666;}
#content form textarea#story,
#content form textarea#story2 {overflow: auto; margin-bottom: 10px;}
#content form.blockquote p {line-height: 1.6em;}
#content form.blockquote label {display: none;}

/* Accordion effect (show/hide content)
-------------------------------------------------------------------------------------*/
#content .toggler {cursor:pointer; font-weight:bold; margin: 0; text-decoration: underline; /*background: url(../images/layout/right.gif) 0 15px no-repeat;*/ padding: 0; color: #fe8c01; font-size: 80%;}
#content .toggler:hover {/*background: url(../images/layout/right.gif) 0 15px no-repeat;*/ color: #fe8c01;}
#content .element {margin: .5em 40px 10px 10px;padding: 10px;clear: both; color: #bb2424;}
#content .element ul {padding: 0 0 5px 0; margin-top: 10px;}
#content .element ul li {font-size: 1.1em;}
#content .openArrow,
#content .openArrow:hover {margin: 0; color: #fe8c01;/*padding-left: 18px; background: url(../images/layout/down.gif) 0 18px no-repeat;*/}
#content .closeArrow {margin: 0; /*padding-left: 18px; /*background: url(../images/layout/right.gif) 0 15px no-repeat;*/}
#content #accordion h4 {font-size: 1.1em; letter-spacing: normal; text-transform: none; background: none; padding: 0;}
#content #accordion p {margin: 10px 0; font-size: 1.1em;}