/*Min-width determines the point at which your layout width will cease to shrink horizontally and your browser will spawn a horizontal scroll bar.*/
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	background-color: #ffffff;
	margin: 20px 0;
	padding: 0;
	min-width: 800px;
}

/*Border Radius for CURVED CORNERS. The overall wrapper is assigned an 8px radius on all 4 corners. The masthead is assigned a 6px radius for its top corners. The footer is assigned a 6px radius for its bottom corners. The footer and masthead radii must always be 2px less than the radii set on the content wrapper so that its border displays properly.*/
.content-wrapper { border-radius: 8px; }
.masthead {border-radius: 6px 6px 0px 0px;}
.footer { border-radius: 0px 0px 6px 6px; }

/*Masthead, includes Logo and Slogan*/
.masthead { background-color: #fff; text-align: left; position: relative; height: 120px; margin-top: 10px; margin-bottom: 10px; }
#logo { position: absolute; top: 0; left: 5px; bottom: 4px; z-index: 1000; float: left; }
#slogan  /* used for image */ { position: absolute; top: 0; right: 5px; z-index: 4000; float: right; padding-right: 5px; }
/*Main Layout Container. The entire page is inside this element.*/
.content-wrapper { width: 980px; border: solid 2px #1f6c49; margin: 0 auto; -webkit-box-shadow: 0 0 20px #999; box-shadow: 0 0 20px #999; overflow: hidden }
/*The containing element for the the main content. We simply set the content area to have a white background.*/
.columns-wrapper {
	overflow: hidden;
	background-color: #FFF;
}

/*Main Content*/
.main-content { width: 635px; margin-left: 120px; margin-right: 220px; }

/*Sidebars*/
.sidebar { width: 114px; float: left; position: relative; z-index: 9999999; padding-right: 5px; border-right: 1px dotted #000; }
.sidebar2 { width: 220px; float: right; background-color: #dfdfdf; z-index: 1500; border-left: 1px dotted #000; }
.sidebar3  /* Top as per body */ { width: 80px; float: left; background-color: #1f6c49; position: absolute; top: -500px; height: 100%; z-index: 1000; overflow: hidden; margin-left: 34px; border: solid 1px #074d33; }

/*DO NOT EDIT*/
.p7desktop .sidebar, .p7desktop .sidebar2, p7desktop.sidebar3 {
	padding-bottom: 32767px;
	margin-bottom: -32767px;
}

/*The Sidebar content. Edit padding and font attributes to suit*/
.sidebar2 .content { font-size: 12px; line-height: 1.5em; padding-top: 30px; padding-bottom: 30px; padding-left: 10px; }

/*This container is inside the columns wrapper and serves as a container for the content inside, allowing you to adjust whitespace (padding) without altering the CSS box model. This is the rule to use to set text attributes for your main content.*/
.main-content .content {
	padding: 30px;
	font-size: 12px;
	line-height: 1.5em;
}

/*Heading styles*/
h1, h2, h3, h4 { 
	margin: 20px 0 0;
	line-height: normal; 
}
h1 { color: #da251c; font-size: 22px; text-transform: uppercase; }
h2 { font-size: 18px; text-transform: capitalize; }
h3 { font-size: 16px; text-transform: capitalize; }
h4 { font-size: 14px; text-transform: capitalize; }
.repair li { margin-bottom: 12px; list-style-image: url(../images/bullet.gif); }
img { text-decoration: none; border-width: 0; }
#schematicMap { border: solid 2px #000; }
#speed  /* speed of service - 3 days */ { color: #da251c; }
/*---------Home page and P&P page---------*/
.floatBox  /* Width 47% to fix a IE7 prob */ { background-color: #dfdfdf; float: left; width: 250px; height: auto; margin: 0 0 12px 12px; padding-top: 0; border-top: 3px solid #da251c; }
.floatBox h3  /*  Same as for h2 differnt margins & size */ { color: #da251c; font-size: 13px; font-weight: 700; text-align: center; position: relative; margin-top: 0; margin-left: 5px; }
.floatBox p { position: relative; top: -10px; margin-right: 5px; margin-left: 10px; }
.clear { clear: both; }
/*A utility rule assigned to the first heading to remove all margins. This class can be used on any element for which you would like to remove margin.*/
.page-topper { margin: 0px; }

/*Misc. Typographic Styles*/
.content em {
	font-style: normal;
	text-transform: uppercase;
	font-size: 110%;
}
.content em.big {
	font-size: 125%;
}

/*Ordinary Link Styles*/
.content a { color: #0066cc; text-decoration: none; }
.content a:hover, .content a:focus { color: #c30; text-decoration: none; }
.sidebar2 a { color: #0059b3; text-decoration: none; }
.sidebar2 a:hover, .sidebar2 a:focus { color: #000; text-decoration: none; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover, .footer a:focus { color: #da251c; text-decoration: none; }
/*The DIV that contains the horizontal menu bar at the top of your page.*/
.menutop-wrapper  /* Padding left used to position menu */ {
	padding: 10px 0 10px 20px;
	background-color: #877876;
	border-top: 1px solid #000;
	border-bottom: 1px solid #fff;
	-webkit-box-shadow: 0px 0px 30px #999;
	box-shadow: 0px 0px 30px #999;
	position: relative;
	z-index: 999999;
}
/*The Top Menu Bar UL. Font-Size 0 eliminates horizontal whitespace between menu items. DO NOT EDIT any property EXCEPT for text-align, which can be changed to center or right to easily re-position the menu. */
.menutop {
	margin: 0;
	padding: 0;
	font-size: 0px;
	text-align: left;
}
/*The menu list items. DO NOT EDIT the first 2 properties. Margin-right provises some separation between each item and may be edited.*/
.menutop li {
	list-style-type: none;
	display: inline-block;
	margin-right: 6px;
}
/*The menu links. MUST BE DISPLAY BLOCK. Padding provides white space within the link box. The first padding value controls the height of the box. The second value controls width.*/
.menutop a {
	display: block;
	color: #000000;
	text-decoration: none;
	padding: 6px 10px;
	font-size: 14px;
	border: 1px solid #000;
	border-radius: 4px;
	background-color: #998C8A;
}
/*The menu links hover and focus states. A box shadow effect changes for this state. */
.menutop a:hover, .menutop a:focus { color: #fff; text-decoration: none; border-color: #ffffff; outline: none 0; }
/*The menu links. MUST BE DISPLAY BLOCK. Padding provides white space within the link box. The first padding value controls the height of the box. The second value controls width. A box shadow is set.*/
.menuside a {
	display: block;
	color: #000;
	text-decoration: none;
	padding: 8px 10px;
	font-size: 14px;
	border: 1px solid #FFF;
	border-radius: 4px;
	background-color: #D2D2D2;
	-webkit-box-shadow: 0px 0px 15px #DDD;
	box-shadow: 0px 0px 15px #DDD;
}
/*The menu links hover and focus states. A box shadow effect changes for this state. */
.menuside a:hover, .menuside a:focus {
	color: #fff;
	background-color: #222;
	box-shadow: 5px 5px 30px #999;
	outline: none 0;
}
/*The Footer*/
.footer { background-color: #dfdfdf; padding: 10px 30px; font-size: 11px; color: #fff; text-align: right; border: solid 1px #797979; }
.footer p.copyright {
	text-transform: uppercase;
	margin: 0px;
}

/*P7MOBILE Styles. These styles will be used only by mobile devices (phones and tablets) and will be ignored by desktop and laptop browsers.*/
body.p7mobile { 
	-webkit-text-size-adjust:100%; 
	min-width: 0;
}
.p7mobile .main-content {
	margin-left: 0;
	margin-right: 0;
}
.p7mobile .content {
	padding: 1.5em;
	font-size: large;
	line-height: 1.35em;
}
.p7mobile .sidebar, .p7mobile .sidebar2 {
	width: auto;
	float: none;
	background-color: transparent;
	border-right: none;
}
.p7mobile .menuside {
	margin: 0;
	padding: 0;
}
.p7mobile .menuside li {
	list-style-type: none;
	margin-bottom: 5px;
	display: inline-block;
	margin-right: 5px;
}
.p7mobile .menuside a, .p7mobile .footer { font-size: large; }

.p7mobile .sidebar, .p7mobile .sidebar2 {
	width: auto;
	float: none;
	margin-left: 0;
}