/*******************************************Portrait**************************************************/
@media screen and (orientation: portrait){
	#mainPageWrapper{
		display:none;
	}
	
	#contentContainer{
		position: relative;
		margin: 0 auto;
		top: 10px;
		width: 100%;
		height: 92%;
		border: 1px solid black;
		background-color: white;
		padding: 10px 3% 10px 3%;
		overflow: auto;
	}

	#leftContainer{
		position: relative;
		display: inline;
		border: 2px solid red;
		float: left;
		width: 90%;
		height: 90%;
		top: 5%;
		overflow: hidden;
	}

	#rightContainer{
		display: inline;
		position: relative;
		border: 1px solid black;
		width: 90%;
		height: 90%;
		overflow: hidden;
		border: 2px solid red;
	}
	
	.panel {
		position: fixed;
		left: -15.625em; /*or width of your navigation panel*/
		width: 15.625em; /*should match the above value*/
	}

	body {
		font-family: arial;
		color: #101820;
		line-height: 1.5;
	}

	.wrap {
		display: inline;
		position: relative;
		max-width: 80%;
		margin: 0 auto;
		padding: 20px;
	}

	.panel {
		background: #101820;
	}

	.panel a {
		color: #fff;
	}
}

/**************************************Slide Menu**********************************/


/****************************************clfumanage.php***********************************************/
.clfuBODY{
	font-family: arial;
}

.clfuBODY LABEL{
	display: inline-block;
	width: 150px;
}

.clfuBODY INPUT[type=textbox]{
	width: 200px;
}

.clfuBODY INPUT[type=submit]{
	width: auto;
}

.clfuBODY SELECT{
	width: 200px;
}

#functionList{
	
}

#functionList H1{
font-size: 24px;
text-align: center;
}

#functionList TABLE{
width: 100%;
text-align: center;
}

#functionList TD IMG{
width: auto;
height: 24px;
}

#functionList{
width: 100%;
height: calc(100% - 25px);
overflow: auto;
}

#functionList a {
font-size: 18px;
font: arial;
color: #FE0801;
text-decoration: none;
}

#functionList a:hover{
color: #01D5FE;
}

#functionList TH {
font-size:15px;
text-align:center;
color: #FE0801;
}

#functionList.fuTableHeader{
	text-align: left;
}

#functionList.center{
	text-align: center;
}

#classList{
	
}

#classList H1{
font-size: 24px;
text-align: center;
}

#classList TABLE{
width: 100%;
text-align: center;
}

#classList TD IMG{
width: auto;
height: 24px;
}

#classList{
width: 100%;
height: calc(100% - 25px);
overflow: auto;
}

#classList a {
font-size: 18px;
font: arial;
color: #FE0801;
text-decoration: none;
}

#classList a:hover{
color: #01D5FE;
}

#classList TH {
font-size:15px;
text-align:center;
color: #FE0801;
}

#classList.clTableHeader{
	text-align: left;
}

#classList.center{
	text-align: center;
}

#clFuncOptions {
	width: 99%;
	font-size: 10px;
}

#clOptionsWrapper {
	display: inline-block;
	border: none;
	width: 48%;
	font-family: arial;
}

#clOptions {
	border: 1px solid grey;
	width: 95%;
	padding: 2px;
	height: 100px;
	overflow: auto;
}

#clChosenOptions {
	border: 1px solid grey;
	width: 95%;
	height: 100px;
	padding: 2px;
	overflow: auto;
}
/***************************************End clfumanage.php********************************************/

/****************************************Main Page Style**********************************************/
.mainHTML{
	width: 100%;
	height: 100%;
	font-family: arial;
	overflow: hidden;
	padding: 0;
	margin: 0 auto;
}

.mainBody{
	width: 100%;
	height: 100%;
	font-family: arial;
	overflow: hidden;
	padding: 0;
	margin: 0 auto;
}

#mainPageWrapper {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
background-color: grey;
overflow: hidden;
}

#contentContainer{
position: relative;
margin: 0 auto;
top: 10px;
width: 90%;
height: 92%;
border: 1px solid black;
background-color: white;
padding: 10px 3% 10px 3%;
}

#leftContainer{
position: relative;
display: inline-block;
border: 2px solid red;
float: left;
width: 45%;
height: 90%;
top: 5%;
overflow: hidden;
}

#rightContainer{
position: relative;
display: inline-block;
border: 1px solid black;
float: right;
width: 45%;
height: 90%;
top: 5%;
overflow: hidden;
}

.alignLeft{
text-align: left;
}

.alignCenter{
text-align: center;
}
/**************************************End Main Page Style********************************************/

/****************************************Menu Bar Style***********************************************/

#menuBar{
position: relative;
width: auto;
height: 30px;
background-color: #000000;
z-index: 999;
font-size: 12px;
text-align: left;
}

#menuBar ul{
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
}

#menuBar > ul {
position: relative;
display: block;
background: #000000;
height: 30px;
width: 100%;
z-index: 500;
}

#menuBar > ul > li{
display: block;
position: relative;
float: left;
margin: 0;
padding: 0;
}

#menuBar > ul > #menu-button{
display: none;
}

#menuBar ul li a {
display: block;
text-decoration: none;
}

#menuBar > ul > li > a {
font-size: 11px;
font-weight: bold;
padding: 9px 7px 9px 7px;
color: #DDDDDD;
text-transform: uppercase;
-webkit-transition: color 0.25s ease-out;
-moz-transition: color 0.25s ease-out;
-ms-transition: color 0.25s ease-out;
-o-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
}

#menuBar > ul > li.has-sub > a{
padding-right: 10px;
}

#menuBar > ul > li:hover > a{ 
background-color: #2D2D2D;
color: #FFFFFF;
}

#menuBar li.has-sub::after{
display: block;
content: '';
position: absolute;
width: 0;
height: 0;
}

#menuBar > ul > li.has-sub::after{
right: 9px;
top: 21px;
border: 5px solid transparent;
border-top-color: #DDDDDD; 
}

#menuBar > ul > li:hover::after{
border-top-color: #FFFFFF; 
}

#indicatorContainer {
position: absolute;
height: 12px;
width: 100%;
bottom: 0px;
overflow: hidden;
z-index: -1;
}

#pIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #2b2f3a;
z-index: -2;
-webkit-transition: left .25s ease;
-moz-transition: left .25s ease;
-ms-transition: left .25s ease;
-o-transition: left .25s ease;
transition: left .25s ease;
}

#cIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #2b2f3a;
top: -12px;
right: 100%;
z-index: -2;
}

#menuBar ul ul {
position: absolute;
left: -9999px;
top: 70px;
opacity: 0;
-webkit-transition: opacity .3s ease, top .25s ease;
-moz-transition: opacity .3s ease, top .25s ease;
-ms-transition: opacity .3s ease, top .25s ease;
-o-transition: opacity .3s ease, top .25s ease;
transition: opacity .3s ease, top .25s ease;
z-index: 1000;
}

#menuBar ul ul ul {
top: 37px;
padding-left: 5px;
}

#menuBar ul ul li {
position: relative;
}

#menuBar > ul > li:hover > ul {
left: auto;
top: 29px;
opacity: 1;
}

#menuBar ul ul li:hover > ul{
left: 156px;
top: 0;
opacity: 1;
}

#menuBar ul ul li a{
width: 130px;
border-bottom: 1px solid white;
padding: 5px 15px;
font-size: 12px;
color: #DDDDDD;
background: #000000;
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}

#menuBar ul ul li:hover > a {
background: #2D2D2D;
color: #FFFFFF;
}

#menuBar ul ul li:last-child > a,
#menuBar ul ul li.last > a {
border-bottom: 0;
}

.submenuArrow {
border: 6px solid transparent;
width: 0;
height: 0;
border-bottom-color: #FFFFFF;
position: absolute;
top: -7px;
}

#menuBar ul ul li.has-sub::after{
border: 4px solid transparent;
border-left-color: #9EA2A5;
right: 4px;
top: 7px;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
-webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}

#menuBar ul ul li.has-sub:hover::after{
border-left-color: #FFFFFF;
right: -2px;
-webkit-tranform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/**************************************End Menu Bar Style*********************************************/


/****************************************Login Page Style*********************************************/
.loginHTML{
	height: 100%;
}

.loginbody{
	margin: 0;
	padding: 0;
	background-color: #000000;
	background: url(images/background.png);
	background-repeat: repeat-x;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#595959));
	background: -webkit-linear-gradient(top, #595959, #000000);
	background: -moz-linear-gradient(top, #595959, #000000);
	background: -ms-linear-gradient(top, #595959, #000000);
	background: -o-linear-gradient(top, #595959, #000000);
	width: 100%;
	height: 100%;
}

#loginbox {
	width: 300px;
	height: 200px;
	color: #EEEEEE;
	border: 1px solid #EE3311;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	border-top: 1px solid #FF4422;
	padding: 0 0;
	margin: 0 auto;
	-webkit-box-shadow: 0px 0px 10px #A3928F;
	-moz-box-shadow: 0px 0px 10px #A3928F;
	box-shadow: 0px 0px 10px #A3928F;
	background-color: #000000;
	background: url(images/background.png);
	background-repeat: repeat-x;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#595959));
	background: -webkit-linear-gradient(top, #595959, #000000);
	background: -moz-linear-gradient(top, #595959, #000000);
	background: -ms-linear-gradient(top, #595959, #000000);
	background: -o-linear-gradient(top, #595959, #000000);
	font-family: Arial;
}

#loginbox.center {
	width: 300px;
	height: 200px;
	position: absolute;
	left: 50%;
	top: 50%; 
	margin-left: -150px;
	margin-top: -150px;
}

#loginbox h1 {
	font-family: Arial;
	font-style: italic;
	font-size: 20px;
	margin-left: 1px;
}

#loginbox p {
	font-family: Arial;
	font-size: 12px;
	text-align: center;
}

#loginbox label {
	width:130px;
	float:left;
	margin-left: 2px;
}

#loginbox form.hform {
	display: inline;
}

.lgbut{
	position: relative;
	float: right;
	margin-right: 14px;
	border-top:	1px solid #595959;
	border-left: 1px solid #595959;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	padding: 5px 20px !important;
	font-size: 12px !important;
	font-weight: bold;
	color: #EEEEEE;
	background-color: #000000;
    background: url(/partner/background.png);
    background-repeat: repeat-x;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#595959));
    background: -webkit-linear-gradient(top, #595959, #000000);
    background: -moz-linear-gradient(top, #595959, #000000);
    background: -ms-linear-gradient(top, #595959, #000000);
    background: -o-linear-gradient(top, #595959, #000000);
}

.lgbut:hover {
    -webkit-box-shadow: 0px 0px 10px #A3928F;
    -moz-box-shadow: 0px 0px 10px #A3928F;
    box-shadow: 0px 0px 10px #A3928F;
}

/**********************************Generic Style for three segment left side
		- Header
		- Body
		- Footer
*/

#leftHeader img {
position: relative;
width: 100%;
}

#leftHeader{
position: relative;
display: block;
padding: 0px;
background-color: #d80000;
}

#leftBody{
position: relative;
display: block;
width: 100%;
height: 435px;
overflow: auto;
padding: 0;
font-size: 16px;
font: arial;
}

#leftBody a{
font-size: 16px;
font: arial;
color: #FE0801;
text-decoration: none;
}

#leftBody a:hover{
color: #01D5FE;
}

#leftFooter{

}

.leftIcon {
height: 24px;
width: 25px;
}

/*************************************End Login Page Style********************************************/

/****************************************Bulletin CSS*************************************************/
#bulletinText {
position: relative;
width: 90%;
height: 60%;
margin: 0 auto;
border: 1px solid black;
overflow: auto;
}

.bulletinEntry a{
font-size: 18px;
font-weight: bold;
font: arial;
color: #FE0801;
text-decoration: none;
}

#.bulletinEntry a:hover{
color: #01D5FE;
}

.bulletinEntry {
max-height: 85px;
border: 0;
overflow: hidden;
font-size: 14px;
}
/*****************************************End Bulleting Style**************************************/

/*
	Promo Calendar CSS
*/
#monthBarWrapper{
width: 100%;
height: 24px;
position: relative;
background-color: #D80000;
overflow: hidden;
padding: 0;
margin: 0 auto;
text-align: center;
}
#monthBar{
width: 100%;
position: relative;
display: inline-block;
overflow: hidden;
height: 24px;
padding: 0;
margin: 0 auto;
}

#monthTab{
width: 7.5%;
position: relative;
display: inline-block;
border: 1px solid grey;
border-top: none;
overflow: hidden;
font-size: 11px;
height: 24px;
color: #FFFFFF;
text-align: center;
margin: 0 auto;
margin-right: 0px;
margin-left: 0px;
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ff3019 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ff3019 0%,#cf0404 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
}

#monthBar a{
font-size: 20px;
font: arial;
font-weight: bold;
color: #FFFFEE;
text-decoration: none;
}

#monthBar a:hover{
color: #D70000;
}

#monthTab:hover{
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
color: #D70000;
}

#questionBox {
font: 15px arial,sans-serif;
}
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000000;}
#colorbox{outline:0;}
    #cboxContent{margin-top:20px;background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{border:5px solid #E00000; background:#fff;}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
        
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext:hover{background-position:bottom right;}
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(images/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose:hover{background-position:bottom center;}