body
{
     margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;    
    font-size:12px;
    font-family: 'Segoe UI',  Verdana;
    color: #232323;
    background-color:#3c444f;
}

header,
footer,
nav,
section {
    display: block;
}

.center
{
margin:auto;
width:100%;
}

.chromeCenterParent {
    width: 500px;
    height: 50%;
    font-size: 16px;
    text-align:center;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

/********* START: SITE LAYOUT *********/

#nav{
    
      position:fixed;
    top:0;
    width:100%;
    height: 30px;
   background: url('../img/btnBar.png') repeat-x center;
    z-index:99999;
    
    
}

#navLeftSide
{
     position:relative;
    height:100%;
    float:left;    
}

#navRemainingSection
{
    height:100%;
    overflow:hidden;
}

#navTextHeader
{
    width:100%;
    height:100%;
    text-align:center;
    line-height:100%;
    vertical-align:central;
    margin-top:7px;
    font-size:12pt;
    color:#dbf1ff;   
    margin-left:-50px;
}


#navRightSide
{
    position:absolute;
    right:3px;
    top:2px;
    height:100%;     
    color:white;  
}

#LogoHome
{
    margin-left:auto;
    margin-right:auto;
    height:25px;
    margin-top:7px;
    width: 100px;
}

#Logo
{
     float: left;
    margin-left:7px;
    height:25px;
    margin-top:2px;
}

#logoImg
{
    border-style: hidden;
    border-width:0px;
   height:25px;   
}

#btnBar
{
    position:fixed;
    bottom:0;
    width:100%;
    height: 60px;
    background: url('../img/btnBar.png') repeat-x center;
    z-index:99999;
}

#middleSection
{
    position:absolute;
    top:30px;
    bottom:60px;
    width:100%; 
        
}

#sideMenu  
{
    position:relative;
    width:200px;
    height:100%;
    float:left;    
    background-color:#3c444f;    
    overflow:auto;
}

#contentSection
{           
    height:100%;                
    overflow:auto;       
}

#homeContentSection
{
    position:absolute;
    top:50px;
    bottom:50px;
    width:100%;
}

#homeTopBar{
    position:fixed;
    top:0;
    width:100%;
    height: 40px;
    background: url('../img/btnBar.png') repeat-x center;
    z-index:99999;
}

#homeBottomBar{
    position:absolute;
    bottom:0;
    width:100%;
    height: 50px;
    background: url('../img/btnBar.png') repeat-x center;
    z-index:99999;
}

#menuButton 
{
  float:left;
  text-decoration:none;
  background: url('../img/menuBtn.png');
  width:22px;
  height:22px;
  margin-left:5px;
  margin-top:3px;
  cursor: pointer;
   border-style: hidden;
}

#largeTitle
{
    font-weight: bold;
    font-size: large;
}

/********* END: SITE LAYOUT *********/

.jspTrack
{
    background: #fff url(/path/to/image.png) repeat-y 5px 0;
}
	
.jspVerticalBar .jspTrack
{
    width: 5px;
    background: #c4c4c4;
}
.jspVerticalBar .jspDrag
{
    margin: 0 -2px;
    width: 10px;
    background: #363636
}

/********* START: SIDE MENU LAYOUT *********/

.menu_div
{
	padding:0px;
	margin:0px;
}

.menu_div .mnuHeader
{  
     background: url('../img/menuSectionHeader.png') repeat-x center;
    border-bottom:1px solid #333;    
    height:23px;
    color:White;
    text-indent:5px;
}
.mnuHeader img
{
    height:16px;
    width:16px;
   top:3px;
   position:relative;   
}
.mnuHeader span
{
  margin-left:5px;
}

.menu_div .mnuItem
{
     background-color:#3c444f;
    border-bottom:1px solid #333;   
   height:26px;
    color:White;
    text-indent:10px;
}
.mnuItem img
{
    height:18px;
    width:18px;
   top:4px;
   position:relative;      
    border-style: hidden;
    border-width:0px;
}
.mnuItem span
{
  margin-left:5px;
}

.menu_div a
{
	text-decoration:none;
	display:block;
}

/********* END: SIDE MENU LAYOUT *********/

/*********TAB BUTTON BAR*****************/

.TabButtonBar
{
    height:60px;
    width:100%;
    border-radius: 10px 10px 10px 10px;
	border-style: solid;
	border-width: 1px;
}

.TabButtonBarSection
{
    padding:0px;	   
    margin-left:auto;
    margin-right:auto;    
    height:100%;
    display:table;
}


.TabButtonBarSection button
{
	text-decoration:none;
    float:left;
    width:100px;
    height:60px;
    cursor:pointer;
    background-color:transparent;
    border-style:none;
    border:0px none transparent;
}


.TabButtonBarSection button:hover
{
	background-color:#505861;
}

.TabButtonBarSection img
{
    display:block;
    margin:0px auto 0 auto;
}

.TabButtonBarSection span
{
     display:block;
      text-align:center;    
      margin-top:7px;
      font-size:7pt;   
      color:white;
}

/********* START: BUTTON BAR LAYOUT *********/
#buttonBar_Section
{
    padding:0px;	   
    margin-left:auto;
    margin-right:auto;    
    height:100%;
    display:table;
}

#buttonBar_Section button
{
	text-decoration:none;
    float:left;
    width:100px;
    height:60px;
    cursor:pointer;
    background-color:transparent;
    border-style:none;
    border:0px none transparent;
}

#buttonBar_Section button:hover
{
	background-color:#505861;
}

#buttonBar_Section img
{
    display:block;
    margin:0px auto 0 auto;
}

#buttonBar_Section span
{
     display:block;
      text-align:center;    
      margin-top:7px;
      font-size:7pt;   
      color:white;
}

.buttonBar_Section_Holder
{
    padding:0px;	   
    margin-left:auto;
    margin-right:auto;    
    height:100%;
    display:table;
}

.buttonBar_Section_Holder button
{
	text-decoration:none;
    float:left;
    width:100px;
    height:60px;
    cursor:pointer;
    background-color:transparent;
    border-style:none;
    border:0px none transparent;
}

.buttonBar_Section_Holder button:hover
{
	background-color:#505861;
}

.buttonBar_Section_Holder img
{
    display:block;
    margin:0px auto 0 auto;
}

.buttonBar_Section_Holder span
{
     display:block;
      text-align:center;    
      margin-top:7px;
      font-size:7pt;   
      color:white;
}

/********* END: BUTTON BAR LAYOUT *********/


/********* START: AT A GLANCE LAYOUT *********/
.AtAGlanceSection
{
    width:50%;
    height:50%;
    float:left;
}
/********* END: AT A GLANCE LAYOUT *********/

.btnBar_Holder_Window
{
    position:absolute;
    bottom:0px;
    width:100%; 
    height:60px;    
    background: url('../img/btnBar.png') repeat-x center;
    z-index:99999;
}


.k-window .k-window-content {
   padding:0px 0px 0px 0px;
   
}

/*RANGES SECTION*/


.floatingWindow_middleSection
{
    position:absolute;
    top:5px;
    bottom:60px;
    right:10px;
    left: 10px;    
}

/****LAYOUT PROPERTIES******/
.formStandardColumn
{
    width:450px;
    margin-top:3px;
    margin-bottom:3px;
    margin-left:3px;
    float:left;
}

.tabContent
{
   margin-right:10px;
}

.tableDisplay
{
    display:table;
    width:100%;
    height:100%
}

.formRow {display:table;width:100%;height:25px;margin-bottom:3px;}

.width_fix{
  display:table-cell;
  vertical-align:middle; 
  padding-right:5px;
}
.width_auto{
  width: auto;
  display:table-cell;
  vertical-align:middle;  
   padding-right:3px;    
}

.formRow input,label
{
    width:100%;     
 }

.formRow label
{
    display: block;
    text-align: right;  
}

.sectionHeader
{
    text-align:left !important;
    /*text-align:center !important;*/    
    font-size:12pt;
    font-weight:bold;
    margin-left:10px;    
}

.sectionSubHeader
{
    text-align:left !important;    
    font-size:9pt;
    
}
.reallyShortTextBox
{
    max-width:50px;
}

.shortTextBox
{
    max-width:150px;
}

.mediumTextBox
{
    max-width:300px;
}
.mediumComboBox
{
    width:100% !important;
    max-width:300px;
}

/******   DETAILS STYLZ  ******/
.textOnDarkBackground
{
   /*color:white;*/
}

.DetailsSection
{
    overflow:hidden;
}

/******  END - DETAILS STYLZ  ******/


/******   HOME PAGE STYLZ  ******/
    .ParentHolder
    {
        width:100%;
        height:100%;
        overflow:auto;
        
    }

    .HomePageContent
    {
        width:400px;margin-left:auto;margin-right:auto;margin-top:5px;
        color:white;
        font-size:11pt;                      
    }
    
/******  END - HOME PAGE STYLZ  ******/


/******   Vehicle AVAILABILITY STYLZ  ******/

.Seperator
{
    display: block;
    float: left;
    width: 100%;
    border-bottom-style: dotted;
    border-bottom-color: black;
    border-bottom-width: 0px;
    margin-bottom: 5px;
    padding-bottom: 0px;
}

.vehicleAvailableBar
{
    background-color:white;
    border-radius: 5px;
    border-style: solid;
    border-color:black;
    border-width: 2px;
    padding: 3px 0px 3px 7px;
}


.imgRulerTimeSelector
{
    height:11px;
    width:436px;
    margin-left:-1px;
    margin-bottom:-3px;
}


.imgRulerTimeSelectorAvail
{
    height:11px;
    width:436px;
    margin-left:-1px;
}

.buttonsSelectSlider .ui-selecting { background: #75d4fc; }
	.buttonsSelectSlider .ui-selected { background: #649bb6; color: white; }	


    
.timeSelectButton
{
 float:left;width:8px;height:30px;border-left:1px;border-right:0px;border-top:1px;border-bottom:1px;border-style:solid;border-color:black;   
}

.timeSelectButtonLeftEndSide
{
 border-left:1px;border-right:0px;border-top:1px;border-bottom:1px;border-style:solid;border-color:black;   
}

.timeSelectButtonMiddle
{
 border-left:1px;border-right:0px;border-top:1px;border-bottom:1px;border-style:solid;border-color:black;border-left-style:dotted;border-left-color:Gray;   
}

.timeSelectButtonRightEndSide
{
 border-left:1px;border-right:0px;border-top:1px;border-bottom:1px;border-style:solid;border-color:black;
}

.timeSelectButtonRightEndFinishSide
{
 border-right:1px;border-top:1px;border-bottom:1px;border-style:solid;border-color:black;border-left:1px;border-left-style:dotted;border-left-color:Gray;
}


.bookingBtn
{
    border:0px;
    width:100%;
    height:100%;
}

.btnAvailable
{
    background-color:#c8efff;
}
.btnAvailable:hover {
 background-color:#75d4fc;
 cursor: pointer; /* cursor: hand; for IE5 */

}
/******  END - HOME PAGE STYLZ  ******/
.metrobutton_Section
{
    padding:0px;	   
    margin-left:auto;
    margin-right:auto;    
    height:100%;
    width:100%;
    display:table;
}

.metrobutton_Section button
{
	text-decoration:none;
    float:left;
    width:180px;
    height:180px;
    cursor:pointer;
    background-color:transparent;
    border-style:none;
    border:0px none transparent;
}

.metrobutton_Section button:hover
{
	background-color:#505861;
}

.metrobutton_Section img
{
    display:block;
    margin:0px auto 0 auto;
}

.metrobutton_Section span
{
     display:block;
      text-align:center;    
      margin-top:7px;
      font-size:10pt;   
      color:white;
}

.metrobutton_SectionMobile
{
    padding:0px;	   
    margin-left:auto;
    margin-right:auto;    
    height:100%;
    width:100%;
    display:table;
}

.metrobutton_SectionMobile button
{
	text-decoration:none;
    float:left;
    width:140px;
    height:140px;
    cursor:pointer;
    background-color:transparent;
    border-style:none;
    border:0px none transparent;
}

.metrobutton_SectionMobile button:hover
{
	background-color:#505861;
}

.metrobutton_SectionMobile img
{
    margin:0px auto 0 auto;
    height:80px;
    width:80px;
}

.metrobutton_SectionMobile span
{
     display:block;
      text-align:center;    
      margin-top:3px;
      font-size:8pt;   
      color:white;
}

.metrobutton_SectionMini
{
    padding:0px;	   
    margin-left:auto;
    margin-right:auto;    
    height:100%;
    width:100%;
    display:table;
}

.metrobutton_SectionMini button
{
	text-decoration:none;
    float:left;
    width:127px;
    height:127px;
    cursor:pointer;
    background-color:transparent;
    border-style:none;
    border:0px none transparent;
}

.metrobutton_SectionMini button:hover
{
	background-color:#505861;
}

.metrobutton_SectionMini img
{
    margin:0px auto 0 auto;
    height:75px;
    width:75px;
}

.metrobutton_SectionMini span
{
     display:block;
      text-align:center;    
      margin-top:5px;
      font-size:10pt;   
      color:white;
}


/******   BoltWorld Panel STYLZ  ******/

.rotatingWrapper
{
    position:absolute;
    width:188px;
    height:188px;
}


input[disabled]
{
    background-color:#f1f1f1 !important;
}


/******   Booking STYLZ   ******/
.bLocationToolbar
{
    margin: 5px 5px 5px 5px;
}

#floater {
	position:relative; float:left;
	height:50%;	margin-bottom:-275px;
	width:1px;
}
 
#centered {
	position:relative; clear:left;
	height:550px; width:80%; max-width:810px; min-width:810px;
	margin:0 auto;
	background:rgba(0,0,0,0.15);
	border:4px solid #666;
}


/********** Module Selector Style  ****************/
.moduleSelectText {
    margin-left:auto;margin-right:auto;width:350px;margin-top:5px;font-size:10pt;margin-bottom:5px;
}
.product
        {
        	float: left;
        	width: 360px;
        	height: 110px;
        	margin: 5px;
        	padding: 5px;
        	-moz-box-shadow: inset 0 0 30px rgba(0,0,0,0.15);
            -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,0.15);
            box-shadow: inset 0 0 30px rgba(0,0,0,0.15);
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            border-radius: 15px;
            background-image: none;            
            cursor: pointer;            
        }
        .product img
        {
        	float: left;
        	width: 110px;
        	height: 110px;
        	-webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
        }
        .product h3
        {
        	margin: 5px 5px 5px 15px;                    	
        	font-size: 1em;
        	float: left;
        	max-width: 220px;        	
        }
        /*.k-state-selected h3
        {
        	color: #fff;
        	background-color: rgba(0,0,0,0.4);
        	-moz-box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
            -webkit-box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
            box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
            -moz-border-radius-topright: 5px;
            -moz-border-radius-bottomright: 5px;
            -webkit-border-top-right-radius: 5px;
            -webkit-border-bottom-right-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }*/
         .product p
        {
        	margin: 5px 5px 5px 15px;
        	font-size: 1em;
        	float: left;
        	max-width: 220px;                                 	
        }

        .k-listview:after
        {
        	content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .k-listview
        {
        	border: 0 !important;            
        	padding: 0 0 20px 0;
        	min-width: 0;
        }

/*LOADING BAR*/
.bar {
    /* Size and position */
    font-size: 20px; /* 1em */
    width: 11em;
    height: 50%;
    /*position: relative;*/
    /*margin: 100px auto;*/
 
    /* Styles */
    border-radius: .5em; /* Height/2 */
    background: white; /* Fallback */
    background: rgba(255,255,255,0.6);
    box-shadow: 
        0 0 0 .05em rgba(100,100,100,0.075), /* Subtle border */
        0 0 0 .25em rgba(0,0,0,0.1),           /* Outter border */
        inset 0 .1em .05em rgba(0,0,0,0.1),   /* Inset shadow */
        0 .05em rgba(255,255,255,0.7);     /* Slight reflection */
}

.sphere {
    /* Size */
    display: block;
    width: .9em;
    height: 100%;
     
    /* Styles */
    border-radius: 50%;
    background: linear-gradient(#eee, #ddd);
    box-shadow:
        inset 0 .15em .1em rgba(255,255,255,0.3), /* Top light */
        inset 0 -.1em .15em rgba(0,0,0,0.15),      /* Bottom shadow */
        0 0 .25em rgba(0,0,0,0.3);             /* Outter shadow */
 
    /* Animation */
    -webkit-animation: move 1.75s ease-in-out infinite alternate;
    animation: move 1.75s ease-in-out infinite alternate;
}

@keyframes move {
    to { margin-left: 90%; }
}

@-webkit-keyframes move {
    to { margin-left: 90%; }
}

.chromeCenterParent {
    width: 500px;
    height: 50%;
    font-size: 16px;
    text-align:center;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}