/**************************************************************************
HEADER STYLES
**************************************************************************/

@media (min-width: 700px) {
    h1,h2,h3,h4,h5,h6 {color:#546E8C !important;}
    h1{font-size:24px !important;}
    h2{font-size:20px !important;}
    h3{font-size:16px !important;}
}

@media (max-width: 700px) {
    h1,h2,h3,h4,h5,h6 {color:#546E8C !important;}
    h1{font-size:20px !important;}
    h2{font-size:16px !important;}
    h3,h4{font-size:14px !important;}
    h5,h6{font-size:14px !important;}
}        

.headerTitle{border-bottom: 1px solid #DDDDDD;padding-bottom: 12px;margin-bottom: 20px;text-shadow:2px 2px 0px rgba(0,0,0,.07)}
.headerTitle .icons {display: inline;width: 39px;height: 27px;float: left;margin-top: -5px;}
.headerTitle .headerSubtitle{color:#7098C7;}


#topLogo{height: 28px;margin-top: 3px;}


#topRow {padding: 6px;height: 48px;line-height:30px;border-bottom: 4px solid #A9CDF1;
            background: #2c3d53;
            background: -moz-linear-gradient(top,  #2c3d53 0%, #2b577d 100%);
            background: -webkit-linear-gradient(top,  #2c3d53 0%,#2b577d 100%);
            background: linear-gradient(to bottom,  #2c3d53 0%,#2b577d 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3d53', endColorstr='#2b577d',GradientType=0 );}
#topRow .leftColumn {width:240px;font-size:20px;color:#E5F0FB;float:left;}
#topRow .leftColumn .button {float: right;padding: 0px 0px 0px 6px;border: 1px solid #666666 !important;filter: opacity(.8);}
#topRow .leftColumn .button span.icons {display: block;    padding: 15px 14px;    width: 20px;}
#topRow .rightColumn{float:right;}


@media only screen and (max-width: 767px){
    .no-mobile {display:none !important;}
}    

/**************************************************************************
LEFT COLUMN STYLES
**************************************************************************/
#leftColumn{
	position:absolute;
	top:48px;
	left:0px;
	width:250px;
	z-index:200;
    background-image:url(../images/background.jpg);
}


#leftColumn .panelFour{min-height:800px;}
#leftColumn .children {display:none;}


/**************************************************************************
LEFT COLUMN MENU
**************************************************************************/
#leftColumn .menuItems li{height:36px;line-height:34px;border-bottom:1px solid #B7B7B7;display:table;width:250px;border-right:1px solid #B7B7B7;font-size:14px;margin-left:0px;}
#leftColumn .menuItems li.active{background:#FFFFFF;border-right:1px solid #FFFFFF;}
#leftColumn .menuItems li .subnav{background-image:url(../images/down-arrow.png);background-repeat:no-repeat;background-position:right center;}
#leftColumn .menuItems li.child{border-left:8px solid #999999;background:#C7C7C7;text-shadow: 0px 1px 0px #DDDDDD;padding-left:12px;}
#leftColumn .menuItems li.child.active{border-right:1px solid #AAAAAA;background:#BDBDBD;border-left:8px solid #A9CDF1;}
#leftColumn .menuItems li a{height:36px;line-height:34px;display:table-cell;vertical-align:middle;cursor:pointer;color:#666666;font-size:12px;border-top: 1px solid rgba(255,255,255,.25);}
#leftColumn .menuItems li a span{background-repeat:no-repeat;background-size:100%;background-position:left center;height:30px;width:20px;float:left;margin:0px 11px 0px 6px;}
#leftColumn .menuItems li a:hover{font-weight:bold;}

#leftColumn .menuItems .grandchildren {display:none;}
#leftColumn .menuItems li.grandchild{border-bottom:1px solid #999999 !important;border-left:16px solid #777777;background:#888888;text-shadow:none !important;padding-left:6px;}
#leftColumn .menuItems li.grandchild a{color:#FFFFFF !important;padding-left:10px;display:block;border-top:none !important;}
#leftColumn .menuItems li.grandchild.active{border-right:1px solid #777777;background:#777777;border-left:16px solid #A9CDF1;}
            
/**************************************************************************
RIGHT COLUMN STYLES
**************************************************************************/
#rightColumn{
	margin-left:250px;
	background:#F2F2F3;
}

#loginColumn{
	background:#FFFFFF;
}

.rightPanelThree{padding:0px 0px 0px 10px; display:block;height:56px;border-bottom:1px solid #B7B7B7;}
.rightPanelThree h3{margin:14px 10px 0px 0px;float:left;vertical-align:middle;font-weight:normal}
.rightPanelThree span{background-repeat:no-repeat;background-position:left center;height:56px;width:70px;float:left;margin:0px 5px 0px 5px;}

.rightPanelFour{min-height:400px;padding:20px 20px 50px 10px;background:#FFFFFF;}
#contentFrame {border:0px;width:100%;height:100%;}

.instructions{line-height:1.5em;display:block;}

.adminButton{
	background: none repeat scroll 0% 0% #92CD2A !important;
	border: 1px solid rgb(42, 93, 125) !important;
	padding: 12px !important;
	-webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.3);
	box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.3);
}

.userActionsBox{
    position: fixed;
    bottom: 0px;
    left: 0px;
    display: block;
    padding: 10px;
    z-index: 200;
    width: 250px;
    min-height:50px;    
}    

.actionsBox{
    position: fixed;
    bottom: 0px;
    left: 0px;
    display: block;
    padding: 10px 20px;
    z-index: 200;
    background: linear-gradient(to bottom, #F0F0F0 0%, #DCDCDC 100%);
    width: 100%;
    border-top: 1px dotted #BBBBBB;
    box-shadow: 0px 0px 30px rgba(0,0,0,.15);
    min-height:50px;
}

.adminToolsMenu{padding: 14px;
    background:rgba(0,0,0,.03);
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,.1);
    margin: 10px 0px;
    border-top: 4px solid rgba(0,0,0,.1);
    font-family: Poppins;
}
.adminToolsMenu .icons {opacity:.3;}
.adminToolsMenu a{font-family:Poppins;}


/**************************************************************************
RIGHT CORNER MENU STYLES
**************************************************************************/
#topRightMenu{
    float: right;
    height: 40px;
    margin-right: 0px;
    border-left: 2px solid rgba(0,0,0,.1);
    background: rgba(0,0,0,.05);
    margin-top: -5px;
    padding-top: 6px;
    padding-left: 11px;    
}

#topRightMenu .parent{
    list-style-type: none;
    margin-right: 20px;
    height: 40px;
    min-width: 125px;
    max-width: 200px;
    display: inline-block;
    position:relative;   
}

@media only screen and (max-width: 767px){
    #topRightMenu .parent{
        margin-right: 2px;
        min-width: 0px;
        width:40px;
    } 
}    

#topRightMenu .parent:hover .children{
    display:block;
}

#topRightMenu .parent a{
    color: white;
    font-weight: normal;
    max-width: 180px;
    display: block;
    font-size: 14px;
}

#topRightMenu .parent a .icons{
    width: 37px;
    background-size: 50%;
    background-position: center;
    float: left;
    height: 29px;
    margin-right: 1px;
}



#topRightMenu .parent .children{
    position: absolute;
    background: white;
    right: -10px;
    top: 42px;
    width: 180px;
    box-shadow: 2px 2px 1px rgba(0,0,0,.1);
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;    
}      

#topRightMenu .parent .children{
   
} 

#topRightMenu .parent .children .child{
    list-style-type:none;
    margin-left: 0px;
    padding-left: 0px;  
    border-bottom: 1px solid rgba(0,0,0,.04);  
}
    
#topRightMenu .parent .children .child a{
    font-size: 14px;
    color: #666;
    line-height: 40px;
    height: 40px;
    padding-left: 20px;
    font-weight: normal;
}

#topRightMenu .parent .children .child a:hover{
    background:#FFF9C2;
}

/**************************************************************************
ADDITIONAL PANEL STYLES
**************************************************************************/
.panel .title {margin: -16px -16px 17px -16px; background: #FFEBB4; border-bottom: 2px solid #FFDA92; padding: 15px; font-size: 14px; font-weight: bold;}

.panel.blue { background-color: #E6F1FB; border: solid 1px #DDDDDD;}
.panel.blue .title {margin: -16px -16px 17px -16px; background: #CAE2F5; border-bottom: 2px solid #DDDDDD; padding: 15px; font-size: 14px; font-weight: bold;}

.panel.red { background-color: #FFE2E2; border: solid 1px #FF8989;}
.panel.red .title {margin: -16px -16px 17px -16px; background: #FFB6B6; border-bottom: 2px solid #FF8989; padding: 15px; font-size: 14px; font-weight: bold;}


.panel.mini {float:right;margin-bottom:10px;padding:10px;}
.panel.mini a{font-weight:bold;}


/**************************************************************************
HELP STYLES
**************************************************************************/
.helpBubble{-webkit-border-radius: 8px;
				-moz-border-radius: 8px;
					border-radius: 8px;
				display:inline-block;
				width:16px;
				height:16px;
				margin:0px 2px 0px 2px;
				font-family:arial;
				font-weight:bold;
				border:1px solid #FFD11B;
				background:#FFFFDE;
				color:#FFA337;
				font-size:10px;
				text-align:center;
				text-decoration:none;
				line-height:14px;
	}
    
    

/**************************************************************************
ALERT BOX STYLES
**************************************************************************/    
.msgBox {margin: 10px 0px 20px 0px !important;
            width: 100%;
            float: none;
            padding: 2px !important;
            border-radius: 7px;
            border: 1px solid rgba(0,0,0,.1)}
.msgBox .iconBox {width:60px !important;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            border: 0px;
            position:relative;
            border-right: 1px solid rgba(0,0,0,.2); }
.msgBox .icons {    display: block !important;
            width: 40px !important;
            height: 40px !important;
            background-size: 80% !important;
            filter: opacity(.8);
            vertical-align: middle;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -20px;
            margin-left: -20px;}       
.msgBox .messageBox {padding: 24px;
            color: rgba(0,0,0,.6);
            font-size: 14px;
            font-weight: normal;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            border-left: 2px solid rgba(255,255,255,.2);
            font-family: arial !important;
            line-height: 16px;}
.msgBox .messageBox a {font-size:14px !important;}                            

.msgBox .messageBox h4 {font-weight:bold;font-size:18px;color: rgba(0,0,0,.5) !important;margin-top:0px;font-family:'Poppins', sans-serif;}  
                                                                                 
.greetingMsg {border: 1px solid #96B7D8 !important;}
.noteMsg {border: 1px solid #FCDF56 !important;}   
.alertMsg {border:1px solid #FC9C8C !important;}


.alertMsg .messageBox {background: #FFE4E0;}
.successMsg .messageBox {background: #E0F2C1;}
.importantMsg .messageBox {background: #E8DAF6;}
.greetingMsg .messageBox {background: #DFE9F3;}
.noteMsg .messageBox {background: #FFFBB7;} 


/**************************************************************************
MOBILE COLUMN STYLES
**************************************************************************/ 
  .row .mobile-one { width: 8.33333% !important; float: left !important;}
  .row .mobile-two { width: 16.66667% !important; float: left !important;}
  .row .mobile-three { width: 25% !important; float: left !important;}
  .row .mobile-four { width: 33.33333% !important; float: left !important;}
  .row .mobile-five { width: 41.66667% !important;float: left !important; }
  .row .mobile-six { width: 50% !important; float: left !important;}
  .row .mobile-seven { width: 58.33333% !important; float: left !important;}
  .row .mobile-eight { width: 66.66667% !important; float: left !important;}
  .row .mobile-nine { width: 75% !important; float: left !important;}
  .row .mobile-ten { width: 83.33333% !important; float: left !important;}
  .row .mobile-eleven { width: 91.66667% !important; float: left !important;}
  .row .mobile-twelve { width: 100% !important; float: left !important;}
/**************************************************************************/ 