/*
Break 0 at 900
Break 0 at 750
Break 1 at 650
Break 2 at 450
Break 3 at 320
*/
.hidebreak1{display:none;}
.hidebreak2{display:none;}
.hidebreak3{display:none;}
.roofing-650to900{display:none;}
.roofing-450to650{display:none;}
.roofing-250to450{display:none;}

/*-----Base Styles-----*/
html,body{
padding:0;
margin:0;
font-family:Arial, Helvetica, Verdana, sans-serif; 
background-color:392e0c;
text-align:left;
-webkit-text-size-adjust:none; /*iPhone Scaling Fix*/
}
body{
background-image:url(roofing-images/shingles.jpg);
background-repeat:repeat;
}
.font-raleway{font-family:"Raleway";}
div{position:relative;}
.clear{clear:both;}
img{border:0px solid black;}
a:link{color:black;text-decoration:none;}
a:hover{text-decoration:underline;}
a:visited {color:black;}
h1,h2,h3,h4,h5,h6{color:black;font-family:"Raleway";}
h1,h2{
text-align:left;
font-weight:bold;
padding:0px;
margin:15px 0px 3px 0px;
}
h1{font-size:24px;line-height:27px;}
h2{font-size:20px;line-height:23px;}
p{
color:#272419;
margin:0px 0px 25px 0px;
padding:0px;
text-align:left;
font-size:15px;
line-height:22px;
}
.roofing-fullwidth-container{width:100%;}
.roofing-fullcontainer{
min-width:240px;
max-width:900px;
margin: 0px auto; /* centers roofing-fullcontainer on 1200px+ screens */
}
.bold{font-weight:bold;}
.pixles-overlay{
position:Absolute;
z-index:1000;
background-image: url(roofing-images/pixel-widths-for-responsive.png);
background-position:top left;
background-repeat:no-repeat;
width:1000px;
height:302px;
}






/*---------------Hero Text Styles---------------*/
.heroimage img{width:100%;}
.top-cat-roofing-logo img{max-width:600px;}
.top-cat-roofing-logo.smalllogo img{max-width:200px;}
#roofing-logo-small{display:none;}
#roofing-logo-large{display:none;}
@media (min-width: 650px){
#roofing-logo-small{display:none;}
#roofing-logo-large{display:inline;}
.top-cat-roofing-logo img{width:100%;}
.top-cat-roofing-logo.smalllogo img{max-width:330px;}
.hidebreak1{display:none;}
}
@media (min-width: 10px) and (max-width: 649px) {
#roofing-logo-small{display:inline;}
#roofing-logo-large{display:none;}
.top-cat-roofing-logo img{width:100%;}
.top-cat-roofing-logo.smalllogo img{max-width:280px;}
.hidebreak1{display:inline;}
}
.roofing-headercontent{
text-align:center;
margin:0px 2% 0px 2%;
padding:15px 20px 0px 20px;
}
.roofing-description{
color:white;
text-align:center;
font-weight:normal;
padding:0px;
margin:3px 20px 7px 20px;
font-size:10px;
line-height:12px;
}
.hero a:link, .hero a:visited{color:#f4e0a2;}
.hero a:hover{text-decoration:none;}
.wood-bg{
position:relative;
background-image:url(roofing-images/wood-bg-1.jpg);
background-repeat:repeat;
}
@media (min-width: 10px) and (max-width: 649px) {
.wood-bg{
position:relative;
background-image:url(roofing-images/wood-bg-1-small.jpg);
background-repeat:repeat;
}
}
.hero h1, .hero p{
color:#f4e0a2; /*light tan*/
text-align:center;
margin:0px;
}
.hero h1{
font-size:36px;
font-weight:bold;
margin:5px 0px 5px 0px;
}
h1.hero-phone{
text-shadow:0px 3px 10px black;
font-family:Arial, Helvetica, Verdana, sans-serif; 
font-weight:bold;
}
p.hero-tagline{
font-size:15px;
line-height:18px;
font-weight:bold;
text-shadow:0px 3px 10px black;
}


@media (min-width: 750px) {
.roofing-650to900{display:block;}
}
@media (min-width: 650px) and (max-width: 749px) {
p.hero-tagline{font-size:13px;line-height:18px;}
.roofing-650to900{display:block;}
}
@media (min-width: 490px) and (max-width: 649px) {
.roofing-450to650{display:block;}
p.hero-tagline{font-size:12px;line-height:18px;}
}
@media (min-width: 320px) and (max-width: 489px) {
h1.hero-phone{font-size:27px;}
p.hero-tagline{font-size:12px;line-height:16px;}
.roofing-250to450{display:block;}
}
@media (min-width: 10px) and (max-width: 319px) {
h1.hero-phone{font-size:22px;}
p.hero-tagline{font-size:11px;line-height:13px;}
.roofing-250to450{display:block;}
}



/*---------------Hero Background Styles---------------*/
.rivet-bg-hero{
position:relative;
background-image:url(roofing-images/black-rivets.png);
background-repeat:repeat-x;
background-position:top;
margin-left:0px;
margin-right:0px;
}
.rivet-bg{
position:relative;
background-image:url(roofing-images/black-rivets.png);
background-repeat:repeat-x;
background-position:top;
margin-left:-10px;
margin-right:-10px;
}
.rivet-bg-bottom-footer{
position:relative;
background-image:url(roofing-images/black-rivets-bottom.jpg);
background-repeat:repeat-x;
background-position:bottom;
margin-left:-10px;
margin-right:-10px;
}
.rivet-bg-left{
position:relative;
background-image:url(roofing-images/black-rivets-vertical.jpg);
background-repeat:repeat-y;
background-position:left;
margin-left:-10px;
}
.rivet-bg-right{
position:relative;
background-image:url(roofing-images/black-rivets-vertical.jpg);
background-repeat:repeat-y;
background-position:right;
margin-right:-10px;
}
.hero-bg-bottom{
position:relative;
padding:35px 25px 15px 25px;
-moz-box-shadow:0px 0px 15px #111111;
-webkit-box-shadow:0px 0px 15px #111111;
box-shadow:0px 0px 15px #111111;
box-shadow:0px 0px 15px #111111\9; /* IE8 Fix */
*box-shadow:0px 0px 15px #111111; /* IE7 Fix */
behavior:url(pie/PIE.htc);
}


/*-----Remove Margins Under 900px-----*/
@media (min-width: 10px) and (max-width: 960px) {
.rivet-bg{margin-left:0px; margin-right:0px;}
.rivet-bg-bottom-footer{margin-left:0px; margin-right:0px;}
.rivet-bg-left{margin-left:0px;}
.rivet-bg-right{margin-right:0px;}
}





/*---------------Navigation Styles---------------*/
.roofing-navigation{
position:relative;
text-align:center;
font-weight:bold;  
margin:0px;
padding:0px;
background-color:transparent;
}
.roofing-navigation a:link, .roofing-navigation a:visited{color:black;}
.roofing-navigation a:hover{color:#555555;}
.roofing-navigation ul{
margin:0px auto;
padding:7px 0px;
width:520px;
}
.roofing-navigation ul li{
margin:0px 10px;
padding:0px;
display:inline;
float:left;
text-decoration:none;
text-transform:uppercase;
text-align:center;
width:150px;
}
.top-roofing-navigation{
padding:5px 0px;
}
.top-roofing-navigation a:link{
font-size:14px;
line-height:30px; /* NEW */
margin:0px 16px;
}
@media (min-width: 450px) and (max-width: 549px) {
.roofing-navigation a:link{font-size:12px; margin:0px 10px;}
}
@media (min-width: 320px) and (max-width: 449px) {
.roofing-navigation a:link{font-size:12px; margin:0px 10px;}
}
@media (min-width: 10px) and (max-width: 319px) {
.roofing-navigation a:link{font-size:12px; margin:0px 10px;}
}








/*---------------Page Styles---------------*/
.page-bg{
position:relative;
background-image:url(roofing-images/paperbg-gray.jpg);
background-repeat:repeat;
width:100%;
max-width:1000px;
margin:0px auto;

border-radius:10px 10px 0px 0px;
-moz-border-radius:10px 10px 0px 0px;
-webkit-border-radius:10px 10px 0px 0px;
-khtml-border-radius:10px 10px 0px 0px;

-moz-box-shadow:0px 0px 25px #000000;
-webkit-box-shadow:0px 0px 25px #000000;
box-shadow:0px 0px 25px #000000;
box-shadow:0px 0px 25px #000000\9; /* IE8 Fix */
*box-shadow:0px 0px 25px #000000; /* IE7 Fix */
behavior:url(pie/PIE.htc);
}
.page-text{padding:30px;}
.section-tan{
position:relative;
background-image:url(roofing-images/paperbg-tan.jpg);
background-repeat:repeat;
}
.section-green{
position:relative;
background-image:url(roofing-images/paperbg-green.jpg);
background-repeat:repeat;
}
.section-red{
position:relative;
background-image:url(roofing-images/paperbg-red.jpg);
background-repeat:repeat;
}
.section-gray{
position:relative;
background-image:url(roofing-images/paperbg-gray.jpg);
background-repeat:repeat;
}
.pagesections{padding:60px 40px 30px 40px;}

@media (min-width: 550px) and (max-width: 650px) {
.pagesections{padding:60px 40px 30px 40px;}

}
@media (min-width: 450px) and (max-width: 549px) {
.pagesections{padding:60px 40px 30px 20px;}

}
@media (min-width: 320px) and (max-width: 449px) {
.pagesections{padding:60px 10px 30px 15px;}
.pagesections p{line-height:20px;}
}
@media (min-width: 10px) and (max-width: 319px) {
.pagesections{padding:60px 10px 30px 15px;}
.pagesections p{line-height:20px;}
}





/*---------------Page Insert Image Styles---------------*/

.insertimage-right{
float:right;
margin:6px 0px 10px 20px;
border:1px solid gray;
background-color:#cccccc;
}
.insertimage-right img{ }
.insertimage-left{
float:left;
margin:6px 0px 10px 20px;
border:1px solid gray;
}
.insertimage-left img{ }
.insertimage-right .imagetext,
.insertimage-left .imagetext{
font-size:12px;
color:black;
padding:3px 8px 8px 8px;
}
@media (min-width: 800px) {
.insertimage-right, .insertimage-left,
.insertimage-right img, .insertimage-left img{width:350px;}
}
@media (min-width: 700px) and (max-width: 799px) {
.insertimage-right, .insertimage-left,
.insertimage-right img, .insertimage-left img{width:300px;}
}
@media (min-width: 650px) and (max-width: 699px) {
.insertimage-right, .insertimage-left,
.insertimage-right img, .insertimage-left img{width:260px;}
}
@media (min-width: 480px) and (max-width: 649px) {
.insertimage-right, .insertimage-left,
.insertimage-right img, .insertimage-left img{width:220px;}
}
@media (min-width: 380px) and (max-width: 479px) {
.insertimage-right, .insertimage-left,
.insertimage-right img, .insertimage-left img{width:190px;}
}
@media (min-width: 10px) and (max-width: 379px) {
.insertimage-right, .insertimage-left,
.insertimage-right img, .insertimage-left img{width:160px;}
}








/*---------------Roofing Terms Styles---------------*/
.roofing-terms h1{}
.roofing-terms h2{font-size:38px; margin-bottom:20px; margin-top:40px;}
.roofing-terms p{margin-bottom:12px; line-height:19px;}
.roofing-terms p span{font-weight:bold;}
div.letter-list{margin-top:20px; text-align:center;}
div.letter-list a:link, div.letter-list a:visited{
color:blue;
margin:0px 16px; /* NEW */
line-height:30px; /* NEW */
}
div.letter-list a:hover{color:black; font=weight:bold;}
@media (min-width: 10px) and (max-width: 449px) {
div.letter-list a:link, div.letter-list a:visited{ }
}





/*----------------Contact Page Styles---------------*/
.roofing-contact, .roofing-contact p, .roofing-contact h1, .roofing-contact h2{text-align:center;}
.roofing-contact a:link, .roofing-contact a:visited{color:#0000FF;}
@media (min-width: 10px) and (max-width: 549px) {
.roofing-contact h1{ font-size:18px;} 
.roofing-contact h2{ font-size:16px;}
}






/*----------------Top Ten Page Styles---------------*/
.top-ten-to-hire h1 {
margin-bottom:10px;
}
.top-ten-to-hire h3 {
margin-bottom:0px;
}
.top-ten-to-hire p {
margin-bottom:10px;
margin-left:25px;
}
.top-ten-to-hire p.opening {
margin-bottom:10px;
margin-left:0px;
}
.top-ten-to-hire p span {
color:red;
font-weight:bold;
}








/*----------------Roofing Gallery Styles---------------*/
.insertimage-gallery{
margin:6px auto 30px auto;
border:1px solid gray;
background-color:#cccccc;
max-width:600px;
}
.insertimage-gallery img{width:100%; }

.insertimage-gallery .imagetext, .insertimage-gallery .imagetext{
font-size:14px;
color:black;
padding:3px 8px 8px 8px;
}







/*----------------Footer Styles---------------*/
.footer{
margin-bottom:30px;
}
.footer .footer-text{
color:#272419;
margin:0px 0px 30px 0px;
padding:0px 40px;
text-align:center;
font-size:13px;
line-height:18px;
}
.footer .pagesections{
text-align:center;
padding:50px 0px 20px 0px;
}
.footer .footer-text span{
padding:0px 20px;
}
.footer p{
text-align:center; 
margin-top:10px;
}
.footer p a:link{
margin:0px 18px;
line-height:30px; /* NEW */
}


@media (min-width: 550px) and (max-width: 650px) {
.footer .footer-text{padding:0px 40px; background-color:;}
}
@media (min-width: 450px) and (max-width: 549px) {
.footer .footer-text{padding:0px 40px; background-color:;}
}
@media (min-width: 320px) and (max-width: 449px) {
.footer .footer-text{padding:0px 10px; margin:0px auto 20px auto; font-size:12px; width:90%;}
}
@media (min-width: 10px) and (max-width: 319px) {
.footer .footer-text{padding:0px 10px; margin:0px auto 20px auto; font-size:11px; width:90%;}
}