/* CSS Document for Main Layout of pembreyphysio.com*/
/* Copyright 2007 Pembrey Physiotherapy Clinic */
/* Designed by Lewis Buckley (www.pcphix.co.uk, mail@pcphix.co.uk) */

/* Main DIVs for cotainment and page centering */
body{margin: 0 auto; padding: 0 auto; text-align: center; background-color:#000000;}
/* (To keep background image looking correct in Opera and Firefox */
#pagewidth{width:886px;margin-left: auto;margin-right: auto;height: 100%;} 
#container {width: 886px;height: 800px;}
#main {width: 510px; margin-left: 188px; margin-right: 188px; margin-top: 75px;}
#ffo{
font-size: 30px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-style: italic;
padding-top: 52px;
color: #FFF;
font-stretch:expanded;
}
/* *************** */
/* Navigation bar links and formatting
/* *************** */

#links {
width: 510px;
background-image: none;
}

#links ul {
ist-style: none;
display: inline;
width: 100%;
margin-left: -10px;
}

#links ul li {
list-style: none;
display: inline;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #FFFFFF;
width: 510px;
padding-left: 6px;
padding-right: 6px;
margin-bottom: 0px;
}

#links li a {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #FFFFFF;
text-decoration: none;
}

#links li a:hover {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #FFFFFF;
text-decoration: underline;
}

/* *************** */
/* Header to contain page title and rounded top content cap
/* *************** */

#header {
width: 510px;
background-image: url(../images/header.png);
background-repeat: no-repeat;
background-position: bottom;
margin-bottom: 0px;
height: 30px;
}
#header h1 {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000;
text-align: center;
margin: 0;
position: relative;
top: 10px;
padding: 0;
}

/* *************** */
/* Main content begins here
/* *************** */

#content {
margin-top: 0px;
background-image: url(../images/50bg.png);
background-repeat: repeat;
width: 510px;
float: left;
}
/* *************** */
/* Main text section, narrow
/* *************** */

#narrow{
width: 310px;
float: left;
}

#narrow ul {
text-align: left;
}

#narrow li {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #000000;
margin: 0;
}

/* *************** */
/* Main text section, full
/* *************** */

#full{
width: 505px;
float: left;
}

#full ul {
text-align: left;
}

#full li {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #000000;
margin: 0;
}

/* *************** */
/* Textbody, to apply wide formatting
/* *************** */

#textbody p {
text-align:left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #000000;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 0px;
padding: 0px;
}

#textbody p.first {
padding-top: 20px;
}

#textbody h2 {
margin-left: 10px;
text-align:left;
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #003399;
}

/* Textbody Links */

#textbody a {
color: #0066CC;
text-decoration: none;
}
#textbody a:hover {
color: #000000;
text-decoration: none;
}



/* *************** */
/* DIV Toggling (Credit: http://mattkruse.com/temp/togglediv.html)*/
/* *************** */
.toggleable {
width: 270px;
}

#togglecontainer {
text-align:left;
}

#togglecontainer a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #003399;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 0px;
padding: 0px;
text-decoration: underline;
}
#togglecontainer a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #003399;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 0px;
padding: 0px;
text-decoration: none;
}

#togglecontainer a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #003399;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 0px;
padding: 0px;
text-decoration: none;
}

#togglecontainer p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #000;
margin-left: 20px;
margin-top: 10px;
margin-bottom: 5px;
padding: 0px;

}

/* *************** */
/* Image Boxes
/* *************** */

#imgwrapper {
float: left;
border: 3px solid #003399;
margin-left: 60px;
width: 160px;
}

.caption {
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #003399;
margin: 0px;
padding: 0px;
text-decoration: none;
}


#imgwrapper a:hover {
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #003399;
margin: 0px;
padding: 0px;
text-decoration: underline;
}

/* *************** */
/* Round Corner Box (Credit: http://www.html.it/articoli/nifty/index.html)*/
/* *************** */

#box {
width: 175px;
float: right;
margin-top: 25px;
}
#boxinner {
margin-top: -19px;
margin-bottom: -19px;
padding: 0;
background:#C5CDDD;
text-align: left;
}

#boxinner p {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 14px;
color:#000;
margin-left: 10px;
}
#boxinner p.last {
padding-bottom: 10px;
}

b.rtop, b.rbottom{display:block;background-image: url(../images/0bg.png);}
b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #C5CDDD}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

#box h2 {
font-family: trebuchet ms, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFF;
margin-left: 5px;}

#box img {
float: right;
border: none;
margin-right: 5px;
}

/* *************** */
/* Footer
/* *************** */

#footer {
text-align: center;
width: 100%;
}

#footer p {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#FFF;
margin: 0;
}

#footer a {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#FFF;
margin: 0;
text-decoration: underline;
}

#footer a:hover {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
margin: 0;
text-decoration: none;
background-color: #FFF;
}

#footer .pcp a:hover {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CCCCCC;
margin: 0;
text-decoration: none;
background-color: #FF0033;
}
/* *************** */
/* Form
/* *************** */

form {
border: 3px solid #C5CDDD;
margin-left: 10px;
margin-right: 10px;
padding: 5px;
padding-top: 20px;
padding-bottom: 20px;

}

/* *************** */
/* CSS Hacks Begin */
/* *************** */

/* CSS hack to allow Alpha PNG's with IE6 */
/* Underscore hack to supress IE7 ActiveX messages */
* html #header {
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/header.png', sizingMethod='crop');
    width: 100%;
    background-image: none;
}
* html #content {
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/50bg.png', sizingMethod='scale');
    width: 510px;
    background-image: none;
	margin-top: -2px;
}

* html b.rtop, b.rbottom{
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/0bg.png', sizingMethod='crop');
	background-image: none;
}

.clear {
clear: both;
}
/* ************* */
/* CSS Hacks End */
/* ************* */
