@charset "utf-8";
/* RAK Garage Makeovers CSS Document */
/* colors are in style-RAKcoatings.css  */

html{
	height:100%;				/* Force vertical scrollbars in VTz + Opera to prevent 'jumping' */
	margin-bottom:1px;
	overflow-y:scroll;			/* this line is for IE */
}

body { margin: 0px; padding: 0px;}
p    { margin: 0px; padding: 0px;}

table {border: none;}

h1{	
	text-align: left;
	vertical-align: top;
	font-family: "PT Serif", Garamond, "Times New Roman", Times, serif;
	font-weight: bold; 
	font-size: 24px;
	margin-top: 10px;
    margin-bottom:15px;
	}

h2{	
	font-family: "PT Serif", Garamond, "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: bold; 
	display: inline;
	line-height: 25px;
}
h3{	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold; 
	text-align:center;
	margin-top: 10px;
	margin-bottom: 0px;
}

h4{	
	text-align: left;
	font-size: 14px;
	font-weight: bold; 
	margin: 0px;
}

.BkWhite {
	background-color: #fff;
	box-shadow: 0 0 15px #222;
}

.BannerDiv {
	margin: auto;
	position: relative;
}
.BannerDiv img {max-width: 100%;}

#BannerTable td {padding: 0; margin: 0;}

.Centered {margin: auto; }
.ContentsCentered {text-align: center;}
.ContentsLeft {text-align: left;}
.ContentsRight {text-align: right;}

.CommercialTypes td {padding-right: 30px; padding-bottom: 2px;}

.ContactForm {
	font-size: 10px;
}
.ContactFormOnly td {padding-left: 10px;}

.Copyright {
	font-family: "PT Serif", Garamond, "Times New Roman", Times, serif;
	font-size: 14px;
	vertical-align:middle;
	font-weight: normal;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: normal!important;
}
.Link_Copyright {
	font-family: "PT Serif", Garamond, "Times New Roman", Times, serif;
	font-size: 14px;
	line-height: 14px;
	font-weight: normal!important;
}


.descpanelfg {
	text-align: right;
}

.FloatR {float: right; padding-left: 10px;}
.FloatL {float: left; padding-right: 10px;}

.Footer {text-align: center;}

.Framed {
	padding: 6px;
	-webkit-box-shadow: 0 0 8px rgba(132, 132, 132, .75);
	-moz-box-shadow: 0 0 8px rgba(132, 132, 132, .75);
	box-shadow: 0 0 8px rgba(132, 132, 132, .75);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}


.Link_Nav:link, .Link_Nav:visited, .Link_Nav:active {
	font-family: "PT Serif", Garamond, "Times New Roman", Times, serif;
	font-size: 20px;
	font-weight:bold;
}
.Link_Nav:hover {
	font-family: "PT Serif", Garamond, "Times New Roman", Times, serif;
	font-size: 20px;
	font-weight:bold;

}



.TitleBar {
	text-align: center;
	padding-top: 4px;
	border-top-style: ridge;
	border-top-width: medium;
	border-bottom-style: ridge;
	border-bottom-width: medium;
}

.MarginL20 {margin-left: 20px;}
.MarginR20 {margin-right: 20px;}

.TextBody {
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.6em;
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
}

.VertBottom {vertical-align: bottom;}
.VertMid {vertical-align: middle;}
.VertTop {vertical-align: top;}

/*  PHOTO GALLERIES -----------------------------------------------------*/

.GalleryTable {
    border-collapse: collapse;
    table-layout: fixed;
    clear: left;
}
.GalleryColumn {
	text-align:left;
	color: #000;
	font-size: 10px;
	line-height: 10px;
	display: inline; 
	vertical-align: text-top;
}
.GalleryCaptionCentered {
	text-align:center;
	color: #000;
	font-size: 10px;
	line-height: 20px;
	display: inline; 
	padding-bottom: 5px;	

}
.GallerySpacer 	{ 	width: 20px;}
.GallerySpacer2 { 	width: 10px;}

.GallerySq200 {width: 200px; height: 200px;}
.GalleryThumb  {width: 220px; height: 147px;} 
.GalleryImage  {width: 500px; height: 333px;}
.GalleryThumb1 {width: 220px; height: 165px;}
.GalleryImage1 {width: 500px; height: 375px;}
.GalleryThumb2 {width: 150px; height: 125px;}
.GalleryImage2 {width: 600px; height: 500px;}
.GalleryThumb3 {width: 200px; height: 135px;}
.GalleryImage3 {width: 200px; height: 135px;}
.GalleryThumb4  {width: 220px; height: 143px;} 
.GalleryImage4  {width: 500px; height: 324px;}
.GalleryThumb5  {width: 220px; height: 285px;} 
.GalleryImage5  {width: 500px; height: 657px;}
.GalleryThumb6  {width: 220px; height: 151px;} 
.GalleryImage6  {width: 500px; height: 344px;}


/* Mobile Menu ****************************************** */
/* Style the navigation menu */
.topnav {
  overflow: hidden;
  position: relative;    
    min-height: 37px;
    vertical-align: middle;
}
/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}
/* Style navigation menu links */
.topnav a {
  color: #86592F;
  padding: 5px 10px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}
.topnav a:hover {  color: #c1272d;  }

/* Style the hamburger menu */
.topnav a.icon {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}
.topnav ul { 	
    list-style-type: none;
    margin-left: -20px;
}


/*  DROPDOWN NAVIGATION MENU -----------------------------------------------------*/
/*  requires Javascript in header to work ----------------------------------------*/
#sddm{	margin: 0; padding: 0; }
#sddm li
{	margin: 0;
	list-style: none;
	font-family: "PT Serif", Garamond, "Times New Roman", Times, serif;
	font-size: 20px;
	font-weight: bold;
	vertical-align: middle;
	line-height: 32px;	
}
#sddm li a
{	display: block;
	text-decoration: none;
	font-weight:bolder;
	z-index: 7000;
}
#sddm li a:hover {	
	font-weight:bolder;
	z-index: 7000;
}
#sddm div
{	position: absolute;
	visibility: hidden;
	margin-bottom: 5px;
	padding: 0;
}
#sddm div a {
		position: relative;
		display: block;
		margin-left: -230px;
		padding-left: 30px;
		width: 200px;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		font-weight: bold;
		font: 14px;
}


img { max-width: 100%; height: auto; }
ul.enlargeR span img, ul.enlargeL span img {max-width: none;}

/* CSS for hovering over images on RIGHT side of screen */
ul.enlargeR{
 	list-style-type:none; /*remove the bullet point*/
	z-index: 100; /* make sure it is behind dropdown menu items */
}
 ul.enlargeR li{
 display:inline-block; /*places the images in a line*/
 position: relative;
 z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
 margin: 1px 0px 0px -40px;
 }
 ul.enlargeR img{
	padding: 6px;
	-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
 ul.enlargeR span{
	position: absolute;
	left: -9999px;
	padding: 5px;
	text-align: left;
	-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
	-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
	box-shadow: 0 0 20px rgba(0,0,0, .75);
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
 }
 ul.enlargeR li:hover{
 z-index: 6000;
 cursor:pointer;
 }
 ul.enlargeR span img{
 padding:2px;
 background:#ccc;
 }
 ul.enlargeR li:hover span{ 
    top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
    left: 10px; /*distance from the left of the thumbnail to the left of the popup image*/
 }
 ul.enlargeR li:hover:nth-child(2) span{
 left: 10px; 
}
 ul.enlargeR li:hover:nth-child(3) span{
 left: 10px; 
}
 /**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
 ul.enlargeR img, ul.enlarge span{
 behavior: url(pie/PIE.htc); 
} 

/* CSS for hovering on images on LEFT side of screen */
ul.enlargeL{
 	list-style-type:none; /*remove the bullet point*/
	z-index: 100; /* make sure it is behind dropdown menu items */
 }
 ul.enlargeL li{
 display:inline-block; /*places the images in a line*/
 position: relative;
 z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
 margin: 1px 0px 0px -40px;
 }
 ul.enlargeL img{
	padding: 6px;   /* this is the thickness of the frame */
	-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
 ul.enlargeL span{
	position: absolute;
	left: -9999px;
	padding: 10px;
	text-align: left;
	-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
	-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
	box-shadow: 0 0 20px rgba(0,0,0, .75);
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
 }
 ul.enlargeL li:hover{
 z-index: 6000;
 cursor:pointer;
 }
 ul.enlargeL span img{
 padding: 2px;
 background: #ccc;
 }
 ul.enlargeL li:hover span{ 
    top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
    left: -250px; /*distance from the left of the thumbnail to the left of the popup image*/
 }
 ul.enlargeL li:hover:nth-child(2) span{
 left: -250px; 
}
 ul.enlargeL li:hover:nth-child(3) span{
 left: -250px; 
}
 /**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
 ul.enlargeL img, ul.enlarge span{
 behavior: url(pie/PIE.htc); 
}


/* FOR SPECIFIED VIEWPORTS */ 
@media all and (min-width: 1000px) {
	.MobileHide {display: inline-block;}
	.MobileShow, MobileBlock {display: none;}
    .TitleBar {padding-top: 15px; padding-bottom: 10px;}
    .BannerDiv {width: 1000px;}
 /*  .BannerDiv img {position: absolute; top: -45px; left: 0px; z-index: 5000; } */
    #BannerTable {width: 1000px; margin: auto;}
    #fadeshow1, #fadeshow1 .gallerylayer { width: 1000px; height: 292px;} /* set in JS already */
    #Body { width: 1000px; }
    #maincontainer {width: 1000px; margin: auto;}
    .topnav {display: none;}  /* hide mobile menu */
    .sidebar {float: right;}
    .ContactFormOnly {display: none;}
	#Body { padding-top: 20px}
}

/* smaller than Desktops */ 
@media all and (max-width: 999px) {
	.MobileHide {display: none;}
	.MobileShow {display: inline-block;}
    .MobileBlock {display: block;}
    .BannerDiv {width: 100%;}
    #BannerTable {width: 100%;}
    #fadeshow1, #fadeshow1 .gallerylayer { width: 100%!important; height: 205px!important}
    #maincontainer {width: 100%;}    
    #sddm {display: none;}     /* hide sidebar menu */
    .topnav {display: block;}  /* show mobile menu */    
    .sidebar {float: right;}
    .ContactFormOnly {display: none;}
    .GalleryColumn {width: 32%;}
    .GallerySpacer {width: 2%;}
    .ExtraPadding td {padding: 12px;}
    .GallerySq200, .GalleryThumb, .GalleryThumb1, .GalleryThumb2, .GalleryThumb3, .GalleryThumb4, .GalleryThumb5, .GalleryThumb6 {width: 100%; height: auto;} 
    ul.enlargeR span img {width: 300px; height: auto; position: absolute; z-index:5000;} 
    ul.enlargeL span img {width: 300px; height: auto; position: absolute; z-index:5000;} 
    ul.enlargeR {margin: 10px;}
    ul.enlargeL {margin: 10px;}
    ul.enlargeL li:hover span {top: -100px;} /*the distance from the bottom of the thumbnail to the top of the popup image*/
    ul.enlargeR li:hover span {top: -100px;} /*the distance from the bottom of the thumbnail to the top of the popup image*/
}

/* tablets, laptops */ 
@media all and (max-width: 767px) { 
    h1 {font-size: 20px;}
    #fadeshow1, #fadeshow1 .gallerylayer { width: 100%!important; height: 160px!important}
}
@media all and (max-width: 600px) { 
    #fadeshow1, #fadeshow1 .gallerylayer { width: 100%!important; height: 128px!important}
    .sidebar {display: none;}
    .ContactFormOnly {display: block; margin: auto;}
}

/* small devices */ 
@media all and (max-width: 480px) {
    #fadeshow1, #fadeshow1 .gallerylayer { width: 100%!important; height: 85px!important}
    img.FloatR, img.FloatL {
        float: none!important; padding-right: 10px; padding-left: 10px; margin: auto!important;
    }
}   
    
/* very small devices */ 
@media all and (max-width: 320px) {
    #fadeshow1, #fadeshow1 .gallerylayer { width: 100%!important; height: 85px!important}    h1 {font-size: 18px;}
}