/* CSS Document */
body {font-family:Georgia, "Times New Roman", Times, serif; color:#444;overflow-x:hidden;}
@font-face {
	font-family: 'Conv_mvboli';
	src: url('fonts/mvboli.eot');
	 src: url('fonts/mvboli.eot?#iefix') format('embedded-opentype'),
         url('fonts/mvboli.woff') format('woff'),
         url('fonts/mvboli.ttf') format('truetype'),
         url('fonts/mvboli.svg#Conv_mvboli') format('svg');
	font-weight: normal;
	font-style: normal;
}
#preload1, #preload2 {display:none;}
.clear {clear:both;}
#inst {margin:5px 0; text-align:center; color:#336600;}
.desc {display:none; z-index:500; background-color:#fff; position:relative; top:-200px; padding:20px 10px; border:1px solid #690; width:150px; height:200px; overflow:hidden; }
.desc img {position:absolute; bottom:0; left:0;}
.descinner {width:150px; height:140px; position:relative; float:left; margin-left:10px; margin-bottom:20px; text-align:center;}
#trans {display:none; position:fixed; top:0; left:0; z-index:400; width:100%; height:100%; background-image:url(/images/white-trans80.png);}
.close {position:absolute; right:0; top:0; width:50px; padding:5px; cursor:pointer; font-family:Arial, Helvetica, sans-serif; color:blue;}
#outer {width:1040px; margin:0 auto;}
#index #outer {border-left:1px solid #669900; border-right:1px solid #669900;}
h1, h2, h3 {font-family:Georgia, "Times New Roman", Times, serif; color:#555;}
h1 {margin:25px 0 25px 4px;}
h3 {font-size:16px;}
#header {width:100%;max-width:1026px;margin:0 auto 10px auto;}
#header-inner {width:90%; margin:0 auto;}
#header-inner img {width:100%; height:auto;}
.left {float:left; margin:5px 10px 5px 10px;}
#menu {border-bottom:1px solid #669900; border-top:1px solid #669900; height:44px;width:100%;max-width:1026px; margin:0 auto;}
#menu div {max-width:1026px; margin:0 auto;}
#menu ul {margin:0 auto;list-style-type:none; padding:0; width:100%;}
#menu li {width: 10.9%; margin: 2px 0.1%; padding:11px 0; text-align:center; font-size:16px; font-family:Georgia, "Times New Roman", Times, serif; color:#fff; background-color:#690; float:left;}
#menu li:hover {background-color:#580; cursor:pointer;}
#menu a {color:#fff; text-decoration:none; display:block;}
#menu a:hover {color:#fff; text-decoration:none;}
#container {width:100%;max-width:1000px; margin:0 auto; position:relative;}
#phone {text-align:right;}
#phone a {color:#000; text-decoration:none;}
#top {margin:10px auto 5px auto;}
.colourpick #picsdiv {border:1px solid #690;}
#picsdiv img {width:100%; height:auto;}
#picsdiv .pic1 {position:relative; width: 17%; margin:15px 1.4%; border:1px solid #669900; float:left;}
#picsdiv h3 {text-align:center; margin-top:10px; margin-bottom:10px; color:#336600;}
.text {position:relative;width:33%; float:left;}

#textinner {position:relative; top:0; width:298px; height:539px;background-color:#fff; color:#240; padding:0 5px 0 10px; border:1px solid #fff;}
.text p {display:inline-block; margin:10px 0;}
#line {width:100%;max-width:988px; margin:30px 0 30px 8px; background-color:#fff;}
#lineinner {border-top:1px solid #ffffff; border-bottom:1px solid #ffffff;; background-color:#fff; margin:0 auto;}
#index #lineinner {padding:20px 0;}
#lineinner hr {border-top:1px solid #669900; width:90%; text-align:center; margin:50px auto;}
#changers {
	position:relative;
	width:100%;
	margin:10px auto 0 auto;
	background-color:#fff;
	padding-top:84%;
}
#changers div {
	position:absolute;
	top:0;
	left:0;
	width:100%;

}
h2 {margin:5px 0;}
h3 {margin:10px 0 3px;}
.colourpicker {margin-left:20px;width:100%;}
.colourpicker td {padding:0 10px; border:1px solid #ccc; cursor:pointer;}
.colourpicker td.none {border:none; padding:0 10px;}
.red {background-color:#F00;}
.ltred {background-color:#f42;}
.blue {background-color:#03C;}
.green {background-color:#060;}
.tan {background-color:#900;}
.black {background-color:#000;}
.cream {background-color:#FFC;}
.pink {background-color:#dd55aa;}
.purple {background-color:#906;}
#changers img{position:absolute;top:0; left:0;}
.img2, .img3, .img4, .img5, .img6, .img7 {display:none;}

#problem #tabs {position:relative; width:918px; height:470px; margin:40px auto 40px auto; color:#224400;}
#problem #tabs div div {width:900px; overflow:hidden; background-image:url(/images/tabback1.png); background-repeat:no-repeat; position:absolute; bottom:0; padding:10px 20px 20px 10px; z-index:1;}
#problem #tabs h2 {width:120px; height:42px; padding-right:5px; text-align:center; position:absolute; font-size:18px; background-image:url(/images/tabp.png); background-repeat:no-repeat; margin:0; padding-top:5px;  cursor:pointer; color:#666;}
#problem #second div, #third div,#fourth div, #fifth div, #sixth div, #seventh div {display:none;}
#problem #tabs h2:hover {color:#999;}
#problem h2.a {left:0;}
#problem h2.b {left:124px;}
#problem h2.c {left:248px;}
#problem h2.d {left:372px;}
#problem h2.e {left:496px;}
#problem h2.f {left:620px;}
#problem h2.g {left:744px;}
#problem .active h2{z-index:10; background-image:url(/images/activetabp.png) !important; background-repeat:no-repeat; border-bottom:1px solid #fff; z-index:10; color:#222 !important; }
#problem .active h2:hover {color:#222 !important;}
#problem #tabs img {float:left;}
#problem #tabs ul {padding-left:330px; margin-top:20px; margin-bottom:25px; width:510px;}
#problem #tabs li {margin:15px 0;}
#problem #third p {padding-left:280px; width:630px;}



#tabs {position:relative; width:918px; margin:40px auto 40px auto; color:#224400; height:320px;}
#tabs div.tabinner {width:900px; overflow:hidden; background-image:url(/images/tabback1.png); background-repeat:no-repeat; background-position:bottom left; position:absolute; top:44px;; padding:10px 20px 20px 10px; z-index:1;}
#tabline {position:absolute; top:1px; left:0; width:920px; height:2px; background-color:#ccc;}
#tabs h2 {width:300px; height:42px; padding-right:5px; text-align:center; position:absolute; font-size:18px; background-image:url(/images/tab.png); background-repeat:no-repeat; margin:0; padding-top:5px;  cursor:pointer; color:#666;}
#second div, #third div {display:none;}
#tabs h2:hover {color:#999;}
h2.a {left:0; top:1px;}
h2.b {left:294px;}
h2.c {left:588px;}
.active h2{z-index:10; background-image:url(/images/activetab.png) !important; background-repeat:no-repeat; border-bottom:1px solid #fff; z-index:10; color:#222 !important; }
.active h2:hover {color:#222 !important;}
#tabs img {float:left;}
#problem #tabs {height:470px;}
#problem #tabs div div {height:400px;width:900px; overflow:hidden; background-image:url(/images/tabback.png); background-repeat:no-repeat; background-position:bottom left; position:absolute; top:44px;; padding:10px 20px 20px 10px; z-index:1;}
.center {text-align:center;}
.nobreak {display:inline-block;}
#footer {max-width:995px; position:relative; border-top:1px solid #669900; border-bottom:1px solid #669900; padding:2px 0; margin:0 auto 5px auto;}
#footerinner {background-color:#669900; color:#fff;padding:10px;}
#reg {font-size:12px; position:relative; top:-8px;}
#open {text-align:center; padding-top:10px;}
#footone {}
#foottwo {text-align:right;}
#foottwo a {color:#fff;text-decoration:none;}

#contact .left {float:left; width:66%; margin:0;}
#contact .right {float:left; width:33%;}
#contact {padding:20px 10px;}

#formalert {
	text-align:center;
	color:#0a0;
}
#prices #phone {position:relative; margin:10px 0; text-align:right; right:0; top:0;}
#prices #container {width:1030px;}
#blackboard {border:8px ridge #522; background-color:#222222; color:#fff; font-family:'Conv_mvboli', Georgia, "Times New Roman", Times, serif; font-size:18px; text-align:center; margin:30px 0; padding:20px 0;}
#blackboard h1, #blackboard h2 {color:#fff; font-family:'Conv_mvboli', Georgia, "Times New Roman", Times, serif;}
#blackboard h1 {margin:0;}
#prices-kids, #prices-styles, #prices-adults {}
#prices-kids td, #prices-adults td {width:102px;}
#blackboard table {}
#blackboard td {border:solid 1px #fff; padding:2px 0; font-weight:bold;}
#extras {width:90%;max-width:400px;margin:30px auto;}
#resoles{width:90%;max-width:600px;margin:30px auto;}
.fract {font-size:14px;}



#prices-kids, #prices-adults {width:90%;margin:30px auto;}

#away {position:absolute; width:900px; left:50%; top:1200px; margin-left:-450px; z-index:100000; background-color:#fc3; color:#a22; border:1px solid #0b0; border-radius:20px; padding:5px; text-align:center;}
#away h2, #away h3 {text-align:center; padding:0 10px;}
#closeaway {cursor:pointer; color:green;}
#check {display:none;}

#mobilemenu {display:none; text-align:right; margin-right:10px;cursor:pointer;position:relative;}
#mobilemenuinner {display:none;position:absolute;background-color:#690; top:-10px; left:-8px; right:-18px;z-index:999;padding-bottom: 10px;}
#mobilemenuinner ul {margin:0 auto;list-style-type:none; padding:0; width:100%;}
#mobilemenuinner li {font-size:16px; font-family:Georgia, "Times New Roman", Times, serif; color:#fff; text-align:left; padding:2px 0;}
#mobilemenuinner a {color:#fff; text-decoration:none;display:block; padding:10px 0 10px 5px;}
#mobilemenuinner a:hover {background-color:#7a0;}
#slide {height:30px;width:30px;}
#menuclose {font-size:30px;color:#fff;margin:10px 20px 10px 10px;display:inline-block;}

#prob-img {width:70%;display:block;margin:0 auto;}
#bagleft, #bagright {float:left; width:50%;}
#bagright {padding-top:15px;}
.pic2 {width:100%;}
.pic2 img {width:calc(100% - 5px);display:block;margin:5px;}

.heron h2 a {text-decoration:none; display:block; margin:40px auto;text-align:center; font-family: arial;}

@media (max-width:1030px){
     .home  #picsdiv {float:none;  border:none; width:95%; margin:0 auto;}   
     #picsdiv .pic1 {position:relative; width: 17%; margin:15px 1.3%; border:1px solid #690; float:left;} 

}

@media (max-width:1000px){
     .colourpick #picsdiv {float:none; margin-left:8px; width:80%; margin:0 auto;}
    .home .text, .colourpick .text {width:90%; float:none; margin:20px auto;}

   .text1 {width:95%;margin:0 auto;} 
   .colourpicker td {padding:0 20px;}
}

@media (max-width:900px){
    .colourpick #picsdiv {float:none; margin-left:8px; border:1px solid #690;  width:80%; margin:0 auto;}
    .text{width:90%; float:none; margin:20px auto;}
   
     #picsdiv .pic1 h3 {height:50px;}     
    #mobilemenu {display:block;}
    #menu {display:none;}
    
#phone {
    padding-bottom:8px;
    margin-bottom:8px;
    border-bottom: 1px solid #669900;
}
#prob-img {width:100%;}
    
}

@media (max-width:835px){
#contact .left {float:none; width:100%; margin:0; text-align:center;}
#contact .right {float:none; width:100%;}
#contactform {margin:0 auto;}
#header-inner {width:100%; margin:0 auto;}
#footone {text-align:center;}
#foottwo {text-align:center;}
#bagleft, #bagright {float:none; width:100%;}
#bagright {padding-top:0;}
}

@media (max-width:652px){

 #picsdiv .pic1 {position:relative; width: 46%; border:1px solid #669900;} 

}