/* Sets all margins and padding initially to zero. */
* {margin:0; padding:0;}

/* Typography generic
================================== */

/* Defines standard body text with sans-serif fonts. 
Zero margins and padding, so no white border around. Only top margin. Line height for leading.
Text aligned centered here for IE5.5 -> Later in wrap text aligned left again.*/
body
{
	color: black;
	background-color: #803800;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	margin: 0px;
	margin-top: 20px;
	padding: 0px;
	text-align: center;
	line-height: 1.6;
}

/* Paragraph style. Set padding, font size and text colour. */
p
{
	color: #401C00;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 9px;
	padding-top: 9px;
	font-size: 80%;
}

/* Heading1. Set padding, font size and text colour. */
h1
{
	color: #FFF;
	background-color: #BF5400;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 4px;
	padding-top: 5px;
	font-size: 100%;
}

/* Layout Wrap
================================== */

/* Wrap around all content, with fixed width and centres the layout. 
Text aligned left to reverse from body hack.*/
#wrap
{
	width: 750px;
	margin-left: auto;
	margin-right: auto;
	background-color: #E38B20;
	text-align: left;
}

/* Layout Header
================================== */

/* Header very top for rounded white corners. */
#headerOne
{
	background-color: #FFF;
	height: 20px;
	background-image: url(../images/Round_Corner_White_Top.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

/* Header with white background colour. Logo top part as background image to match bottom part.
Set height. */
#headerTwo
{
	background-color: #FFF;
	background-image: url(../images/gascoyne-chiro-logo_top.jpg);
	background-repeat: no-repeat;
	background-position: 50px bottom;
}

/* Header text image positioned from left and top with margins. */
#headerTwo img
{
	margin-left: 188px;
	margin-top: 0px;
}

/* Layout Sidebar
================================== */

/* Sidebar for left content. Float left. Logo bottom part as background image to match top part. */
#sidebar
{
	float: left;
	width: 198px;
	background-image: url(../images/gascoyne-chiro-logo-bottom.jpg);
	background-repeat: no-repeat;
	background-position: 50px 0px;
}

/* Logo image inside sidebar correctly positioned to match top part. */
#sidebar img
{
	margin-left: 50px;
}

/* Sidebar quote box with set width only to leave height flexible. Top margin for distance above. 
Left margin to center in sidebar. */
#sidebar_quote
{
	background-color: #Bf5400;
	width: 122px;
	height: 50px;
	margin-top: 80px;
}

/* Text inside sidebar quote on top in white. Bold text.
1% yellow otherwise not validating. */
#sidebar_quote p
{
	color: #FFFFFD;
	font-weight: bold;
}

/* Sidebar top and bottom boxes with set width only to leave height flexible. 
Vertical gradient as background image, easing out to white background colour. */
#sidebar_top, #sidebar_bottom
{
	background-color: #FFF;
	width: 122px;
	background-image: url(../images/Gradient_Side_80.gif);
	background-position: left top;
	background-repeat: repeat-x;
}

/* Rounded Corners for headings in sidebar. */
#sidebar_top h1, #sidebar_bottom h1, #sidebar_quote p
{
	background-image: url(../images/Round_Corner_Side_Top.gif);
	background-position: left top;
	background-repeat: no-repeat;
}

#sidebar_bottom p, #sidebar_top p
{
	padding-top: 12px;
}

/* Layout Main Content
================================== */

/* Main content. Float left as well (faux column). 
Set width but leave room to breathe (750-198 = 562 but -10 = 552). */
#main
{
	float: left;
	width: 552px;
}

/* Main top box with set width and heigth. Top margin for distance above. */
#main_top
{
	background-color: #D99866;
	width: 514px;
	height: 100px;
	margin-top: 30px;
}

/* Main bottom box with set width only to leave height flexible. Top margin for distance above. */
#main_bottom
{
	background-color: #FFF;
	width: 514px;
	margin-top: 30px;
	background-image: url(../images/Gradient_Main_80.gif);
	background-position: left top;
	background-repeat: repeat-x;
}

/* Image in main content to allow text wrap. Contra to .wrap3 img. 
Dispaly inline and floating to achieve correct text position. Does only apply to staff images -> 
notice contact.php is different. */
#main_bottom_img
{
	display: inline;
	float: left;
	padding-right: 20px;
	padding-bottom: 20px;
}

/* Rounded Corners for heading in main content. Also move heading in. */
#main_bottom h1
{
	background-image: url(../images/Round_Corner_Main_Top.gif);
	background-position: left top;
	background-repeat: no-repeat;
	padding-left: 20px;
	padding-right: 20px;
}

/* Style for main content with different font-size and padding. */
#main_top p, #main_bottom p
{
	font-size: 85%;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-top: 12px;
}

/* Unordered list for main content. Move bullets in with padding. 
Colour brown for bullet points in same colour. */
#main ul
{
	list-style-type: disc;
	padding-left: 35px;
	color: #401C00;
}

/* List items distance from bullet point. */
#main li p
{
	padding-left: 7px;
}

/* Text in main content in bold. */
.main_p_bold
{
	font-weight: bold;
}

/* Small listed items indented without list function. */
.p_indent
{
	padding-left: 30px;
}

/* Layout Footer
================================== */

/* Footer clear both (faux columns). */
#footer
{
	background-color: #E38B20;
	clear: both;
}

/* Para style for text inside footer. PAdding and font size. */
#footer p
{
	color: #401C00;
	padding-left: 38px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
	font-size: 80%;
}

/* Drop Shadow Styles
================================== */

/* Commented backslash method for all three shadow wraps for IE5.5. Mac.
Display inline-table allows for collapsing. Probably not necessary since no float left. */
.wrap1, .wrap2, .wrap3, .wrap1main
{
	display:inline-table;
	/* \*/display:block;/**/
 }
 
/* Class for outermost shadow div for sidebar boxes, containing main drop shadow.
Top margin for distance above. Left margin to center in sidebar. */
.wrap1 
{
	background:url(../images/shadow_side.gif) right bottom no-repeat;
	margin-top: 30px;
	margin-left: 38px;
	margin-right: 28px;
}

/* Use star html hack for IE 6 and below. 
Set position to relative to have drop shadow image aligned on bottom. */
* html .wrap1
{
	position: relative;
}

/* Class for outermost shadow div for main boxes, containing main drop shadow.
Top margin for distance above. No left margin required. */
.wrap1main
{
	background: url(../images/shadow_main.gif) right bottom no-repeat;
	margin-top: 30px;
	margin-left: 0px;
	margin-right: 28px;
}

/* Use star html hack for IE 6 and below. 
Set position to relative to have drop shadow image aligned on bottom. */
* html .wrap1main
{
	position: relative;
}

/* Class for the fist inner div, containing the bottom-left shadow part. */
.wrap2 
{
	background:url(../images/bottom_left_shadow_10w.gif) 0px 100% no-repeat;
}

/* Class for the second inner div, containing the top-right shadow part. 
Top gif extended by 10px to allow for round corner without shadow. */
.wrap3 
{
	padding:0 10px 10px 0;
	background:url(../images/top_right_shadow_20h.gif) 100% 0px no-repeat;
}

/* Keeps unwanted white space from intruding. Z-index to position below submenu. */
.wrap3 img 
{
	display:block;
	position: relative;
	z-index: 0;
}


/* Navigation
================================== */

/* Wrapper for dropdown navigational menu. Left margin to push over parrallel to main menu. */
#menuwrapper
{
	margin-left: 198px;
}

/* Clears the floated menu items on both sides. Assigned to class just before
menuwrappers closing div tag. */
.clearit 
{
	clear: both;
}

/* MENUBAR is the root unordered list and menubar ul applies to all the sub-menu ul's.
Zero down padding and margins. Turn bullet points off. Do not add a font-size here. */
#menubar, #menubar ul 
{
	padding: 0;
	margin: 0;
	list-style: none;
}

/* All MENUBAR links (a).  Display block to get links to behave like buttons. No underline. 
Padding around link text to create space between edges -> button. 
Border right creates separator between links. Smaller font-size for menu links.
Set colour for border and links. Background colour set so it appears under all links. */
#menubar a
{
	display: block;
	text-decoration: none;
	padding: 5px 10px 5px 10px;
	border-right: 1px solid #FFF;
	font-size: .85em;
	color: #FFF;
	background-color: #BF5400;
}

/* Each link in MENUBAR with a submenu needs trigger class assigned.
Same padding (must) as menubar links plus more right padding for sub-menu symbol. 
Background image (symbol) positioned correctly with no repeat. */
#menubar a.trigger
{
	padding: 5px 16px 5px 10px;
	background-image: url(../images/Down_Arrow.gif);
	background-repeat: no-repeat;
	background-position: right center;
}

/* List items in MENUBAR. Float left for horizontal display. Set width for IE5 Mac. 
See last rule in Navigation CSS -> sets width to auto for all other browsers 
(hides it from IE5 Mac). The width is proportional.
As you add and edit root menu items, you will need to test this width
to ensure it is wide enough to accomodate all text. */
#menubar li 
{
	float: left;
	width: 9em;
}

/* Set width for SUB-MENU box and the SUB-MENU list items inside - in proportional em units. 
This allows the sub-menu width to expand if users resize the text in their browsers. */
#menubar li ul, #menubar ul li  
{
	width: 16em;
}

/* SUB-MENU links. Set color. Turn off the right border -> otherwise inherited from link css. 
Top and bottom padding less than the root items and increase the left padding
to indent the sub-menu links a small amount in from the root links. */
#menubar ul li a  
{
	color: #FFF;
	border-right: 0;
	padding: 3px 12px 3px 16px;
}

/* SUB-MENU unordered lists describes each dropdown SUB-MENU group. 
Positioned absolutely to appear below their root trigger.
Set to display none to hide them until trigger is moused over.
Background color must be set or problems will be encountered in MSIE.
Borders set to simulate a raised look. Z-index to position above image below. */
#menubar li ul
{
	position: absolute;
	display: none;
	background-color: #FFFFFF;
	border-right: 1px #FFF solid;
	border-bottom: 1px #FFF solid;
	border-left: 1px #BF5400 solid;
	z-index: 1;
}

/* Changes the text color and background color when the Root-Level
MENUBAR items are moused over. The second selector sets color and background
when Root-Level MENUBAR items are accessed with the keyboard tab key. The third
selector sets an active state to support keyboard access in MSIE. The fourth 
selector is assigned to IE5 and IE6 Windows via the javascript.
Note that IE7 supports hover on elements other than links and so behaves
like Firefox, Opera, and Safari - making the menu operable even if JavaScript
is not enabled. */
#menubar li:hover a, #menubar a:focus,
#menubar a:active, #menubar li.hvr a
{
	color: #FFF;
	background-color: #E38B20; /* Slightly different colour for validation */
}

/* Set the SUB-MENU unordered list to be visible when its associated
Root-Level MENUBAR link is moused over. The second selector is 
assigned to IE5 and IE6 via the javascript. */
#menubar li:hover ul, #menubar li.hvr ul 
{
	display: block;
	background-color:#BF5400; /* Slightly different colour for validation */
}

/* Set text color of the SUBMENU links when the root-level
MENUBAR items are moused over. The second selector is 
assigned to IE5 and IE6 via javascript.
The color set should march the normal Sub-Level link color
in the rule: #menubar ul li a. */
#menubar li:hover ul a, #menubar li.hvr ul a 
{
	color: #FFF;
	background-color: #BF5400; /* Slightly different colour for validation */
}

/* The normal hover class for SUB-MENU Sub-Level links. The Important directive
is required for older browsers. We set a background color, which shows
over the gradient background. We set text color to white. */
#menubar ul a:hover 
{
	background-color: #E38B20!important;
	color: #FFFFFF!important;
}

/* The single backslash \ character inside this comment
causes IE5 Mac to ignore the following rule, which allows other
browsers to render top-level menu items to their natural width.
Do not edit this rule in any way. */
#menubar li 
{
	width: auto;
}

/* Styles for form on contact page
================================== */

/* Fieldset groups related block. */
fieldset
{
	margin: 10px 0px 5px 20px;
	border: 1px #401C00 solid;
	color: #401C00;
	background-color: #D99866;
	width: 400px;
	padding-bottom: 15px;
}

/* Label for headings above form input boxes. */
label
{
	display: block;
}

/* Define length of input boxes. */
input
{
	width: 350px;
}

/* Creates anchor for user in field. */
input:focus, textarea:focus
{
	background: #F7DCBC;
}

/* CVlass for "required" text. */
.required
{
	font-size: 85%;
	color: #FFF;
}

/* Style the submit button. */
.button 
{
	background-color: #D99866;
	color: #401C00;
	width: 400px;
	margin-bottom: 15px;
}


/* Links in content (sidebar and main)
================================== */

/* All links to have no underline. */
a
{
	text-decoration: none;
}

/* Different colours for link states in normal text. */
/* Brown for link itself. */
a:link
{
	color: #803800;
}

/* Purple colour for visited. */
a:visited 
{ 
	color: #7B2F7D;
}

/* Lighter brown colour for hover and active. */
a:hover, a:active
{
	color: #BF5400;
}