/* 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: Verdana, Arial, 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. 
Line-Height for leading.*/
p
{
	padding: 0 15px 8px 15px;
	margin: 0;
	color: #131D5A;
	line-height: 130%;
}

/* 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: 90%;
	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: 3px 15px 10px 15px;
	margin: 0;
	color: #131D5A;
	font-size: 130%;
}

/* Smaller heading. Same as p but bold. */
h2
{
	padding: 25px 15px 8px 15px;
	margin: 0;
	color: #131D5A;
	font-size: 100%;
	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. 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
{
	margin-left: 540px;
	padding-top: 10px;
}

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

/* 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 1px;
}

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

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

/* 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 1px;
}

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

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

/* 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 1px;
}

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

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


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

/* Order important for search engines. Calculations: 
150px(side) + 330px(primary) + 270px(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: 750px;
	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. Logo placed in background.*/
#header_one
{
	width: 750px;
	height: 80px;
	background-color: #FFF;
	background-image: url(../images/Respiratory_West_Logo.gif);
	background-repeat: no-repeat;
	background-position: 18px 10px;
}

/* 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: 750px;
	height: 24px;
	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 and second slice of image. Yellow background. */
#header_three
{
	width: 750px;
	height: 98px;
	background-color: #EBC627;
}

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

/* First box inside header_two for the top part of the image on the left. Set width and height
and float left. */
#header_three #box1
{
	width: 150px;
	height: 98px;
	float: left;
}

/* Second box inside header_two contains the flash movie. Set width and height. Float right. */
#header_three #box2
{
	float: left;
}


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

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

/* 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. */
#menubar a
{
	display: block;
	text-decoration: none;
	padding: 5px 15px 0px 15px;
	font-size: 88%;
	color: #FFF;
}

/* Each link in MENUBAR with a submenu needs trigger class assigned.
Same padding (must) as menubar links. Background image (symbol) positioned with no repeat. */
#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: 12em;
}

/* 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: 6px;
}

/* 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: 750px;
	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 330. Margin on bottom and most importantly on left 
to allow for sideContent with 150px width. */
#threeColLayout #primaryContent
{
	float: left;
	width: 330px;
	margin: 0 0 0 150px;
	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: 15px;
}

/* 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 15px 10px 15px;
	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 270px 
Margin bottom again and most importantly a 0px gutter (left). */
#secondaryContent
{
	float: left;
	width: 270px;
	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: 205px 0px;
}

/* Class inside boxSecondaryLeft for Quick Links. */
.boxSecIntern
{
	width: 180px;
	height: 50px;
	margin: 0 15px 10px 10px;
	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: 180px;
	margin: 0 15px 10px 10px;
	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 aprropriate indents. */
.boxSecIntern p
{
	padding-top: 10px;
	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 10px;
}


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

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

/* Heading inside side content. Not as much padding on top as normal h2. */
#sideContent h2
{
	padding-top: 5px;
}

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

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

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

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

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

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

/* Style the submit button. */
.button
{
	margin-left: 60px;
	background-color: #B8BBCD;
	color: #131D5A;
	width: 150px;
}

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

/* Class 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: 15px;
	overflow: hidden;
}

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


/* 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: 750px;
	height: 15px;
	padding: 0px;
	background-color: #EBC627;
}

/* Paragraph style for footer text. Centred and smaller. */
#footerBar p
{
	font-size: 88%;
	text-align: center;
}