﻿html {
	background:#555657;
    font-family: 'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue', Arial, Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	width: 100%;
	height: 100%;

}



a, a:hover, a:visited{
	text-decoration:underline;
	color:#000000;
	border: 0px;
	padding: 0px;
	margin: 0px;
	outline:none;
}

a:hover, .current {
	color: #6ac1e7;
	cursor:pointer;
	cursor:hand;
	text-decoration:none;
	border: 0px;
	padding: 0px;
	margin: 0px;
	outline:none;
	color:maroon;
}

body{
	margin:0px;
	border:0px;
	background:#555657;
	text-align: left;
	font-family:Tahoma, Arial, Helvetica;
	font-size: 11px;	
	color:black;
	cursor: default;
	text-decoration:inherit;
	width: 100%;
	height: 100%;
}



h1{
	color:#444444;
	margin:5px 0px 10px 0px;
	text-align:center;
	font-weight:normal;
}


h2{
	color:#444444;
	margin:5px 0px 10px 0px;
	text-align:center;
	text-transform:uppercase;
	font-size:12px;
	letter-spacing:1em;
	font-weight:normal;
}



h3{
	font-weight:normal;
}

.content{
	background:#eeeeee;
	padding: 10px 50px 20px 50px ;
	font-weight: normal;
	font-size: 14px;
	border: 1px solid #ccc;
	border-radius: 7px;
}

.content p{
	margin:5px 10px 5px 10px;	
}



.booknow{
	width:350px;
	height:auto;
	margin-left:15px;
	border:3px gray ridge;
	border-radius: 7px;
	background-color:silver;
	color:black;
	float:right;
	margin-bottom:10px;
	margin-top:40px;
	clear:both;
}

.booknow p{
	text-align:center;
	font-size:xx-large;
	font-weight:bold;
}	



.phone_num{
	width:350px;
	height:auto;
	margin-left:15px;
	border:3px gray ridge;
	border-radius: 7px;
	background-color:silver;
	color:black;
	float:right;
	margin-bottom:10px;
	margin-top:10px;
	clear:both;
}




.phone_num p{
	text-align:center;
	font-size:xx-large;
	font-weight:bold;
}	

p.tap{
	font-size:small;
	color:#101010 ;
	font-variant:small-caps;
}	


.left{
 	max-width:750px;
 	float:left;
 	display:inline-table;
 }
@media screen and (max-width:645px) {
	.left{
 	max-width:600px;
	}
}




.right{
	display:inline-block;
	float:right;
	max-width:350px;
} 


.contact_form{
	width:350px;
	height:auto;
	margin-left:15px;
	border:3px gray ridge;
	border-radius: 7px;
	background-color:silver;
	color:black;
	float:right;
	margin-bottom:30px;
	margin-top:10px;
}

@media screen and (max-width:645px) {
	.contact_form{
		display:none;
	}
}




#contact{
	float:left;
	background-color:#bbbbbb; 
	border:thin #808080 groove;
	margin:20px 20px 20px 0px;;
	padding:12px;
	width:220px;
	height:auto;
	border-radius:4px 4px 4px 4px;
}


#contact_title{
	background-color:#555657;
	color:white;
	text-align:center;
	font-size:18px;
	margin:5px 0px 5px 0px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#959595+0,0d0d0d+46,010101+50,0a0a0a+53,4e4e4e+76,383838+87,1b1b1b+100;Black+Gloss+Pipe */
	background: #959595; /* Old browsers */
	background: -moz-linear-gradient(top, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */
}


td.form_td{
	font-size:small;
	font-weight:normal;
}

.required{
	font-size:xx-small;
	color:red;
	vertical-align:top;
}




.form_input, textarea{
	font-size:small;
	margin:5px 5px 0px 26px;
	padding:5px 5px 0px 5px;
}



textarea{
	margin-left:0px;
}

.form_submit{

	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:5px;
	margin-bottom:10px;
}

#go{
	padding:6px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f3c5bd+0,e86c57+50,ea2803+51,ff6600+75,c72200+100;Red+Gloss */
	background: #f3c5bd; /* Old browsers */
	background: -moz-linear-gradient(top, #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=0 ); /* IE6-9 */
	font-weight:bold;	
}


.f_norm{
	background-color:white;
	width:160px;
}
.f_error{
	background-color:lightpink;
}


.f_name{
	font-size:small;
}


.reqd{
	font-size:xx-small;
	color:red;
}






.text_block{
	float:none;
	margin-left:35px;
	max-width:1200px;
}
@media screen and (max-width:645px) {
	.text_block{
		max-width:600px;
	
		float:none;
		margin-left:auto;
		margin-right:auto;
	}
}


.list1 {
	margin-left:55px;
	float:none;
	margin-right:40px;
	margin-bottom:20px;
	
}


#fadeshow1 .gallerylayer img{ /* make all images inside fadeshow4 scale to 100% of slideshow width */
	width: 100%;
	height: auto;
}



.ss_wrapper {
	float:left;
	margin-left:100px;
	width:640px;
}

@media screen and (max-width:1320px) {
	.ss_wrapper{
		margin-left:50px;
	}
	
	.contact_form{
		margin-top:10px;
	}
	
	
	
}

@media screen and (max-width:1280px) {
	.ss_wrapper{
		float:none;
		margin-left:auto;
		margin-right:auto;
		width:100%;
		height:auto;
		clear:both;
	}
	
	#fadeshow1 .gallerylayer img{ /* make all images inside fadeshow4 scale to 100% of slideshow width */
		width: 80%;
	}
	
	.contact_form{
		width:350px;
		height:auto;
		margin-left:auto;
		margin-right:auto;
		border:3px gray ridge;
		background-color:silver;
		color:black;
		float:none;
		margin-top:10px;
	}
	
	.phone_num{
		width:350px;
		height:auto;
		margin-left:auto;
		margin-right:auto;
		border:3px gray ridge;
		color:black;
		float:none;
		margin-top:10px;
	}
	
	
}


@media screen and (max-width:900px) {
	.ss_wrapper{
		float:none;
		margin-left:auto;
		margin-right:auto;
		width:100%;
		clear:both;
		margin-top:-20px;
	}
	#fadeshow1 .gallerylayer img{ /* make all images inside fadeshow4 scale to 100% of slideshow width */
		width: 100%;
	}
	
	
}


@media screen and (max-width:680px) {
	.ss_wrapper{
		float:none;
		margin-left:auto;
		margin-right:auto;
		width:100%;
		clear:both;
		margin-top:-60px;
	}
	
	.right{
		float:none;
		margin-left:auto;
		margin-right:auto;
		display:table;
	}	
	
}






 /* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin:0 auto;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    text-align:center;
    border-bottom:medium #d7b739 ridge;
    border-top:medium #d7b739 ridge;
    
}

/* Float the list items side by side */
ul.topnav li {
	float: none;
    display: inline-block;
    max-width:150px;
    vertical-align:top;
}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    color: #f7f7f7;
    text-align: center;
    padding: 14px 21px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 14px;
    height:20px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #555;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

@media screen and (max-width:1025px) {
	ul.topnav li a {
	    padding: 14px 13px;
	    font-size: 12px;
	}
}


 /* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {

	ul.topnav li {
		float: left;
	}	


  ul.topnav li:not(:first-child) {
  	display: none;
  }
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}



.stroke{
	-webkit-text-stroke: 1px white;
   text-shadow:
       1px 1px 0 #fff,
     -1px -1px 0 #fff,  
      1px -1px 0 #fff,
      -1px 1px 0 #fff,
       1px 1px 0 #fff;
}




.line_blue{
  content:""; 
  height:2px;
  background:-moz-linear-gradient(left, #FFFFFF 0%,blue 50%,#FFFFFF 100%); 
  background:-webkit-linear-gradient(left, #FFFFFF 0%,blue  50%,#FFFFFF 100%); 
  background:linear-gradient(left, #FFFFFF 0%,#160602 50%,blue  100%);
  width:100%;
  display:block;
  margin:10px 0px 10px 0px;
}
.line_gray{
  content:""; 
  height:2px;
  background:-moz-linear-gradient(left, #FFFFFF 0%,black 50%,#FFFFFF 100%); 
  background:-webkit-linear-gradient(left, #FFFFFF 0%,black  50%,#FFFFFF 100%); 
  background:linear-gradient(left, #FFFFFF 0%,#160602 50%,black  100%);
  width:100%;
  display:block;
  margin:10px 0px 10px 0px;
}


.right_image{
	float:right;
	margin:10px 0px 10px 10px;
}

.right_image img{
	margin-bottom:-5px;
}



@media screen and (max-width:945px) {
	.right_image img{
	    max-width:280px;
	}
}

@media screen and (max-width:645px) {
	.right_image img{
	    max-width:280px;
	}
	.content{
		margin:10px 5px 10px 5px;
		padding:0px;
	}
		#main-wrapper{
		padding:0px;
	}
	.first-line{
		display:inline-block;
		clear:both; 
	}
	
	
	.subh2{
		display:none;
	}

	
}




#footer{
	
	clear:both;
}



.shadow{
    box-shadow: 10px 10px 5px grey;
}

.services{
	float:left;
	width:99%;
	max-width:800px;
}

.service_main{
	width:100%;
	background-color:yellow;
}

.services_tab td{
	padding-bottom:0px;
	vertical-align:top;
}

.services_tab tr td:first-of-type{
	width:160px;
	height:175px;
}


.services_tab td img{
	padding-top:10px;
	width:140px;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
	
}

.services_tab td img:hover{
	width:160px;
}

.click{
	color:red;
	font-weight:bold;
	
}

a.moreinfo {
	color:#0099FF;
	color:maroon;
	font-size:11px;
	font-variant:small-caps;
	margin-left:10px;
}

a.moreinfo:hover {
	text-decoration:underline;
}


.services a{
	text-decoration:none;

}





@media screen and (max-width:645px) {
	.services_tab td img{
		width:70px;
	}
	
	.services_tab tr td:first-of-type{
		width:90px;
		height:95px;
	}
		
	.services_tab td img:hover{
		width:90px;
	}


	
	#contact{
		float:none;
		margin-left:auto;
		margin-right:auto;
	}
	
	
	
}







.largephoto{
	width:100%;
	float:right;
	clear:none;
	max-width:900px;
}

.largephoto img{
	width:100%;
}

.bigtext{
	font-size:17px;
	color:maroon;
	font-weight:bold;
}






.phone_button{
	border-radius:6px 6px 6px 6px;
	padding:0px 0px 0px 0px;
	text-align:center;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f5f6f6+0,dbdce2+21,b8bac6+49,dddfe3+80,f5f6f6+100;Grey+Pipe */
	background: #f5f6f6; /* Old browsers */
	background: -moz-linear-gradient(top, #f5f6f6 0%, #dbdce2 21%, #b8bac6 49%, #dddfe3 80%, #f5f6f6 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
}

.dial{
	text-decoration:none;
}

.phone_number{
	font-size:18px;
	font-weight:bold;
	margin-top:0px;
	padding-top:0px;
	line-height:21px;
	padding-bottom:2px;
}


.p_detail{
	float:left;
	max-width:65%;
}
@media screen and (max-width:645px) {
	.p_detail{
		max-width:95%;
	}
}


.p_image{
	float:right;
	max-width:30%;
	margin-right:30px;
}


@media screen and (max-width:645px) {
	.p_image{
		display:none;
	}
}
