﻿/*
      Created by Ibrar Hussain
	  
	  E-Mail: ibrar@freemanholland.com	  
*/

* { padding: 0; margin:0;
}

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background:url('images/gradient.jpg') repeat-x;
}

#wrapper { 
 margin: 20px auto;
 width: 1034px;
 background-color:#fff;
 border: 1px solid #9b9b9b;
}
#inner { 
 margin: 20px;
 margin-top:10px;
 min-height:0px;
}

#find-school{background:url(images/find.jpg);padding:10px 15px; width: 202px; height: 83px; float:right}
#find-school h4{color:#fff;}
#find-school p{margin-bottom:7px;margin-top:5px;}

#find-school a{color:#000; text-decoration:underline}
#find-school a:hover{text-decoration:none}

.find_go
{
border-style: none;
border-color: inherit;
border-width: 0;
    background-color: #669933;
    color: white;
width:27px;
height:18px;
    cursor: pointer;
}


#social_media { width: 349px; height: 105px; overflow: hidden;float: right; margin-right: 20px;background: white url('images/social_media.jpg') 0 0; }
.second { background: white url('images/social_media.jpg') 0 -105px !important; }
#social_media #twitter_actions, #social_media a { color: #4da6d2; }
#social_media ul#social_media_nav { height: 25px;   }
#social_media ul#social_media_nav li { width: 172px;float: left;height: 0;padding-top: 26px;overflow: hidden; list-style: none; }
#social_media #twitter { width: 339px; height: 105px;padding: 10px;font-size: 11px; }
#social_media #twitter #twitter_msg { font-size: 10px; }
#social_media #twitter_actions { padding-top: 5px;}
#social_media #twitter a.follow { display: block;text-align: right;margin-right: 10px; }

#social_media #blog { width: 339px;height: 105px;padding: 10px;font-size: 11px; }
#social_media #blog h3 { font-size: 1em;padding-bottom: 5px; }
#social_media #blog a { display: block;text-align: right; margin-right: 10px;}

.vertical-align{vertical-align:middle}

.dropdown
{
background:none repeat scroll 0 0 #EDEDED;
border:1px solid #999999;
padding:5px;
width:283px;
margin-left:340px
}

.dropdown div
{
padding:5px;
}

.article-content{margin-bottom:20px;
margin-top:4px;
padding:13px}

#header {
 color: #333;
 width: 989px;
 float: left;
 padding: 0px;
 height: 152px;
 margin: 10px 0px 5px 0px;
}
#header-left 
{
 float:left;
 /**background-image:url('main_pages/header.jpg');**/
 width: 681px; 
 height: 152px;
}
#header-right 
{
 float:right;
 background-image:url('main_pages/header-right.png');
 height: 123px;
 width: 275px;
 color: #fff;
 margin: 0px 0px 5px 0px;
 padding: 15px;
 margin-top:-1px
 }
#header-right h4{ 
font-size:16px;
font-weight:bold;
}
#header-right a 
{
color:#fff;
text-decoration:underline;
}
#header-right a:hover 
{
text-decoration:none;
}
#search
{
float:right;
background-image:url('images/find.png'); 
width: 275px; 
height: 61px;
padding-left:20px;
padding:15px;
font-size:16px;
}
.search
{
color:#7a7a7a;
font-size:16px;
}
.request
{
background:url('main_pages/request.jpg');
height:27px;
width:92px;
float:right;
border:0;
cursor:pointer
}

#callback-text
{margin-top:20px}

.radio
{
	padding:5px;
}
.go
{
background-image:url('images/go.jpg');
width: 28px;
height: 21px;
float:right;
border:0;
margin-top:3px;
}

.clear{height:80px}

.date{clear:both;width: 240px; float:left; height:15px; margin-top:10px; font-size:16px; color:#009966}

.blog-links{height:300px;margin-top:27px;width:200px;margin-left:70px; color:#000}
.blog-links h3{color:#009966}

.blog-links ul{list-style-type:none; margin-left:2px}

.blog-links li{line-height:21px}

.print
{
border: 0;
background-image:url('main_pages/print_button.jpg');
width:125px;
margin-top:10px;
height: 23px;
cursor:pointer;
float:left;
}

#navigation {
 float: left;
 width: 989px;
 color: #333;
 padding-bottom:10px;
 height: 64px;
}
#rightcolumn { 
 color: #fff;
 margin: 0px 0px 5px 0px;
 padding: 15px;
 padding-top:15px;
 width: 276px;
 float: left;
}

#rightcolumn h4{ 
font-size:16px;
font-weight:bold;
}
#navigation {
 float: left;
 width: 989px;
 color: #333;
 padding-bottom:10px;
	height: 64px;
}

ul.menu {
    list-style:none;
    padding:0;
    margin:0;
    width:109%;
    clear:both;
	height: 66px;
}
ul.menu li {
    float:left;
}
ul.menu li a {
    height:64px;
    display:block;
    text-indent:-20000px;
    float:left;
}
ul.menu li.home {
    width:134px;
    background:url(nav_images/01_home_on.png) 0 0 no-repeat;
}
ul.menu li.home a {
    width:129px;
    background:url(nav_images/01_home_off.png) 0 0 no-repeat;
}

ul.menu li.about {
    width:116px;
    background:url(nav_images/02_about_us_on.png) 0 0 no-repeat;
}
ul.menu li.about a {
    width:113px;
    background:url(nav_images/02_about_us_off.png) 0 0 no-repeat;
}

ul.menu li.services {
    width:154px;
    background:url(nav_images/03_find_a_nursery_on.png) 0 0 no-repeat;
}
ul.menu li.services a {
    width:151px;
    background:url(nav_images/03_find_a_nursery_off.png) 0 0 no-repeat;
}

ul.menu li.therapies {
    width:148px;
    background:url(nav_images/04_in_the_nursery_on.png) 0 0 no-repeat;
	height: 64px;
}
ul.menu li.therapies a {
    width:153px;
    background:url(nav_images/04_in_the_nursery_off.png) 0 0 no-repeat;
}

ul.menu li.staff {
    width:99px;
    background:url(nav_images/05_ku_fun_on.png) 0 0 no-repeat;
	height: 65px;
}
ul.menu li.staff a {
    width:103px;
    background:url(nav_images/05_ku_fun_off.png) 0 0 no-repeat;
}

ul.menu li.reviews {
    width:76px;
    background:url(nav_images/06_parent_info_on.png) 0 0 no-repeat;
}
ul.menu li.reviews a {
    width:186px;
    background:url(nav_images/06_parent_info_off.png) 0 0 no-repeat;
}

ul.menu li.contact {
    width:150px;
    background:url(nav_images/07_get_in_touch_on.png) 0 0 no-repeat;
	height: 66px;
}
ul.menu li.contact a {
    width:136px;
    background:url(nav_images/07_get_in_touch_off.png) 0 0 no-repeat;
}

ul.menu li a:hover{background:transparent!important}
.templatemo_domain a{
text-decoration:underline;
}

#gallery { 
clear:both;
height:15px;
padding:5px;
padding-bottom:12px;
border:1px solid #000;
background-color:#f2f2f2;
width:978px;
color:#333;
float:left
}

#image-gallery{margin-top:60px;}
#image-gallery img{width:150px;height:170px;border:2px solid #c0c0c0;margin:5px;}
#image-gallery div{float:left; width:170px; margin:auto;padding-bottom:25px;text-align:center; height:240px;}
#image-gallery div span{float:left;text-align:center}

#breadcrumb { 
clear:both;
height:10px;
padding:5px;
padding-bottom:12px;
border:1px solid #009966;
background-color:#f2f2f2;
width:978px;
color:#333;
}

#breadcrumb a 
{
	text-decoration:underline;
	color:#009966;
}

#breadcrumb a:hover 
{
	text-decoration:none;
}

#leftcolumn { 
 color: #333;
 margin: 0px 5px 5px 0px;
 padding-top:10px;
 width: 658px;
 float: left;
 padding-bottom: 10px;
 position:relative;
 z-index:100;
}

.introheaderpurple {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 23px;
	color: #8A8299;
	vertical-align: middle;
	letter-spacing: 2.5px;
	text-align: right;
}

.introtextboldgreen {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #7F8772;
	vertical-align: top;
	text-align: justify;
	line-height: 15px;
}

#leftcolumn h4{ 
 color: #34a180;
 font-size:16px;
 font-weight:bold;
}

#leftcolumn h2{ 
 color: #34a180;
 font-size:27px;
 font-weight:bold;
height: 22px;
}

#leftcolumn li 
{
	margin-left:15px;
	line-height:18px;
	margin-bottom:6px;
}

#leftcolumn a
{
	text-decoration:underline;
	color:#009966;
}

#leftcolumn a:hover 
{
	text-decoration:none
}

#content { 
 float: left;
 color: #333;
 margin: 0px 5px 5px 0px;
 padding: 10px;
 height: 220px;
 width: 330px;
 display: inline;
 padding-top:0px;
}

#content h4{ 
 color: #34a180;
 font-size:16px;
 font-weight:bold;
}

.f11
{
	font-size: 12px;
}

.cf12
{
	font-weight: bold;
	padding-left: 5px;
}

.cf11, .cf12 
{
	color: #FFFFFF;
	background-color: #009966;
}

.cf11
{
	font-size: 11px;
	font-weight: bold;
}
#nursery-details
{
background-image:url("inner_pages/nursery-page.png");
height:261px;
margin:6px 4px 0 6px;
padding:15px 15px 15px 20px;
width:591px;
}

.nursery-login
{
background:url('images/submit.png');
height:27px;
width:110px;
border:0;
cursor:pointer
}

#nursery-content
{
 margin-top:14px;
 padding-right:6px;
 padding-left:7px;
 line-height:18px;
}

#nursery-details h4
{
	color:#fff;
	height: 18px;
	margin-top:6px;
}

#nursery-content h3
{
	color:#777;
	height: 18px;
	margin-top:19px;
	margin-bottom:8px;
	border-bottom:4px solid #777;
	padding-bottom:8px
}

#right_image h3
{
	color:#009966;
	height: 18px;
	margin-top:4px;
	margin-bottom:8px;
	border-bottom:4px solid #009966;
	padding-bottom:8px
}

#right_image a
{
	color:#5c85ad;
	text-decoration:underline
}

#right_image a:hover
{
		text-decoration:none
}

#left-nurseries{float:left;margin-top:8px;width: 227px;}
#middle-nurseries{float:left;margin-top:8px;width: 200px;}
#right-nurseries{float:right;margin-top:8px;width: 198px;
}

#right_image{width:315px;margin-top:12px;overflow:hidden}

.margins{margin:2px;border: 5px solid #c0c0c0;}

#postcode-search
{
 background:url('inner_pages/postcode-search.jpg') no-repeat;
 margin-top:15px;
 height: 120px;
 width: 620px;
 padding-left:20px;
 padding-right: 15px;
 padding-top: 15px;
 padding-bottom: 15px;
}

#postcode-right-nursery{float:right;width:310px;color:#fff;}
#postcode-right{float:right;width:252px;color:#333;}
#postcode-right ul{list-style-type:none;}
#postcode-right li{line-height:21px;margin-bottom:0;color:#000;font-weight:bold}
.postcode-submit {background:url('inner_pages/pcode-submit.png');float:right;border:none;margin-right:15px;margin-top:9px;height:23px;width:88px; text-indent:-1000px; cursor:pointer
}

#postcode-left{float:left;width:224px;color:#fff;line-height:19px;}
#postcode-left-nursery{float:left;width:267px;
color:#fff;line-height:19px;
}

#postcode-left h2
{
	color:#fff;
	height: 27px;
	margin-top:6px;
	font-weight:normal;
}

#nursery-list{padding-left:17px;width: 626px;}
#nursery-list p{color:#34a180}
#nursery-list h4{font-size:18px;height: 23px;}

#nursery-list h5{color:#000;font-size:12px;}
#nursery-list a{font-size:11px;color:#333;text-decoration:underline}
#nursery-list a:hover{text-decoration:none;}
.parent-login {background:url('inner_pages/parent-login.png');float:right;border:none;height:23px;width:88px;margin-left:7px;margin-bottom:15px;margin-right:-2px; cursor:pointer}

#nursery-list {
    margin:auto;
    font:400 100%/1.5 arial;
    width:54em;
    overflow:hidden;
}
#nursery-list h5{
    margin:1.5em 0 0;
    font-size:100%;
}
#nursery-list a{
    color:#000;
}
#nursery-list ul{
    margin:0;
    padding:0;
}
#nursery-list li{
    float:left;
    width:18em;
    list-style:none;
}
/* JonR insert */
#nursery-list table{
    width:620px;
    margin:20px 0 0 0;
    border-collapse:collapse;
    font-size:90%;
}

#nursery-list table tr td
{
    padding:10px;
    color:Black;
}

#nursery-list table tr td p
{
    color:Black;
}

#nursery-list table tr td a
{
    font-size:100%;
    color:#34a180;
}

#nursery-list table tr, #nursery-list table tr td{
    background-color:#ddd;
}

#nursery-list table tr.alt, #nursery-list table tr.alt td{
    background-color:white;
}

#nursery-list-errors{
    width:360px;
    color:Red;
    padding:17px;
}

#nursery-list-errors h4, #nursery-list-errors p{
    color:Red;
    
}

#nursery-list p strong{
    font-weight:bold;
    color:Black;
}


/* JonR insert END*/
#vacancies{padding:10px;border:1px solid #333;width:474px;margin-top:10px;background-color:#f2f2f2}
#vacancies p{margin-bottom:5px}

.vacancy-info
{width:460px;line-height:19px;}

#rightcolumn { 
 color: #fff;
 margin: 0px 0px 5px 0px;
 padding-top:15px;
 padding-right:0px;
 width: 309px;
 float: left;
 padding-left: 15px; 	
 padding-bottom: 15px;
 z-index:99;
}

#rightcolumn h4{ 
font-size:16px;
font-weight:bold;
}

#rightcolumn p{color:#000;font-size:11px;} 

#job-right{float:right;width:252px;color:#333; border:2px solid #000;padding:5px;padding-left:15px;}
#job-right ul{list-style-type:none;}
#job-right li{line-height:21px;margin-bottom:0;color:#000;font-weight:bold}

.submit
{
background-image:url('images/submit.jpg');
border:0;
height:28px; 
width:67px;
}

#rightcolumn a{ 
 color: #fff;
 text-decoration:none;
}
#rightcolumn a:hover{ 
 text-decoration:underline;
}

.quicklinks{padding-bottom:15px; border-bottom:2px solid #c0c0c0; color:#333; width:488px;margin-left:8px; margin-top:12px}
.quicklinks h5{color:#333; margin-bottom:5px; font-size:12px}
.quicklinks ul{list-style:none; margin-left:-15px}

.quicklinks-other{padding-bottom:15px; border-bottom:2px solid #c0c0c0; color:#333; width:650px;margin-left:8px; margin-top:12px}
.quicklinks-other h5{color:#333; margin-bottom:5px; font-size:12px}
.quicklinks-other ul{list-style:none; margin-left:-15px}

.with-bullets li{list-style-type:disc}
.back-to-top{float:right; border:0; margin-top:-30px}
.p-tag{margin-bottom:8px}

.speech-quotes-top{width:269px; background:url(images/top_box.png); padding-left:15px; padding-right: 20px; padding-top: 3px; padding-bottom: 3px; height: 14px; margin-left:-2px; margin-bottom:-8px;}
.speech-quotes-bottom{width:269px; background:url(images/bottom_box.png); padding-left:15px; padding-right: 20px; padding-top: 3px; padding-bottom: 3px; height: 45px;margin-left:-2px}
.speech-quotes{width:261px; background:#c0c0c0;margin-left:-2px; padding: 0px 20px 0px 23px;}

#recruitment {
  border: 1px solid #1EA578;
  float: left;
  padding: 8px 0 8px 8px;
  width: 215px;
  height:350px
}

#recruitment h5
{
height:13px;border-bottom:1px solid #cbcbcb; padding-bottom:7px;margin-bottom:5px; width: 206px; font-size:12px;
}

/* Vacancy Search */
#vacancy-search{background:none repeat scroll 0 0 #DDDDDD;border:1px solid #009966;margin:13px 0 15px 0;padding:10px;width:475px;}
.vacancy-textbox{}

#recruitment-content {
 margin-left:18px;display:inline;float:left;width:408px}


#recruitment-job
{width:511px; position:absolute; left: 372px; top: 411px;}
/** Tabs **/
/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .tabs-hide {
        display: none;
    }
}

/* Hide useless elements in print layouts... */
@media print {
    .tabs-nav {
        display: none;
    }
}

/* Skin */
.tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0 0 0 0px;
}
.tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
}
.tabs-nav li {
    float: left;
    margin: 0 0 0 1px;
    min-width: 84px; /* be nice to Opera */
}
.tabs-nav a, .tabs-nav a span {
    display: block;
    padding: 0 25px;
    background: url(tab.png) no-repeat;
}
.tabs-nav a {
    position: relative;
    top: 1px;
    z-index: 2;
    padding-left: 0px;
    margin-left:6px;
    color: #27537a;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap; /* required in IE 6 */    
}
.tabs-nav .tabs-selected a {
    color: #000;
}
.tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active {
    background-position: 100% -150px;
    outline: 0; /* prevent dotted border in Firefox */
}
.tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active {
    background-position: 100% -100px;
}
.tabs-nav a span {
    width: 64px; /* IE 6 treats width as min-width */
    min-width: 64px;
    height: 18px; /* IE 6 treats height as min-height */
    min-height: 18px;
    padding-top: 6px;
    padding-right: 0;
    margin-bottom:-6px;
    color:#fff
}
*>.tabs-nav a span { /* hide from IE 6 */
    width: auto;
    height: auto;
}
.tabs-nav .tabs-selected a span {
    padding-top: 7px;
}
.tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav a:focus span, .tabs-nav a:active span {
    background-position: 0 -50px;
}
.tabs-nav a span, .tabs-nav .tabs-disabled a:hover span, .tabs-nav .tabs-disabled a:focus span, .tabs-nav .tabs-disabled a:active span {
    background-position: 0 0;
}
.tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}
.tabs-nav .tabs-disabled {
    opacity: .4;
}
.tabs-container {
    border: 1px solid #97a5b0;
    padding: 1em 8px;
    background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
}
.tabs-loading em {
    padding: 0 0 0 20px;
    background: url(loading.gif) no-repeat 0 50%;
}
.tabs-container {
    border: 1px solid #97a5b0;
    padding: 1em 8px;
    background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
        clear:both;
        min-height:0;
        overflow:hidden
}
* html .tabs-container{zoom:1.0}

#footer { 
 width: 960px;
 clear: both;
 color: #333;
 background: #cccccc;
 margin: 0px 0px 10px 0px;
 padding: 15px;
 height: 21px;
 padding-top:20px;
}
.left a 
{
margin-right:7px;
margin-left:7px;
color:#333;
text-decoration:none:
}
.left a:hover 
{
color:#000;
text-decoration:underline;
}

.left { 
float:left;
}

.right { 
float:right;
margin-top:-10px;
text-align:right;
line-height:18px;
}

.right a{ 
text-decoration:underline;
}

.right a:hover 
{
	text-decoration:none;
}

#declaration{font-size:11px;margin-top:15px; clear:both; width:1033px; height: 13px; margin:auto; text-align:right}

.chromestyle{
 float: left;
 width: 986px;
 color: #333;
 padding-bottom:10px;
	height: 61px;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromestyle ul{
    list-style:none;
    padding:0;
    margin:0;
    width:109%;
    clear:both;
	height: 60px;
	border:0;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
}


/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #009966; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 11px Verdana;
line-height:18px;
z-index:1000;
background-color: white;
width: 200px;
visibility: hidden;
margin-top:-11px;
}

.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
padding: 2px 0;
text-decoration: none;
color: #333;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}


#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(light_images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(light_images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }


.searchList { width: 300px;}
