body {margin:0; padding:0; background-color:#ffffff; 
background: #ffffff url('images/bg_top.gif') repeat-x top left;
font-family:verdana,tahoma,arial,helvetica; font-size:11px; color:#666666;
SCROLLBAR-FACE-COLOR: #CCCCCC; SCROLLBAR-HIGHLIGHT-COLOR: #F6F6F6; SCROLLBAR-SHADOW-COLOR: #CCCCCC; 
SCROLLBAR-3DLIGHT-COLOR: #F1F1F1; SCROLLBAR-ARROW-COLOR: #999999; SCROLLBAR-TRACK-COLOR: #F1F1F1; 
SCROLLBAR-DARKSHADOW-COLOR: #EEEEEE; }

td {vertical-align:top; text-align:left; font-family:verdana,tahoma,arial,helvetica; font-size:11px; color:#666666}
a:link{text-decoration: none; color: #3A7AC2}
a:visited{text-decoration: none; color: #3A7AC2}
a:hover{text-decoration: underline; color: #3A7AC2}
a:active{text-decoration: none; color: #3A7AC2}
h1 {font-family:verdana,tahoma,arial,helvetica; font-size:18px; margin:10px; margin-left:0px}
h2 {font-family:verdana,tahoma,arial,helvetica; font-size:14px; margin:0}
h3 {font-family:verdana,tahoma,arial,helvetica; font-size:12px; margin:0}

#myPage {
background: url('images/bg_top_left.gif') no-repeat top left;
padding-left:10px
}
#header {width:800px; height:110px}
#header_top {height:50px; margin-left:-10px}
/*#header_mid {height:25px; text-align:right}*/
#header_mid {height:25px;}
#header_mid DIV {padding-top:5px}
#header_mid .left {float:left; padding-left:20px;}
#header_mid .right {float:right;}

#header_bottom {clear:both; height:25px; 
background: url('images/bg_mid.gif') no-repeat top left;
}
#header_bottom DIV {font-size:13px; padding-top:5px;}
#header_bottom DIV a:hover {color:#3b3970; text-decoration:none;}
#b_view_yearbook, #b_purchase {margin-top:2px;}
#float_right a {color:#fff;}
#float_right a:hover {color:#3b3970; text-decoration:none;}

#header_end {height:23px !important;}

#logo{clear:left; width:290px; height:50px; float:left}
#top_nav{clear:right; padding-top:9px; text-align:right;}
#top_nav_s{}
.b_s {margin-left:11px}
.b_b {margin-left:20px}
.b_bottom {margin-left:10px}
#float_right {float:right; clear:right;}
#top_nav_b{padding-top:13px}

/* small fancy box */
#sBox {width:180px; margin-bottom:5px;
background: url('images/bg_sbox_mid.gif') repeat-y top left;
}
#sBoxTop {
background: url('images/bg_sbox_top.gif') no-repeat top left; min-height:70px;
padding-bottom:5px;
}
#sBoxBottom {
background: url('images/bg_sbox_bottom.gif') no-repeat bottom left; min-height:70px;
}
#sBoxContent { padding:7px; padding-top:0px }
#sBoxContent p { margin-top:5px; margin-bottom:5px; height:40px }

/* common blue round box */
#roundBoxTL {width:5px; height:5px; background: url('images/rbox_tl.gif') no-repeat top left;}
#roundBoxTR {width:5px; height:5px; background: url('images/rbox_tr.gif') no-repeat top right;}
#roundBoxT {height:5px; background: url('images/rbox_t.gif') repeat-x top left;}
#roundBoxML {width:5px; background: url('images/rbox_ml.gif') repeat-y top left;}
#roundBoxMR {width:5px; background: url('images/rbox_mr.gif') repeat-y top right;}
#roundBoxB {height:5px; background: url('images/rbox_b.gif') repeat-x bottom left;}
#roundBoxBL {width:5px; height:5px; background: url('images/rbox_bl.gif') no-repeat bottom left;}
#roundBoxBR {width:5px; height:5px; background: url('images/rbox_br.gif') no-repeat bottom right;}
#roundBoxContent {margin:5px}
#roundBoxContentFrame {margin:5px 0 5px 0;}

/* common grey round box */
#roundBoxGreyTL {width:5px; height:5px; background: url('images/rboxg_tl.gif') no-repeat top left;}
#roundBoxGreyTR {width:5px; height:5px; background: url('images/rboxg_tr.gif') no-repeat top right;}
#roundBoxGreyT {height:5px; background: url('images/rboxg_t.gif') repeat-x top left;}
#roundBoxGreyML {width:5px; background: url('images/rboxg_ml.gif') repeat-y top left;}
#roundBoxGreyMR {width:5px; background: url('images/rboxg_mr.gif') repeat-y top right;}
#roundBoxGreyB {height:5px; background: url('images/rboxg_b.gif') repeat-x bottom left;}
#roundBoxGreyBL {width:5px; height:5px; background: url('images/rboxg_bl.gif') no-repeat bottom left;}
#roundBoxGreyBR {width:5px; height:5px; background: url('images/rboxg_br.gif') no-repeat bottom right;}

/* common dark grey round box */
#roundBoxDarkGreyTL {width:5px; height:5px; background: url('images/rboxgd_tl.gif') no-repeat top left;}
#roundBoxDarkGreyTR {width:5px; height:5px; background: url('images/rboxgd_tr.gif') no-repeat top right;}
#roundBoxDarkGreyT {height:5px; background: url('images/rboxgd_t.gif') repeat-x top left;}
#roundBoxDarkGreyML {width:5px; background: url('images/rboxgd_ml.gif') repeat-y top left;}
#roundBoxDarkGreyMR {width:5px; background: url('images/rboxgd_mr.gif') repeat-y top right;}
#roundBoxDarkGreyB {height:5px; background: url('images/rboxgd_b.gif') repeat-x bottom left;}
#roundBoxDarkGreyBL {width:5px; height:5px; background: url('images/rboxgd_bl.gif') no-repeat bottom left;}
#roundBoxDarkGreyBR {width:5px; height:5px; background: url('images/rboxgd_br.gif') no-repeat bottom right;}

/* blue button */
#blueButton { 
background: url('images/bg_br_blue.gif') no-repeat top left; 
height:30px; text-align:center; padding-top:6px; padding-right:10px
}
#blueButtonWide { 
background: url('images/bg_br_blue_wide.gif') no-repeat top left; 
height:30px; text-align:center; padding-top:6px; padding-right:10px
}
#blueButton a, #blueButtonWide a {font-family:tahoma; font-size:11px; font-weight:bold; text-decoration: none; color:#ffffff}
#blueButton a:hover, #blueButtonWide a:hover {text-decoration: underline}

#redButton { 
background: url('images/bg_br_red.gif') no-repeat top left; 
height:30px; text-align:center; padding-top:6px; padding-right:10px
}
#redButton a {font-family:tahoma; font-size:11px; font-weight:bold; text-decoration: none; color:#ffffff}
#redButton a:hover {text-decoration: underline}


#dotted, .dotted { background: url('images/bg_dot.gif') repeat-x top left; height:7px}
#dbldotted { background: url('images/bg_dbldot.gif') repeat-x top left; height:7px}

#footer {width:800px; text-align:center; clear:left; float:left}
#footer a{text-decoration: none;}
#footer a:hover{text-decoration: underline;}

.blue{color:#5A89BF}
.white {color:#ffffff}
.red, a.red, a.red:visited, a.red:hover {color:#A80808}
.green, a.green, a.green:visited, a.green:hover {color:#009933 !important;}
.lgreen, a.lgreen, a.lgreen:visited, a.lgreen:hover {color:#99FFCC}

/* pictures */
#portraitpix {width:320px; height:330px; text-align:center}
#thumb {width:80px; height:100px; text-align:center; float:left}
#pthumb {text-align:center; background-color:#999999; color:#ffffff}
#pthumb a {text-decoration: none; color:#ffffff}
#pthumb a:hover {text-decoration: underline; color:#ffffff}

a#look {width: 12px; height: 12px; opacity:1.00; filter:alpha(opacity=100); -moz-opacity: 1.0; -khtml-opacity: 1.0; }
a#look img {border: 0px none;}
a#look:hover { opacity:.80; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8;}

a#na {width: 12px; height: 12px; opacity:.50; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5;}
a#na img {border: 0px none;}
a#na :hover { opacity:.50; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5;}

#thumb img, #thumbz .photo-pix img {width:70px; height:93px; object-fit: cover;}
#slides .slides_container img {width: 320px; height: 320px; object-fit: contain;
}

/* forms */
FORM { DISPLAY: inline }

.myInput {BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BACKGROUND: white; BORDER-LEFT: 1px solid; COLOR: #232323; BORDER-BOTTOM: 1px solid;}
.myButton {font-family: Tahoma, Verdana, Arial, Helvetica; font-size: 12px; font-weight: bold;
BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BACKGROUND: #cccccc; BORDER-LEFT: 1px solid; COLOR: #232323; BORDER-BOTTOM: 1px solid;}

SELECT {
	BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; FONT: 11px verdana; COLOR: #666666; BACKGROUND-COLOR: #ffffff; BORDER-RIGHT-WIDTH: 1px
}
.mySelect {
	BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; FONT: 11px tahoma; COLOR: #666666; BACKGROUND-COLOR: #ffffff; BORDER-RIGHT-WIDTH: 1px
}
TEXTAREA {
	BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; FONT: 11px verdana; OVERFLOW: auto; COLOR: #666666; BACKGROUND-COLOR: #f6f6f6; BORDER-RIGHT-WIDTH: 1px; width:100%;
}
INPUT {
	BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px;; BORDER-BOTTOM-WIDTH: 1px; FONT: 11px verdana; COLOR: #666666; BACKGROUND-COLOR: #f6f6f6; BORDER-RIGHT-WIDTH: 1px
}
.textarea {
	BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; FONT: 11px verdana; OVERFLOW: auto; COLOR: #666666; BACKGROUND-COLOR: #f6f6f6; BORDER-RIGHT-WIDTH: 1px; width:100%;
}
INPUT.textbox {
	BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; FONT: 11px verdana; COLOR: #666666; BACKGROUND-COLOR: #f6f6f6; BORDER-RIGHT-WIDTH: 1px
}
INPUT.areatextbox {
	BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; FONT: 11px verdana; COLOR: #666666; BACKGROUND-COLOR: #f6f6f6; BORDER-RIGHT-WIDTH: 1px
}
INPUT.texterror {
	BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; FONT: 11px verdana; COLOR: #666666; BACKGROUND-COLOR: #d6d7d9; BORDER-RIGHT-WIDTH: 1px
}

/*project status*/
.statusBox {padding:5px; background-color:#DEEAF8; border:1px solid #cccccc;}
.statusBoxv {padding:5px; background-color:#EFEFEF; border:1px solid #cccccc;}

/* 11/14/2013 */
#mainContentBox {clear:both;}

/* preview & download link */
.dwn, a.dwn:hover {color:#A80808;}
.prv, a.prv:hover {color:#A80808;}

/* portrait nav */
.portrait-left {float:left; width:77px; text-align:right; margin:0; padding:0;}
.portrait-right {float:left; margin:0; padding:0;}
.clear {clear:both;}
.portrait-row {margin:0; padding:0;}
.floatl {float:left;}
.floatr {float:right;}

/* add forms */
.floaterTable {padding:0; margin:0; }
.floaterTable td {padding-bottom:5px;}
.req {color:#A80808; font-size:11px;}

/* cpadmin */
.pad_tb {padding: 5px 0 5px 0 !important;}

.fullw {width:100%;}

ul {margin-left:20px;}

.right {text-align:right;}
.center {text-align:center !important;}

.halfpad {margin-bottom:7px !important;}
.succ {margin:0 !important;}

/* blue button */
.sb {
    background-color: #3A7AC2;
    color: #eee;
    border: 1px solid #3A7AC2;
    padding: 2px;
    margin: 0;
    font-family: Tahoma, Verdana, Arial, Helvetica;
    font-weight: bold;
}

/* adpixs */
#adpix_bottom {
    z-index: 45;
    position: fixed;
    bottom: 0px;
    left: 46px;
    width: 100%;
    height: auto;
    background-color: rgba(255, 255, 255, 0.7);
    text-align: left;
    color: rgba(255, 255, 255, 0.7);    
    direction: ltr;
    transition: all 0.5s ease-in-out;	
}
#adpix_right {
    z-index: 46;
    position: fixed;
    top: 130px;
    left: 850px;
    width: auto;
    height: auto;
    text-align: left;
    direction: ltr;
    /*transition: all 0.5s ease-in-out;	*/
    display: flex;
}
#adpix_right span {
	display: inline-block !important;
}
#adpix_bottom img, #adpix_right img {
	/*box-shadow: rgba(0, 0, 0, 0.4) 0px -1px 5px 3px;*/
	vertical-align: top !important;
}
#adpix_bottom img {width: 728px !important; height:90px !important;}
#adpix_right #skycrapper img {width: 160px !important; height:600px !important; margin:0 23px 23px 0 !important;}
#adpix_right #medrect img {width: 300px !important; height:250px !important;}
#adpix_right #medrect #bspacer {height:30px !important;}

/* new portrait divTopLeft */
#divTopLeft {
    z-index: 50;
    position: fixed;
    top: 400px;
    left: 850px;
    width: auto;
	min-width: 300px;
    height: auto;
    text-align: left;
    direction: ltr;
    /*transition: all 0.5s ease-in-out;	*/
    display: flex;
}

/* school ads slideshow */
.rslides {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.rslides {
    position: relative;
    width: 100%;
}
.rslides {
    list-style: none;
}
.rslides li:first-child {
    position: relative;
    display: block;
    float: left;
}
.rslides li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
    margin-bottom: 0;
}
.rslides img {
    display: block;
    height: auto;
    float: left;
    width: 220px; /* for responsive: 100%; */
    border: 0;
}

/* form error */
.errorMsg {color: #A80808; display:none; float:left; margin:0 0 0 4px;}

/* blinker */
.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  50% {
    opacity: 0.25;
  }
}

/* thickbox overwrite */
#TB_window {
    padding: 5px;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
}
/* datatable overwrite */
td.dataTables_empty {text-align:center !important; padding:20px !important;}

/* form with calendar */
.cal_input {width:90px;}
.cal_sep {padding-bottom:5px;}
.cal_button {margin-left:93px; margin-top:-17px;}

/* main page roundbox title */
.roundBoxTitle h2 {font-size:13px;}

/* bordered ads & box */
#officerAds {
    margin-top: 10px;
    border: 1px solid #cccccc;
    width: 178px;
    display: block;
}
#officerAds2 {
	margin-top: 5px;
	width: 178px;
	display: block;
	text-align: center;
}
#officerAds div {margin: 5px 5px 5px 5px; text-align:center;}
#officerAds li img {width:180px; height:120px; border-bottom: 1px solid #cccccc;}
#school_promo ul, #partnerAds ul {
    border: 1px solid #cccccc;
}
#amandment-box {margin:5px 0 5px 0;}
#amandment-box div {display:block;text-align:center;float:left;margin-bottom:10px;}
#amandment-box div:nth-child(odd) {margin-right:6px;}
#amandment-box img {
    border-radius: 7px;
    border: 1px solid #ccc;
}
/* show hide content */
.hide {display: none;}
/* remaining chars counter */
.cnt-txt {
    text-align: right;
    margin-bottom: 2px;
    margin-right: -2px;
    /* font-size: 10px; */	
}