html{font-size:62.5%;}
body
{
    /*margin:0px 150px;*/
    margin:0;
    padding:0;
    text-align:center;
    font-family: Arial,Tahoma, Verdana, Helvetica, sans-serif;
    background: #fff;
    font-size:1.4rem;
    color:#777;
}
#wrapper
{
    text-align:left;
    /*border:1px solid #ccc;*/
    /*width:1100px;*/
    width: 99%;
    background: #fff;
    margin:0 auto 5px auto;
}
article{padding: 0 5px;}
/*##################### GENERAL STYLES #####################*/
.centered{text-align:center}
.darkBg{background: #ddd;}
.darkBlueBg{background: #336;color:#fff;}
.half-width{width:60%;}
@media only screen and (max-width: 600px) {.half-width{width: 100%;}}
div.dataBg{border: 1px solid #ddd;padding:2px; background: #eee;}
.pads{padding:5px;}
.whiteBg{background-color: #fff;}
.boldTxt{font-weight:bold;}
.redText{color: #f00;font-weight:bold;}
.greenText{color: #3BBF5C;font-weight:bold;}
.hide{display: none;}
.errorButton,.okButton
{
    background: transparent url('../images/error.png') no-repeat left;
    padding:10px 5px 10px 40px;
    /*display: inline-block;*/
}
.okButton{background: transparent url('../images/ok.png') no-repeat left;}
.clearFix{clear:both;}
a.inputStyle{border:3px double #333;background:#ece9db; padding:1px 4px; text-decoration:none; color:#760000;font-weight:bold;}
.errorMessage{border:2px solid #f00;text-align:center; width:50%; padding:4px; margin: 10px auto;}
.message{border:2px solid #00f;text-align:center;width:70%;padding:4px; margin: 10px auto;}
h3.errorMessage{border:2px solid #f00;padding:5px 5px 5px 40px; background: transparent url('../images/error.png') no-repeat left;}
h2.leftAlign,h3.leftAlign{text-align: left;}
.bottomMargin{margin-bottom: 10px;}
p.dbErrors{font-size: 1.0rem;}
p.half-width{width:60%; margin: 10px auto;}
em.reducedFonts{font-size: 1.0rem;font-weight: normal;}
.invisible,.unregistered_users{display: none;}
.visible{display: inline-block;}
.rowBgOne{background: #dfdfdf;}
.rowBgTwo{background: #eee;}
.rightAligned{text-align: right; margin-right: 10px;}
div.darkBg,div.whiteBg{background: #ddd; padding: 4px;}
div.whiteBg{background: #fff;}
.button,a.logout_button
{
   -webkit-border-radius: 3px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
   -moz-border-radius: 3px; /* FF1-3.6 */
   border-radius: 3px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
  /* useful if you don't want a bg color from leaking outside the border: */
  -webkit-background-clip: padding-box; 
   background-clip: padding-box;
   border: 1px solid #069;
/*   -webkit-box-shadow: 0px 0px 4px 0px #000;  Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ 
   -moz-box-shadow: 0px 0px 4px 0px #000;  FF3.5 - 3.6 
   box-shadow: 0px 0px 4px 0px #000;  Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
   /*background-color:#005b1d;*/
   background-color:#39c;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#09f), to(#39c)); /* Saf4+, Chrome */
   background-image: -webkit-linear-gradient(top, #09f, #39c); /* Chrome 10+, Saf5.1+, iOS 5+ */
   background-image: -moz-linear-gradient(top, #09f, #39c); /* FF3.6 */
   background-image: -ms-linear-gradient(top, #09f, #39c); /* IE10 */
   background-image: -o-linear-gradient(top, #09f, #39c); /* Opera 11.10+ */
   background-image: linear-gradient(to bottom, #09f, #39c);       
   color:#fff;
   padding: 5px 15px;
   cursor:pointer;
   font-weight: normal;
}
a.button{text-decoration: none;}
img.responsive{max-width: 100%; height: auto;}

div.table-wrap{overflow: auto; width:100%;}
table.fullWidth{width:100%;}
table{font-size: 1.3rem; color:#555;}
table tr.greenBg{background:#222;color:#fff;}
table caption{font-weight:bold;margin:10px 0;}
table.hoverBg tbody tr:hover,.rowActive{background:#0f0;}
table.hoverBg tbody tr.noBg:hover{background:none} 
table thead tr{background: #aaa;color:#fff;}
table thead tr th{padding: 10px 3px;}
table tbody tr td{padding: 8px 3px;}
table tr#rowActive{background:#0f0;}

table.col1{width: 60%;}
table.col1 label{display: block; margin-bottom: 5px; font-weight: bold;}
table.col1 caption{font-weight: bold; font-size:1.4rem; border-bottom: 1px solid #ddd; text-align: left;}
table.col1 td{width: 100%;}

@media only screen and (max-width: 600px) {
    table.col1{width: 100%;}
}
h1{font-size: 1.8rem; color: #2FA8EC}
h2{font-size: 1.6rem; color: #2FA8EC}
h3{font-size: 1.4rem; color: #2FA8EC}
h4{font-size: 1.4rem; color: #2FA8EC}
.button-margins{margin: 20px 0;}
.confirm-dialog-border{display:none;}

/*###################### FORMS GENERAL ############################*/
form.form-pads{padding-left: 10px;}
form input.error,form textarea.error,form select.error{border: 1px solid #f00;}
form select{width: 50%; height: 25px; padding: 5px;}

form fieldset,fieldset{border: 1px solid #ddd; margin-bottom: 10px;}
form legend,fieldset legend{font-weight:bold;font-size: 1.4rem;}
form table.col1,form table.col2{width: 100%;}
form table.col1 td{width: 100%;}
form table.col1 input{width: 70%;}
form table.col1 textarea{width: 70%; min-height: 50px;}
form table.col1 label{display: block; margin-bottom: 5px; margin-top: 10px; font-weight: bold;}
form table.col1 label.first{margin-top: 0;}
form table.col2 td{width:50%;}
form table.col2 td.label-wrap{width:40%;}
form table.col2 td.data-wrap {width:60%;}
form table.col2 td.data-wrap input{width: 80%;}
form label span,form table.col1 label span{font-weight: normal}
form table input{
    height: 25px;
    /*border-color: #333;*/
}
form p.submit-button-wrap{text-align: center;}
form p.submit-button-wrap span{margin-left: 10px;}
form table.col1 textarea.txt-editor{min-height: 100px;}

form input.small-width{width:30%; height: 25px;}
form input.medium-width{width:60%; height: 25px;}
form input.max-width{width:90%; height: 25px;}
form p.button-wrap{width: 70%; text-align: center;}

@media only screen and (max-width: 600px) {
    form table.col1 input{width: 100%;}
    form select{width: 90%;}
    form table.col1 textarea{width: 100%;}
    form fieldset,fieldset{padding: 5px 2px;}
    form input.small-width{width:40%;}
    form input.medium-width{width:80%;}
    form input.max-width{width:95%;}
    form p.button-wrap{width: 90%; text-align: center;}
}

form#filter-form label{display: block;margin-bottom: 5px; font-weight: bold;}
form#filter-form label span{font-weight: normal;}
form#filter-form select{width:30%;}
form#filter-form p.date-wrap input,form#filter-form p.pin-wrap input{width:30%; height: 25px;}
/*form#filter-form p.pin-wrap input{width:30%; height: 25px;}*/


/*##################### LOGIN PAGE #####################*/
#loginWrapper
{
    width:45%;
    background: #fff;
    margin:10% auto;
    text-align:left;
    border:1px solid #aaa;
    position:relative;
    font-size:1.2rem;
    padding:6px;
    color: #000;
}
#loginWrapper div.loginBg{background: #eee; padding: 4px; }
#loginWrapper #projectLogo{float:left;/*padding:5px 0 0 25px;*/ width:25%; margin: 5% auto 0 auto; text-align: center;}
#loginWrapper #projectLogo img{max-width: 100%; height: auto;}
#loginWrapper #login{float:right; border-left:1px dotted #fff; padding:0; margin-right:0; width: 70%;}
#loginWrapper h1,#loginWrapper h2{text-align:center}
#loginWrapper #adminLoginForm{padding:4px 4px 4px 20px;}
#loginWrapper form
{
    text-align:left;
    margin:0;
    padding:0;
}
#loginWrapper form label{display: block; margin-bottom: 5px; font-weight: bold; font-size: 1.3rem}
#loginWrapper form p{}
#loginWrapper .wrongInput
{
	border:1px solid #800;
	text-align:center;
	color:#800;
	font-weight:bold;
	margin:0 4px;
}
#loginWrapper form input#passwordTxt,#loginWrapper form input#usernameTxt
{
/*	margin-left:5px;
        width: 200px;*/
    width: 70%; 
    height: 30px;
    margin: 0;
            
}
#loginWrapper p.loginButtonWrap{width: 70%; text-align: center;}
#loginWrapper form input#loginButton{}

@media only screen and (max-width: 600px) {
    p.half-width{width:90%; margin: 0 auto;}
    
    #loginWrapper
    {
        width:90%;
        background: #fff;
        margin:1% auto;
        text-align:left;
        border:1px solid #aaa;
        position:relative;
        font-size:1.1rem;
        padding:6px;
        color: #000;
    }
    #loginWrapper h1{display: none;}
    #loginWrapper h2{margin-top: 0;}
    #loginWrapper #projectLogo{float:none; padding:5px; width:90%;text-align: center;}
    #loginWrapper #projectLogo img{margin-top: 0;}
    #loginWrapper #login{float:none; padding:0; margin:0 auto; width: 90%; border-left:none;}
    #loginWrapper form input#passwordTxt,#loginWrapper form input#usernameTxt
    {
    /*	margin-left:5px;
            width: 200px;*/
        width: 90%; 
        
    }
    #loginWrapper p.loginButtonWrap{width: 90%; text-align: center;}
}


/*############################# NAVI ######################*/
header
{
    margin:0 0 4px 0; 
    font-size:1.0rem; 
   /* background:#BDCB9A ; */
    background: #fff;
    padding:2px 5px 2px 5px;
    /*border-bottom: 2px double #eee;*/
}
header div.header-left{float:left;}
header div.header-right{float:right; background: #eee; padding: 5px;}
header div.header-left h1{margin:0;}
header div.header-left p{margin: 4px 0 0 25px;}
header div.header-right div.admin-info{float:left;}
header div.header-right div.admin-info p{margin: 5px 0;}
header div.header-right div.admin-info p.admin-name{margin: 0; font-size:1.2rem; font-weight: bold;}
header div.header-right p.logout-button-wrap{float:right; margin-left: 10px;}
header a.logout_button{padding: 10px 15px; text-decoration: none; font-size:1.5rem; font-weight: bold;}

div#main-navi{width:100%; font-size:1.3rem; position:relative; background:#2FA8EC; z-index: 10; padding: 5px 0;}

ul#menu,#menu li ul, div.bottomMenu ul 
{
    padding: 1px 0;
    margin: 0;
    list-style-type: none;
    float:left;
}
ul#menu > li,div.bottomMenu ul li{float:left;border-right:1px solid #ddd;}
#menu a,div.bottomMenu ul li a 
{
	display: block;
	padding: 4px 8px;
}
#menu > li > a{text-decoration:none; font-weight:bold;color:#fff; cursor: pointer;}
#menu > li > a.pointerActive{cursor: default;}
#menu > li > a:hover{background:#ccc;text-decoration: underline;}
#menu li ul
{
    position: absolute;
    width: auto;
    left: -999em;
    background:#ccc;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    font-weight: bold;
}
#menu li ul.minWidth 
{
    min-width: 180px;
    left: -999em;
    background:#ccc;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
}
#menu li ul li{border-bottom:1px dotted #fff;}
#menu li ul li a{color:#00f; text-decoration: none;}
#menu li ul li a:hover{background:#fff;}
#menu li:hover ul, #menu li ul:hover {left:auto;}
#menu li a.active{color:#333;background:#fff;}
ul#subMenu
{
	margin:0 0 5px 0;
	padding:4px 0 4px 4px;
	background:#ccc;
	font-size:1.0rem;
}
ul#subMenu li{display:inline;margin-right:5px;}
ul#subMenu li a{color:#333;font-weight:bold;}
div.bottomMenu{width:100%;border-bottom:1px solid #ccc;}
div.bottomMenu ul li{border-right:none;}
div.bottomMenu ul li a{padding: 4px 8px;color:#00f;font-weight:bold;}
div.bottomMenu ul li a:hover{background:#ccc;}

/**############### DASHBOARD ###################*/
ul.shortcuts{list-style-type: none; margin: 10px; padding: 0; float:left;}
ul.shortcuts li
{
    float: left;
    margin: 0 15px 10px 0;
    border: 5px solid #d3d3d3/*{borderColorDefault}*/;
     -webkit-border-radius: 3px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
   -moz-border-radius: 3px; /* FF1-3.6 */
    border-radius: 3px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
   /* useful if you don't want a bg color from leaking outside the border: */
   -webkit-background-clip: padding-box; 
   background-clip: padding-box;
   padding: 5px;
   cursor:default;
   font-weight: normal;
   text-align: center;
   -moz-box-shadow:    3px 3px 3px 2px #ccc;
    -webkit-box-shadow: 3px 3px 3px 2px #ccc;
    box-shadow:         3px 3px 3px 2px #ccc;
    background: #ccc;
}
ul.shortcuts li a{
    display: block;
    width: auto;
    height: auto;
    text-decoration: none;
    padding: 20px;
}
ul.shortcuts li a span{display: block;}

/*########## Dashboard Links ###################*/
ul#section-link{list-style-type: none; padding: 0; margin: 0 10px;}
ul#section-link li{text-align: left; margin: 0 0 5px 0;padding: 0px;}
ul#section-link > li{border:1px solid #ddd; cursor:pointer; position: relative; }
ul#section-link li h2{margin: 0; padding: 0; text-align: left;}
ul#section-link li h2 a{display: block; width: auto; padding: 5px 0 8px 5px; background: #eee;text-decoration: none; color:#00f;}
ul#section-link li.submenu{margin-bottom: 5px;}
ul#section-link li ul{list-style-type: none; margin-bottom: 0; margin-top: 0; }
ul#section-link li ul li{margin-bottom: 10px;}
.nav-right-arrow,.nav-down-arrow
{
    width:13px;
    height: 16px;
    background: transparent url('../images/navsprite.png') no-repeat 0 0;
    position: absolute;
    right:5px;
    top:5px;
 }
 
 /*########### HOME ###########################*/
 div.slider{width: 90%; margin: 0 auto;}
 ul.bxslider{list-style-type: none;margin: 0;padding: 0; position: relative;}
 .bx-wrapper {
    position: relative;
    margin: 0 auto 40px auto;
    padding: 0;
    *zoom: 1;
}

.bx-wrapper img {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

div.slider ul.bxslider li div.slider-text{
    position: absolute; 
    bottom: 5%;
    left: 2%;
    z-index: 2000;
    font-size: 2.0rem;
    color:#fff;
    font-family: Georgia;
}
div.slider ul.bxslider li div.slider-text p.slider-title{font-size: 8rem; font-weight: bold; margin-bottom: 0;}
div.slider ul.bxslider li div.slider-text p.slider-subtitle{font-size: 4rem; margin-top: 5px;}

/*################## CONTENT #####################*/
div#content{}

div.page-menu{background: #006699; margin-bottom: 10px; border-bottom: 1px solid #ddd;padding: 1px 0;}
div.page-menu ul{list-style-type: none; margin:0; padding: 0;}
div.page-menu ul li{float:left;border-right: 2px solid #fff;}
div.page-menu ul li a{display: block; padding: 6px 8px; color: #eee;font-weight: bold; text-decoration: none;}
div.page-menu ul li a:hover{background: #eee; color:#555;}

div.page-menu ul li ul{
    position: absolute;
    background:#eee;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    min-width:120px;
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow:         3px 3px 5px 6px #ccc;
    font-weight: bold;
    z-index: 10;
    left: -999em;
}

div.page-menu ul li ul li{margin-bottom: 0 ; border-bottom: 1px solid #fff; display: block;float:none;}
div.page-menu ul li ul li.last{border-bottom:none;}
div.page-menu ul li ul li a{display: block; padding: 5px 5px 5px 10px; border-right: none; color:#555;}
div.page-menu ul li ul li a:hover{background: #fff;}
div.page-menu ul li:hover ul{left:auto; margin-left: 0px;}

div.page-menu ul#horizontal-navi li ul{
    margin: 0;
    position: absolute;
    width: auto;
    left: -999em;
    background:#999;
    border-left: 1px solid #595959;
    border-right: 1px solid #595959;
    border-bottom: 1px solid #595959;
    font-weight: bold;
    z-index: 10;
}

div.page-menu ul#horizontal-navi li ul
{
    background:#eee;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    min-width:120px;
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow:         3px 3px 5px 6px #ccc;
}
div.page-menu ul#horizontal-navi li ul li{margin-bottom: 0 ; border-bottom: 1px solid #fff; display: block;float:none;}
div.page-menu ul#horizontal-navi li ul li.last{border-bottom:none;}
div.page-menu ul#horizontal-navi li ul li a{display: block; padding: 5px 5px 5px 10px; border-right: none;}
div.page-menu ul#horizontal-navi li ul li a:hover{background: #fff;}
div.page-menu ul#horizontal-navi li:hover ul{left:auto; margin-left: -1px;}

div.content-text{overflow: auto; width: 100%;}
table.col2,table.data{width: 100%;font-size:1.3rem}
table.col2 caption,table.data caption{text-align: left; border-bottom: 1px solid #eee; width:50%; padding-bottom: 5px; font-weight: bold;}
table.col2 td,table.data td{padding: 5px;}
table.col2 td.label-wrap,table.data td.prop{width: 30%; font-weight: bold; background: #eee; padding-top: 10px; padding-bottom: 10px;}
table.col2 td.data-wrap,table.data td.propValue{width: 70%; background: #eee;padding-top: 10px; padding-bottom: 10px;}
table.payment-info{width: 50%;}
@media only screen and (max-width: 600px) {
   table.payment-info{width: 100%;}
   table.payment-info td.propValue,table.payment-info td.prop{width: 50%;}
   table.data caption{width:100%;}
}


/*################# LOCATION CONTAINERS #########################*/
div.location-containers-wrap{width:99%; margin: 0 auto 10px auto;}
div.separator{border-bottom: 1px dotted #ddd; width: 100%; margin: 5px 0;}
ul.location-containers-list{
    list-style-type: none;
}
ul.location-containers-list li{float:left; min-width: 25%; border: 1px solid #eee;margin-right: 1%; margin-bottom: 10px;}
ul.location-containers-list li p span.container-name{display: block; font-weight: bold; margin-bottom: 5px;}
ul.location-containers-list li form,ul.location-containers-list li p.container-size{margin: 10px;}
ul.location-containers-list li.bg{background: #eee;border: 1px solid #ddd}
ul.location-containers-list li.bg p{margin: 4px;}

div.slick-ul{padding: 0 10px; position: relative;}
div.slick-slider{width:95%; margin: 0 auto 10px auto;background: yellow;}
div.slick-ul div.slick-item{padding: 2px 10px;}
div.slick-ul div.slick-item p.image{text-align: center;}
div.slick-ul div.slick-item p.image img{text-align: center;}

div.slick-ul div.slick-slide{margin-right: 10px;}
div.slick-ul .slick-prev:hover,
div.slick-ul .slick-prev:focus,
div.slick-ul .slick-next:hover,
div.slick-ul .slick-next:focus
{
    color: transparent;
    outline: none;
    background: #ccc;
}

/*#################### CONTAINERS ###################*/
ul.productThumbnails{list-style-type: none; padding: 0; margin: 0;}
ul.productThumbnails li{float:left; margin-right: 4px; border: 1px solid #ddd; margin-bottom: 5px;}
ul.productThumbnails li p span{margin-right: 10px;}
ul.productThumbnails li a{display: inline-block; width: auto; height: auto;}
form.edit-image-form div{margin-left: 10px;}

/*#################### BOOKINGS ###################*/
#bookings-section form label{display: block;margin-bottom: 5px;}
#bookings-section form select{width:30%;}
#bookings-section form p.date-wrap input{width:30%; height: 25px;}

div.pagerLinks{margin-top: 10px;margin-bottom: 10px;}
div.pagerLinks form{float:left; width:40%;}
div.pagerLinks div.links,div.pagerLinks p.links{float:right; width:60%;}

.interactionHeader_e6e6e6Bg
{
    border: 1px solid #d3d3d3/*{borderColorDefault}*/;
    background: #e6e6e6/*{bgColorDefault}*/ url(../images/css/interaction_header_e6e6e6_1x400.png) 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/;
    font-weight: normal/*{fwDefault}*/;
    color: #888/*{fcDefault}*/;
    -webkit-border-radius: 3px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
   -moz-border-radius: 3px; /* FF1-3.6 */
    border-radius: 3px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
   /* useful if you don't want a bg color from leaking outside the border: */
   -webkit-background-clip: padding-box; 
   background-clip: padding-box;
   padding: 5px 15px;
   cursor:default;
   font-weight: normal;
   text-align: left;
}

@media only screen and (max-width: 600px) {
    #bookings-section form select{width:70%;}
    #bookings-section form p.date-wrap input{width:40%;}
    #bookings-section div.pagerLinks form select#per-page{width: 30%;}
    div.pagerLinks form{float:none; margin-bottom: 10px;}
    div.pagerLinks div.links, div.pagerLinks p.links{float:none;}
}

/*################# USERS ##########################*/
#users-section form label{display: block;margin-bottom: 5px;}
#users-section form select{width:30%;}

p.payment-link{
    text-align: right;
    padding: 5px;
    background: #eee;
    font-weight: bold;
}
p.payment-link span{margin-right: 10px;}

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('../images/ajax-loader.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

div.jHtmlArea .ToolBar ul li a.custom_disk_button,div.jHtmlArea .ToolBar ul li a.image 
{
    background: url('../images/disk.png') no-repeat;
    background-position: 0 0;
}


footer{border-top: 1px solid #ddd; clear: both; margin-top: 15px; background: #2FA8EC; padding: 1px; color: #fff;}
footer p{text-align: right; padding-right:5px;}