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

/* Sets the generic font and font size for body. Also sets background colour. 
Also zeros down margin and padding. Center text to center whole layout in IE5.5. 
Than bring back left later in wrapper. Margin for top. */
body
{
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 70%;
	background-image: url(../images/Body_Background.jpg);
	background-color: #131D5A;
	background-repeat: repeat-x;
	background-position: left top;
}

/* Standard paragraph. Left, right and bottom padding. Set dark blue colour. Bigger font-size.
Line-Height for leading.*/
p
{
	padding: 0 25px 8px 25px;
	margin: 0;
	color: #131D5A;
	line-height: 130%;
	font-size: 115%;
}

/* Smaller italicised text in standard paragraph. */
.p_italics
{
	font-style: italic;
}

/* Smaller italicised text in standard paragraph with less padding. */
.p_italics_head
{
	font-style: italic;
	font-size: 105%;
	padding-bottom: 3px;
}

/* Bold text in standard paragraph. */
.p_bold
{
	font-weight: bold;
}

/* White bold text for feature topic. */
.p_bold_white
{
	font-weight: bold;
	color: #FFF;
}

/* Red bold text in standard paragraph. */
.p_bold_red
{
	font-weight: bold;
	color: #C03;
}

/* Standard heading. Left, right and bottom padding. Set dark blue colour. Bigger font. */
h1
{
	padding: 10px 25px 10px 25px;
	margin: 0;
	color: #131D5A;
	font-size: 150%;
}

/* Smaller heading. Same as p but bold. */
h2
{
	padding: 25px 25px 8px 25px;
	margin: 0;
	color: #131D5A;
	font-size: 115%;
	line-height: 130%;
	font-weight: bold;
}

/* Eliminates problem with Firefox who sees image as a hyperlink. 
Will disappear with border set to 0pt */
img 
{ 
	border-width: 0pt; 
}


/* Links generic
================================== */

/* Define generic properties for all links. No underline and set font size.
Also background colour to be inherited. Then set colour for all link states. */
a
{
	text-decoration: none;
	font-size: 100%;
	background-color: inherit;
}

a:link
{
	color: #EC6627;
}

a:visited
{
	color: #27AFEC;
}

a:hover, a:active
{
	color: #F29468;
}


/* Links inside header
================================== */

/* Navigational links in header. Float right. Padding right. Class for each link inside boxHeader id. 
No underline and set font size. Also background colour to be inherited. 
Then set colour for all link states. Place background image for symbol in all stages. */

#boxHeader
{
	float: right;
	padding-top: 10px;
	padding-right: 20px;
}

#boxHeader a.linkOne, #boxHeader a.linkTwo, #boxHeader a.linkThree
{
	text-decoration: none;
	padding: 2px 15px 2px 15px;
	font-size: 1em;
}

/* Set colour for all link stages for all three classes inside boxHeader id. */
#boxHeader a.linkOne:link, #boxHeader a.linkTwo:link, #boxHeader a.linkThree:link
{
	color: #EC6627;
}

#boxHeader a.linkOne:visited, #boxHeader a.linkTwo:visited, #boxHeader a.linkThree:visited
{
	color: #27AFEC;
}

#boxHeader a.linkOne:hover, #boxHeader a.linkTwo:hover, #boxHeader a.linkThree:hover,
#boxHeader a.linkOne:active, #boxHeader a.linkTwo:active, #boxHeader a.linkThree:active
{
	color: #F29468;
}

/* Set background image for first link. Different position in each stage for correct colour. */
#boxHeader a.linkOne:link
{
	background-image: url(../images/Home3States.gif);
	background-repeat: no-repeat;
	background-position: 0px 3px;
}

#boxHeader a.linkOne:visited
{
	background-image: url(../images/Home3States.gif);
	background-repeat: no-repeat;
	background-position: 0px -97px;
}

#boxHeader a.linkOne:hover, #boxHeader a.linkOne:active
{
	background-image: url(../images/Home3States.gif);
	background-repeat: no-repeat;
	background-position: 0px -47px;
}

/* Set background image for second link. Different position in each stage for correct colour. */
#boxHeader a.linkTwo:link
{
	background-image: url(../images/Links3States.gif);
	background-repeat: no-repeat;
	background-position: 0px 3px;
}

#boxHeader a.linkTwo:visited
{
	background-image: url(../images/Links3States.gif);
	background-repeat: no-repeat;
	background-position: 0px -97px;
}

#boxHeader a.linkTwo:hover, #boxHeader a.linkTwo:active
{
	background-image: url(../images/Links3States.gif);
	background-repeat: no-repeat;
	background-position: 0px -47px;
}

/* Set background image for third link. Different position in each stage for correct colour. */
#boxHeader a.linkThree:link
{
	background-image: url(../images/Sitemap3States.gif);
	background-repeat: no-repeat;
	background-position: 0px 3px;
}

#boxHeader a.linkThree:visited
{
	background-image: url(../images/Sitemap3States.gif);
	background-repeat: no-repeat;
	background-position: 0px -97px;
}

#boxHeader a.linkThree:hover, #boxHeader a.linkThree:active
{
	background-image: url(../images/Sitemap3States.gif);
	background-repeat: no-repeat;
	background-position: 0px -47px;
}


/* Wrapper
================================== */

/* Order important for search engines. Calculations: 
180px(side) + 480px(primary) + 300px(secondary). */

/* Main wrapper with centres the whole page with set width. 
Re-align the text again to the left, after it was all centred in body tag for IE5.5. 
Background filler image for faux-columns. */
#wrapper
{
	width: 960px;
	margin: 0 auto;
	background-color: #FFF;
	padding: 0;
	text-align: left;
	background-image: url(../images/Faux_Filler.gif);
	background-repeat: repeat-y;
	background-position: left top;
}


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

/* Top header with same width as wrapper and defined height.
White background. */
#header_one
{
	width: 960px;
	height: 90px;
	background-color: #FFF;
}

/* Ensure logo (link) is aligned to top vertically. Float left since boxheader floats right. */
#respwestlogo 
{ 
	vertical-align: top; 
	float: left;
}

/* Second header with same width as wrapper and defined height. 
Contains navigation and first slice of image. Position background image behind nav. */
#header_two
{
	width: 960px;
	height: 30px;
	background-image: url(../images/Nav_Background.gif);
	background-repeat: repeat-x;
	background-position: left top;
}

/* Third header with same width as wrapper and defined height. 
Contains flash animnation. Yellow background. */
#header_three
{
	width: 960px;
	height: 85px;
	background-color: #EBC627;
}

/* Relative positioned container for absolute positioned image container. */
#image_relative
{
	position: relative;
	top: 0px;
	left: 0px;
}

/* Position image absolute inside relative container. Move into correct position from left. 
Set width for horizontal bar as part of the box. Set bg colour to orange. */
#image_absolute
{
	position: absolute;
	width: 180px;
	background-color: #EC6627;
	top: 0px;
	left: 0px;
}

/* Gap caused by default vertical alignment of inline elements is fixed through setting the
vertical-alignment of the image itself to bottom. The problem occurs only on the top (non-floating)
header div, not on the floating divs below. */
#header_three img
{
	vertical-align: bottom;
}

/* Second box inside header_two contains the flash movie. Float right. Width 1px wider and height. */
#header_three #box2
{
	float: right;
	width: 781px;
	height: 85px;
}


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

/* Wrapper for dropdown navigational menu. Left margin. Set height. */
#menuwrapper
{
	margin-left: 180px;
}

/* 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. Add top padding for horizontal alignment. 
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. 
Smaller font-size for menu links. Colour for text is white. Line height set the correct height for the background on hover. */
#menubar a
{
	display: block;
	text-decoration: none;
	padding: 5px 15px 0px 15px;
	font-size: 110%;
	color: #FFF;
	line-height: 16px;
}

/* Each link in MENUBAR with a submenu needs trigger class assigned. Same padding (must) as menubar links. */
#menubar a.trigger
{
	padding: 5px 15px 0px 15px;
}

/* 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: 12em;
}

/* 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: 15em;
}

/* SUB-MENU links. Set padding to suit drop down indents. */
#menubar ul li a
{
	padding: 5px 0px 5px 15px;
	background-color: #EC6627;
}

/* SUB-MENU unordered lists describes each dropdown SUB-MENU group. 
Positioned absolute 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. */
#menubar li ul
{
	position: absolute;
	display: none;
	background-color: #FFFFFF;
}

/* 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. Padding bottom to align with background navigation image. */
#menubar li:hover a, #menubar a:focus,
#menubar a:active, #menubar li.hvr a
{
	color: #FFF;
	background-color: #EC6627;
	padding-bottom: 9px;
}

/* 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. Top padding zero to avoid long bar under main hover. */
#menubar li:hover ul, #menubar li.hvr ul 
{
	display: block;
	color: #FFF;
	background-color: #EC6627;
	padding-top: 0px;
}

/* 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 match the normal Sub-Level link color
in the rule: #menubar ul li a. Set left border. */
#menubar li:hover ul a, #menubar li.hvr ul a
{
	color: #FFF;
	background-color: #424A7B;
	border-bottom: 1px #FFF solid;
}

/* 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: #EC6627!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;
}

/* PrimaryContent (middle column)
================================== */

/* Three main columns, named in order of importance and display when styles switched off.
Firstly display:inline is required for IE6 for correct column display. Margin bottom. */
#primaryContent
{
	float: left;
	width: 960px;
	display: inline;
	margin: 0;
}

/* Specifying threeColLayout in the body will activate the following div 
instead of the default primaryContent -> not IE 5.5 + 6. 
Float left, set width to 480. Margin on bottom and most importantly on left 
to allow for sideContent with 180px width. */
#threeColLayout #primaryContent
{
	float: left;
	width: 480px;
	margin: 0 0 0 180px;
	background-image: url(../images/Drop_Shadow.gif);
	background-repeat: repeat-x;
	background-position: left top;
}

/* Class for box inside primaryContent. Margin top and bottom. 
Sets starting point from top for heading. */
.boxPrimary
{
	margin: 5px 5px 20px 5px;
	border-right: 1px #131D5A solid;
}

/* Smaller font size for breadcrumbs inside boxPrimary. */
.p_breadcrumbs
{
	font-size: 85%;
	padding-top: 3px;
}

/* Move list items inside primaryContent to zero position and give distance after each item. */
#primaryContent ul li p
{
	padding: 0;
	padding-bottom: 2px;
	margin: 0;
}

/* Reduce top padding for unordered list to close gap between heading above.
Move bullet points with text in by 38px. */
#primaryContent ul
{
	padding: 0;
	margin: 0;
	padding-left: 38px;
	padding-right: 25px;
}

/* Give distance around image for doctors inside primaryContent. */
#primaryContent img
{
	padding-right: 5px;
	padding-bottom: 5px;
}

/* Smaller heading inside primaryContent. Same as p but bold. */
#primaryContent h2
{
	padding: 0px 25px 10px 25px;
	font-weight: bold;
}

/* Doctors image in main content to allow text wrap. Display inline and floating to achieve 
correct text position. Does only apply to doctors images. Need different name for validation*/
#doctors_inline_img, #doctors_inline_img_1, #doctors_inline_img_2, #doctors_inline_img_3
{
	display: inline;
	float: left;
	margin-right: 10px;
}


/* SecondaryContent (right column)
================================== */

/* Secondly content to the right of primary content. Float left and set width to 300px 
Margin bottom again and most importantly a 0px gutter (left). */
#secondaryContent
{
	float: left;
	width: 300px;
	margin: 0;
	background-image: url(../images/Drop_Shadow.gif);
	background-repeat: repeat-x;
	background-position: left top;
}

/* Class for box inside secondaryContent. Margin bottom. Vertical background image on the right. */
.boxSecondaryLeft
{
	margin: 0px 0px 20px 0px;
	padding-top: 30px;
	background-image: url(../images/Respiratory_Right.gif);
	background-repeat: no-repeat;
	background-position: 235px 0px;
}

/* Class inside boxSecondaryLeft for Quick Links. */
.boxSecIntern
{
	width: 200px;
	height: 50px;
	margin: 0 15px 10px 15px;
	background-color: #EC6627;
	background-image: url(../images/Quick_Links_Small.jpg);
	background-repeat: no-repeat;
	background-position: right top;
}

/* Class inside boxSecondaryLeft for Feature Topic. */
.boxSecFeature
{
	width: 200px;
	margin: 0 15px 10px 15px;
	background-color: #EC6627;
	background-image: url(../images/Quick_Links_Small.jpg);
	background-repeat: no-repeat;
	background-position: right top;
}

/* Text inside quick links in white colour and appropriate indents. Set padding back to 15px (not as 25 as normal p). */
.boxSecIntern p
{
	padding-top: 10px;
	padding-left: 15px;
	color: #FFF;
}

.boxSecFeature h2
{
	padding-top: 3px;
	font-size: 120%;
	color: #131D5A;
}

.boxSecFeature p
{
	padding-top: 3px;
	color: #FFF;
}

/* Links inside quick links. */
.boxSecIntern a, .boxSecFeature a
{
	text-decoration: none;
	font-size: 100%;
	background-color: inherit;
}

.boxSecIntern a:link, .boxSecIntern a:visited, .boxSecIntern a:hover, .boxSecIntern a:active,
.boxSecFeature a:link, .boxSecFeature a:visited, .boxSecFeature a:hover, .boxSecFeature a:active
{
	color: #FFF;
}

/* Div for image under the three quick links. Same margin as quick links. */
.boxSecImage
{
	margin: 0 15px 10px 15px;
}


/* SideContent (left column)
================================== */

/* Last comes the side content on the left hand side. 
Width 180px and negative margin of -960px to the left. Margin bottom.*/
#sideContent
{
	float: left;
	height: 380px;
	width: 180px;
	margin: 0 0 0 -960px;
	font-size: 88%;
}

/* Heading inside side content. Padding top hor h2 to move all content down (relativew/absolute positioned image above). 
Also set padding left back from 25 to 15px. */
#sideContent h2
{
	padding-top: 125px;
	padding-left: 20px;
}

/* Padding for sideContent to align with logo. Set padding left back from 25 to 15px. */
#sideContent p
{
	padding-left: 20px;
}


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

/* Fieldset groups related block. */
fieldset
{
	margin-left: 25px;
	padding: 10px 5px 5px 5px;
	border: 1px #131D5A solid;
	color: #131D5A;
	background-color: #B8BBCD;
	width: 350px;
}

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

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

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

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

/* Id for para style around button. To eliminate padding. */
#button
{
	padding-left: 0px;
}

/* Style the submit button. */
.button
{
	margin-left: 25px;
	background-color: #B8BBCD;
	color: #131D5A;
	width: 370px;
	height: 30px;
	cursor: pointer;
	font-size: 100%;
}

/* Red inline text for php messages. Used with span in html. */
#pRed 
{ 
	color: #C03;
}

/* Id inside div for google map to position map correctly. 
Overflow hidden to avoid bottom trademark text to go outside div. */
#map
{
	padding-top: 15px;
	padding-bottom: 15px;
	margin-left: 25px;
	overflow: hidden;
	width: 365px; 
	height: 300px;
}

/* Id inside div for parking map. */
#parking
{
	padding-top: 0px;
	padding-bottom: 15px;
	margin-left: 25px;
	width: 365px;
	height: 230px;
}

/* Class inside div for google map to position map correctly. */
.ns
{
	padding-top: 15px;
	margin-left: 25px;
	padding-bottom: 15px;
}


/* Styles for form on add topic page
================================== */

.boxPrimary form table textarea
{
	width: 350px;
}


/* Skiplinks 508 Requirements
================================== */
.skiplist 
{
	margin: 0; 
	padding: 0
} 
.skip 
{
	display: none; 
	text-align: left; 
	margin: 0; 
	padding: 0; 
	position: absolute
} /*All incl Opera*/

/* * html */ .skip {display: block} /*Seen by IE*/

.skip 
{
	display: block
} /*Seen by Moz, FF and Safari*/
	
.skip a 
{
	padding: 0 0.5em; 
	display: inline; 
	z-index: 2; 
	text-decoration:none; 
	position: absolute; 
	width: 14em; left: -200em;
}

.skip a:focus, .skip a:active 
{
	position: absolute; 
	left: 0.5em; 
}
	
.skip a:hover 
{
	cursor: default
}



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

/* Footer with same width as wrapper. Cleared both sides. Footer is required for faux-columns. 
Set height. Footer contains Admin Login and link to ottimoto. */
#footerBar
{
	clear: both;
	width: 960px;
	height: 24px;
	padding: 0px;
	background-color: #F5E293;
}

/* Paragraph style for footer text. Centred and smaller. Line height to center text horizontally. */
#footerBar p
{
	font-size: 95%;
	line-height: 24px;
	text-align: center;
}