/*************************************
   WELCOME TO THE CUSTOM STYLESHEET
--------------------------------------
              style.css
        BlueTrip CSS Framework
    Put your custom styles in here.
***************************************/

/**************************************/
/*           COLOR SCHEME             */
/**************************************
- black		#000
- white		#fff
-           #
-           #
-           #
***************************************/
@import url("kandytabs.css");

/**************************************/
/*              GLOBALS               */
/**************************************/


/**************************************/
/*              HEADER                */
/**************************************/
body{ margin:0; background:#dee3e5 url(../images/pagebg.png) repeat-y left top;}
.page_body { margin:0; background-color:#dee3e5; background-image: none;}
header.body{ height:43px; background-color:#0055a4;}

header.body H1{ margin:0;}
header.body H1 a.title{ display:block; background: url(/content/Images/headertitle.png) no-repeat 3px 3px; text-indent:-1000em; height:30px; width:340px; float:left;}
header.body H1 span.logo{ display:block; float:right; height:100px; width:660px; background:url(../Images/headlogo.png) no-repeat right top;}
header.body nav{ float:right; margin-right:-450px; }
header.body nav li{ float:left; list-style:none;}
header.body nav li a{ color:#fff; display:block; padding:10px 10px; list-style:none; text-decoration:none; font-weight:bold;}

.body{ height:43px; background-color:#0055a4;}
.body H1{ margin:0;}
.body H1 a.title{ display:block; background: url(/content/Images/headertitle.png) no-repeat 3px 3px; text-indent:-1000em; height:40px; width:340px; float:left;}
.body H1 span.logo{ display:block; float:right; height:100px; width:660px; background:url(../Images/headlogo.png) no-repeat right top;}

@media only screen and (device-width: 768px) {
	header.body { width: 100%; }
	header.body H1 { min-width: 1180px; }
	.h1top { min-width: 1550px !important; }
	.cnttop { min-width: 1350px !important; }
}

@media only screen and (max-device-width: 480px) {
	header.body { width: 100%; }
	header.body H1 { min-width: 1180px; }
	.h1top { min-width: 1550px !important; }
	.cnttop { min-width: 1350px !important; }
}

 
/**************************************/
/*             NAVIGATION             */
/**************************************/
#buttonBar a{ display:block; height:60px; color:#333; font-size:16px; line-height:60px; }
.active > a, .active > a:hover { background-color:#dee3e5;   
  -webkit-box-shadow: -6px 0px 6px 0px #7d878b; -moz-box-shadow: -6px 0px 6px 0px #7d878b;
box-shadow: -6px 0px 6px 0px #7d878b; margin-left:8px; border-radius:10px 0 0 10px; padding-left:15px; margin-right:-2px; }
/*#buttonBar .active:hover ul{ display:none;}*/
#buttonBar li{ position:relative;}
#buttonBar li ul{ display:none;  background:#b9c0c2; padding:5px; width:auto; white-space:nowrap;}
#buttonBar li:hover ul{ display:block; position:absolute; left:180px; top:0; }
#buttonBar li ul li a{ height:20px; line-height:20px; font-size:12px; padding:5px 10px; border-bottom:1px solid #919c9f;}
#buttonBar li ul li:last-child a{ border-bottom-width:0px;}
#buttonBar li  a:hover{ background:#919c9f;}

#quickBar li{ list-style:none; float:left;}
#quickBar li input{ float:left; display:inline-block; outline:3px solid #c2c9cb; margin:3px 6px 3px 3px;  border-radius:3px;}
#quickBar li input:focus{outline:3px solid #ffae00;}
#quickBar .pagebtn{ display:none;}

/*
body.Jobs #quickBar  button.Jobs,
body.User #quickBar  button.User,
body.Companies #quickBar  button.Companies,
body.Customers #quickBar  button.Customers,
body.Franchisees #quickBar  button.Franchisees,
body.Report #quickBar  button.Report,
body.Report #quickBar  button.addmore span ,
body.Report #quickBar  button.searchmore span,
body.Admin #quickBar  button.searchmore span,
body.Admin #quickBar  button.addmore span ,
body.Stock #quickBar  button.Stock { display:inline-block;}


#quickBar  button span{ display:none;}
*/

/*button:active,a.button:active,input.button:active{ background-color:#0055a4;}*/
/**************************************/
/*            MAIN CONTENT            */
/**************************************/
.frame{ border-radius:10px; background-color:#fff; min-height:500px; margin:5px 10px 5px 5px; padding:5px 10px;   -webkit-box-shadow: -2px 0px 4px 0px #b8bfc1;
-moz-box-shadow: -2px 0px 4px 0px #b8bfc1;
box-shadow: -2px 0px 4px 0px #b8bfc1;}
.sublinks a{ float:right; margin-right:20px; text-decoration:none; color:#222;}

/**************************************/
/*               FOOTER               */
/**************************************/

/**************************************/
/*               iconlist             */
/**************************************/

.icon{ background:url(../images/icon.png) no-repeat; width:24px; height:25px;  vertical-align:middle; margin-right:5px; display:inline-block; }
.iconlist .icon{ background:url(../images/icon.png) no-repeat; width:50px; height:50px;  vertical-align:middle; margin-right:10px; display:inline-block; }

.user .icon{background-position:0 0px;}
.setting .icon{background-position:-24px 0px;}
.overview .icon{background-position:-70px 0px;}
.my .icon{background-position:-94px 0px;}

.m0 .icon{ background-position:0 -80px; }
.m1 .icon{ background-position:0 -80px; }
.m2 .icon{ background-position:0 -150px; }
.m3 .icon{ background-position:0 -220px; }
.m4 .icon{ background-position:0 -290px; }
.m5 .icon{ background-position:0 -360px; }
.m6 .icon{ background-position:0 -430px; }
.m7 .icon{ background-position:0 -150px; }
.m8 .icon{ background-position:0 -150px; }
.m9 .icon{ background-position:0 -150px; }
.m10 .icon{ background-position:0 -360px; }
.m11 .icon{ background-position:0 -360px; }

.active .m0 .icon{ background-position:-60px -80px; }
.active .m1 .icon{ background-position:-60px -80px; }
.active .m2 .icon{ background-position:-60px -150px; }
.active .m3 .icon{ background-position:-60px -220px; }
.active .m4 .icon{ background-position:-60px -290px; }
.active .m5 .icon{ background-position:-60px -360px; }
.active .m6 .icon{ background-position:-60px -430px; }
.active .m7 .icon{ background-position:-60px -150px; }
.active .m8 .icon{ background-position:-60px -150px; }
.active .m9 .icon{ background-position:-60px -150px; }
.active .m10 .icon{ background-position:-60px -360px; }
.active .m11 .icon{ background-position:-60px -360px; }

.red { color: #EA2F2F; }

.page_cnt { width: 1280px; margin: 0 auto; }

 /* Bubble pop-up */
        .bubbleInfo,.sub 
        {
        	z-index: 100;
            position: relative; 
        }
        .trigger {
            position: absolute;
        }
        .arr{  height:10px; width:100%; margin-top:-13px; text-align:center; }
        .arr div{border-radius:20px;background-color:#b9c0c2; height:20px; width:20px; margin:0 auto;}
        .sublist {
                position: absolute;
                display: none;
                z-index: 10000;
                border-collapse: collapse;
				width:160px;
				border:3px solid #b9c0c2; border-top-width:6px; border-radius:5px;
        }
		
		.popup {
                position: absolute;
                display: none;
                z-index: 49;
                border-collapse: collapse;
				width:160px;
				border:3px solid #b9c0c2; border-top-width:6px; border-radius:5px;
        }
		.popup button{ width:100%; margin:0; border-radius:0; background-color:#fff; border-width:0 0 1px 0; text-align:left; padding-left:24px;}