/*----CSS Reset----*/
*{margin:0;padding:0}iframe,a img,fieldset,form,table{border:0}h6,h5,h4,h3,h2,h1,caption,th,td{font-size:100%;font-weight:normal}dd,dt,dl,ol,ul{list-style:none}legend{color:#000}button,select,textarea,input{font-size:100%}table{border-collapse:collapse}caption,th,td{text-align:left}
/*----End CSS Reset----*/
/*---------------------------------------------------------------------*/
/*----Elements----*/

body {
  background: #fff url(http://www.arapahoeroofing.com/images/bg_repeat.gif) left top repeat-x;
  font: normal 62.5% FreeSans, Helvetica, Tahoma, sans-serif;
  color: #fff;
}

a {
  text-decoration: none;
  outline: none;
  color: #e01a22;
}

a:hover {
  text-decoration: underline;
}

/*----End Elements----*/
/*---------------------------------------------------------------------*/
/*----Framework----*/

.clear {
  clear: both;
  height: 1px;
  line-height: 1px;
  font-size: 1px;
}

.left {
  float: left;
}

.right {
  float: right;
}

#container {
  background-color: #fff;
  width: 930px;
  margin: 0 auto;
  text-align: left;  
}

#wrap {
  width: 971px;
  margin: 0 auto;
  text-align: left;
}

#main {
  clear: both;
  padding: 20px 0;
}

/*----End Framework----*/
/*---------------------------------------------------------------------*/
/*----Header----*/

#header {height:135px;}

#logo {
  width: 126px;
  height: 123px;
  background: url(http://www.arapahoeroofing.com/images/logo.gif) left top no-repeat;
  display: block;
  text-indent: -9999px;
  float: left;
}

#toplinks {
  float: right;
  padding:15px 15px 0;
}

#toplinks li {
  display: block;
  float: left;
  font-size: 1.4em;
  padding-left: 30px;
  height: 40px;
  line-height: 30px;
  margin: 0 15px;
}

#toplinks li.photo {
  background: url(http://www.arapahoeroofing.com/images/icon_photo.gif) left 2px no-repeat;
 padding-left: 36px;
}

#toplinks li.request {
  background: url(http://www.arapahoeroofing.com/images/icon_request.gif) left top no-repeat;
}

#toplinks li.email {
  background: url(http://www.arapahoeroofing.com/images/icon_email.gif) left top no-repeat;
  padding-left: 34px;
}

#toplinks li.phone {
  display: block;
  float: left;
  font-weight: bold;
  color: #e01a22; 
  background: url(http://www.arapahoeroofing.com/images/icon_phone.gif) left top no-repeat;
}

#toplinks li a {
  display: block;
  float: left;
  font-weight: bold;
}

/*----End Header----*/
/*---------------------------------------------------------------------*/
/*----Nav----*/

#nav {
  float: left;
  background: url(http://www.arapahoeroofing.com/images/nav_bg_repeat.gif) left top repeat-x;
  height: 57px;
  width:739px;
  margin-top: 18px;
  padding-left:65px;
}

#nav li {
  display: block;
  float: left;
  line-height: 57px;
  position: relative;
  z-index: 10;
}

#nav li:hover {
  z-index: 100;
}

#nav li a {
  display: block;
  height: 57px;
  color: #fff;  
  text-indent: -9999px;
}

#header #nav li a:hover, #header #nav li:hover a {
  background-position: left top;
}

#nav ul {
  padding:10px 9px 0;
}

#nav ul li {
  display: block;
  float: left;
  line-height: normal;
  position: relative;
  margin-left: 3px;
  background: url(http://www.arapahoeroofing.com/images/nav_triangle.gif) -1px 11px no-repeat;
}

#nav ul li:hover {
  background: #000 url(http://www.arapahoeroofing.com/images/nav_over_repeat.gif) left bottom repeat-x;
}

#nav ul li a {
  height: auto;
  display: block;
  width:88px;
  float: none;
  text-indent: 0;
  font-size: 1.1em;
  color: #fff;
  padding: 6px 0;
  margin: 0 5px;
  text-decoration: none;
}

#nav ul li.last a {
  border-bottom: 0 none;
}


#nav li a.residential {
  background: url(http://www.arapahoeroofing.com/images/nav_01.gif) left bottom no-repeat;
  width: 120px;
}

#nav li a.commercial {
  background: url(http://www.arapahoeroofing.com/images/nav_02.gif) left bottom no-repeat;
  width: 123px;
}

#nav li a.building {
  background: url(http://www.arapahoeroofing.com/images/nav_03.gif) left bottom no-repeat;
  width: 111px;
}

#nav li a.metal {
  background: url(http://www.arapahoeroofing.com/images/nav_04.gif) left bottom no-repeat;
  width: 87px;
}

#nav li a.roofing {
  background: url(http://www.arapahoeroofing.com/images/nav_05.gif) left bottom no-repeat;
  width: 110px;
}

#nav li a.company {
  background: url(http://www.arapahoeroofing.com/images/nav_06.gif) left bottom no-repeat;
  width: 111px;
}

#nav li a.contact {
  background: url(http://www.arapahoeroofing.com/images/nav_07.gif) left bottom no-repeat;
  width: 77px;
}

#nav div.drop {
  display: none;
}

#nav li:hover div.drop {
  display: block;
  position: absolute;
  top: 57px;
  left: 1px;
  width: 225px;
  z-index: 100;
}

#nav li.one:hover div.drop {
  left: 2px;
}

#nav li.leftDropOne:hover div.drop {
  left: -138px;
}

#nav li.leftDropTwo:hover div.drop {
  left: -115px;
}

#nav li.leftDropThree:hover div.drop {
  left: -114px;
}

#nav .dropback {
  background-color: #1e1e1e;
}

#nav .dropbottom {
  height: 12px;
  background: url(http://www.arapahoeroofing.com/images/nav_drop_bottom.png) left top no-repeat;
}

/*----End Nav----*/
/*---------------------------------------------------------------------*/
/*----Home----*/

#home {
  height: 325px;
  width: 900px;
  background: url(http://www.arapahoeroofing.com/images/img_bg_home.jpg) left top no-repeat;
  margin: 0 auto 15px;
}

#homeCallouts {
  height: 152px;
  width: 900px;
  background: url(http://www.arapahoeroofing.com/images/callouts_bg_home.gif) left top no-repeat;
  margin: 0 auto 15px;
}

#homeCallouts h1 {
  color: #e01a22;
  font-size: 1.8em;
  font-weight: bold;
  margin-bottom:12px;
  height:36px;
  line-height:44px;
}

#homeCallouts p {
  font-size: 1.1em;
  line-height: 1.2em;
}

#homeCallouts a {
  font-size: 1.3em;
  font-weight: bold;
}

#homeCallouts #c1, #homeCallouts #c2, #homeCallouts #c3 {
  width: 264px;
  float: left;
  color: #000;
  padding:0 18px;
}

#dateBG {
  background: url(http://www.arapahoeroofing.com/images/date_bg.jpg) left center no-repeat;
  width: 48px;
  height: 51px;
  margin:0 10px 35px 0;
  float: left;
  text-align: center;
  padding: 3px 0;
}

#homeCallouts p.month {
  color: #fff;
  font-weight: bold;
  line-height: 1.5em;
}

#homeCallouts p.day {
  font-size: 3em;
  font-weight: bold;
  line-height: .8em;  
}

#homeCallouts p.year {
  color: #fff;
  line-height: 1em;  
}

#flash {
  float: left;
  height:324px;
  width:600px;
  margin-top:1px;
}

#homeRight {
  float: right;
  width: 268px;
  padding: 15px;
}

#homeRight p {
  font-size:1.2em;
  line-height:1.2em;
  margin-bottom:10px;
}

#homeRight p.lrgTxt {
  font-size: 2em;
}

.requestBtn {
  background: url(http://www.arapahoeroofing.com/images/btn_request.gif) left center no-repeat;
  width: 117px;
  height: 37px;
  display: block;
  margin:10px 0 0 75px;
}

/*----End Home----*/
/*---------------------------------------------------------------------*/
/*----Footer----*/

#footerBG {
  background-color: #1e1e1e;
  padding: 15px 0;
  border-top: #e01a22 3px solid;
}

#footer {
  width: 928px;
  margin: 0 auto;
}

.footerCol {
  padding: 0 14px;
  float: left;
  border-right: #4b4b4b 1px solid;
  height: 245px;
  width:98px;
}

.footerColLast {
  padding: 0 14px;
  float: left;
  border-right: #none;
  height: 145px;
}

#footer h1 {
  font-size: 1.2em;
  font-weight: bold;
  color: #e01a22;
  margin-bottom: 3px;
}

#footer ul li {
  font-size: 1.1em;
  line-height: 1.5em;
  white-space: nowrap;
}

#footer ul li a {
  color: #fff;
}

#footFooter {
  width:900px;
  margin:15px auto 0;
  padding:7px 0 0;
  border-top: #e01a22 1px solid;
}


/*----End Footer----*/
/*---------------------------------------------------------------------*/
/*----Main----*/

#main #c1 {
  width: auto;
  float: left;
  padding:0 0 0 15px;
}

#main #c1 h1 {
  color: #e01a22;
  font-size: 1.5em;
  font-weight: bold;
  line-height:44px;
  background: url(http://www.arapahoeroofing.com/images/callout_top.gif) left top no-repeat;
  height:37px;
  width: 147px;  
  padding: 0 12px;    
}

#main #c2 {
  padding:0 20px 0 0;
  width:700px;
  float: right;
}

#main #c2 h1 {
  color: #000;
  font-size: 2.8em;
  font-weight: bold;
  margin-bottom:10px;
  padding-bottom: 5px;
  border-bottom: #000 1px solid;
}

#main #c2 h2 {
  color: #e01a22;
  font-size: 1.5em;
  font-weight: bold;
  line-height:18px;
  background: none;
}

#main #c2 #content {
  float: left;
  width:481px;
}

#main #c2 #content ul {
  height: 100px;
  padding: 30px 0;
}

#main #c2 #content ul li {
  display: block;
  float: left;
  height:25px;
  width:200px;
  background: url(http://www.arapahoeroofing.com/images/sidenav_triangle.gif) left 5px no-repeat;
}

#main #c2 #content ul li a {
  display: block;
  font-size: 1.4em;
  font-weight: bold;
  padding-left: 12px;
}

#main #c2 #content ul.contentList  {
  height: auto;
  padding: 10px 0;
}

#main #c2 #content ol.contentList  {
  height: auto;
  padding: 10px 0;
}

#main #c2 #content ul.contentList li {
  display: block;
  float: none;
  height:auto;
  width:auto;
  background: url(http://www.arapahoeroofing.com/images/sidenav_triangle.gif) left 5px no-repeat;
  color: #000;
  padding-left: 12px;
  font-size: 12px;
}

#main #c2 #content ol.contentList li {
  display: block;
  float: none;
  height:auto;
  width:auto;
  background: url(http://www.arapahoeroofing.com/images/sidenav_triangle.gif) left 5px no-repeat;
  color: #000;
  padding-left: 12px;
  font-size: 12px;
}

#main #c2 #content p {
  color: #000;
  font-size: 1.2em;
  line-height: 1.8em;
  padding: 5px 0;
}

#main #c2 #content p.entryInfo {
  color: #666;
  font-size: 1em;
  line-height: 1em;
  font-style: italic;
  margin-bottom:10px;
}


#main #c2 #content11 {
  float: none;
  width:100%;
}

#main #c2 #content1 ul {
  height: 100px;
  padding: 30px 0;
}

#main #c2 #content1 ul.contentList {
height:auto;
padding:10px 6px;
}

#main #c2 #content1 ul li {
  display: block;
  float: left;
  height:25px;
  width:200px;
  background: url(http://www.arapahoeroofing.com/images/sidenav_triangle.gif) left 5px no-repeat;
}

#main #c2 #content1 ul#categoryPhotos li {
  display: block;
  float: left;
  height:200px;
  width:160px;
  background: none;
  margin: 0 15px;
}

#main #c2 #content1 ul#categoryPhotos li a {
  padding: 0;
  text-align: center;
  margin-top: 7px;
}

#main #c2 #content1 ul.contentList li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://arapahoe.unleadedsoftware.com/images/sidenav_triangle.gif) no-repeat scroll left 6px;
color:#000000;
display:block;
float:none;
font-size:12px;
height:auto;
padding-left:12px;
width:auto;
line-height: 18px;
}

#main #c2 #content1 ul li a {
  display: block;
  font-size: 1.4em;
  font-weight: bold;
  padding-left: 12px;
}

#main #c2 #content1 ul#photos {
  height: auto;
  padding: 10px 0;
}

#main #c2 #content1 ul#photos li {
  display: block;
  float: left;
  height:100px;
  width:100px;
  margin: 7px;
  background: none;
}

#main #c2 #content1 ul#photos li a {
  display: block;
  padding-left: 0;
  border: #000 1px solid;
  width: 100px;
}

#main #c2 #content1 ul#photos li a:hover {
  border: #f00 1px solid;
}

#main #c2 #content1 p {
  color: #000;
  font-size: 1.2em;
  line-height: 1.2em;
  padding: 5px 0;
}

#main #c2 #content1 p.entryInfo {
  color: #666;
  font-size: 1em;
  line-height: 1em;
  font-style: italic;
  margin-bottom:10px;
}

#main #c2 #images {
  width: 193px;
  padding: 0 10px;
  float: right;
}

.iconZoom {
  background: url(http://www.arapahoeroofing.com/images/icon_zoom.gif) left top no-repeat;
  height:30px; 
  margin:3px 0 13px;
  padding-left:33px;
  line-height: 27px;   
  display:block;
}


/*----End Main----*/
/*---------------------------------------------------------------------*/
/*------Forms-----*/

label {
  color: #000;
  display: block;
  font-weight:bold;
}

label span {
    color: #e01a22;
}

#main #c2 #content1 #form li {
  background:none;
  float:left;
  padding:7px;
  width:250px;
}

#main #c2 #content1 ul#form {
  height: auto;
  padding:15px 0 0;
}

#main #c2 #content1 ul#form ul {
  height: auto;
  padding:0;
}

#main #c2 #content1 ul#form ul li {
  width: 120px;
  height:15px;
  color: #000;
  padding:6px 0 0;
}

#main #c2 #content1 ul#form ul li input {
  width: 15px;
  height:15px;
  vertical-align:middle;
}

#main #c2 #content1 #form li input {
  width: 220px;
}

#main #c2 #content1 #form li.address {
  width: 498px;
  height:56px;
}

#main #c2 #content1 #form li.besttime {
  width: 498px;
}

#main #c2 #content1 #form li.history {
  width: 498px;
  height:140px;
}

#main #c2 #content1 #form li.roof {height:35px;}

#main #c2 #content1 #form li input.address {
  width: 484px;
}

#main #c2 #content1 #form li.state, #main #c2 #content1 #form li.zip {
  width: 110px;
}

#main #c2 #content1 #form li input.state, #main #c2 #content1 #form li input.zip {
  width: 96px;
}

#main #c2 #content1 #form li textarea {
  font-family:FreeSans,Helvetica,Tahoma,sans-serif;
  font-size:1.1em;
  height:120px;
  padding:2px;
  width:484px;
}

.submit {
  background: url(http://www.arapahoeroofing.com/images/btn_submit.gif) left center no-repeat;
  width: 76px;
  height: 37px;
  display: block;
  cursor: pointer;
  border: none;
  text-indent: -999em;
  margin-left:5px;
}

/*----End Form----*/
/*---------------------------------------------------------------------*/
/*----Callouts----*/

.callout {
  background: url(http://www.arapahoeroofing.com/images/callout_bg_repeat.gif) left top repeat-y;  
  width: 147px;
  padding:16px 12px 0;
}

.callout p {
  color: #000;
  line-height: 13px;
}

.calloutBottom {
  background: url(http://www.arapahoeroofing.com/images/callout_bottom.gif) left top no-repeat;
  margin-bottom: 15px;
  width: 171px;
  height: 38px;
}

.callout li {
  background: url(http://www.arapahoeroofing.com/images/sidenav_triangle.gif) left 6px no-repeat;
}

.callout a {
  color: #000;
  display: block;
  font-size: 1.2em;
  padding-left: 10px;
  line-height: 1.5em;  
}

.callout p a {
  color: #fff;
  font-weight: bold;
}

#dateBGsub {
  background: url(http://www.arapahoeroofing.com/images/date_bg_sub.gif) left top no-repeat;
  width: 36px;
  height: 120px;
  margin: 0 7px 0 0;
  float: left;
  text-align: center;
  padding: 2px 0;
}

.callout p.month {
  color: #fff;
  font-weight: bold;
  line-height: 1.2em;
}

.callout p.day {
  font-size: 2em;
  font-weight: bold;
  line-height: 1em;  
}

.callout p.year {
  color: #fff;
  line-height:0.6em; 
}

/*----End Callouts----*/