/*----------
	Roof Works - CSS Document 
----------*/

@import url("reset.css");

/*----------	LaYoUT STYLeS	----------*/
body {
  color: #393838;
  background-color: #1C1C1D;
	font: 62.5%/2.0em Verdana, Arial, Helvetica, sans-serif;
}

.container {
  width: 960px;
  margin: 0 auto;
  font-size: 1.1em;
}

#content {
  padding: 10px 0 20px 0;
  background: #E1E1E1 url(../images/core/content-bg.gif) no-repeat 50% 0;
}

#column-left {
  float: left;
  width: 649px;
  padding: 0 0 5px 0;
  background: url(../images/core/left-column-bg.gif) no-repeat bottom;
}

#column-right {
  float: right;
  width: 250px;
  padding: 50px 0 0 0;
}

#text {
  width: 609px;
  margin: 0 0 0 -1px;
  padding: 60px 20px 20px 20px;
  background: url(../images/core/text-bg.gif) no-repeat;
}

#text-bottom {
  border-left: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  background-color: #fff;
}


/*----------	CoMMoN STYLeS	----------*/
a { color: #0d4b8f; text-decoration: underline; }
a:hover { text-decoration: none; }
h1, h2, h3, h4 {
  color: #404040;
  font-weight: normal;
  font-family: Trebuchet, Arial, sans-serif;
}
h1 { font-size: 2.7em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.2em; }
strong { font-weight: bold; }
hr {
  height: 2px;
  width: 100%;
  border: none;
  margin: 10px 0;
  background: url(../images/core/hr.gif) repeat-x;
}
p { margin: 15px 0; }
ul { margin: 0px 30px; list-style-type: square; }

.clear { display: block; clear: both; }
.hidden { display: none; }

#photos {
  float: right;
  width: 180px;
  margin: 0 10px;
  text-align: center;
  color: #001B5A;
  font-weight: bold;
}
#photos img { margin: 10px 0 0 0; }


/*----------	HeaDeR STYLeS	----------*/
#header {
  height: 314px;
  background: url(../images/core/header-wrap-bg.jpg) no-repeat 50% 0;
}
#header .container {
  width: 960px;
  height: 314px;
  position: relative;
  background: url(../images/core/header-bg.jpg) no-repeat;
}
#header #logo {
  top: 0;
  left: 0;
  position: absolute;
}
#header #banner {
  top: 0;
  left: 217px;
  width: 741px;
  height: 285px;
  display: block;
  overflow: hidden;
  position: absolute;
}


/*----------	NaVIGaTIoN STYLeS	----------*/
#nav {
  top: 285px;
  left: 0;
  height: 29px;
  line-height:29px;
  width: 960px;
  position: absolute;
  background: url(../images/core/nav-bg.gif) repeat-x;
}
#nav ul { list-style-type: none; margin: 0; }
#nav ul li { display: inline; float: left; height: 29px; }
#nav ul li a {
  color: #fff;
  padding: 5px 10px 7px 10px;
  text-decoration: none;
}
#nav ul li a:hover {
  background: #3D3D3D;
}

#p-home li#home a,
#p-commercial li#commercial a,
#p-domestic li#domestic a,
#p-maintenance li#maintenance a,
#p-roofing li#roofing a,
#p-guttering li#guttering a,
#p-asbestos li#asbestos a,
#p-renovations li#renovations a,
#p-contact li#contact a {
  background: #3D3D3D;
}


/*----------	CTa STYLeS	----------*/
#cta { color: #2d2d2d; }
#cta a {
  width: 250px;
  height: 40px;
  color: #2d2d2d;
}
#cta a:hover { background-position: -250px 0 !important; }

#cta a#newroofing {
  background: url(../images/core/cta-newroofing.gif) no-repeat;
  text-decoration: none;
  display: block;
}
#cta a#reroofing {
  background: url(../images/core/cta-reroofing.gif) no-repeat;
  text-decoration: none;
  display: block;
}
#cta a#reguttering {
  background: url(../images/core/cta-reguttering.gif) no-repeat;
  text-decoration: none;
  display: block;
}

#cta #details, #cta #affiliates { margin: 10px 0 10px 10px; }

#cta #affiliates ul { margin: 0; list-style-type: none; }
#cta #affiliates ul li { float: left; display: inline; margin: 5px 10px 5px 0; }




/*----------	RooFING STYLeS	----------*/
ul#colors { margin: 0; list-style-type: none; }
ul#colors li {
  width: 190px;
  height: 20px;
  text-align: center;
  float: left;
  display: inline;
  margin: 3px 10px 3px 0;
}
ul#colors li#zincalume { background: url(../images/core/zincalume.jpg) no-repeat; }
ul#colors li#offwhite { background-color: #e2e3e0; }
ul#colors li#cream { background-color: #e7e1c1; }
ul#colors li#merino { background-color: #cec2aa; }
ul#colors li#wheat { background-color: #c7b891; }
ul#colors li#birch { background-color: #b7b2ac; }
ul#colors li#stone { background-color: #a99f8f; }
ul#colors li#terracotta { background-color: #cbaa8d; }
ul#colors li#tuscanred { background-color: #975540; }
ul#colors li#heritagered { background-color: #793f30; }
ul#colors li#mistgreen { background-color: #7a8978; }
ul#colors li#revergum { background-color: #65796d; }
ul#colors li#caufield { background-color: #335244; }
ul#colors li#torresblue { background-color: #4e6679; }
ul#colors li#mountainblue { background-color: #475161; }
ul#colors li#gullgrey { background-color: #bfbebd; }
ul#colors li#armourgrey { background-color: #929899; }
ul#colors li#slategrey { background-color: #5e5c57; }
ul#colors li#ebony { background-color: #252527; }


/*----------	FooTeR STYLeS	----------*/
ul#gallery { margin: 0; list-style-type: none; }
ul#gallery li { float: left; width: 180px; margin: 0 20px 10px 0; display: inline; }


/*----------	FooTeR STYLeS	----------*/
#footer {
  color: #e1e1e1;
  padding: 15px 0;
  font-family: Georgia, Arial, sans-serif;
  background: url(../images/core/footer-bg.gif) repeat-x;
}
#footer .container {
  width: 940px;
  padding: 0 0 0 20px;
}
#footer h2 {
  color: #e1e1e1;
  padding: 0 0 5px 0;
  font-family: Georgia, Arial, sans-serif;
  background: url(../images/core/footer-divider.gif) repeat-x bottom;
}
#footer a { text-decoration: none; color: #e1e1e1; }
#footer a:hover { text-decoration: underline; }
#footer ul#links { margin: 10px 0; list-style-type: none; width: 350px; }
#footer ul#links li { float: left; display: inline; width: 175px; }
#footer #copyright { float: right; margin: 11px 100px 0 0; }
#footer #wflogo { float: right; margin: 10px 10px 0 0; }