@charset "iso-8859-1";
/* CSS Document */

@font-face{
  font-family: 'painted';
  src: url('../APPOPAIN.TTF');
}

*{margin:0; padding:0;}
body{background:#666; font-family:Arial, Helvetica, sans-serif; font-family: 'Indie Flower', arial;}
div * {font-family:Arial, Helvetica, sans-serif; }

#whatido{display:block; padding:8px 0 0; margin:0 auto; width:786px;}
#whatido li {list-style:none; display:inline-block; padding:0 12px 0 0; font-size:12px; text-align:center; color:#eee; font-family:Arial, Helvetica, sans-serif; }


#container{min-width:786px; width:786px; max-width:786px; margin:12px auto 10px; overflow:hidden; background:#FFFFFF; border:4px solid #FFF; border-radius:24px 24px 6px 6px; box-shadow:1px 4px 5px #333;}

#container ul#top{display:block; padding:14px 0 0; margin:0;}
#container ul#top li{list-style:none; display:inline-block; width:32%; font-size:16px; text-align:center; color:#000000; font-family:'Merienda One',arial; font-family:Arial, Helvetica, sans-serif;}
#container ul#top li a, #container ul#top li a:visited{color:#E50300; border-bottom:1px dashed #E50300; text-decoration:none;}
#container ul#top li a:hover, #container ul#top li a:visited:hover{color:#E50300; border-bottom:1px dotted #E50300; text-decoration:none;}						
#container ul#top li#numbers a{color:#E50300; text-decoration:none; border:none; border-radius:16px 16px 0 0;}

#container #header{display:block; clear:both; position:relative; background:black; padding:4px 8px; background:url(../images/header.jpg) center center no-repeat; height:180px; border-radius:20px 20px 0 0; overflow:hidden;}

#container #header #logo {display:inline-block; position:absolute; top:12px; right:9px; height:160px; z-index:890;}
#container #header #over{position:absolute; top:0; left:0px; width:786px; height:188px; background:#FFF; opacity:0.75; z-index:789; border-radius:20px 20px 0 0;} 
#container #header:hover #over{opacity:0.25;}
#container #header:hover ul li{text-shadow:0 0 2px #FFF, 0px 1px 2px #FFF, 2px 1px 0px #FFF; color:#1685C9;}

#container #header h1{color:#00982F; font-weight:normal; font-size:42px; font-family: 'Merienda One', arial; font-family:Arial, Helvetica, sans-serif; text-shadow:2px 1px 2px #00E547; margin:5px 0 0 5px; text-align:center; display:block; text-indent:-8520px;}
#container #header ul {list-style:none; width:304px; margin:15px 0 0 auto; display:inline-block; position:absolute; left:10px; z-index:890; position:absolute; top:18px;}
#container #header ul li{display:block; width:100%; text-align:center; font-size:22px; line-height:1.5em; margin:0 0 10px; font-family:'Merienda One',arial; font-family:Arial, Helvetica, sans-serif; font-weight:normal; color:#1685C9; text-shadow:1px 1px 4px #FFF;}
#container #header ul li.haslink, #container #header ul li.haslink a {font-size:38px; color:#1685C9; font-family:painted, arial;}
#container #header:hover ul li.haslink a{text-shadow:0 0 2px #FFF, 1px 1px 2px #FFF, 2px 2px 0px #FFF;}

#container #header ul li#email {display: none}

#container #content{display:block; clear:both; padding:0 8px 16px 16px; position:relative;}

#container #content h2{font-size:32px; line-height:1.5em; margin:12px 0 8px; font-family: 'Merienda One', arial; font-family:painted, Arial, Helvetica, sans-serif; font-weight:normal; color:#1685C9; color:red;}
#container #content h3{color:red;}
#container #content p{font-family: 'Indie Flower', arial; font-size:18px; line-height:1.5em; margin:0 0 6px; color:#666; font-family:Arial, Helvetica, sans-serif;}
#container #content p.right{margin:6px 0; text-align:right; color:#333;}
#container #content p strong{font-family: 'Indie Flower', arial; color:#000; font-family:Arial, Helvetica, sans-serif; font-weight:normal;}


#container #content img#me{height:172px; border-radius:100px; float:left; overflow:hidden; margin:5px 20px; box-shadow:1px 1px 8px #000;}

#container #content #mainPic{float:left; display:inline-block;}
#container #content #mainPic img {width:266px;}
#container #content #mainPic img#contactPic {width:296px;}

#container #content ul#points{list-style:circle; margin:0 0 0 29px; float:left; width:388px;}
#container #content ul#points li{color:#E50300; font-size:16px; line-height:1em; padding:3px 0 16px;}

#container #content #photos{margin:0 0 8px 0; display:block;}
#container #content #photos .photo{margin:0 6px 12px; display:inline-block; float:left; height:auto; width:210px; border:1px dashed #E50300; padding:4px 2px 4px 4px; position:relative; overflow:hidden;}
#container #content #photos .photo:hover{border:1px dotted #E50300;}
#container #content #photos .photo img {height:auto; width:100%;}

#container #content #photos .photo .over{display:block; position:absolute; top:0; left:0; height:100%; width:100%; background-image:url(https://www.janeshandywomanservice.co.uk/mediastore/images/over.png); background-position: center center; background-repeat:no-repeat;}
#container #content #photos .photo:hover .over{display:none; background-position:center bottom;}

#container #content #contactForm{width:382px; margin:0 0 8px 12px; display:inline-block;}
#container #content #contactForm div{display:inline-block;}

#container #content #contactForm .group{display:inline-block; width:49%; margin:0 1px 4px; float:left;}
#container #content #contactForm .group_full{width:100%;}
#container #content #contactForm .group_submit{width:100%; margin:4px 0 0;}

#container #content #contactForm .group .caption{display:block; font-size:12px; line-height:1.5em;}
#container #content #contactForm .group .field {display:block; position:relative;}

#container #content #contactForm .group .field input{border:1px solid #999; font-size:12px; line-height:1.4em; height:19px; padding:2px 4px; width:174px;}
#container #content #contactForm .group .field input#submit{background:#00982F; border-radius:8px; height:145px; height:30px; color:#FFFFFF; font-family:'Quando',serif; text-transform:uppercase; margin:0 7px; width:185px; float:right;}
#container #content #contactForm .group .field select{border:1px solid #999; font-size:11px; line-height:1.2em; height:75px; padding:1px 1px 1px 4px; width:182px;}
#container #content #contactForm .group .field textarea{border:1px solid #999; font-size:12px; line-height:1.2em; height:73px; min-width:182px; width:182px; max-width:182px;}

#container #content #contactForm .group #errorMessageBox{position:absolute; left:0; top:-40px; z-index:99999999999;}

#container #content #contactForm .group_submit div.info{display:inline-block; font-size:10px; color:#000; width:183px; float:left;}
#container #content #contactForm .group_submit div.field{display:inline-block;}

div#errorMessage{color:#E50300; font-size:11px; margin:0px 0px 0px 40px; padding:0px;}
div#errorMessage strong{color:#980200; font-size:11px; font-weight:bold;}
img.errorIcon{float:left; margin:0px; border-radius:6px; height:24px; width:24px;}
input.error, select.error, textarea.error{border:1px solid #FFFFFF; background:#E40000; color:#FFF;}
input.valid, select.valid, textarea.valid{border:1px solid #4CA20B; background:#4CA20B; color:#FFF;}
input.valid, select.valid, textarea.valid{border:1px solid #4CA20B; background:none; color:#FFF;}
select.valid, textarea.valid{border:1px solid #4CA20B; background:#4CA20B; color:#FFF;}
select.valid *, select.error *{background:none;}

.field input.valid, .field select.valid, .field textarea.valid{background:rgba(255,255,255,0.75); filter: alpha(opacity=75); -moz-opacity: 0.75; -khtml-opacity: 0.75; opacity: 0.75; color:#000;}
.field input:focus, .field select:focus, .field textarea:focus{background:#FFF !important; filter: alpha(opacity=100); -moz-opacity: 1;-khtml-opacity: 1; opacity: 1; color:#000 !important;}


#container #content #mapCanvas{width: 100%; height: 300px; border-radius:8px;} 

#container #content #joblist{width:282px; height:280px; margin:0 0 0 15px; float:right;}
#container #content #joblist p{font-size:18px; display:block; color:#000000; font-weight:normal; text-align:left; width:100%; font-family:'Merienda One',arial; font-family:Arial, Helvetica, sans-serif;}
#container #content #joblist p.bot{font-size:12px; margin:0 0 0 2px;}
#container #content #joblist ul {list-style:none; width:100%; margin:0; display:block; clear:both;}
#container #content #joblist ul li{display:block; width:100%; text-align:left; font-size:16px; line-height:1.5em; margin:0 0 7px 2px; font-family:'Indie Flower',arial; font-weight:normal; font-style:normal; color:#1685C9; letter-spacing:0; font-family:Arial, Helvetica, sans-serif;}

/** Contact FORM **/
#container #content #contactform{float:left; width:358px; background:yellow; background:none; padding:0 16px 0 0; border-right:1px dashed #666666;}
#container #content #contactform h2 {margin:0 0 8px;}
#container #content #contactform p {text-align:left; font-size: 16px}
#container #content #contactform p.ins {display:none;}

#container #content #contactform div#frame div.form_row_spacer{height:8px; clear:both; display:block; width:100%;}
#container #content #contactform div#frame div.captionBlock{width:300px; float:left; font-size:14px; vertical-align:bottom; color:#333; font-style:italic; text-align:left; margin:4px 0 0;}
#container #content #contactform div#frame div.topSpace{margin-top:20px;}

#container #content #contactform div#frame div.fieldBlock{width:380px; float:left;}
#container #content #contactform div#frame div.fieldBlock p{margin-left:15px; font-size:14px; text-align:left;}

#container #content #contactform div#frame div.fieldBlock *{border:1px solid #999; color:#000; margin:0; padding:2px 4px; border-radius:4px;}
#container #content #contactform div#frame div.fieldBlock input{width:352px;}
#container #content #contactform div#frame div.fieldBlock select{width:362px; color:#333; padding:6px 4px; }
#container #content #contactform div#frame div.fieldBlock select option {border:none;}
#container #content #contactform div#frame div.fieldBlock textarea{min-width:350px; width:350px; max-width:350px; min-height:75px; height:75px; max-height:75px; color:#333; font-size:12px; padding:4px;}

#container #content #contactform div#frame div.captionBlock input{width:100%; padding:6px; color:#FFF; background:#2CA209; font-size:18px; border-radius:6px; border:none;}

/** Contact FORM - general **/
div.errorMessage{color:#FFF; font-size:11px; margin:0px 0px 0px 40px; padding:0px;}
div.errorMessage strong{color:#F00; font-size:11px; font-weight:bold;}
img.errorIcon{float:left; margin:0px; border-radius:6px; height:24px; width:24px;}
form#contact_form input.error, form#contact_form select.error, form#contact_form textarea.error{border:1px solid #FFFFFF; background:#E40000; color:#FFFFFF !important;}
form#contact_form input.valid, form#contact_form select.valid, form#contact_form textarea.valid{border:1px solid #4CA20B; background:#4CA20B; color:#FFFFFF !important;}
form#contact_form input.valid, form#contact_form select.valid, form#contact_form textarea.valid{border:1px solid #4CA20B; background:#36AA4D; color:#000000 !important;}
form#contact_form select.valid, form#contact_form textarea.valid{border:1px solid #4CA20B; background:#4CA20B; color:#FFFFFF !important;}
form#contact_form select.valid *, form#contact_form select.error *{background:none;}

form#contact_form input.valid, form#contact_form select.valid, form#contact_form textarea.valid{background:rgba(54,170,77,0.75); filter: alpha(opacity=75); -moz-opacity: 0.75; -khtml-opacity: 0.75; opacity: 0.75; color:#000;}
form#contact_form input:focus, form#contact_form select:focus, form#contact_form textarea:focus{background:#FFF !important; filter: alpha(opacity=100); -moz-opacity: 1;-khtml-opacity: 1; opacity: 1; color:#000 !important;}



#container #content #contactform div#frame div.fieldBlock input#submit{background:#666; color:#FFF; font-family:painted, arial; font-size:22px; width:360px; padding:8px 0;}




#container #content #areamap{float:right; clear:right; width:372px; background:#093; background:none;}
#container #content #areamap h2 {margin:0 0 8px;}
#container #content #areamap p {font-size:12px;}
#container #content #areamap p.ins {display:block; margin:8px 0 0;}
#container #content #areamap img {border-radius:6px; width:365px; display:block;}



#footbar {width:786px; display:block; margin:8px auto; position:relative;}

#footbar p {font-size:14px; text-transform:uppercase; color:#FFFFFF; font-family:'Merienda One',arial; font-family:arial; display:inline-block;}
#footbar p a{font-size:14px; font-weight:bold; text-decoration:none; font-family:'Merienda One',arial; font-family:arial;}
#footbar p#left{margin:0; padding:4px 0 0 8px; font-size:16px; color:#FFFFFF; }
#footbar p#left a{color:#000000; border-bottom:1px dashed #000000;}
#footbar p#left a:hover{border-bottom:1px dotted #000000;}

#footbar p#right{padding:6px 8px 6px 10px; margin:14px 0 0; border-radius:15px 0 0 15px; color:#E0E0E0; font-size:11px; position:absolute; right:0px; top:0px;}
#footbar p#right a{color:#FFFFFF; border-bottom:1px dashed #FFFFFF; font-size:11px;}
#footbar p#right a:hover{border-bottom:1px dotted #FFFFFF;}

#footbar p#bottom{padding:0; margin:4px 0 8px 8px; color:#E0E0E0; font-size:11px; display:block; clear:both;}
#footbar p#bottom a{color:#FFFFFF; border-bottom:1px dashed #FFFFFF; font-size:11px;}
#footbar p#bottom a:hover{border-bottom:1px dotted #FFFFFF;}