@import url(http://fonts.googleapis.com/css?family=Istok+Web:400,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,300);

body{
   padding: 0; margin: 0; 
   font-size: 0.9em; font-family: "Istok Web";
   background: url(../images/img/bg/mainBackground.png) repeat;
}

a{
   color: #434343; text-decoration: none;
}
a:hover{
   text-decoration: underline;
}

/****************************** NAV BAR *****************************************************/

#navBar{
   display: block; position: absolute; overflow: hidden;
   width: 100%; height: 60px;
   top: 0px; left: 0px;
   background: url(../images/loginBg.png) repeat;
   border-bottom: 3px solid #ce6100;
   box-shadow: 0 0 2px 3px rgba(0,0,0,0.1);
   z-index: 50;
}
#navBarLogo{
   display: block; position: absolute;
   width: 250px; height: 100%;
   top: 0px; left:0px;
   background: url(../images/main/gviAdminLogo.png) center center no-repeat;
}
#navBarMessage{
   display: block; position: absolute;
   width: auto; height: 50px;
   top: 5px; left: 250px;
   border-left: 1px solid #fff;
   padding-left:15px; line-height: 50px;
   font-family: "Open Sans", sans-serif; font-size: 1.2em; font-style: italic; color: #fff;
}

#navBarUserInfo{
   display: block; position: absolute;
   width: auto; height: 100%;
   top: 0px; right: 0px;
}
#navBarUserBox{
   display:block; float: right;
   width: auto; height: 42px;
   margin-top: 10px; margin-right: 10px;
   background: #ce6100;
   box-shadow: inset 2px 2px 2px rgba(0,0,0, 0.3), 1px 1px rgba(255,255,255,0.5);
   border-radius: 3px;
}
#navBarUserBox span{
   display: block; float: left; 
   width: 28px; height: 28px;
   margin: 6px 10px 0 6px;
   border: 1px solid rgba(255,255,255,0.5);
   background-position: center center;
   background-repeat: no-repeat;
   border-radius: 3px;
}
#navBarUserBox label{
   display: block; float: left; 
   width: auto; height: 28px; line-height: 28px;
   margin: 7px 5px 0 4px;
   font-size: 1em; font-family: "Open Sans"; color: #FFF;
   padding-right: 28px;
   background: url(../images/main/upDown.png) top right no-repeat;
}
#navBarUserBox:hover{
   cursor: pointer;
}
#navBarUserBox:hover label{
   background-position: bottom right;
   cursor: pointer;
}
#userInfo{
   display: none; position: absolute;
   width: 400px; height: 170px;
   top: 53px; right: 10px;
   background: #FFF;
   box-shadow: 0 0 5px rgba(0,0,0,0.2);
   border-radius: 5px;
   z-index: 60;
}
#userInfoAvatar{
   display: block; position: absolute;
   width: 150px; height: 150px;
   top: 5px; left: 5px;
   border: 1px solid #ce6100;
   box-shadow: inset 0 0 1px rgba(255,255,255,0.5);
   background-position: center center;
   background-repeat: no-repeat;
}
#userInfoAvatarChangePhoto{
   display: block; position: absolute;
   width: auto; height: 25px; line-height: 25px;
   bottom: 10px; left: 5px; padding: 0 5px 0 5px;
   color: #3c4e6c; font-size: 1em; font-family: dosis; text-decoration: none;
   padding-left: 25px;
   background: url(../images/icon/camera.png) 5px 5px no-repeat;
}
#userInfoAvatarChangePhoto:hover{
   background-color: #f2f2f2;
   border-radius: 3px;
}
#userInfoUsername{
   display: block; position: absolute;
   width: 220px; height: 20px; line-height: 20px;
   top: 2px; right: 5px;
   color: #ce6100; font-size: 1em; font-weight: bold; text-align: left;
}
#userInfoEmail{
   display: block; position: absolute;
   width: 220px; height: 20px; line-height: 20px;
   top: 22px; right: 5px;
   color: #3a3a3a; font-size: 1em; font-weight: normal; text-align: left;
}
#userInfoMenu{
   display: block; position: absolute;
   width: 220px; height: auto;
   top: 50px; right: 5px;
   list-style-type: none;
}
#userInfoMenu li{
   display: block; clear: both; overflow: hidden;
   width: 100%; height: 30px;
   line-height: 30px;
   margin-bottom: 1px;
   background: rgba(0,0,0,0.05);
   border-radius: 3px;
}
#userInfoMenu li a{
   display: block;
   width: 100%; height: 30px; line-height: 30px;
   color: #3a3a3a; font-size: 1em; padding-left: 30px;
   text-decoration: none;
}
#userInfoMenu li:hover{
   background-color: #ef8323;
}
#userInfoMenu li:hover a{
   color: #FFF;
}
#userInfoMenuOptions{
   display: block; position: absolute;
   width: auto; height: 40px;
   bottom: 0px; right: 5px; margin: 0;
   list-style-type: none;
}
#userInfoMenuOptions li{
   display: block; clear: both; overflow: hidden;
   width: 50px; height: 40px;
   line-height: 40px;
   background-position: center center;
   background-repeat: no-repeat;
}
#userInfoMenuOptions li.logout{
   background-image: url(../images/icon/logout.png);
}
#userInfoMenuOptions li a{
   display: block;
   width: 100%; height: 40px;
}
#userInfoMenuOptions li:hover{
   background-color: rgba(0,0,0,0.05);
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
}

#navBarMessages, #navBarAlerts{
   display: block; float: left; position: relative;
   width: 40px; height: 35px;
   margin: 12px 10px 0 0;
}
#navBarMessages{
   background:  url(../images/main/navBarMessage.png) bottom center no-repeat;
}
#navBarAlerts{
   background:  url(../images/main/navBarAlert.png) bottom center no-repeat;
}
#navBarMessages span, #navBarAlerts span{
   display: block; position: absolute;
   width: auto; height: 20px; line-height: 20px;
   padding: 0 5px 0 5px;
   top: 3px; right: 1px;
   background: #ee1701;
   font-size: 0.9em; color: #FFF;
   border-radius: 3px;
}


/****************************** HEADER *****************************************************/

header{
   display: block; position: absolute;
   width: 100%; height: 80px;
   top: 45px; left: 0px;
   background: url(../images/img/bg/blueDiagonal.png) repeat;
   border-bottom: 3px solid #fbb615;
   border-top: 1px solid #555050;
   box-shadow: inset 0px 1px rgba(255,255,255, 0.3);
   z-index: 20;
}

#counterBox{
   display: block; position: absolute;
   width: 220px; height: 60px;
   top: 10px; right: 10px;
   background: #25395a;
   box-shadow: inset 3px 3px 2px rgba(0,0,0, 0.15), 1px 1px rgba(255,255,255,0.1);
   border-radius: 5px;
}
.counterBoxTitle{
   display: block; position: absolute;
   width: auto; height: auto;
   top: 5px; left: 10px;
   font-size: 0.8em; text-transform: uppercase; color: #b3b9c1;
}
.counterBoxTitle.total{
   left: 55%;
}
#counterCurrentTask, #counterTotalTime{
   display: block; position: absolute;
   width: auto; height: auto;
   top: 20px; left: 10px;
   font-size: 1.8em; text-transform: uppercase; color: #fbb615;
}
#counterTotalTime{
   left: 55%;
}
#counterCurrentTask sup{
   font-size: 0.5em;
}

.btnStart{
   display: block; position: absolute;
   width: 150px; height: 40px; line-height: 40px;
   top: 20px; right: 250px;
   background: linear-gradient(#9abb05, #6ea016);
   text-align: center; font-size: 1.2em; color: #FFF; text-transform: uppercase; font-weight: bold; text-decoration: none;
   box-shadow: 0px 0px 2px rgba(0,0,0, 0.3), inset 1px 1px rgba(255,255,255,0.1);
   border: 1px solid #2e2e2e;
   border-radius: 5px;
}
.txtTask{
   display: block; position: absolute;
   width: 45%; height: 40px; line-height: 40px;
   top: 20px; right: 410px;
   background: #e7e7e7;
   font-size: 1.2em; color: #404040; padding: 0 5px 0 5px;
   border: 1px solid #313545;
   box-shadow: 0px 0px 2px rgba(255,255,255, 0.3), inset 1px 1px 3px rgba(0,0,0,0.1);
   border-radius: 5px;
   
}




/****************************** ASIDE *****************************************************/

aside{
   display: block; position: absolute;
   width: 250px;
   top: 63px; bottom: 0px;
   border-right: 1px solid #909aac;
   background: #FFF;
   box-shadow: 0 0 5px rgba(0,0,0,0.1);
   z-index: 40;
}

.module{
   display: block; clear: both; position: relative;
   width: 100%; height: 40px;
   background: #f4f6f8;
   border-bottom: 1px solid #e4e7eb;
   box-shadow: inset 0 0 1px rgba(255,255,255,0.8);
   transition: all 0.2s;
}
.module.selected label, .submodule.selected label{
   font-weight: bold; color: #ce6100;
}
.submodule.selected label{
   color: #636a76;
}
.module div{
   display: block; position: absolute;
   width: 32px; height: 40px;
   background-position: center center;
   background-repeat: no-repeat;
}
.module label{
   display: block; position: absolute;
   width: auto; height: 40px; line-height: 40px;
   top: 0px; left: 32px; border: none;
   color: #3a3a3a; font-size: 0.8em; text-transform: uppercase; text-decoration: none;
}
.module:hover label{
   text-decoration: underline;
}
.module span{
   display: block; position: absolute;
   width: 30px; height: 40px;
   top: 0px; right: 0px;
   background: url(../images/main/collapse.png) top left;
}
.module small{
   display: block; position: absolute;
   width: auto; height: 20px; line-height: 20px;
   top: 10px; right: 30px;
   font-size: 0.8em; color: #FFF; padding: 0 5px 0 5px;
   background: #1277d4;
   border-radius: 3px;
}

.submodules{
   display: block; clear: both;
   width: 100%; height: auto;
   border-bottom: 1px solid #eeeeee;
   box-shadow: inset 0 0 2px 2px rgba(60,78,108,0.05);
}
.submodule{
   display: block; clear: both; position: relative;
   width: 100%; height: 32px;
}
.submodule div{
   display: block; position: absolute;
   width: 32px; height: 32px;
   background-position: 0px 0px;
   background-repeat: no-repeat;
   background-image: url(../images/main/tree.png);
}
.submodule label{
   display: block; position: absolute;
   width: auto; height: 32px; line-height: 32px;
   top: 0px; left: 32px; border: none;
   color: #32415a; font-size: 0.7em; text-transform: uppercase; cursor: pointer; text-decoration: none;
}
.submodule:hover label{
   text-decoration: underline;
}
.submodule small{
   display: block; position: absolute;
   width: auto; height: 20px; line-height: 20px;
   top: 10px; right: 30px;
   font-size: 0.8em; color: #58728a; padding: 0 5px 0 5px;
   background: #c3d3e1;
   border-radius: 3px;
}



/****************************** MODULE CONTENT *****************************************************/


#modContent{
   display: block; position: absolute; overflow: auto;
   left: 251px; top: 115px; bottom: 0px; right: 0px;
   border-top: 1px solid #909aac;
   background: #FFF;
   z-index: 20;
   box-shadow: 0 0 3px rgba(0,0,0,0.2);
}
#tabs{
   display: block; position: absolute;
   height: 35px;
   left: 260px; top: 80px; right: 50px;
   z-index: 30;
}
.tabSelected{
   display: block; float: left; 
   width: auto; height: 35px;
   border-top: 1px solid #909aac;
   border-left: 1px solid #909aac;
   border-right: 1px solid #909aac;
   background: #FFF;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   box-shadow: 1px -2px 2px rgba(0,0,0,0.1);
}
.tabSelected a{
   display: block; float: left;
   width: auto; height: 35px; line-height: 35px;
   padding: 0 20px 0 20px;
   font-size: 1.2em; color: #ce6100; text-decoration: none;
}
.tabSelected a:hover{
   text-decoration: underline;
}
.tabSelected label{
   display: block; float: left;
   width: auto; height: 35px; line-height: 35px;
   padding: 0 20px 0 20px;
   font-size: 1em; color: #7a7a7a; text-decoration: none;
}
.tabSelected span{
   display: block; float: left;
   width: 30px; height: 100%;
   background: url(../images/icon/arrowRight.png) center center no-repeat;
   
}
.tab{
   display: block; float: left; 
   width: auto; height: 35px; margin: 5px 0 0 3px;
   background: #e0e0e0;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   box-shadow: inset 0 -3px 3px rgba(0,0,0,0.05);
}
.tab:hover{
   background: #e9e9e9;
}
.tab:hover a{
   color: #545454;
}
.tab a{
   display: block; float: left;
   width: auto; height: 35px; line-height: 35px;
   padding: 0 20px 0 20px;
   font-size: 1em; color: #6b6b6b; text-decoration: none;
}
.tab span{
   display: none;
}

.toolbar{
   
}



#modContent.fixedContent{
   overflow: hidden;
}
#modContent.fixedContent div.fixedCont{
   position: absolute; top: 45px; left: 0; right: 0; bottom: 0; overflow: auto; z-index: 100;
}
#modContent.fixedContent div.navTool{
   position: absolute; top: 0; left: 0; z-index: 200; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}






.noOverflow{
   overflow: visible; height: 60px;
}
.noOverflow > div{
   overflow: visible;
}


div#homeType{
   display: block; width: 310px; height: 120px; overflow: hidden; margin: 0 auto; margin-top: 15px;
}
div#homeType a.type{
   display: block; float: left; width: 100px; height: auto; overflow: hidden; text-decoration: none;
}
div#homeType a.type label{
   display: block; clear: both; width: 100%; height: 25px; text-align: center; line-height: 20px;
   font-family: "Istok Web", sans-serif; font-size: 15px; color: #4a4a4a; font-weight: 700; text-transform: uppercase; text-decoration: none; text-indent: 0;
}
div#homeType a.type div{
   display: block; clear: both; width: 100%; height: 72px; overflow: hidden; margin: 8px 0 0 0;
   background: url("../images/homeTypeCircle.png") bottom center no-repeat;
}
div#homeType a.type.selected div{
   background-position: top center;
}
div#homeType a.type div span{
   display: block; width: 100%; height: 100%; background: transparent center center no-repeat;
}



div.selectStatus{
   display: block; float: left; width: 200px; height: 42px; position: relative; margin-left: 20px; overflow: visible;
}
div.selectStatus a.select{
   display: block; position: absolute; width: 200px; height: 42px; top: 0; left: 0px;
   text-align: left; text-indent: 10px; font-size: 14px; color: #545454; text-decoration: none; text-transform: uppercase;
   line-height: 42px; text-shadow: 0 1px rgba(255,255,255,0.5);
   background: linear-gradient(#f6f6f6, #f0f0f0); border-radius: 3px;
   box-shadow: 0px 2px 1px #dadada;
   transition: all ease-in 0.2s;
}
div.selectStatus a.select:hover{
   background: linear-gradient(#f0f0f0, #eaeaea);
}
div.selectStatus a.select.clicked{
   background: linear-gradient(#eaeaea, #f0f0f0);
}
div.selectStatus a.select span.statusColor{
   display: block; position: absolute; width: 48px; height: 42px; top: 0; right: 0;
   background: linear-gradient(#d2d2d2, #b9b9b9); border-radius: 0 3px 3px 0;
   transition: all ease-in 0.2s;
   z-index: 5;
}
div.selectStatus a.select span.menuIcon{
   display: block; position: absolute; width: 48px; height: 42px; top: 0; right: 0;
   background: url("../images/icon/menuIcon.png") top center no-repeat;
   z-index: 10;
}
div.selectStatus a.select:hover span.menuIcon,
div.selectStatus a.select.clicked span.menuIcon{
   background-position: bottom center;
}
div.selectStatus a.select span.arrow{
   display: none; position: absolute; width: 11px; height: 6px;
   top: 42px; right: 18px;
   background: url("../images/icon/selectArrowColors.png") 0px 0 no-repeat;
   z-index: 15;
}
div.selectStatus a.select.clicked span.arrow{
   display: block;
}


div.selectStatus a.select.Sent span.statusColor{
   background: linear-gradient(#ffc744, #ff9a26);
}
div.selectStatus a.select.Sent span.arrow{
   background-position: 0 -6px;
}
div.selectStatus a.select.Delivered span.statusColor{
   background: linear-gradient(#93ca52, #7eb83a);
}
div.selectStatus a.select.Delivered span.arrow{
   background-position: 0 -12px;
}
div.selectStatus a.select.Cancelled span.statusColor{
   background: linear-gradient(#f42c2c, #cf2424);
}
div.selectStatus a.select.Cancelled span.arrow{
   background-position: 0 -18px;
}



div.selectStatus ul{
   display: none; position: absolute; width: 200px; height: auto; overflow: hidden; top: 58px; left: 0;
   margin: 0; padding: 0; list-style-type: none;
   background: #f3f3f3; box-shadow: inset 0 0 1px rgba(255,255,255,1), 0 0 1px #a1a1a1, 0 0 5px rgba(0,0,0,0.3); border-radius: 3px;
}
div.selectStatus ul li{
   display: block; clear: both; width: 100%; height: 32px; overflow: hidden; margin: 0; padding: 0;
   border-left: 4px solid transparent; z-index: 100;
   transition: all ease-in 0.2s;
}

div.selectStatus ul li.selected.Pending,
div.selectStatus ul li.Pending:hover{
   border-left-color: #bcbcbc;
}
div.selectStatus ul li.selected.Sent,
div.selectStatus ul li.Sent:hover{
   border-left-color: #ff9f29;
}
div.selectStatus ul li.selected.Delivered,
div.selectStatus ul li.Delivered:hover{
   border-left-color: #7eb83a;
}
div.selectStatus ul li.selected.Cancelled,
div.selectStatus ul li.Cancelled:hover{
   border-left-color: #cf2424;
}

div.selectStatus ul li a{
   display: block; width: 100%; height: 32px; line-height: 32px;
   line-height: 32px; text-indent: 10px; color: #575757; text-shadow: 0 1px rgba(255,255,255,0.5);
}
div.selectStatus ul li a:hover{
   text-decoration: none;
}
div.selectStatus ul li:first-child{
   margin-top: 5px;
}
div.selectStatus ul li:last-child{
   margin-bottom: 5px;
}
div.selectStatus ul li.selected{
   background-color: #e7e7e7;
}
div.selectStatus ul li.selected a{
   color: #2e2e2e; cursor: default;
}
div.selectStatus ul li.disabled a{
   color: #9b9b9b; cursor: not-allowed;
}



.navTool .notification{
   display: none; position: absolute; width: auto; height: 100%; top: 0; right: 25px; padding-right: 30px;
   font-size: 14px; color: #6a9f2b; line-height: 45px; text-shadow: 0 1px rgba(255,255,255,0.5);
   background: url("../images/icon/success.png") center right no-repeat;
}
.navTool .notification.error{
   background-image: url("../images/icon/error.png"); color: #ba0000;
}

.inputLine .event-brands{
    list-style: none;
    padding: 0;
    margin: 0;
}

.inputLine .event-brands li{
    display: block !important;
    float: none;
    padding: 5px 25px;
    margin: 2px 0;
    border: 1px solid #ddd;
    width: 90%;
    box-sizing: border-box;
    background-image: url(http://localhost:8080/GVIAppServer/images/icon/sort.png);
    background-repeat: no-repeat;
    background-position: 5px 50%;
    background-size: 15px;
    background-color: #f5f5f5;
    height: 30px;
}

.inputLine .event-brands li label{
    float: none;
    text-align: left !important;
    display: block;
    width: 100%;
}