/**
 * bruinlight.css
 * The New Bell High School Stylesheet, Lighter
 *
 * Version: 1.3
 * Written By: Richard Ye
 *
 * Colors used:
 *  #DDDDDD - Grey - Page Background
 *  #999999 - Grey - Borders
 *  #E00000 - Bright Red - Header
 *  #4894FF - Light Blue - Link Color
 *
 * Works with:
 * 	Mozilla Firefox 2.0, 3.0, 3.5
 * 	Internet Explorer 6.0, 7.0, 8.0
 * 	Safari 1.3, 2.0, 3.0+
 * 	Opera 9+
 *  Google Chrome 2.0+
 */

body { background-color: #ddd; color: #000; font-family: "Lucida Sans", "Bitstream Vera Sans", "Tahoma", sans-serif; min-width: 760px; padding: 0; margin:0;}
img { border: 0; padding: 0;}
p { margin: 15px 0;}

/* The Div Layout (in order of appearance)
 -----------------------------------------*/

#botg_banner { display: block !important; position: absolute; top: 0px; right: 0px; width: 150px; height: 150px; padding: 0; margin: 0; z-index: 10000;}
#wrapper { min-width: 760px; position: absolute; top: 0px; left: 0px; width: 100%; min-height: 100%;}
#headerwrapper { max-width: 1060px; margin: 0 auto; background: url("images/header_bg_left.png") repeat-y #E00000;}
#headerwrapper2 { background: url("images/header_bg_right.png") right repeat-y transparent;}
#headertop { max-width: 1060px; height: 6em; background: url("images/headertop_bg_left.png") no-repeat top left;}
#headertop2 { background: url("images/headertop_bg_right.png") top right no-repeat transparent; float: right; height: 26px; width: 50px;}
#headerbg { height: 6em; color: #FFF; margin: 0 20px; background-color:transparent; background-image: url(images/bg_logo.png); background-repeat: no-repeat; background-position: right 5px;}
#title { max-width: 800px; margin: 0 auto; padding: 10px 0 0 10px;}
#subtitle { max-width: 500px; margin: 0 auto; position: relative; bottom: 0.5em; left: 50px; height: auto; padding-left: 10%; text-align: left; font-family: "Lucida Sans", "Bitstream Vera Sans", "Tahoma", sans-serif;}
#subtitle div { position: absolute;}

#navbg { background: url("images/navbar_bg_left.png") #8a0000 repeat-y left; height: 1.7em; padding-left: 26px;}
#navwrapper { background: url("images/navbar_bg_right.png") transparent repeat-y right; height: 1.7em;}
#cshadow { clear: both; max-width: 1060px; margin: 0 auto; overflow: auto; background: url("images/bg_left.png") #FFF repeat-y left;}
#contentwrapper { padding: 20px 40px; background: url("images/bg_right.png") transparent repeat-y right; overflow: hidden; font-size: 11pt;}

.fullbanner { padding: 0 19px 10px 19px; background: url("images/bg_right.png") transparent repeat-y right; overflow: auto;}
#main { margin-right: 300px; background: #FFF;}
#side { clear: both; float: right; margin: 20px 0 0 0; width: 280px;}
#footerwrapper { clear: both; max-width: 1060px; margin:0 auto; background: url("images/footer_bg_left.png") #FFF repeat-y left; background-repeat:repeat-y; background-color: #eee;}
#footerbg { max-width: 1060px; margin: 0 auto; text-align: center; padding: 0 20px; background: #eee; background: url("images/footer_bg_right.png") transparent repeat-y right;}
#footer { border-top: 1px dotted #ACACAC; font-size: 14px; padding: 20px 0 0 5px;}
#footerbottom { height: 40px; background: url("images/footerbot_bg_left.png") #FFF repeat-y left;}
#footerbottom2 { height: 40px; background: url("images/footerbot_bg_right.png") transparent repeat-y right;}

/* Menus
 -----------------------------------------*/

#navbar { padding: 0; margin: 0 auto; height: 20px; list-style-type: none; list-style-position: outside; list-style-image: none; padding-bottom: 2px;}
li.navlink { float: left; height: 20px; max-width: 200px; margin-left: 10px; padding: 3px;}
li.navlink a { color: #FFF !important; text-decoration: none !important;}
li.navlink a:hover { text-decoration: underline !important;}
/* all lists */
#nav, #nav ul { padding: 0; margin: 0; list-style: none; line-height: 1.2; /*Always on top;*/ z-index: 5 !important;}
#nav li ul { padding: 3px; position: absolute; top: 7.35em; left: -999em; 	/* using left instead of display to hide menus because display: none  				isn't read by screen readers */ z-index: 5 !important; background: #666; padding: 5px; border-color: #999; border-style: solid; border-left-width: 15px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px;}
#nav li.level2 { min-width: 145px; float: none; display: block;}
#nav a { display: block;}
#nav li { float: left; z-index: 5 !important;}	/* all list items */
#nav ul.menuabout { width: 100px; z-index: 5 !important;}
#nav li:hover ul, #nav li.sfhover ul { left: auto;} /* lists nested under hovered list items */

/* Footer Links */
#footerlinks ul, #footerlinks li{ margin: 0;  padding: 0; display: inline;}
#footerlinks li { border-left: solid black 1px; padding: 0 .5em 0 .5em;}
#footerlinks li.leftmost { border: none; padding-left: 0;}

/* Font Styles
 -----------------------------------------*/

h1 { font-size: 26px; font-weight: normal; border-bottom: 1px solid #999;}
h2, h3, h4, h5, h6 { font-family: "Tahoma", "Bitstream Vera Sans", "Arial", sans-serif; margin: 40px 0 5px 0;}
h2 { font-size: 23px; font-weight: normal; margin-top: 40px;}
h3 { font-size: 18px; font-weight: bold; }
h4 { font-size: 14px; font-weight: bold; font-style: italic;}
h5 { font-size: 12px; font-weight: bold;}
h6 { font-size: 10px; font-weight: bolder;}

.postentry h1 { font-family: "Tahoma", sans-serif !important; font-size: 23px !important; border-bottom: 0 !important;}
.postentry h2 { font-size: 20px !important; font-weight: normal !important;}
.postentry h3 { font-size: 17px !important; font-weight: 400 !important;}
.postentry h4 { font-size: 14px !important; font-weight: bold !important;}
.postentry h5 { font-size: 12px !important; font-weight: bolder !important;}
.postentry h6 { font-size: 12px !important;}

/* Body Text Styles */
p {	line-height: 1.4;}
blockquote { background: #F6F6F6; border-left: 4px solid #CCC; padding: 15px;}

/* Links */
a { color: #0094FF; text-decoration: none;}
a:visited { color: #357BAD;}
a.link2, a.link2:active { color: #FF6A00;}
a.link2:visited { color: #CE5200;}
a.link3, a.link3:active { color: #FF0000;}
a.link3:visited { color: #CC0000;}
a:hover { text-decoration: underline;}
a:hover img { text-decoration: none;}
a:active { color: #005d9e; text-decoration: none;}

a.link4:link, a.link4:visited, a.link4:hover, a.link4:active {color:inherit; text-decoration:none;}

#title h1 { font-size: 50px; font-family: "Gill Sans MT", "Lucida Sans", "Bitstream Vera Sans", "Tahoma", sans-serif; margin: 0; padding: 0; font-weight: normal; text-decoration: none; color: #FFF; border: 0;}
#title a, #subtitle a { color: #FFF;}
#title a:hover { text-decoration: none;}

/* Form and Table Styles
 -----------------------------------------*/

input, textarea, select { background: #FFF; color: #000; border: 1px solid #999; margin: 3px 0 3px 0;}
input.submit { background: #DDD; color: #000;}
label { display: block;}
label.nobreak {display: inline;}
fieldset {  border: 0; border-top: 1px solid #999;  padding: 15px; background: #F4F4F4; margin: 5px 0;}
fieldset.i { background: #CCDDFF; border-top: 1px solid #99F; text-align: right;}
#adminform label { float: left; width: 120px;}
legend { color: #00D}

table { background: #F6F6F6; border: 1px solid #E4E4E4; border-collapse: collapse; margin: 5px 0;}
th { background: #E4E4E4; padding: 3px; border: 1px solid #E4E4E4; text-align: left;}
td { border: 1px solid #D0D0D0; padding: 3px;}
table#hw_results td, table#hw_results tr { border: 0;}

/* Element Classes
 -----------------------------------------*/

.sidebox { background: #F2F2F2; border: 1px solid #A4A4A4; font-size: 14px; padding: 4px; margin-bottom: 15px;}
.sidebox h2 { padding: 0; margin: 0 0 5px 0; font-size: 18px;}
.sidebox ul { list-style: none; padding: 0 0 0 15px;}

.sidemod { margin-bottom: 15px; font-size: 10pt; line-height: 130%;}
.sidemod h1 { font-size: 15pt; margin: 0 0 5px 0; padding-bottom: 2px;}
.sidemod_content { margin: 5px 0;}
.sidemod_footer { border-top: 1px dashed #999; text-align: right;}

/* Message Boxes */
.successful, .sucessful { background: url('/images/icons/accept.png') 5px 5px no-repeat #BDFFC2; border-top: 1px solid #6DB457; border-bottom: 1px solid #6DB457; padding: 5px 3px 5px 25px; width: 90%; margin: 5px auto 10px auto; color: #060;}
.message { background: url('/images/icons/information.png') 5px 5px no-repeat; background-color: #E2F6FF; border-top: 1px solid #648EBD; border-bottom: 1px solid #648EBD; padding: 5px 3px 5px 25px; width: 90%; margin: 3px auto; color: #006;}
.errorbox { background: url('/images/icons/exclamation.png') 5px 5px no-repeat #FDD; border-top: 1px solid #E86857; border-bottom: 1px solid #E86857; padding: 5px 3px 5px 25px; width: 90%; margin: 5px auto 10px auto; color: #900;}

.uppertab { background-color: #fff; border: 1px solid #999; border-bottom: 0; margin-left: -1px;}
.popup { list-style: none;  margin: 0px;  padding: 0px; display: none; position: absolute; background-color: #eee; padding: 3px; border: 1px solid #999;}

/* Google Translate Widget */
#google_translate_element img { display: none !important;}
#google_translate_element { display: inline;}
#google_translate_element select { display: inline;}
#google_translate_element div { display: inline;}

/* Tabs */
.tab_top { list-style-type: none; padding: 0; border-bottom: 1px solid #D6D6D6; margin: 0; background: #FFF; margin-top: 15px;}
.tab_item {  display: inline; margin-left: 6px; border: 1px solid #D6D6D6; padding: 3px; position: relative; bottom: 3px; background: url('/images/shadow_up_small_light.png') bottom repeat-x #E9E9E9; cursor: pointer; font-size: 70%;}
.tab_selected, .tab_item:hover { background: #F4F4F4; display: inline; margin-left: 6px; border: 1px solid #D6D6D6; border-bottom: 1px solid #F4F4F4; padding: 3px; position: relative; bottom: 3px; cursor: pointer; font-size: 70%;}
.tab_box { padding: 15px; background: #F4F4F4;}

/* Homepage */
#index #side { width: 280px; clear: both; float: right; margin: 0;}
#index #main { margin-right: 300px;}

#newspanelwrapper { padding: 0 19px; max-width: 1060px; margin: 0 auto; text-align: left; overflow:hidden;/*background-image:url('../../images/bellhs380.jpg'); background-repeat:no-repeat; background-attachment:scroll; background-position:bottom left;*/ background: url("images/footer_bg_right.png") top right repeat-y transparent;}
#newspanelwrapper h1 { font-size: 20px; margin: 0;}
#newspanelwrapper h3 { font-size: 17px; margin: 0; font-weight: normal;}
#newspanel { padding: 10px 15px 5px; background-color: #eee; border-bottom: 1px solid #999; background-image: url('/images/bellhs380.jpg'); background-position:bottom left; background-repeat:no-repeat;}
#newsdesk { padding-left:380px;}
.newspanel_content { height: 171px; overflow: auto; margin-top: 5px;}
#newsdesk_footer { border-top: 1px dashed #999; padding: 3px; height: 1em;}
#newsdesk_link { float: right; clear:none; width: 55%; text-align: right;}
#newsdesk_selector { float: left; width: 40%; height: 1em;}

#homepage_welcome_banner { width: 100%; background: url('/images/homepage_banner.jpg') no-repeat #8A8A8A; height: 200px; position: relative;}
#homepage_welcome_banner_text { margin-left: 286px; position: absolute; bottom: 0px; right: 20px; text-align: right; color: #FFF;}
#homepage_welcome_banner_text p { margin: 0; padding: 0; text-shadow: black 0.1em 0.1em 0.05em, black 0.1em 0.1em 0.05em;}
#homepage_welcome_banner_text a, #homepage_welcome_banner_text a:visited { font-weight: bold; color: #FFF !important;}

.homepage_event { line-height: 75%; margin-bottom: 8px;}
.homepage_event a {position: relative; z-index: 40;}
.homepage_events_date { font-size: 7pt; color: #777;}
.homepage_event_content { display: none; line-height: normal; font-size: 9pt;}
.homepage_event_active { margin: 0px 0px 6px 0px; padding-bottom: 4px; background: #FFF;}
.homepage_sidebanner { padding: 4px; opacity: 0.8; margin-bottom: 10px; background: #E4E4E4; border: 1px solid #999;}
.homepage_sidebanner:hover { opacity: inherit;}
.homepage_bloglink { font-size: 11pt; border-bottom: 0;}
.homepage_blogtitle { font-size: 20px; border-bottom: 1px solid #CCC; margin: 0 0 10px 0; font-weight: bold;}

/* Prinicpal's Blog */
#blog h1 { font-size: 20px; margin: 0;}
#blog { margin-bottom: 10px; font-size: 80%;}
#blog_content { height:auto;}
.blog_post { margin-bottom:1em; line-height: 140%;}
.blog_date { float: right; padding: 2px; border: 1px solid #A4A4A4; background: #F2F2F2; width: 6em; font-size: 8pt; color: #333; margin: 0 0 5px 5px; text-align: center;}
.blog_date_number { font-size: 18pt;}
#blog_footer { border-top: 1px dashed #999; padding: 3px; text-align: right; clear: both;}
#events_footer { text-align:right;}

.postmeta { padding: 3px 0; margin-bottom: 10px; color: #777; border-bottom: 1px solid #CCC; border-top: 1px solid #CCC; margin-top: 0; font-size: 8pt;}
.postmeta a { color: #5AAAE2;}
.postlisttitle { border-bottom: 0; margin-bottom: 2px; font-size: 15pt; font-weight: bold;}
.posttitle a, .postlisttitle a { color: #000;}
.posttitle { border-bottom: 0; margin-bottom: 2px; font-size: 20pt; font-weight: bold;}
.post { margin-bottom: 40px;}
h2.subcat { margin-top: 0;}

/* pagination */
.pagination { text-align: right; margin-top: 5px; height: 30px;}
.pageselector { margin: 2px; border: 1px solid #BBB; display: inline; padding: 5px; height: 20px; text-align: center;
	text-decoration: none; color: #999; font-weight: bold;}
.pageselector:visited { color: #999;}
.pageselector.active, .pageselector:hover {color: #000; text-decoration: none;}
a.pageselector:active { color: #005d9e;}

/* contact form */
.contactDestListItem { margin: 4px 0; padding: 10px; display: block; border: 1px solid #CCC; background: #E9E9E9; font-size: 80%;}
.contactDestListItem:hover { border: 1px solid #648EBD; background: #E2F6FF; cursor: pointer;}
#contact_notices { font-size: 80%;}

/* Images */
div.imagebox { padding: 5px; width: 250px; font-size: 9pt; border: 1px solid #E6E6E6; background: #F6F6F6;}
div.imagebox.floatright { margin: 2px 0px 5px 5px;}
div.imagebox.floatleft { margin: 2px 5px 5px 0px;}
div.imagebox img { display: block; width: 100%; margin-bottom: 3px;}

/* General */
.info {	font-size: 7pt;}
.spacer { background: transparent; height: 3px;}
.floatright { float: right;}
.error { color: #FF0000; font-weight: bold;}
.rightlink { float: right; position: relative; bottom: 1em;}
#searchquery { width: 150px;}
#chgappselect { width: 150px;}