/*
STYLE SHEET FOR Shropshire Cladding
Created by Bevivid
www.xxxxxxxx.co.uk
ToC
	1.  defaults
	2.  structure
	3.  links and navigation
	4.  fonts
	5.  images
	6.  hacks
Notes
*/

/* ------- 1. defaults ------- */

* {
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	height: 100%;
	background-color: #ececec;
	font-size: 12px;
	line-height: 18px;
	text-align: left; 
}

/* ------- 2. structure ------- */

#container {
	margin: 0 auto;
	border-left: solid 1px #B2B2B2;
	border-right: solid 1px #B2B2B2;
	width: 950px;
	background-color: #fff;
	overflow: hidden;
	padding: 10px 50px
}


#masthead {  /* Company logo or banner */
height: 120px;
width: 100%;
position: relative;
z-index: 300;
}

#call {
width: 755px;
height: 75px;
border-bottom: solid 1px #000066;
float: right;
}

.call_box {
height: 55px;
width: 100px;
background-color: #7F7F7D;
float: right;
margin-left: 20px;
}

.border .call_box {
float: left;
margin: 0 20px 0 0;
}

#focus {
height: 100%;
width: 950px;
position: relative;
z-index: 0;
margin-top: -30px;
}

#focus .grey_box {
position: absolute;
top: 275px;
margin-left: 605px;
z-index: 100;
border: solid 5px #fff;
padding: 40px 25px;
width: 290px;
}

#focus #focus-images {
position: absolute;
z-index: 0;
}

#focus #image {
position: absolute;
top: 177px;
margin-left: 595px;
z-index: 100;
border: solid 5px #fff;

}


#logo {
width: 950px;
border-top: solid 1px #b2b2b2;
}

#navigation {
height: 35px;
width: 600px;
overflow: hidden;
position: absolute;
top: 370px;
}

#content {  /*  Main central content box  */
background-color: #fff;
width: 950px;
height: 100%;
border-top: solid 1px #000066;
margin-top: 410px;
}

#left {
float: left;
width: 625px;
text-align: left;
}

#enquiry {
width: 625px;
min-height: 230px;
background: url(../site-images/enquiry-background.jpg) repeat-x bottom center;
border: solid 1px #D8E4F4;
margin-bottom: 20px;
}

#right {
float: right;
width: 305px;
padding: 0px;
margin: 70px 0 20px 0;

}

#middle { /* used on pages.php as content isn't split into 2 columns */
width: 950px;
text-align: left;

}

.blue_box {
margin-top: 10px;
background-color: #BEC7F0;
padding: 20px 10px 10px 10px;
}

.grey_box {
margin: 10px 0 20px 0;
background: url(../site-images/enquiry-background.jpg) repeat-x bottom center;
border: solid 1px #D8E4F4;
padding: 10px 10px;
}

.border {
border: solid 1px #b2b2b2;
}

.main_images {
float: left;
}

.main_testimonial {
width: 598px;
background: url(../site-images/testimonial-top.jpg) no-repeat top center;
float: right;
margin: 10px 20px 0 20px;
clear: right;
}

.testimonial-bottom {
width: 598px;
height: 21px;
background: url(../site-images/testimonial-bottom.jpg) no-repeat top center;
}

.other_testimonials {
padding-top: 20px;
}

.each_testimonial {
width: 300px;
}

#footer {
height: 60px;
width: 950px;
overflow: hidden;
background-color: #fff;
border-top: solid 1px #b2b2b2;
font-family: Arial, Helvetica, sans-serif;
}


.seperator {
	clear: both;
	height: 0;
}

/* ------- 3. links and navigation ------- */

a {
	font-family: Arial, Helvetica, sans-serif;
	color: #b2b2b2;
	text-decoration: none;
	font-weight:600;
}

#left p a {
color: #000066;
}

a:visited {
}

a:hover {
color: #ccc;
}

a:active {
}

#left p a:hover {
color:#b2b2b2;
}

#logo a { /* logo with link to home page */
float: left;
margin-top: 3px;
}

#navigation ul { /* main nav in navigation.inc.php */
margin: 12px 0 0 0;
padding: 0;
list-style-type: none;
}

#navigation ul li {
float: left;
}

#navigation ul li a {
color: #7F7F7D;
text-decoration: none;
font-size: 14px; 
padding: 0 10px 0px 20px;
text-transform: capitalize;
}

#navigation ul li a:hover {
color: #000066;
background:url(../site-images/hover-bullet.gif) no-repeat left center;
}

#navigation ul li a.selected {
color: #000066;
background:url(../site-images/active-bullet.gif) no-repeat left center;
}

#footer ul {
margin: 8px auto;
padding: 0;
list-style-type: none;
text-align: center;
}

#footer ul li {
display: inline;
color: #b2b2b2;
}

#footer ul li a {
color: #b2b2b2;
text-decoration: none;
border-left: solid 1px #b2b2b2;
padding: 0 10px;
}

#footer ul li a:hover {
color: #000066;
}

.credits ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
float: left;
}

.credits ul li {
display: inline;
color: #b2b2b2;
font-size: 11px;
margin-right: 20px;
}

#footer .credits ul li a {
color: #b2b2b2;
text-decoration: none;
padding: 0;
border: none;
}

#footer .credits ul li a:hover {
color: #000066;
}

/* pagination */
.pagination {
display: inline;
float: right;
clear: both;
}

.page {
width: 25px;
height: 25px;
display: block;
text-align: center;
margin-left: 5px;
background: url(../site-images/page.png) no-repeat;
color: #fff;
font-weight: bold;
float: left;
padding-top: 3px;
}

.page:hover {
color: #ccc;
}

.page-end {
width: 50px;
height: 25px;
display: block;
text-align: center;
margin-left: 5px;
background: url(../site-images/page-end.png) no-repeat;
color: #fff;
font-weight: bold;
float: left;
padding-top: 3px;
}

.page-end:hover {
color: #ccc;
}

.current {
width: 25px;
height: 25px;
display: block;
text-align: center;
margin-left: 5px;
background: url(../site-images/page-current.png) no-repeat;
font-weight: bold;
float: left;
padding-top: 3px;
color: #003165;
}



/* -------4. fonts ------- */

h1, h2, h3, h4 {
font-family: Arial Narrow, Arial, Helvetica, sans-serif;
color: #000066;
}

#logo h1 {
clear: left;
font-size: 18px;
}

#content h1 {
font-size: 18px;
padding: 15px 0 15px 5px;
border-bottom: 1px solid #000066;
line-height: 24px;
}

#middle h2 {
padding-bottom: 10px;
border-bottom: solid 1px #b2b2b2;
}

#enquiry h2 {
background-color: #000066;
color: #fff;
padding: 5px 0 7px 20px;
}

.blue_box h2 {
color: #000066;
text-align: center;
}

.grey_box h2 {
color: #000066;
text-align: center;
}

h3.date {
float: right;
margin-right: 25px;
color: #b2b2b2;
}

#call p {
text-align: right;
}

#enquiry p {
margin-left: 18px;
}

p.phone {
font-size: 24px;
color: #7F7F7D;
font-weight: bold;
padding: 18px 0 5px 0;
}

#call .call_box p, .call_box p {
font-size: 11px;
color: #fff;
text-align: center;
text-transform:capitalize;
padding: 0;
}

.main_testimonial p {
width: 555px;
margin: 0 0 0 30px;
}
#left p, #middle p {
padding-left: 5px;
}

p {
font-family: Arial, Helvetica, sans-serif;
color: #333;
padding: 0 0 15px 0;
}

.blue_box p, .grey_box p {
text-align: center;
color: #000066;
}

ul {
}


ol {
}

hr {
}
/* ------- 5. forms ------- */


form#commentForm {
	font-family: Arial, Helvetica, sans-serif;
	width: 600px;
	
	margin: 20px 0 0 20px;
}

form#commentForm .form-row {
clear: left;
}

form#commentForm .form-item {
width: 280px;
float: left;
margin: 0 20px 10px 0;
}

form#commentForm label {
color: #000066;
font-weight: 600;
font-size: 12px;
}

form#commentForm .textfield {
width: 200px;
float: right;
margin-bottom: 00px;
/* padding: 5px; */
border: solid 1px #b2b2b2;
}

form#commentForm .textfield:hover {
border: solid 1px #000066;
}

form#commentForm .textfield_error {
width: 200px;
float: right;
margin-bottom: 10px;
/* padding: 5px; */
border: solid 1px #ff0000;
}

form#commentForm .textarea {
width: 200px;
float: right;
margin-bottom: 10px;
padding: 5px;
border: solid 1px #b2b2b2;
height: 75px;
}

form#commentForm .textarea:hover {
border: solid 1px #000066;
}

form#commentForm .submitbutton {
border: none;
background-color: #000066;
color: #fff;
border: solid 2px #fff;
cursor: pointer;
float: right;
padding: 5px 10px;
}

form#commentForm .submitbutton:hover {
background-color: #b2b2b2;
color: #fff;
}

form#commentForm .text {

font-weight: 600;
color: #000066;
margin-right: 20px;
}

form#commentForm .notice {
float: right;
font-weight: 600;
color: #000066;
}

form#commentForm label.error {
float: left;
font-weight: 600;
color: #FF0000;
text-align: left;
}

form#commentForm .required {
font-weight: 600;
color: #000066;
padding: 2px 5px;
}

.check {
margin-right: 10px;
}

/* ------- 6. images ------- */

a img {
	border: 0;
}

#focus img {
float: left;
padding-right: 30px;
}

#focus #image img {
padding-right: 0;
}

#focus .jcarousel-item img {
padding-right: 0;
}

.main_images img {
width: 230px;
margin-bottom: 20px;
}

.noimage {
width:125px; 
float:left; 
margin: 15px 15px;
}

#focus-images ul {
width: 280px;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}

#focus-images ul li {
display: inline;
}

#focus-images ul li img {
padding: 0 30px 20px 0;
}

#masthead img {
float: left;
padding: 10px;
background-color: #fff;
}

/* -------7. hacks ------- */

body {/*IE 5 centring bug fix */
/* text-align: center; */
}

#wrapper {
text-align: left;
}

img, div, input, a { behavior: url(iepngfix.htc) }