/* Main stylesheet*/

/* the appropriate background class will be applied based on class attached to the body */

body {
margin: 0;
padding: 0;
font:65% Georgia,Verdana, Helvetica, sans-serif;
background: #ffffff url(../images/background.gif) repeat-x fixed;
}


/* --------------- Use this for homepage layout, main wrapper that holds the page centrally using margin technique */

#wrapper {
width:750px;
height:1200px;
margin:0 auto;
background-color: #ffffff;
padding: 0 10px 10px 10px;
background: #ffffff url(../images/homeBackground.png) no-repeat;

}

/* --------------- Use this for Pharma Company Layout Page. Should really implement a better method for the below but fo site this size ok.. */

#pharmaCompany {
width:750px;
height:700px;
margin:0 auto;
background-color: #ffffff;
padding: 0 10px 10px 10px;
background: #ffffff url(../images/companyBackground.png) no-repeat;
}


/* --------------- Use this for Pharma Agency Layout Page */

#pharmaAgency {
width:750px;
height:700px;
margin:0 auto;
background-color: #ffffff;
padding: 0 10px 10px 10px;
background: #ffffff url(../images/agencyBackground.png) no-repeat;
}

/* --------------- Use this for About Page Layout */

#aboutLayout {
width:750px;
height:800px;
margin:0 auto;
background-color: #ffffff;
padding: 0 10px 10px 10px;
background: #ffffff url(../images/contactBackground.png) no-repeat;
}

/* --------------- Use this for Contact Page Layout */
#contactLayout {
width:750px;
height:800px;
margin:0 auto;
background-color: #ffffff;
padding: 0 10px 10px 10px;
background: #ffffff url(../images/contactBackground.png) no-repeat;
}

/* --------------- Header holding the logo and telephone no. at top */

#header {
width: 730px;
height: 93px;
margin-bottom: 25px;
background: url(../images/header.gif);
}

/* --------------- now the three main columns, named in order of importance and display when styles switched off */

#primaryContent {
float:left;
width:555px;
display:inline;
margin: 0 0 20px 195px;
background: transparent;

}


/* --------------- Menu background image and placement for controlling the navigation list */

#sideContent{
float:left;
width:247px;
margin: 0 0 20px -750px;
background: url(../images/menuBackground.png);
background-repeat: no-repeat;

}


/* --------------- twoColContent - used to span two right-hand columns, box used only if no selector --------------- */

#twoColContent{
width:555px;
float:left;
margin: 0 0 20px 195px;
}


/* --------------- Main Content box combined with another class below to control inner elements, eg box default */

.contentBoxPharma {
background-color: transparent;
margin: 15px 0 50px 0;
padding: 5px 0 5px 0;
}


.contentBox {
background-color: transparent;
margin: 15px 0 250px 0;
padding: 5px 0 5px 0;
/*background:url(diags.gif);*/
}

/* --------------- Styling of the boxes ------------------------------ */

.content {
margin: 0 40px 0 50px;
padding: 5px 0 5px 0;
line-height: 180%;
}

/* --------------- paragraph styles for any main boxes ------------------------------ */
.content p, .cb p {
margin: 0;
padding: 10px 5px 5px 50px;
color: #333333;
font-style: bold;
}

.content ul {
list-style-type: circle;
color: #333333;
margin: 0;
padding: 10px 5px 5px 65px;
}





/* --------------- Navigation placement and list formatting controls left column, known as sideContent ------------------------------ */

.navigation {
width:160px;
margin: 20px 0 0 20px;
padding: 20px 0 5px 25px;

}

.navigation ul {
list-style-type: none;
line-height:190%;
margin-top: 0px;
margin-left: 0;
margin-bottom: 0;
padding: 8px 0px 0px 8px;
}

.navigation li a:link {
color:#ff4000;
text-decoration:none;
display:block;
width:154px;
border-bottom: 1px solid #EDEAEB;
/*background: #FFF url(../ticks.gif);*/
}

.navigation li a:active {
color:#333333;
text-decoration:none;
display:block;
width:154px;
border-bottom: 1px solid #EDEAEB;
}

.navigation li a:hover {
color:#ff4000;
display:block;
width:154px;
border-bottom: 1px solid #EDEAEB;
text-decoration:none;
}

.navigation li a:visited {
color:#ff4000;
text-decoration:none;
display:block;
width:154px;
border-bottom: 1px solid #EDEAEB;
}


/* --------------- Default link styles ------------------------------ */

a:link {
background-color: transparent;
text-decoration: underline;
color: #666;
}
a:hover {
background-color: #FFC;
text-decoration: underline;
color: #ff4000;
}
a:visited {
background-color: transparent;
text-decoration: underline;
color: #666
}

/* --------------- headers here ------------------------------ */

h1 {
margin: 0 0px 0 70px;
padding: 20px 0px 10px 30px;
font-size: 130%;
color: #ff4000;
}

h2 {
margin: 0 0px 0 70px;
padding: 20px 0px 10px 30px;
font-size: 130%;
color: #ff4000;
}


/* --------------- Footer ------------------------------ */

#footer{
clear:both;
width: 750px;
height: 85px;
background: transparent url(../images/footer.png) no-repeat;
background-position: bottom;
padding: 120px 0px 0px 0px;
}
#footer p {
margin: 6px 10px 0 10px;
padding: 50px 4px 4px 0px;
font-weight: bold;
}

#footer a:link, #footer a:visited {
color:#ff4000;
}
#footer a:hover {
color:#333;
background: #cccccc;
}

/*  --------------- Nick this is image control. Define stuff common to ALL images on the page. It is then up to other styles to override these. They will all float left. */

img {
float: left;
margin: 0px 0 0px 0px;
}


/* Used by Homepage for pushing the footer down to allow for varied height of content */

.homepageHeight {
margin: 100px 40px 0 0;
float:left;
}

/* Used by all content pages except the homepage for pushing the footer down to allow for varied height of content */

.contentHeight {
margin: 0px 0px 0 0;
float:none;
}
 
.img-wrapper img {
float:none;
margin:0;
background:#fff;
padding:4px;
border:1px solid #C5BDBD;
position:relative;
left:-5px;
top:-5px;
}



/* spacer used immediately after the floated main text content to ensure the box expands to hold them all */

.spacer {
clear: both;
}