@charset "utf-8";

html.kepler body {line-height:18px; overflow-y: scroll;}

*:focus { outline: none;}
input:focus{ outline: #f9e004 solid 2px;}
span:focus{ outline: #f9e004 solid 2px;}
button:focus { outline: #f9e004 solid 3px; -webkit-box-shadow: 0px 0px 4px 0px rgb(255, 247, 0);}
li:focus { outline: #f9e004 solid 2px;}
li.bgtab:focus { outline: none;}
input[type=submit]:focus{ outline: #f9e004 solid 2px;}
a:focus { outline: #f9e004 solid 2px; }
select:focus { outline: #f9e004 solid 2px; }
#open_upload_group > span:focus{ outline: #f9e004 solid 3px;}

.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text {
    position: absolute;
    top: -999em;
    left: -999em;
}

#header #topUserInfo {
    float: right;
    position: absolute;
    top: -21px;
    right: 30px;
    color: #fff;
    z-index: 1;
    font-size: 12px;
}
/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}


html.kepler #header #topUserInfo {
    right: 32px;
}

html.kepler #footer > * {display:inline-block}

html.kepler #footer .ea {
    margin-right: 12px;
    padding: 10px 20px 10px 0px;
}

html.kepler #footer .footerMain {
    width: 485px;
}

.dark-mode {float:right!important; color: #fff; margin-top:23px!important; margin-right:15px!important;}
.kepler.dark-mode { margin-right:-9px!important; padding-left:3px!important}


/* CSS Document */
ul#nav li.active a:link, ul#nav li.active a:visited {color: #fff;}
ul#nav, ul#darkmodenav {position: relative; top: -22px;margin-left: 108px;}
.bootstrap-styles ul#nav {margin-right:0;}
ul#nav li.active ul li a:link, ul#nav li.active ul li a:visited {color:white;}

html.kepler ul#nav { margin-right:30px;}


.logo-container {margin-left: 2px; }
a.logo-float {float:left;}
/* MY ACCOUNTS TAB CONTROL  */
li.mainbutton a{ display:block; font-family: Verdana; font-size: 14px; text-decoration: none; cursor: pointer; padding: 5px 26px 4px 26px;	float: left; line-height: 50px; color: white;}
ul.mainbutton li.hover, ul.mainbutton li.mainbutton.hover { position: relative; z-index: 599; border-top-left-radius: 5px 5px;border-top-right-radius: 5px 5px;cursor:pointer;}
ul.drop li.mainbutton, ul.drop li.active {     vertical-align: middle; height: 59px; cursor: pointer; border-top: 22px solid #d3e1ff; }
ul.mainbutton li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 50px 0 50px; cursor:pointer;}


/* TAB BACKGROUNDS  */
ul.drop li.bgtab { display:block; font-family: Verdana; font-size: 14px; text-decoration: none; cursor: pointer; float: left;	line-height: 30px; border-top: 22px solid #303030}
ul.drop li.bgtab:hover { background-color: #1a9ad8; border-top: 22px solid #5a5a5a;}
ul.drop li.active { background-color: #fff; color: #000;}
ul.drop li.active {background-color: #018cd0; color: #026b9e; border-top: 22px solid #424141;}
ul.drop li.active:hover {    background-color: #0692d6;  border-top: 22px solid #5a5a5a;}
li.nodrop a{ display:block; font-family: Verdana; font-size: 14px; text-decoration: none; cursor: pointer;	padding: 8px 53px 7px 53px;	float: left; line-height: 44px;}


/* DROPDOWN CONTROL  */
ul.drop li:hover > ul { visibility: visible; left:0em }
ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; }
ul.drop { position: relative;  }
ul.drop li { float: left; line-height: 18px; }
ul.drop li.hover, ul.drop li:hover, ul.drop li.hover a:link { position: relative; z-index: 500; line-height:20px;}
ul.drop ul { visibility: visible; position: absolute; z-index: 598; width: 151px; background: #1b9ad8; padding-top: 2px; padding-bottom: 5px; }
ul.droptext li{	margin-left:0px; margin-right:0px; width:151px;}
ul.droptext a, ul.droptext a:link{ color: #fff;line-height:16px;padding: 20px 0 20px 8px;}
ul.droptext li:hover { background-color: #0282c1; border-radius: 0px; }
ul#nav ul.droptext li:hover a:link, ul#nav ul.droptext li:hover a:visited { color: #fff; }

/* DROPDOWN SHADOW*/
ul.droptext{ -webkit-box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.5);-moz-box-shadow:    2px 2px 3px rgba(50, 50, 50, 0.5); box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.5);}

ul#nav a:link, ul#nav a:visited {color: #fff;width: 151px;padding-left: 0px;padding-right: 0px;margin-right:2px;text-align: center;}

ul#nav a:hover {color: #fff!important;}


.dark-mode {float:right!important; color:#fff; margin-left:8px; font-family:Verdana; font-size:14px; line-height:55px!important; }
#dark-mode-label { margin-top:11px!important; }


.mobile{display:none;}

/* TOGGLE SLIDER*/
input.dark-mode[type=checkbox]{
    height: 0;
    width: 0;
    display: none;
}

label.dark-mode {
    cursor: pointer;
    text-indent: -9999px;
    width: 53px;
    height: 26px;
    background: #40b9f7;
    display: block;
    border-radius: 100px;
    position: relative;
}

label.dark-mode:after {
    content: '';
    position: absolute;
    top: 3px;
    left: 4px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 90px;
    transition: 0.3s;
}

input.dark-mode:checked + label {
    background: #74d265;
}

input.dark-mode:checked + label:after {
    left: calc(100% - 4px);
    transform: translateX(-100%);
}

label.dark-mode:active:after {
    width: 20px;
}


/* MOBILE*/
input.mobile-dark-mode[type=checkbox]{
    height: 0;
    width: 0;
    visibility: hidden;
}

label.mobile-dark-mode {
    cursor: pointer;
    width: 113px;
    line-height: 29px;
    padding: 5px 10px;
    text-align: center;
    border-radius: 3px;
}


input.mobile-dark-mode:checked + label {
    background: #40b9f7;
}

a#pull {
    font-size: 17px;
}

.arrowDown { 
    border-left: 5px solid transparent !important; 
    border-right: 5px solid transparent !important; 
    border-top: 5px solid #fff; 
    position: relative; 
    z-index: 1; 
    top: 13px; 
    left: 7px; 
}

.arrowDownBlack { 
    border-left: 5px solid transparent !important; 
    border-right: 5px solid transparent !important; 
    border-top: 5px solid #333; 
    position: relative; 
    z-index: 1; 
    top: 11px; 
    left: 7px; 
}

/* responsive Media Query  */
@media only screen and (max-width: 700px) and (orientation: landscape){
    .mobile {height: auto;  display: block; position: relative; color: #fff; line-height: 50px; text-decoration: none;
        font-size: 17px; background: #5e88df;}    .mobile ul {	display: none; height: auto; padding-top:0; }
    .mobile a#pull {	 display: block; position: relative; color: #fff; line-height: 50px; text-decoration: none;
        padding-right: 48px; text-align: right;}
    .mobile a#pull:after {content: ""; background: url(../images/firefly/nav-icon.png) no-repeat; width: 30px; height: 30px; display: inline-block;
        position: absolute; top: 14px; padding-right: 10px; right: -3px;}
    .clearfix:after {  visibility: hidden;  display: block;  content: "";  clear: both;  height: 0;  }
    ul.mobile-menu{	list-style:none ;padding:0; margin:0}
    .mobile-menu li{ background: #4b64a0;border-bottom: 1px solid #19294F;}
    .mobile-menu li a {line-height: 47px; display: inline-block; width: 100%; }
    .mobile-menu a {color: #fff; padding-left: 20px; font-size: 14px; text-decoration: none;}
    .mobile-menu a:hover {background: #638AE9; text-decoration:none; padding-left: 20px }
    ul#nav {display:none; width: calc(179vh - 0px);}
    #header #topUserInfo {right: 67px;}
}


@media only screen and (max-width : 700px) {
    ul#nav {display:none;}
    .heading-txt {    margin-top: 110px;}
    .mobile {    height: auto;
        display: block;
        color: #fff;
        line-height: 50px;
        text-decoration: none;
        background: #026b9e;
        z-index: 999999;
        position: fixed;
        width: 100%;
        margin-top: 29px;}
    .mobile ul {	display: none; height: auto; }
    .mobile a#pull {  display: block; position: relative; color: #fff; line-height: 50px; text-decoration: none;
        padding-right: 48px; text-align: right;}
    .mobile a#pull:after {content: ""; background: url(../images/firefly/nav-icon.png) no-repeat; width: 30px; height: 30px; display: inline-block;
        position: absolute; top: 14px; padding-right: 10px; right: -3px;}
    .clearfix:after {  visibility: hidden;  display: block;  content: "";  clear: both;  height: 0;  }
    ul.mobile-menu{	list-style:none ;padding:0; margin:0}
    .mobile-menu li{ background: #026b9e;
        border-bottom: 1px solid #4fb1e0;}
    .mobile-menu li a {line-height: 47px; display: inline-block; width: 100%; }
    .mobile-menu a {color: #fff; padding-left: 20px; font-size: 14px; text-decoration: none;}
    .mobile-menu a:hover {background: #1da6e8; text-decoration:none; padding-left: 20px }
    a.logo-float {float:none;}
    .footer .legal .text {    width: 100%; text-align: center;}
    .footer  img {display:none;}

    li.dark-mode {
        float: left!important;
        margin: 2px;
        margin-top: 0!important;
        padding-left: 11px;
        width: 100%;
        border: 0;
        background: #525252!important;
    }

    .dark-mode {display:none;}

}