/*
############################################################
#   FONT SIZES
#
#   Base font size is 13px as set in the CSS-Reset file
#
#   PIXEL   PERCENTAGE
#   10      77
#   11      85
#   12      93
#   13      100
#   14      108
#   15      116
#   16      123.1
#   17      131
#   18      138.5
#   19      146.5
#   20      153.9
#   21      161.6
#   22      167
#   23      174
#   24      182
#   25      189
#   26      197
############################################################
*/

div.outer
{
	width: 990px;
	margin: 0px auto 30px auto;
	color: #666;
}

a
{
	color: #229dd0;
	text-decoration:none;
	font-weight:bold;	
}

/*
############################################################
# HEADER
############################################################
*/
div.header
{
	height: 110px;
	background: url(../Images/Framework/Header-Background.jpg) bottom repeat-x;
	padding: 0 10px;
}

div.header img.logo
{
	display:block;
	margin-top:25px;
	float:left;
}

div.header img.phoneNumber
{
	display:block;
	margin-top:30px;
	float:right;
}

/*
############################################################
# NAVIGATION
############################################################
*/
ul.navigation
{
	padding: 0px 10px;
	margin: 5px 0px;
	font-size:123.1%;
	color:#999;
}

ul.navigation li
{
	float:left;
	margin-right: 15px;
}

ul.navigation li a
{
	color:#999;
	text-decoration:none;
	font-weight:normal;
}

ul.navigation li a:hover
{
color: #229dd0;
}

/*
############################################################
# FOOTER
############################################################
*/
img.footerDivider
{
	display:block;
	padding-top: 25px;
}

div.footer
{
	font-size: 85%;
	margin-top: 15px;
	padding: 0px 10px;
}

div.footer a
{
	color: #666;	
	text-decoration:none;
	font-weight:normal;
}

div.footer p
{
	float: left;
}

div.footer ul
{
	float:right;
}

div.footer ul li
{
	float:left;
	margin-left: 3px;
}

/*
############################################################
# HOME PAGES
############################################################
*/
div.masthead
{
	margin-bottom: 30px;
}
div.masthead img
{
	display:block;
	float:left;
}
div.mastheadImages
{
	width: 658px;
	float:left;
}

div.mastheadImages img.hide
{
	display:none;
}

div.fiveYearGuarantee
{
	width:300px;
	padding-left:15px;
	float:left;
	margin-right: 14px;
	border-right: 1px solid #BBB;
	background:url(../Images/Home/5-Year-OK.gif) right top no-repeat;
	height:220px;
}

div.fiveYearGuarantee p
{
	margin-top: 15px;
	width: 200px;
}

div.quoteBeater
{
	width:305px;
	padding-left:15px;
	float:left;
	margin-right: 14px;
	border-right: 1px solid #BBB;
	background:url(../Images/Home/Quote-Beater-Badge.jpg) right top no-repeat;
	height:220px;
}

div.quoteBeater p
{
	margin-top: 15px;
	width: 215px;
}

div.finance
{
	width:300px;
	padding-left:15px;
	float:left;
	background:url(../Images/Home/Finance-Bubbles.jpg) right top no-repeat;
	height:220px;
}

div.finance p
{
	margin-top: 15px;
	width: 200px;
}

/*
############################################################
# LEFT COLUMN
############################################################
*/
div.leftCol
{
	width: 200px;
	float:left;
}

div.leftCol ul
{
	padding-left:27px;
	padding-bottom: 15px;
	margin-top:15px;
    background: url(../Images/Framework/Left-Nav-Divider.jpg) bottom repeat-x;
}

div.leftCol ul li
{
	margin-bottom:10px;
}

div.leftCol ul li a
{
	font-weight:bold;
	color:#999;
	text-decoration:none;
}

div.leftCol div.panel
{
	padding: 15px 15px 15px 27px;
    background: url(../Images/Framework/Left-Nav-Divider.jpg) bottom repeat-x;
}

div.leftCol div.panel img
{
	display:block;
	margin: 7px 0px;
}

div.leftCol div.bubbles
{
	background:url(../Images/Framework/Bubbles.jpg) right 90px no-repeat;
}

div.leftCol div.bubbles p
{
	width: 120px;
}

/*
############################################################
# RIGHT COLUMN
############################################################
*/
div.rightCol
{
	width: 790px;
	float:left;
	background:url(../Images/Framework/Left-Nav-Edge.jpg) repeat-y;
}

div.rightCol div.headerBar h1
{
	height: 140px;
	float:left;
	background-color:#89cee2;
	width:299px;
	color:#fff;
	text-indent:-10000px;
}

div.rightCol div.headerBar h1.about
{
	background:url(../Images/Content/Header-About.jpg) no-repeat;
}

div.rightCol div.headerBar h1.guarantee
{
	background:url(../Images/Content/Header-5-Year-Guarantee.jpg) no-repeat;
}

div.rightCol div.headerBar h1.finance
{
	background:url(../Images/Content/Header-Finance-Options.jpg) no-repeat;
}

div.rightCol div.headerBar h1.quoteBeater
{
	background:url(../Images/Content/Header-Quote-Beater.jpg) no-repeat;
}

div.rightCol div.headerBar h1.services
{
	background:url(../Images/Content/Header-Services.jpg) no-repeat;
}

div.rightCol div.headerBar h1.bathrooms
{
	background:url(../Images/Content/Header-Bathrooms.jpg) no-repeat;
}

div.rightCol div.headerBar h1.cloakrooms
{
	background:url(../Images/Content/Header-Cloakrooms.jpg) no-repeat;
}

div.rightCol div.headerBar h1.ensuite
{
	background:url(../Images/Content/Header-En-Suite-Bathrooms.jpg) no-repeat;
}

div.rightCol div.headerBar h1.plumbingServices
{
	background:url(../Images/Content/Header-Plumbing-Services.jpg) no-repeat;
}

div.rightCol div.headerBar h1.tilingServices
{
	background:url(../Images/Content/Header-Tiling-Services.jpg) no-repeat;
}

div.rightCol div.headerBar h1.gasServices
{
	background:url(../Images/Content/Header-Corgi-Gas-Services.jpg) no-repeat;
}

div.rightCol div.headerBar h1.previousWork
{
	background:url(../Images/Content/Header-Previous-Work.jpg) no-repeat;
}

div.rightCol div.headerBar h1.bathroomSuppliers
{
	background:url(../Images/Content/Header-Bathroom-Suppliers.jpg) no-repeat;
}

div.rightCol div.headerBar h1.requestQuote
{
	background:url(../Images/Content/Header-Request-A-Quote.jpg) no-repeat;
}

div.rightCol div.headerBar h1.requestCallBack
{
	background:url(../Images/Content/Header-Request-Call-Back.jpg) no-repeat;
}

div.rightCol div.headerBar h1.tcBathrooms
{
	background:url(../Images/Content/Header-TC-Bathrooms.jpg) no-repeat;
}

div.rightCol div.headerBar h1.phoenixWhirlpools
{
	background:url(../Images/Content/Header-Phoenix-Whirlpools.jpg) no-repeat;
}

div.rightCol div.headerBar h1.ferratsi
{
	background:url(../Images/Content/Header-Ferratsi.jpg) no-repeat;
}

div.rightCol div.headerBar h1.bathrooms4All
{
	background:url(../Images/Content/Header-Bathrooms4All.jpg) no-repeat;
}

div.rightCol div.headerBar img
{
	display:block;
	float:left;
}

div.rightCol div.mainContent
{
	padding:40px;
	color:#666;
}

div.rightCol div.mainContent p
{
	margin-bottom: 25px;
}

img.frame
{
	display:block;
	width: 123px;
	height: 103px;
	padding: 12px 10px;
	background:url(../Images/Framework/Picture-Frame.gif) no-repeat;
}

div.imagePanel
{
	float: left;
	width: 355px;
}

div.imagePanel h3
{
	font-weight:bold;
	margin-top:10px;
	font-size:116%;
}

div.imagePanel h3 a
{
	text-decoration: none;
	color:#80cae2;
}

div.imagePanel p
{
	margin: 5px 0px; 
	padding-right: 10px;
}

div.imagePanel p.button
{
	margin-top: -15px;
}
div.imagePanel img.frame
{
	display:block;
	float:left;
	margin-right: 5px;
}

a.gallery
{
	display: block;
	float:left;
}

/*
############################################################
# FORM STYLES
############################################################
*/
form label
{
	width: 180px;
	display: block;
	float: left;
	font-weight: bold;
}

form input, form textarea, form select
{
	width: 300px;
	padding: 4px;
	border: 1px solid #bbb;
}

form input.button
{
	border: none;
	background-color: #21B4DC;
	color: #fff;
	width: 150px;
	font-weight:bold;
}

/*
############################################################
# GLITCHES AND BUG FIXES
############################################################
*/
.clearfix:after 
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix 
{
    display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix 
{
    height: 1%;
}
.clearfix 
{
    display: block;
}
/* End hide from IE-mac */