/*----------------------------------------------------------------------------------------------------------------------

:: Copyright Notice ::

The following code is the intellectual property and copyright of Ayrmer Software, 2007.  All Rights Reserved.
All code in whole or part is protected under international copryright legislation and will ber enforced within 
the United Kingdom Courts.

:: website :: http://www.ayrmer.co.uk :: email :: sales@ayrmer.co.uk :: telephone (uk) :: 0845 003 1356 ::

--- Index
----1. Generic layout 
----2. Banner layout 
----3. Menu layout 
----4. Footer layout 
----5. Main content layout 
----6. Buttons
----7. Forms
----8. Messages
----9. Tables
----10.Calendar(table)
----11.Booked sessions (tabs)


--- Colours
----1. Blue          #0e327f
----   Blue (light)  #4B67A3
----   Blue (dark)   #010817
----2. Purple			#0e327f
       Purple (light)#D3A0C5
		 Purple (dark)	#610C54
----3. Orange			#E74C24
	 	 ->(light)		#FDCC05
		 ->(dark)		#E10026 
----4. Green			#5AA327
		 ->(light)		#C9CE00
		 ->(dark)		#5B7313
----5. Red   			#FF2602
       ->(light)		#FF6633
		 ->(dark)		#993300  


blue #0e327f
#0e327f

------------------------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------
1. Generic layout 
--------------------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, img, q, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td {
   border: 0 none;
   font-style: inherit;
   font-weight: inherit;
   margin: 0;
   padding: 0;
}
body {
   font-family: 'Lato', sans-serif, Arial;
   font-size: 0.90em;
   line-height: 24px;
   color: #333333;
   margin: 0;
   padding: 0;
}
h1, h2, h3, h4, h5, h6 {
   font-family: 'Architects Daughter', cursive;
   color: #554391;
   font-weight: normal;
}
h1 {
   font-size: 1.8em;
   line-height: 2.0em;
   font-weight: bold;
   padding: 3px 0px 6px 0px;
}
h2 {
   color: #f69743;
   font-size: 1.6em;
   line-height: 1.8em;
   font-weight: bold;
   padding: 3px 0px 6px 0px;
}
h3 {
   color: darkblue;
   font-size: 1.6em;
   line-height: 1.6em;
   font-weight: bold;
   padding: 3px 0px 10px 0px;
}
h4,
h5,
h6 {
   color: darkblue;
   font-size: 1.6em;
   line-height: 1.0em;
   font-weight: bold;
   padding: 3px 0px 6px 0px;
}
p {
   padding: 3px 0px 6px 0px;
}
button  {
   -moz-box-shadow: 0px 1px 0px 0px #3cc21b;
   -webkit-box-shadow: 0px 1px 0px 0px #3cc21b;
   box-shadow: 0px 1px 0px 0px #3cc21b;
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #44c767), color-stop(1, #5cbf2a));
   background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
   background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
   background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
   background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
   background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#44c767', endColorstr='#5cbf2a',GradientType=0);
   background-color:#44c767;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
   border-radius:3px;
   border:1px solid #18ab29;
   display:inline-block;
   cursor:pointer;
   color:#ffffff;
   font-weight:bold;
   padding:6px 24px;
   text-decoration:none;
   text-shadow:0px 1px 0px #2f6627;
   min-width: 120px;
}
button:hover {
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
   background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
   background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
   background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
   background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
   background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cbf2a', endColorstr='#44c767',GradientType=0);
   background-color:#5cbf2a;
}
button:active {
   position:relative;
   top:1px;
}
input,
select,
textarea {
   font-style: inherit;
   font-weight: inherit;
   font-family: Helvetica, Calibri, Arial;
   line-height: 24px;
   color: #333333;
   margin: 0;
   padding: 2px 2px 3px 2px;
}
textarea {
   min-width:370px;
}
/*textarea {
   width:350px;    //Or however much space you need for the form�s labels
   float:left;
   font-family: "Helvetica Neue",Arial,Helvetica,sans-serif !important;
}*/

/*------------------------------------------------
2. Banner layout 
--------------------------------------------------*/

#rot-bg {
   background-attachment: fixed;

}
img {
}
a:active {
   outline: medium none;
   text-shadow: 0 1px #777777;
}
:focus {
}
#container {
   background-color: #FFFFFF;
   margin: 0px auto;
   margin-top: 150px;
   margin-bottom: 100px;
   padding: 0px;
   width: 100%;
   max-width: 1080px;
   display: block;
}

h2.title {
   color: #554391;
   font-size: 2em;
   text-shadow: 1px 1px #777777;
}
a {
   color: #000;
   text-decoration: none;
   font-weight: bold;
}
a:hover {
   border-bottom: 1px solid #0e327f;
}
h2 a, h3 a, h4 a {
   border-bottom: 1px solid #0e327f;
   color: #111111;
}
h2 a:hover, h3 a:hover, h4 a:hover {
   border-bottom: 1px solid #111111;
   color: #0e327f;
}
span {

   /*color: #FFF;*/
}
a:hover {
   border-bottom: medium none;
}
#con-header {
   color: #999;
   font-size: 1.2em;
   height: 38px;
   width: 100%;
   border-bottom: 1px solid #999;
}

#con-header p
{
   margin: 5px 0px 3px 10px;
   float: left;
}

#con-header .header-current-user
{
   background: #fff;
   height: 30px;
   line-height: 30px;
   padding: 0px 10px;
   font-weight: bold;
   margin: 3px;
   color: #999;
   border-radius: 3px;
   vertical-align: middle;
   max-width: 300px;
   float: right;
}

div#timeoutbox
{
   float: right;
   font-weight: normal;
}

div#timeoutbox a
{
   display: inline;
}

div#timeoutbox img
{
   vertical-align: middle;
   -webkit-filter: invert(100%);
   filter: invert(100%);
}

span.tel {
   color: #FFFFFF;
   font-family: 'arial rounded MT bold',arial,Helvetica,sans-serif;
   font-size: 16px;
}

header
{
   background: #fff;
   top: 0;
   width: 100%;
   position: fixed;
   overflow: hidden;
   height: 120px;
   -webkit-transition: height 0.3s;
   -moz-transition: height 0.3s;
   -ms-transition: height 0.3s;
   -o-transition: height 0.3s;
   transition: height 0.3s;

}

header.smaller
{
   height: 50px;
}

#header {
   background-image: url("../images/head-bg.jpg");
   background-position: right top;
   background-repeat: no-repeat;
   height: 120px;
   width: 100%;
   position: relative;

}
#header h2,
#header h1,
#header h1 a
{
   line-height: 1.8em;
   color: #554391
}


#header div {
   text-align: center;
   position: relative;
   padding-top: 10px;
}
#header div a{

}



/*------------------------------------------------
3. Menu layout
--------------------------------------------------*/
#nav {
   background: #ffffff;
   color: #999;
   height: 30px;
   width: 100%;
   position: fixed;
   top: 110px;
   -webkit-transition: top 0.3s;
   -moz-transition: top 0.3s;
   -ms-transition: top 0.3s;
   -o-transition: top 0.3s;
   transition: top 0.3s;
   z-index: 50;
   /*border-top: 1px solid #999;
   border-bottom: 1px solid #999;*/
}

#nav.smaller{
   top: 0px;
}

#nav li:last-child {
   border-right: medium none;
   padding-right: 0;
}

.ofsted {
   position: absolute;
   right: 593px;
   top: 9px;
   width: 85px;
   /*background: url("../images/ofsted.gif") no-repeat scroll 0 0 transparent !important;
   height: 100px;*/
}

/*------------------------------------------------
Original Sub Menu layout
--------------------------------------------------*/
/*
#menu {
}
#menu li {
   display: block;
   float: left;
   list-style: none outside none;
   padding: 0;
   position: relative;
   z-index: 999;
   height: 30px;
}
#menu a {
   font-size:1em;
}
#menu ul a {
   display: block;
}

#menu ul {
   display: none;
   left: 0;
   margin: 0;
   padding: 0;
   position: absolute;
}

* html #menu ul {
   line-height: 0;
}
#menu ul a {

}
#menu ul li {
   float:none;
   display:block;
   background:none;
   height: 34px;
   overflow: hidden;
}
#menu ul ul {
   top: 0px;
}
#menu ul {
   width: 260px;
   border: 1px solid #999;
}
#menu ul ul {
   left: 131px;
}
#menu {
   height: 28px;
   list-style: none outside none;
   background: #f8f8f8;
   //position: absolute;
   //left: 200px;
   z-index: 999;
}
#menu *:hover {

}
#menu a {
}
#menu li.hover a {
   background-color: #fff;
}
#menu ul {
   left: -12px;
   top: 30px;
   background-color: #fff;
}
#menu ul li a {
   background-color: #fff;
   padding: 6px 12px;
   text-align: left;
   width: 260px;
   overflow: hidden;
}
#menu ul li a:hover {
   background-color: #fff;
}
#menu ul a {
   border-right: medium none;
   border-top: 1px solid white;

}
ul#menu li {

   color: #999;
   padding: 0 12px;
}
ul#menu li a {
   color: #999;
}
ul#menu li a:hover {
   text-shadow: 0 1px #777777;
}

ul#menu > li
{
   padding-top: 5px;

}
.current_page_item a, .current_page_parent a {
   font-weight: bold;
   text-shadow: 0 1px #777777;
}
*/

/*------------------------------------------------
Footer layout
--------------------------------------------------*/
#footer {
   position: fixed;
   clear:both;
   border-top: 1px solid #44c767;
   background: #ffffff;
   color: #000000;
   font-size: 0.8em;
   /*height: 100px;*/
   text-align: center;
   width: 100%;
   bottom: 0px;
   line-height: 1.6em;
}
#footer .worldpaylogos
{
   position: absolute;
   z-index: 2;
   top: 0px;
   right: 0px;
}
#design {
   color: #FFFFFF;
   font-size: 12px;
   background: none repeat scroll 0 0 #0e327f;
   height: 35px;
   margin-top: 20px;
   text-align: center;
   width: 100%;
}
#design a {
   color: #FFFFFF;
}

/*------------------------------------------------
5. Main content layout 
--------------------------------------------------*/
#main {
   width: calc(100% - 20px);
   min-height: 700px;
   padding: 20px 10px 20px 10px;
}
#parents {
	float: left;
	width: 50%;
	border-bottom: 1px dashed #CCCCCC;
	border-right: 1px dashed #CCCCCC;
   margin-right: 10px;
   padding-right: 9px;
   padding-top: 10px;
   padding-bottom: 15px;
}
#contacts {
	float: left;
	width: 50%;
	border-right: 1px dashed #CCCCCC;
   margin-right: 10px;
   padding-right: 9px;
   padding-top: 10px;
}
#collectors {
	float: left;
	width: 50%;
	/*border-right: 1px dashed #CCCCCC;*/
   margin-right: 10px;
   padding-right: 9px;
   padding-top: 10px;
}
#children {
	float: right;
	width: 50%;
	/*border-bottom: 1px dashed #CCCCCC;*/
	margin-right: -30px;
   padding-right: 9px;
   padding-top: 10px;
   padding-bottom: 15px;
}
#sessions {
	float: right;
	width: 50%;
	margin-right: -30px;
   padding-right: 9px;
   padding-top: 10px;
}
/*------------------------------------------------
6. Buttons
--------------------------------------------------*/
a.default {
   color: #fff;
   background-color: #5AA327;
   border-top: 2px solid #bfd255;
   border-left: 2px solid #bfd255;
   border-bottom: 2px solid #9ecb2d;
   border-right: 2px solid #9ecb2d;
   font-weight: bold;
   padding: 1px 5px 2px 5px;
   width: 90px;
   cursor: pointer;
   -moz-border-radius: 5px;
	border-radius: 5px;
	background: rgb(191,210,85); /* Old browsers */
background: -moz-linear-gradient(top, rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(50%,rgba(142,185,42,1)), color-stop(51%,rgba(114,170,0,1)), color-stop(100%,rgba(158,203,45,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* W3C */
display: block;
float: right;
text-align: center;
}
a.default:hover {
   color: #fff;
   background-color: #5AA327;
   border-top: 2px solid #9ecb2d;
   border-left: 2px solid #9ecb2d;
   border-bottom: 2px solid #bfd255;
   border-right: 2px solid #bfd255;
   font-weight: bold;
   padding: 1px 5px 2px 5px;
   width: 90px;
   cursor: pointer;
   -moz-border-radius: 5px;
	border-radius: 5px;
   display: block;
	float: right;
	text-align: center;
}
button.cancelbasket {
   color: #fff;
   background-color: #FF2602;
   font-weight: bold;
   padding: 1px 5px 2px 5px;
   width: 100px;
   cursor: pointer;
	background: rgb(243,197,189); /* Old browsers */
}

button.updatebasket {
   color: #fff;
   background-color: #5AA327;
   font-weight: bold;
   padding: 1px 5px 2px 5px;
   cursor: pointer;
	background: rgb(191,210,85); /* Old browsers */
   border:0;
}

button.cancelbasket:hover {
   color: #fff;
   background-color: #FF2602;
   font-weight: bold;
   padding: 1px 5px 2px 5px;
   cursor: pointer;
}

button.updatebasket:hover {
   color: #fff;
   background-color: #5AA327;
   font-weight: bold;
   padding: 1px 5px 2px 5px;
   cursor: pointer;
}

button.booknow {
   color: #E20026;
}

button.booknow:hover {
   font-weight: bold;
}

/*------------------------------------------------
7. Forms layout 
--------------------------------------------------*/
div.lefthandside {
   float: left;
   width: calc(50% - 20px);
   padding: 0px 10px 10px 0px;
}
div.lefthandside div.innerpanel {
   padding: 2px 5px 3px 5px;
   margin: 0px 10px 10px 0;
}
/*div.lefthandside  #sessionPanel.innerpanel  {
   background: red;
}
div.lefthandside  #statementPanel.innerpanel  {
   background: green;
}
div.lefthandside  #feesPanel.innerpanel  {
   background: yellow;
}*/

div.righthandside {
   width: calc(50% - 10px);
   float: left; 
   padding: 0px 0px 5px 5px;
}
div.righthandside div.innerpanel {
   /*border-bottom: 1px dashed #CCCCCC;*/
   padding: 0px 5px 5px 0;
}
div.largelefthandside {
   width: calc(70% - 10px);
   float: left; 
   padding: 0px 5px 5px 0px;
   /*border-right: 1px dashed #CCCCCC;*/
}
div.smallrighthandside {
   width: calc(27% - 10px);
   float: right;
   padding: 0px 5px 5px 0px;
}
div.largelefthandside div.innerpanel,
div.smallrighthandside div.innerpanel {
   padding: 0;
}

span.man {
   /*float: right;*/
   color: #f89b34;
   font-weight: bold;
   font-size: 1.4em;
}
label {
   display: block;
   width: 200px;
   float: left;
   clear: both;
}
label.dashboard {
   width:100px;    /*Or however much space you need for the form�s labels*/
   float:left;
   display:block;
}

.field_container {
   clear: both;
   padding-bottom: 5px;
}
#important {
	/*border-bottom: 1px dashed #CCCCCC;*/
	padding-bottom: 15px;
}

div.comments {
   float: left;
   display: block;
   clear: both;
   padding-bottom: 5px;
   width: 100%;
}

/*------------------------------------------------
8. Messages
--------------------------------------------------*/
.success
{
   top: 10px;
   right: 10px;


   background-color: #85B219;
   color: #ffffff;
   padding: 5px;
   border-radius: 5px;
   padding-left: 20px;
}
.info
{
   font-weight: bold;
   text-align: left;
   color: black;
   border: 1px solid black;
   margin: 2px;
   padding: 3px;
   background: #f2e694;
}
.information
{
   font-weight: bold;
   text-align: left;
   color: #554391;
   border: 1px solid #9b6cff;
   margin: 2px;
   padding: 3px;
   background-color: #9b6cff;
}
.error
{
   border-radius:5px;
   z-index:1200;
   /*padding:3px 10px 6px 10px;
   width: 250px;
   background-color: #E20026;
   color: #FFF;
   padding: 5px;
   border: 1px solid #E20026;
   border-radius: 5px;
   padding-left: 20px;*/
}
.error ul {
   padding-left: 25px;
}
h3.error
{
   color: red;
   border-radius: 0;
   border: 0;
   background-color: #ffc2c2;
   padding: 5px;
   padding: 2px 0 3px 0;
   width: 0;
}
h3.success
{
   color: green;
   border-radius: 0;
   border: 0;
   background-color: #ffc2c2;
   padding: 5px;
   padding: 2px 0 3px 0;
   width: 0;
}
div.information h3
{
   color: #554391;
   border-radius: 0;
   border: 0;
   background-color: #9b6cff;
   padding: 5px;
   padding: 2px 0 3px 0;
   width: 0;
}


/*------------------------------------------------
9. Tables
--------------------------------------------------*/
table th {

}

/*------------------------------------------------
10.Calendar
--------------------------------------------------*/
div.innerpanel table.calendar
{
   border-collapse:collapse;
   width: 100%;
   border: 0;
}
table.calendar th,
table.basket th
{
   -moz-box-shadow: 0px 1px 0px 0px #3cc21b;
   -webkit-box-shadow: 0px 1px 0px 0px #3cc21b;
   box-shadow: 0px 1px 0px 0px #3cc21b;
   /*background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #44c767), color-stop(1, #5cbf2a));
   background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
   background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
   background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
   background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
   background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#44c767', endColorstr='#5cbf2a',GradientType=0);*/
   background-color:#44c767;
   border:0;
   color:#ffffff;
   font-weight:bold;
   padding: 3px 5px 6px 5px;
   text-decoration:none;
}
table.calendar tr:hover,
table.basket tr:hover{
   background-color: lightgray;
}
#ajaxCalendar table.calendar tr,
table.basket tr {
   border-bottom: 1px solid #ccc;
}

#ajaxCalendar table.calendar,
table.basket
{
   border-collapse:collapse;
   width: 100%;
   border: 1px solid #999;
}
table.calendar th,
table.calendar td,
table.basket th,
table.basket td
{
   padding: 6px 5px 6px 5px;
}
#ajaxCalendar table.calendar td
{
   padding: 0px;
}


table.calendar th,
table.basket th
{
   padding: 6px 5px 6px 5px;
}
table.calendar th.centre,
table.basket th.centre
{
   text-align: center;
}

table.calendar th.num,
table.calendar td.num,
table.basket th.num,
table.basket td.num
{
   text-align: right;
}

table.calendar div.clickableSession
{
   width: 100%;
   height: 100%;
   text-align: center;
   vertical-align: middle;
}

table.calendar div.clickableExtra
{
   width: 100%;
   height: 100%;
   text-align: center;
   vertical-align: middle;
}

table.calendar div.clickableSession:hover
{
   width: 100%;
   height: 100%;
   background: none repeat scroll 0 0 lightgray;
   
}

table.calendar div.clickableExtra:hover
{
   width: 100%;
   height: 100%;
   cursor: pointer;
   background: none repeat scroll 0 0 lightgray;
   
}

table.calendar div.bookedSession
{
   width: 100%;
   height: 100%;
   cursor: default;
   text-align: center;
   vertical-align: middle;
}

table.calendar div.bookedExtra
{
   width: 100%;
   height: 100%;
   cursor: default;
   text-align: center;
   vertical-align: middle;
}

/*------------------------------------------------
11.Booked sessions (tabs)
--------------------------------------------------*/
div.tab {
   background:#003366 url("../images/tab-corner.png") no-repeat right top;
   color: #fff;
   float: left; 
   width: 150px; 
   padding: 3px 5px 6px 5px;
   margin: 10px 6px 10px 0px;
   cursor: pointer;
}
div.tab:hover {
   background-color:#990066;

}
div.tabselected {
   background:#990066 url("../images/tab-corner.png") no-repeat right top;
   color: #fff; 
   float: left; 
   width: 150px; 
   padding: 3px 5px 6px 5px;
   margin: 10px 6px 10px 0px;
   cursor: pointer;
}


#ajaxCalendar label
{
   display: inline !important;
   width: auto;
}

#ajaxCalendar table
{
   border: 1px solid black;
}

#ajaxCalendar th
{
   font-weight: normal;
   /*background: #ccc;
   color: #000;*/
}

#ajaxCalendar td
{
   /*border: 1px solid black;*/
}

table.nothing,
table.nothing td
{
   border: 0 !important;
}

.gdpr {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 9999; /* Sit on top */
   padding-top: 100px; /* Location of the box */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.gdpr-content {
   background-color: #fefefe;
   margin: auto;
   padding: 20px;
   border: 1px solid #888;
   width: 80%;
}
.gdpr-button {
   color: #aaaaaa;
   font-size: 28px;
   font-weight: bold;
   margin-left:20px;
}
.gdpr-button:hover,
.gdpr-button:focus {
   color: #000;
   text-decoration: none;
   cursor: pointer;
}

/*
 *
 * Responsive Website Design
 *
 */

/*
 * Tablet layout (max width) 768px
 */
@media (max-width: 960px) {

   #container {
      box-shadow: 0;
      margin: 180px 10px 150px 10px;
      width: calc(100% - 20px);
   }

   #header {
      background-image: url("../images/head-bg.jpg");
      background-repeat: no-repeat;
      background-position: right top;
      width: 100%;
   }

   #con-header {
      width: 100%;
      padding-right:0px;
   }

   #nav {
      width: 100%;
   }
   #nav.smaller{
      top: 0px;
   }

   #main {
      width: calc(100% - 40px);
      min-height:700px;
      padding: 20px 10px 20px 10px;
   }

   #important {
      border:0;
      padding:0;
   }
   div.lefthandside div.innerpanel {
      padding: 2px 0 3px 0;
      margin: 10px 0px 10px 0;
   }

   div.lefthandside,
   div.righthandside {
      width: 100%;
      border:0;
      margin:0;
   }

   div.lefthandside div.innerpanel,
   div.righthandside div.innerpanel {
      border:0;
   }

   div.innerpanel a
   {
      font-weight: bold;
   }

   div.lefthandside,
   div.righthandside {
      padding:0;
   }

   #footer {
      width: 100%;

   }

}


@media (max-width: 1178px)
{
   #header {
      background-image: url("../images/head-bg.jpg");
      background-position: center top;
      background-repeat: no-repeat;
      width: 100%;
      position: relative;

   }
   #header h2,
   #header h1,
   #header h1 a
   {
      display: none;
   }
   #nav {
      width: 100%;
      top:  85px;
      background: #fff;
   }

   #nav.smaller{
      top: 0px;
   }

}

/*
 * Tablet layout (max width) 768px
 */
@media (max-width: 768px) {
   #header {
      background-image: url("../images/head-bg.jpg");
      background-position: center top;
      background-repeat: no-repeat;
      width: 100%;
      position: relative;

   }
   #header h2,
   #header h1,
   #header h1 a
   {
      display: none;
   }
   #nav {
      width: 100%;
      top:  85px;
      background: #fff;
   }

   #nav.smaller{
      top: 0px;
   }

   div.largelefthandside,
   div.smallrighthandside {
      border:0;
      padding:0;
      margin: 0;
      width:100%;
   }

}

/*
 * Fablet layout (max width) 680px
 */
@media (max-width: 680px) {

   body,
   input,
   select,
   textarea {
      padding:0;
   }

   #header {
      background-image: url("../images/head-bg.jpg");
      background-position: center top;
      background-repeat: no-repeat;
      width: 100%;
      position: relative;

   }
   #header h2,
   #header h1,
   #header h1 a
   {
      display: none;
   }

   #con-header
   {
      display: none;
   }

   #container {
      background-color: #FFFFFF;
      box-shadow: none;
      margin: 75px auto 150px auto;
      width: calc(100% - 30px);
   }

   header
   {
      height: 130px;
   }
   header.smaller
   {
      height: 0;
   }

   header h1
   {
      float: left;
      margin-left: 12px;
      margin-top: 15px;
   }

   header h2
   {
      display: none;
   }

   /*#header {
      background-image: url("../images/head-bg.jpg");
      width: 100%;
      padding:0;
      height: 95px;
   }*/

   #con-header {
      width: 100%;
      padding: 0 0 0 10px;
   }

   #header h1 a {
      background-image: none;
      width: 0px;
   }

   #nav {
      width: 100%;
      top:  85px;
      background: #fff;
   }

   #nav.smaller{
      top: 0px;
   }

   #main {
      width: 100%;
      min-height:0;
      float: left;
      padding: 10px 0 10px 0;
   }

   label {
      width:100%;
   }

   div.comments table tr {
      width:100%;
   }

   textarea {
      width: calc(100% - 5px);
   }

   input   {
      width: calc(100% - 10%);
   }

   input[type="checkbox"] {
      margin:0;
      width:10px;
      margin-top:5px;
   }

   button {
      padding: 1px 5px 2px;
      width: 100px;
   }

   button.booknow {
      color: #E20026;
      font-weight: bold;
   }

   div.largelefthandside,
   div.smallrighthandside {
      border:0;
      padding:0;
      margin: 0;
      width:100%;
   }

   div.largelefthandside div.innerpanel,
   div.smallrighthandside div.innerpanel {
      border:0;
      padding:0;
      margin: 0;
      width:100%;
   }

   div.smallrighthandside {
      float:none;
      padding:0;
      margin: 0;
      width:100%;
      border:0;
   }

   div.largelefthandside {
      border:0;
      float: left;
      padding:0;
      margin: 0;
      width:100%;
   }

   div.tab,
   div.tabselected {
      width: calc(20% - 10px);
      padding: 3px 5px 6px 5px;
      margin: 10px 6px 10px 0px;
      cursor: pointer;
   }

   #footer {
      width: 100%;
      height: 60px;
      position: relative;
   }

}

/*
 * Mobile layout (max width) 480px
 */
@media (max-width: 480px) {

   #menu a {
      font-size:0.9em;
   }

}

div.error
{
   float: left;
   clear: both;
   width: 100%;
   margin: 10px 0 10px 0;
}

.error li
{
   width: 100%;
}

div.success
{
   background-color:#fff;
   color:#3A3A3A;
   border: solid #3A3A3A 1px;
   padding:3px 10px 6px 10px;
   top:10px;
   right:10px;
   position:fixed;
   border-radius:5px;
   z-index:1000;
}

.basket-notes
{
   color: #3B3B3B;
   font-weight: bold;
}

div.masquerade-hover
{
   background-color:#fff;
   color:#3A3A3A;
   border: solid #3A3A3A 1px;
   padding:3px 10px 6px 10px;
   top:10px;
   left:10px;
   position:fixed;
   border-radius:5px;
   z-index:1000;
}

tr.dtable:hover
{
   background-color: lightgray;
}