/* CSS file for Croydon Hall by punyaweb.net   */

/* Copyright (c) 2007, Yahoo! Inc. All rights reserved.  */


/* 0. Minimum re-sets
   1. Style - structure of page
   2. Text
   3. Links
   4. Lists
   5. Navigation
   6. Forms
   7. Gallery
*/

/* 0. Minimum re-sets */

/* Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt version: 2.2.2 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,address,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;}

* { margin:0; padding: 0; }
html * { font-size: 100.01%; }




/* 1. Style */

body {
	font: 62.5%/150% arial, helvetica, sans-serif;
	margin-top: 0px;
	margin-bottom: 30px;
	text-align:center;
      }

body.main  { color: #666; }
body.guesthouse  { background-color:#0b1c2c; color: #ccc;}
body.holistic { color: #666;}
body.venue {background-color:#c1c3c5; color: #333;}


#wrapper {
	position: relative;
	margin:0 auto;
	text-align:left;
        font-size: 1.2em;
        line-height: 150%;
	}

.main #wrapper { width: 981px;}
.guesthouse #wrapper { width: 960px;}
.holistic #wrapper,.venue #wrapper { width: 980px;}

.main #header { height:115px; }
.guesthouse #header { height:160px; background:url(imgs/guesthouse-bg.jpg) repeat-y 0 0;}
.holistic #header { height:130px; }
.venue #header { height:130px; background:url(imgs/header-bg.jpg) repeat-y 0 0;}

.main #header img { margin:10px 0 0 8px; width:273px; height:88px;}
.guesthouse #header img { margin:10px 0 0 8px; width:299px; height:133px;}
.holistic #header img { margin:10px 0 0 8px; width:285px; height:101px;}
.venue #header img { margin:10px 0 0 0px; width:306px; height:105px;}

.main #header_left {float:left}
.holistic #header_left {float:left}

.main #header_right {float:right; margin: 8px 85px 0 0}
.holistic #header_right {float:right; margin: 10px 124px 0 0}


.holistic #navigation {height:2em;}


.main #banner { margin-bottom:20px;}
.guesthouse #banner { height: 320px ;margin-bottom:20px;}
.holistic #banner { height:295px; margin-bottom:18px;}
.holistic #banner_narrow { height:200px; margin-bottom:18px;}
.venue #banner { height: 340px ;margin-bottom:25px;}


#mainLeft{ width: 323px; height:500px; float: left; margin-right: 6px; }
#mainMiddle{ width: 323px; height:500px; float: left; margin-right: 6px;  }
#mainRight{ width: 323px; height:500px; float: left; }


#mainLeft img,
#mainMiddle img,
#mainRight img {  width:323px; height:499px; }


/* for venue and guesthouse */

html>body #left,
html>body #right {
height: auto; min-height: 380px;
        }

#left, #right {height: 380px; }

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

.guesthouse .col1{ width: 200px; float: left;  }
.holistic .col1{ width: 700px; float: left;  }
.venue .col1{ width: 201px; float: left;  }

.guesthouse .col2 { width: 760px; float: left; }
.holistic .col2 { width: 280px; float: right; }
.venue .col2 { width: 769px; float: left; }


.guesthouse .col1_padding { padding:0px 10px 20px 0px }
.venue .col1_padding { padding:10px 10px 0 0 }

.guesthouse .col2_padding { padding:0 }
.holistic .col2_padding { padding:0px 30px 20px 30px }

/*  dark pages */

.guesthouse #left{ width: 245px; float: left;  }
.guesthouse #right{ width: 493px; float: left;  }

.guesthouse #left_padding { padding:3px 30px 10px 0px }
.guesthouse #right_padding { padding:0px 0px 10px 0px }
.holistic #right-padding { padding-bottom: 50px;}
.guesthouse #right_padding_text { padding:0px 70px 10px 0px }


/* text on light background  */

.guesthouse #wrapper_text { background-color:#e2e1dd; margin:0 12px 0px 3px; height:100%; }


.guesthouse #left_text { width: 245px; float: left;}
.holistic #left_text { width: 200px; float: left;}

.guesthouse #right_text { width: 493px; float: left; }
.holistic #right_text { width: 493px; float: left; }

.guesthouse #left_text_padding { padding:8px 30px 10px 15px }
.holistic #left_text_padding { padding:12px 30px 10px 10px }
.holistic #left_text_padding_d { padding:0px 30px 10px 15px } /* for directions pages */

.guesthouse #right_text_padding { padding:8px 80px 30px 0px }
.holistic #right_text_padding { padding:8px 10px 30px 0px }
.holistic #right_text_padding_event { padding:0px 10px 30px 0px }

.guesthouse #right_text_padding_p { padding:12px 80px 30px 0px }

/* below for HISTORY */

.guesthouse #right_text_padding img { position:relative; left: -10px; float:left; margin-top:3px;
                    border-top: 2px solid #e6e6e5;
                    border-left: 2px solid #e6e6e5;
                    border-right: 2px solid #c0c0be;
                    border-bottom: 2px solid #c0c0be;
                    }

.venue #right_text_padding img { margin:3px 0;
                    border-top: 2px solid #d2d293;
                    border-left: 2px solid #d2d293;
                    border-right: 2px solid #6b6b2c;
                    border-bottom: 2px solid #6b6b2c;
}

/* in col1 with three rows of pictures */

.holistic #left,
.holistic #middle
          { width: 220px; float: left; margin-right:20px;}
.holistic #right{ width: 220px; float: left;  }
                    
/* for the programme */

.holistic #left_programme { width: 300px; float: left;}
.holistic #right_programme { width: 393px; float: left; }

.holistic #left_programme_padding { padding:8px 30px 10px 10px }
.holistic #right_programme_padding { padding:8px 10px 30px 0px }



/* image boxes home page */

.guesthouse .box { width: 220px; float:left; margin:0 20px 10px 0; min-height:22em}
.holistic .box { width: 220px; min-height:25em; }
.venue .box { width: 220px; min-height:20em; margin:0 20px 10px 0;}

.guesthouse .box p { margin: 5px 0 18px 0; }
.holistic .box p { margin: 5px 0 18px 0; }
.venue div.box p { margin: 5px 0 15px 0;}

/* for the image boxes on home page */

.venue #left{ width: 245px; float: left;  }
.venue #middle{ width: 246px; float: left;  }
.venue #right{ width: 246px; float: left;  }

.venue #right_text{ width: 450px; float: left;  }
.venue #right_text_padding {padding:0px 30px 10px 0px}

.venue #left_padding { padding:0px 30px 10px 0px }
.venue #middle_padding { padding:0px 0px 10px 0px }
.venue #right_padding { padding:0px 0px 10px 0px }

/* for the image boxes on home page */


.guesthouse #middle_home{ width: 240px; float: left;  }
.guesthouse #right_home{ width: 240px; float: left;  }



/* for the programme cards for HOLISTIC */

#event { min-height:10em;border-bottom: 1px dotted #a0a05a; padding:0 0 8px 0; margin-bottom:15px;}
#event dl {border-bottom: 1px dotted #a0a05a; padding:0px 0 8px 0; margin-bottom: 15px;}
#event dt {display:none;}

/* for the programme in HOLISTIC */

.holistic dl {border-bottom: 1px dotted #a0a05a; padding:8px 0;}
.holistic dt {display:none;}

.more li {padding:5px 0;}

.holistic dd.title {
  	font-family: helvetica, arial, sans-serif;
  	font-weight:normal;
        font-size: 150%;
        color:#76763e;
        padding: 0 0 0.2em 0;
        line-height:1.2em;
        letter-spacing: 0.03em;
        margin:0;
}

/* for the small pictures for the workshop rooms HOLISTIC and the function rooms VENUE */

#pictures { margin:20px 0;}
#pictures p { margin:2px 0 10px 0;}
#pictures img { width:150px; height:100px;}




/* footer */

#footer {clear:both; }

.main #footer {
        height: 1em;
        padding-top:15px;
        margin: 0px;
        }

.guesthouse #footer {
        height: 5em;
        padding-top:15px;
        margin: 0px;
        background-color:#0b1c2c;
        }
        
.holistic #footer {
        height: 4em;
        padding-top:15px;
        border-top: 2px solid #a0a05a;
        }


.venue #footer {
        height: 4em;
        padding-top:25px;
        margin: 0;
        }
        
/*  for the logos for GUESTHOUSE */

#logos_footer { margin:15px 0}
#logos_side {margin-top:30px;}
#logos_side img { clear: both; margin-bottom:10px;}


/* 2. Text */

p { padding-bottom:0.5em; }
em { font-style:italic;}


h1,h2,h3,h4,h5,h6 {
  	font-family: helvetica, arial, sans-serif;
  	font-weight:normal;
        font-size: 150%;
        padding: 0.2em 0;
        line-height:1.2em;
        letter-spacing: 0.03em;
        margin:0;
        }

h1 { padding: 0 0 0.3em 0; } /* title in the left column */
h2 { padding: 0 0 0.2em 0; } /* first title on the right column*/
.guesthouse h2,.holistic h2 { padding: 0.15em 0; } /* first title on the right column*/
h3,h4,h5,h6 {padding: 0.2em 0;}

.guesthouse h1,
.guesthouse h2,
.guesthouse h3,
.guesthouse h4,
.guesthouse h5,
.guesthouse h6 { color:#7992aa;font-weight:normal;}

.holistic h1,
.holistic h2,
.holistic h3,
.holistic h4,
.holistic h5,
.holistic h6 { color:#76763e; font-weight:normal; }

.venue h1,
.venue h2,
.venue h3,
.venue h4,
.venue h5,
.venue h6 { color:#251e3d; font-weight:normal;}

.programme h6 {color:#fff}

/* pages with light background */


.venue #wrapper_text { color:#656665; }      /* CHECK THIS OUT IF IT EXISTS */



/*-- for GUESTHOUSE the ones with light background --*/

.guesthouse #wrapper_text { color:#484948; }                  /* regular text */
.guesthouse em { font-style:italic; color:#4f4e4e; }     /* for testimonials */

#content_light h1,
#content_light h2,
#content_light h3,
#content_light h4,
#content_light h5,
#content_light h6 { color: #2e4f6f; font-weight:bold; padding: 0.2em 0;}

#content_light i { color:#2e4f6f}   /* blue in left column */

.guesthouse i { color:#7992aa}
.holistic i { color:#76763e}
.venue i { color:#251e3d}      /* for intro - purple 331e3d*/




.main address { color:#666; line-height:130%;}
.guesthouse address { color:#7992aa; }

.holistic strong { color:#76763e; }


.holistic em { font-style:italic; color:#656665; }     /* for testimonials */
.venue em { font-style:italic; color:#333; }     /* for testimonials */


/* extras */

/* this is for the registered office contact page - guesthouse and holistic and venue */

div.space_above {padding-top:1.5em;}

/* this is for the programme page HOLISTIC ONLY */

.holistic .space p {padding-top:1.5em;}
.holistic .spaced p {padding-bottom:2.5em;}




/* 3. Links */

a {text-decoration: none; }


.guesthouse a:link {color: #7992aa;  }
.guesthouse a:visited {color: #7992aa;  }
.guesthouse a:hover {color: #c03604;}
.guesthouse a:active {color: #c03604;}

.holistic a:link {color: #76763e;  }
.holistic a:visited {color: #76763e;  }
.holistic a:hover {color: #c03604;}
.holistic a:active {color: #c03604;}

.venue a {text-decoration: none; }
.venue a:link {color: #251e3d;  }
.venue a:visited {color: #251e3d;  }
.venue a:hover {color: #c03604;}
.venue a:active {color: #c03604;}


.guesthouse #wrapper_text a:link {color: #2e4f6f;  }
.guesthouse #wrapper_text a:visited {color: #2e4f6f;  }
.guesthouse #wrapper_text a:hover {color: #c03604;}
.guesthouse #wrapper_text a:active {color: #c03604;}


.holistic address { color:#666; }
.holistic address a:link {color: #666;  }
.holistic address a:visited {color: #666;  }
.holistic address a:hover {color: #a0a05a;}
.holistic address a:active {color: #a0a05a;}

.venue address a:link { color:#251e3d; }        /*  lighter gray */
.venue address a:visited {color: #251e3d;  }
.venue address a:hover {color: #c03604;}
.venue address a:active {color: #c03604;}


#footer { font-size:0.95em;}
.main #footer { color: #666;}
.main #footer a:link {color: #666;}
.main #footer a:visited {color: #999; }
.main #footer a:hover {color: #c03604;}
.main #footer a:active {color: #c03604;}

.guesthouse #footer { color: #ccc;}
.guesthouse #footer a:link {color: #ccc;}
.guesthouse #footer a:visited {color: #ccc; }
.guesthouse #footer a:hover {color: #c03604;}
.guesthouse #footer a:active {color: #c03604;}

.holistic #footer { color: #666;}
.holistic #footer a:link {color: #666;}
.holistic #footer a:visited {color: #666; }
.holistic #footer a:hover {color: #a0a05a;}
.holistic #footer a:active {color: #a0a05a;}

.venue #footer { color: #333;}
.venue #footer a:link {color: #333;}
.venue #footer a:visited {color: #333; }
.venue #footer a:hover {color: #c03604;}
.venue #footer a:active {color: #c03604;}




/* 4. Lists */

ul { padding-bottom:1em;}

/* for the links page */

.guesthouse .spaced_list li { padding: 0 0 3em 0;}
.holistic .spaced_list li { padding: 0 0 3em 0;}
.holistic .spaced_list_tight li { padding: 1em 0;}
.venue .spaced_list li { padding: 0 0 2em 0;}

/* list for travel links for GUESTHOUSE and VENUE */

.spaced_list_tighter li {padding: 0 0 2em 0;}


/* for the directions links below title */

.guesthouse #space_top { margin-top:1.5em;}
.guesthouse #space_top li { padding: 0 0 0.5em 0;}

/* tick for the accommodation pages */

.arrow ul {
        list-style-type: none;
        margin-top: 0.5em;
        margin: 0;
        }
        
.arrow li {
        background-repeat: no-repeat;
        background-position: 0 30%;
        padding:0.25em 0 0.25em 1.5em;
        }

.guesthouse .arrow li { background-image: url(imgs/guesthouse-tick.gif); }
.holistic .arrow li {background-image: url(imgs/holistic-tick.png);}
.venue .arrow li { background-image: url(imgs/venue-tick.gif);}



/* 5. Navigation */


/* navigation GUESTHOUSE and VENUE @copyright       Copyright 2005-2008, Dirk Jesse*/

.vlist {
    width: 100%;
    overflow: hidden;
    margin: 0 0 0.5em 0;
    list-style-type: none;
    border-bottom: 0px #ddd solid;
    }

.vlist ul {
    list-style-type: none;
    margin:0;
    padding: 0;
    }

.vlist li {
    float:left; /* LTR */
    width: 100%;
    margin:0;
    padding: 0;
    }

.vlist a,
.vlist strong,
.vlist span {
    display:block;
    padding: 2px 0px 2px 10%;
    text-decoration: none;
    border-bottom: 0px #ddd solid;
    }


.guesthouse .vlist a,
.guesthouse .vlist a:visited {
    color: #ccc;
    }
.venue .vlist a,
.venue .vlist a:visited {
    color: #333;
  }

.vlist li span {
    display:block;
    font-weight: bold;
    }

.guesthouse .vlist li span {color:#999;}
.venue .vlist li span {color:#999;}

  /* active list element */
.guesthouse .vlist li.active { color: #999; font-weight: bold;}
.venue .vlist li.active { color: #7e7d7d; font-weight: bold;}

  /* Level 1 */
.guesthouse .vlist li a,
.guesthouse .vlist li strong,
.guesthouse .vlist li span { width: 100%; padding-left: 2%; } /* LTR */

.guesthouse .vlist li a:focus,
.guesthouse .vlist li a:hover,
.guesthouse .vlist li a:active { color: #fff; }

  /* Level 1 */
.venue .vlist li a,
.venue .vlist li strong,
.venue .vlist li span { width: 100%; padding-left: 0%; } /* LTR */

.venue .vlist li a:focus,
.venue .vlist li a:hover,
.venue .vlist li a:active { color: #7e7d7d; }

}

/* HOLISTIC @copyright       Copyright 2005-2008, Dirk Jesse */

  #nav_main {
    /* (en) containing floats in IE */
    width: 100%;
    overflow: hidden;
    /* (en) containing floats in all other browsers */
    float: left;
    display: inline;
    /* (en) Repeat the main color from the image */
    border-top: 0px #333 solid;
    border-bottom: 0px #333 solid;
    line-height: 0;
  }

  #nav_main ul {
    border-left: 0px #aaa solid;
    border-right: 0px #fff solid;
    /* (en|de) Bugfix: IE - Doubled Float Margin Bug */
    display: inline;
    float: left;
    margin-right: 20px;
    /* (en) Left margin of the first button  */
    margin-left: 0;
    padding: 3px 0;
  }

  #nav_main ul li {
    border-left: 0px #fff solid;
    border-right: 0px #aaa solid;
    /* (en|de) Bugfix: IE - Doubled Float Margin Bug */
    display: inline;
    float: left;
    font-size: 1em;
    line-height: 0.6em;
    list-style-type: none;
    margin: 0;
    padding: 0;
    letter-spacing: 0.03em;
  }

  #nav_main ul li a,
  #nav_main ul li strong {
    /* background: transparent;   */
    color: #666;
    display: block;
    font-size: 1em;
    font-weight: normal;
    margin: 0;
    padding: 0.5em 1em 0.5em 1em;
    text-decoration: none;
    width: auto;
    background:transparent;
  }


  #nav_main ul li a:focus,
  #nav_main ul li a:hover,
  #nav_main ul li a:active  { background: url(imgs/navigation.png) repeat-x 0 0; color: #a0a05a; text-decoration: none; }

  #nav_main ul li#current {
    /* (en) Repeat the main color from the image */
    background: url(img/) repeat-x 0 0;
    border-left: 0px #444 solid;
    border-right: 0px #888 solid;
  }

  #nav_main ul li#current strong,
  #nav_main ul li#current a,
  #nav_main ul li#current a:focus,
  #nav_main ul li#current a:hover,
  #nav_main ul li#current a:active { background: url(imgs/navigation.png) repeat-x 0 0; color: #76763e; text-decoration: none; }




/* 6. Forms */


/* -------------------------------------------------------------------------- */
/* Generic style for forms                                                    */

form { border: none; }
form fieldset { border: none; }
form fieldset legend { display: none;} 

.guesthouse .inputbox { color:#333; }
.holistic .inputbox { color:#666; }
.venue .inputbox { color:#333; }

/* -------------------------------------------------------------------------- */
/*    for the enquiry form for GUESTHOUSE and VENUE first                     */

#enquiryform { width:180px; }
#enquiryform .left_area { float:left; width:50px; margin-right:5px;}
#enquiryform .left_area_link { float:left;width:90px; margin-top:8px; font-size:80%;}
#enquiryform .right_area { float:right;width:50px;}
#enquiryform #submit { width:165px; margin: 10px 0 50px 0; }

.holistic #enquiryform { width:200px; margin-bottom:20px; }
.holistic #enquiryform .left_area { float:left; width:50px; margin-right:5px;}
.holistic #enquiryform .left_area_link { float:left;width:90px; margin-top:8px; font-size:80%;}
.holistic #enquiryform .right_area { float:right;width:50px;}
.holistic #enquiryform #submit { width:165px; margin-top:10px; }

/* -------------------------------------------------------------------------- */
/*    for the newsletter form  HOLISTIC                                       */

  
#newsletterform { width:200px; margin-bottom:20px; }
#newsletterform .left_area { float:left; width:50px; margin-right:5px;}
#newsletterform .left_area_link { float:left;width:90px; margin-top:8px; font-size:80%}
#newsletterform #submit { width:165px; margin-top:10px; }


/* -------------------------------------------------------------------------- */
/* Inside forms                                                               */

div.formRow { padding:0.4em 0; clear:both;}
div.formRow_tight { padding:0 0; clear:both; } 

.venue .space {padding-bottom:30px}

/* -------------------------------------------------------------------------- */
/*    for all contact forms                                                    */

#contact_form { width:400px; }


div.formRow div.formLabelArea { float: left; width: 100px; text-align: left; margin-right: 10px; font-weight: normal !important;}
div.formRow .formLabelArea label { font-size: 1em; display: block;}

.guesthouse div.formRow .formLabelArea label {color:#ccc;}
.holistic div.formRow .formLabelArea label {color:#666;}
.venue div.formRow .formLabelArea label {color:#333;}

div.formRow .formLabelArea span { font-size: .8em; }

div.formRow div.formInputArea { margin-left: 105px; font-size:1.2em; }

.mediumInput input,
.mediumInput select,
.mediumInput textarea { width: 212px;}


/* -------------------------------------------------------------------------- */
/* 7. Gallery */



/* for the home page */

.opacity img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

.opacity:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
-moz-opacity: 0.6;
}

.guesthouse #category,
.venue #category {padding-left: 10px; height: 320px;}

.holistic #category {padding-left: 10px; height: 400px;}


.guesthouse #category img,
.venue #category img { float:left; margin-right:8px; width:185px; height:320px}

.holistic #category img { float:left; margin-right:8px; width:180px; height:390px}




/* for the cgalleries */

img {margin:0; padding:0;}

#gallery {
        width: 100%;
        position: relative;
	}
.guesthouse #gallery {
	width: 750px;
	height: 318px;
	}
.holistic #gallery {
	width: 980px;
	height: 320px;
	margin: 0;
	}
.venue #gallery {
	width: 750px;
	height: 340px;
	}
	
#image {
	padding-top: 0px;
	text-align:center;
	}
.guesthouse #image {
	width: 650px;
	height: 318px;
	margin-left: 4px;
	}
.holistic #image {
	width: 650px;
	height: 318px;
	}
.venue #image {
	width: 650px;
	height: 340px;
	margin-left: 0px;
	}
	
#thumbs { position: absolute; }

.guesthouse #thumbs {
	top: 0px;
	left: 659px;
	width: 90px;
	}
.holistic #thumbs {
	top: 1px;
	left: 726px;
	width: 288px;
	height:300px;
	}
.venue #thumbs {
	top: 0px;
	left: 659px;
	width: 100px;
	height:340px;
	}

#thumbs div {margin: 0}

#thumbs img {
	cursor: hand;
	cursor: pointer; 
        }

.guesthouse #thumbs img {
	margin: 0 0 1px 0;
	padding-bottom: 1px;
	width: 90px;
	height: 60px;
	}
.holistic #thumbs img {
	margin: 0 0 4px 4px;
	width: 56px;
	height: 56px;
	}
.venue #thumbs img {
	padding-bottom: 2px;
	margin:0;
	width: 100px;
	height: 62px;
	}

.current, .transparent {
	opacity: 0.6;
	-moz-opacity: 0.6;
	filter: alpha(opacity=60);
	}