/* CUSTOM NORMALIZE */

h1,h2,h3,h4,h5,h6 {
     margin: 0;
}

ul,li {
    margin: 0;
    padding: 0;
}


/* ========================================================================= */
/* ========================================================================= */
/* MAIN CSS */

html {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #666666;
    height: 100%;
    min-width: 100%;
}

body {
    background-color: #f2f2f2;
    height: 100%;
    min-width: 100%;   
}

a, a:visited {
    color: #6BAFCB;
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 300;
}

h2 {
    margin-bottom: .5em;
}

input[type=radio] {
    display: inline !important;
    border: 0px !important;
    cursor: pointer !important;
    margin-right: 4px !important;
    vertical-align: central !important;
}

input[type=text]::-ms-clear { display: none; }

/* loading */

.alert {
    display: block;
    position:fixed;
    width: 300px;
    left: 50%;
    margin: 42px -150px 0 -150px;
    padding: .15em;
    background-color: #39B54A;
    color: #FFF;
    text-align: center;
    border: 1px solid #FFF;
}

.alert .icon {
    -webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;
    vertical-align:middle;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


/* main menu */

.mainmenu {
    background-color: #585858;
    color: #FFFFFF;
    padding: .25em 0 0 .5em;
}

.mainmenu ul {
    
}

.mainmenu li {
    display: inline-block;
    
}

.mainmenu .logo {
    vertical-align:bottom;
}

.mainmenu li a {
    display: block;
    padding: 0.5em 1.4em;
    font-weight: 400;
    color: #FFF;
    text-decoration: none;
}

.mainmenu li a:hover {
    background-color: rgba(255,255,255,.3);
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.mainmenu .active {
    background-color: #f5f5f5;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: #6BAFCB;
}
.mainmenu .active:hover {
    color: #FFF;
}

.logout {
    float: right;
    margin-right: 1em;
    margin-top: -4px;
    background-color: #000;
    color: #FFF;
    padding: .25em .5em;
    text-decoration: none;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-bottomight: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.logout:hover {
    background-color: #323232;
}


/* buttons */

.btn, .btnsmall, .btnadd, .btnheader, .btnhead, #cboxPrevious, #cboxNext, #cboxClose {
    display: inline-block;
    line-height: 1em;
    padding: .20em .5em .35em .5em;
    border: 1px solid #6BAFCB;
    background-color: #6BAFCB;
    color: #FFF !important;
    text-decoration: none;
    margin-left: .25em;
}

.btn {
    line-height: 1.25em;
    padding-left: .75em;
    padding-right: .75em;
    margin-right: .25em;
}

.btnadd {
    border: 1px solid #9EC5DA;
    vertical-align: middle;

    padding: .46em;
    padding-left: 2em;
    background-image: url(../images/icon-add.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.btnheader, .btnhead {
    border: 1px solid #9EC5DA;
    vertical-align: middle;
    padding: .46em;
}

.btn:hover, .btnsmall:hover {
    background-color: #9EC5DA;
    border: 1px solid #6BAFCB;
    color: #FFF;
}
.btnadd:hover, .btnheader:hover {
    border: 1px solid #FFF;
}

.btngreen {
    background-color: #39B54A;
    border-color: #389244;
}

.btngreen:hover {
    background-color: #56d367;
}

.btnorange {
    background-color: #e58f32;
    border-color: #c2813b;
}

.btnorange:hover {
    background-color: #f5a44d;
}

.btnred {
    background-color: #D00;
    border-color: #b91717;
}

.btnred:hover {
    background-color: #f64242;
}

.btngrey {
    background-color: #666666;
    border-color: #494949;
}

.btngrey:hover {
    background-color: #b0b0b0;
}

.validator {
    display: inline;
    color: red;
}

.msg, .msgfixed {
    display: inline-block;
    padding: .20em .5em .35em .5em;
    border: 1px solid #666666;
    background-color: #666666;
    
    padding-left: 1.75em;
    padding-right: .75em;

    line-height: 1.25em;
    color: #FFF;
    text-decoration: none;
    
    background-repeat: no-repeat;
}


.msginfo {
    border: 1px solid #b0b0b0;
    background-color: #b0b0b0;
    background-image: url('../images/icon-info.png');
    background-size: contain;
}

.msgsucces {
    
    border: 1px solid #39B54A;
    background-color: #39B54A;
    background-image: url('../images/icon-check.png');
    background-size: contain;
}

.msgnote {
    border: 1px solid #F7931E;
    background-color: #F7931E;
    background-image: url('../images/icon-note.png');
    background-size: contain;
}

.msgerror {
    border: 1px solid #D11523;
    background-color: #D11523;
    background-image: url('../images/icon-error.png');
    background-size: contain;
}

/* main content */

.headers {
    margin: 1em;
}

.windowholder {
    margin: 1em;
}

.scrollholder {
    height: 449px;
    margin: 1em;
    overflow: hidden;
    overflow-x: scroll;
    white-space:nowrap;
}

.windowheader {
    padding: .5em;
    background-color: #6BAFCB;
    color: #FFF;  
}

.windowheader h2 {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
    width: 200px;
}

.windowheader img {
    display: inline-block;
    width: 2em;
    height: 2em;
    vertical-align: middle;
    margin-right: .5em;
}

.windowheader select {
    color: #000;
}

.windowheader option {
    color: #666;
}

.contentwindow {
    background-color: #FFF;
    padding: .5em;
}

.maincontent {
    padding: 1em;
}

/* week selector */
.weekselector {
    display: inline-block;
    vertical-align: top;
    margin-right: .5em;
    padding: .375em .5em;
}

.weekselector select {
    padding: 0;
    border: 1px solid #DBDBDB;
}

.weekselector .year {
    display: inline-block;
    padding-right: .5em;
    margin-right: .375em;
    border-right: 1px solid #DBDBDB;
    vertical-align: middle;
}

.weekselector .week {
    display: inline-block;
    margin-right: .375em;
    margin-right: .375em;
    vertical-align: middle;
}

.weekselector > * {
    vertical-align: top;
}

/* sales selectors */

.salesselectors {
    display: inline-block;
}

.salesselectors td {
    display: inline-block;
    background-color: #FFF;
    padding: .5em .75em .5em .5em;
    margin-right: .5em;
    cursor: pointer;
}

.salesselectors td:hover {
    
}

.salesselectors td input {
    margin-right: .3em;
}

.salesselectors td label {
    pointer-events: none;
}

.salesselectors .active {
    background-color: #6BAFCB;
    color: #FFF;
}

.salesinfo {
    display: inline-block;
    margin: 0;
    margin-right: .5em;
}


.salesinfo:last-child {
    margin-right: 0;   
}

.salesinfo .schedule {
    width: 480px;
    height: 300px;
    background-color: #DBDBDB;
    border: 1px solid #DBDBDB;
    overflow: hidden;
    overflow-y:scroll;
}




/* form fields */

.tablediv {
    display: table;
    width: 100%;
    padding: 0;
}

.formcolumn {
    display: table-cell;
    
    border-right: 1px solid #f5f5f5;
    padding: 1em;
}

.formcolumn:first-child {

}

@media (max-width: 1024px){
    .formcolumn:nth-child(2) {
    
    }
}

.formfieldholder {
    padding: .4em;
    clear: both;
}

.specialfield {
    background-color: #F2F2F2;
}

.formcolumn label {
    font-weight: 400;
    font-size: 14px;
    color: #558DA3;
}

.formfieldholder input, .formfieldholder select, .formfieldholder textarea {
    display: block;
    font-size: 13px;
    padding-left: .25em;
    border: 1px solid #DBDBDB;
}

.formfieldholder textarea {
    height: 8em;
}

.formfieldholder .small {
    width: 25%;
}

.formfieldholder .half {
    width: 50%;
}

.formfieldholder .wide {
    width: 98%;
}

.formfieldholder span {
    display: block;
}

.formfieldcolumns .formfieldholder{
    display:inline-block;
    padding-right: 0;
}

.formfieldcolumns .formfieldholder label {
   display: block;
}

.formfieldcolumns .formfieldholder input {
    display: inline-block;
}

.radiolist label {
    display: inline;
    color: inherit;
    cursor: pointer;
}

.headerfield  {
    border: 1px solid #FFF;
    vertical-align:middle;
    
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    color: #666666;
    padding: .25em;
    padding-right: 2em;
    margin: 0em 1em 0 0;
}

.headerfilterfield  {
    border: 1px solid #FFF;
    vertical-align:middle;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    color: #666666;
    padding: .25em;
    margin: 0em 1em 0 0;
}

.searchfield {
    background-image: url(../images/icon-search.png);
}

.searchbutton {
    background-image: url(../images/icon-search-white.png);
	background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
	padding-right: 30px;
}

.searchlist {
	border: 1px solid #DBDBDB;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
	height: 120px;
}

.searchlist div {
	padding: 4px 2px 4px 6px;
	cursor: pointer;

}

.importfield {
    background-image: url(../images/icon-import.png);
    background-position: right 2px;
    margin-right: 0;
}


.header:hover {
    border: 1px solid #FFF;
}

input:hover, select:hover, textarea:hover {
    border-color: #6BAFCB;
}

.gridHolder {
    background-color: #EDEDED;
}

.gridHolder table{
      width: 100%;
}

.gridHolder th{
      padding: 3px 6px 2px 0;
      background-color: #666;
      font-size: 14px;
      font-weight: 400;
      color: #FFF;
      text-align: left;
      border-bottom: 1px solid #CCC;
}

.gridHolder th:first-child {
      padding-left: 4px;
}

.gridHolder td {
      padding: 3px 6px 2px 0;
}
.gridHolder td {
      vertical-align: text-top;
      font-size: 13px;
}
.alt td{
      background-image: url(../Images/overlays/white-alpha75.png);
}

.altcolored td{
      background-image: url(../Images/overlays/white-alpha25.png);
}

.gridHolder .icon img {
      margin-top: 0px;
}

.gridHolder .tools input {
      margin-top: 1px;
      margin-left: 2px;
}
.gridHolder td:first-child {
      padding-left: 3px;
}

.gridHolder th a
{
	color: #FFF;
    text-decoration: none;
}
.gridHolder th a:hover
{
	color: #F9F9F9;
}

.windowPaging > td  {
	background-color: #D7D7D7;
	border-top: 1px solid #CCC;
	overflow: auto;
	color: #404040;
	text-align: right;
}

.windowPaging td table {
	width: auto;
	float: right;
}

.windowPaging td
{
	padding: 0px;
}

.windowPaging td table td
{
	width: 18px;
}

.windowPaging td table a, .windowPaging td table span {
	display:block;
	padding: 1px;
	margin: 0 2px;
	text-decoration:none;
	color: #808080;
	text-align: center;
	font-size: 11px;
}

.windowPaging td table a:hover{
	background-image:url(../graphics/overlays/white-alpha50.png);
}

.windowPaging td table span {
	background-image:url(../graphics/overlays/white-alpha75.png);
}

.listholder {
    background-color: #EDEDED;
}


.listitem{
      background-image: url(../Images/overlays/white-alpha50.png);
}

.listitemalt{
      background-image: url(../Images/overlays/white-alpha25.png);
}

.listitem, .listitemalt {
    padding: 3px;
    border-bottom: 1px solid #FFF;
}

.listitemremarks {
    background-color: #fff;
    padding: 4px 0px 10px 10px;
}


.popupholder label {
    color: #6BAFCB;
    font-size: 1.25em;
}

/* login window */

.loginholder {
    position: fixed;
    width: 400px;
    height: 235px;
    top: 50%;
    left: 50%;
    margin-top: -120px;
    margin-left: -200px;

}

.loginholder .contentwindow {
    padding-bottom: 1em;
}

.loginholder .formfieldholder {
    margin-left: -2px;   
}
.loginholder .formfieldholder:nth-child(2) {
    margin-bottom: 0.75em;
}

.loginholder .formfieldholder label {
    color: #6BAFCB;
    font-size: 1.25em;
}

.loginholder .formfieldholder input {
    font-size: 1.5em;
    margin-top: 4px;
}


@media (max-width: 959px)and (orientation:portrait){

    .loginholder {
        position: static;
        width: 100%;
        height: auto;
        top: auto;
        left: auto;
        margin: 0;
    }
    
    .loginholder .formfieldholder input {
        width: 94%;
        
    }

    .loginholder .btn {
        font-size: 1.25em;
    }

    .loginholder .msg{
        display: block;
        margin-top: 1em;

    }
}


/* thumbnails */

.thumbholder {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 138px;
}

.thumb {
    display:inline-block;
    margin: 0 .5em .5em 0;
}

.thumbholder a {
    display: block;
    border: 1px solid #CCCCCC;
}

.thumbholder a:hover {
    border: 1px solid #6BAFCB;
}

.thumbholder img {
    background-color: #f2f2f2;
    vertical-align:middle;
}

.thumbdelactivate {
    float: right;
    color: #D00 !important;
    font-size: .75em;
    text-decoration:none;
    cursor: pointer;
}

.thumbdelete, .thumbdelete:visited {
    padding: 4px 2px;
    background-color: #D00;
    border: 1px solid #D00;
    color: #FFF;
    font-size: .8em;
    text-align: center;
    text-decoration: none;
}

.thumbdelete:hover {
    background-color: #e66161;
    border: 1px solid #D00 !important;
}

.borderred {
    border: 1px solid #D00;
}


/* Upload */

.upload {
    width: auto;
}

.uploadholder {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    width: 60px;
    height: 60px;
    background-color: #6BAFCB;
    border: 1px solid #6BAFCB;
    background-image: url(../images/icon-add.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.uploadholder:hover {
    background-color: #9EC5DA;
    border: 1px solid #6BAFCB;
}

.uploadholder input {
    display: block !important;
    width: 60px !important;
    height: 60px !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

.uploadholder span {
    position: absolute;
    left: 25px;
    top: 2px;
    color: #FFF;
}


/* mobile */


.mainmenutool {
    display: none;
    text-align: center;
    
}

.btntogglemenu {
    background-color: #585858;
    color: #FFFFFF;
    padding: 2px 2px 2px 2px;
    overflow: visible;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-bottomright: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}


@media (min-device-width : 321px)
and (max-device-width : 568px)
and (orientation : landscape){
    .windowholder {
        max-width: 568px;
    } 
    .mobilefield, .mobileselect, .mobilefieldwide {
        margin-bottom: 4px;
        margin-right: 0;
        width: 125px;
    }
    .mobilefieldwide {
        width: 438px;
    }
    .mobileselect{
        padding: 3px 0 2px 0;
    }
    .btnhead {
        margin-left: 0;
        margin-bottom: 4px;
    }
    .gridHolder table tr td{
        font-size: 11px;
        padding: 6px 2px;   
    }
}
 
@media (max-width: 320px) and (orientation:portrait){
    .windowholder {
        max-width: 568px;
    }
    .mobilefield, .mobileselect, .mobilefieldwide {
        margin-bottom: 4px;
        width: 180px;
    } 
    .gridHolder table tr *:nth-child(3){
        display: none;
    }  
    .gridHolder table tr td{
        font-size: 11px;
        padding: 6px 2px;
    }
}



/*
    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;}
#cboxWrapper {max-width:none;}
#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; padding:0; margin: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:#fff;}
#colorbox{outline:0;}
    #cboxContent{margin-top:32px; overflow:visible; background:#FFF;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#000; padding:1px; margin-bottom: 30px;}
        #cboxLoadingGraphic{background:url(/Images/cbloading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}

        /* 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; bottom:-10px; right:42px; color:#666;} */
        #cboxPrevious{position:absolute; bottom:2px; left:-4px; color:#666;}
        #cboxNext{position:absolute; bottom:2px; right:0px; color:#666;}
        #cboxClose{position:absolute; top:-28px; right:0; display:block; color:#666;}