/* Bonnechere colours 

base: #595954
lighter: #C4C4C1
darker: #2E2E25
light beige: #535A5C
dark purple: #362B30
lightest purple: #C7C3C5
light purple: #5B585C
blue grey: #233034
brownish slate: #5D575A
*/

/* the container div creates the box in which the web site appears to 'float'
   over the page.
*/

#container { width: 720px; height: auto; border: 2px solid #000; background-color: #FDFDFD;	padding: 0px; margin-top: 20px;	margin-bottom: 20px; margin-right: auto; margin-left: auto; }

#top {width: 710px; clear: both;  padding-top: 10px; padding-left: 10px; height: 150px; background: url(bonnechereflag.jpg) no-repeat top center}
#top h4 {padding: 0px; margin: 0}
#top h1 {margin-top: 90px}
#top h1, #top h4 {color: #fff}
#top h1 a {color: #fff; text-decoration: none; border: none}
#top a, #top a:visited {color:#fff;}
#top a:hover {background-color: #362B30}
#nav { margin: 0px 10px 5px 10px; padding-bottom: 5px }
#nav ul, #nav li, #bottomnav ul, #bottomnav li {display: inline; font-size: 11px}
#nav li, #bottomnav li  {border-left: 1px solid #233034; margin-left: 3px; padding-left: 6px}
#nav ul, #bottomnav ul {border-right: 1px solid #233034; padding-right: 6px; margin-left: 0px; padding-left: 0px}

#bottomnav {padding: 5px}



#middle {padding: 0px; margin: 10px; width:660px; float: left}
#middleleft {float: left; width: 420px}
#middle, #middleleft {padding: 10px; border: 0px; color: #000;}

#right { width: 240px; float: right; margin-top: 10px; margin-right: 10px; padding-left: 10px; 
         border-left: 1px solid #5B585C;}

body {font-family: Arial, Geneva, Helvetica sans-serif; background: #C4C4C1	url(bonnecherebg.jpg) left bottom repeat-x; margin: 0;}
a, div#right p a, div#middle p a {text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted}
#middle a, #right a {border: none}
a:link { color:  #233034; }
a:visited { color:  #5B585C; }
a:active { color:  #ccc; }
a:hover { background-color: #C4C4C1; }

h1 a, h2 a, h3 a, h4 a {text-decoration: none}	

strong, b {font-weight: bold;}

p, #middleleft li, #middleleft ul {font-size: 12px;line-height: 18px;margin: 0px 0px 10px 0px; }
p {text-indent: 0px}
p+p {text-indent: 12px}

#middleleft li, #middleleft ul {margin-left: 9px; padding-left: 6px}

/* these two rules handle headlines. The first gives all headline <h*> tags some common
characteristics. The next ones give each <h*> tag its own font size */

h1, h2, h3, h4, h5, h6 {font-family: "Lucida Grande", "Trebuchet MS", verdana, sans-serif; margin-top: 1%; margin-bottom: 0;}
h1 {font-size: 20px;}
h2 {font-size: 18px;}
h3 {font-size: 16px;}
h4 {font-size: 14px;}
h5 {font-size: 12px;}
h6 {font-size: 10px;}

/* this collection of rules handles specific situations that vary from the general rules */

/* what to do when you encounter an h3 tag within the left bar, right bar or spotlight box */

/* how to handle unordered lists when they're in the right or left bars */
#right ul, #right li, #right p {font-size: 11px;}

img {border: 0;}

/* ALAP form CSS stuff  */            

div.formrow, .listrow, .listrow1, .listrow0, div.formrow-odd, .dlrow, .dlrow1, .dlrow0, .row1, .row2, .row {clear: both;  padding-top: 5px;  }
div.formrow-odd { background-color: #ccc;}
div.formrow span.label, div.formrow-odd span.label{ float: left; width: 15%; text-align: right; font-size: 11px; }
div.formrow span.input, div.formrow-odd span.input { float: right; width: 83%; text-align: left; font-size: 11px;} 
.box1 .formrow .input {width: 50%;}            
.box1 .formrow .label {font-size; 10px}            

.formrow .input h4, .formrow-odd .input h4 {margin: 0; font-size: 12px} 
.formrow .input select, .formrow-odd .input select {width: 30%; font-size: 12px}
.box1 .formrow, .box2 .formrow {font-size: 11px} 
textarea {font-family: arial, sans-serif}            

/* end of ALAP form CSS stuff */   

/* ALAP image gallery styles */
div.float { width: 210px; padding: 3px; float: left; border-left: 1px solid silver} 
div.container {clear:both; border-top: 1px solid silver}
div.spacer {clear: both}
/* end ALAP image gallery styles */

.floatbox {width: 200px; border: 1px solid #362B30; padding: 5px; background-color: #C7C3C5; float: left; margin-right: 10px}
.floatbox p+p {text-indent: 0px;}
.floatbox p {font-size: 11px}
/* for making charts/tables */
div.row1 {border-top: 1px solid silver}
div.row2 {border-top: 1px solid silver}
.float {float: left; font-size: 9px; line-height: 10px; width: 31%}
.float2 {float: left; width: 2%;}
.float3 {float: left; width: 3%;}
.float6 {float: left; width: 6%;}
.float10 {float: left; width: 10%;}
.float15 {float: left; width: 15%;}
.float20 {float: left; width: 20%;}
.float25 {float: left; width: 25%;}
.float30 {float: left; width: 30%;}
.float35 {float: left; width: 35%;}
.float55 {float: left; width: 55%;}
.float60 {float: left; width: 60%;}
.spacer {clear: both; margin: 0; padding:0}

/* contexual menus */

body#intro a.intro, body#day1 a.day1, body#day2 a.day2, body#day3 a.day3, body#day4 a.day4, body#day5 a.day5, body#day6 a.day6, body#photos a.photos, body#comments a.comments 
{font-weight: 900; border: none; color: #000}

body#pix {background-image: none}
body#pix form {display: inline}
div.caption {float: left; margin:5px; padding-left: 0px; width: 80%;}
div.closebutton {float: right; width: 10%; margin:5px;}
div.closebutton input {font-size: 9px}
div.caption p {font-size: 11px; line-height: 13px}