/***based upon MATTHEW LEVINE The Holy Grail of Layouts http://www.alistapart.com/articles/holygrail/ ***/

	
/*** The Essential Code ***/
body {
	margin:0;
	padding-left:180px;
	padding-right:190px;
	font-family:sans-serif;
	color:black; font-size: 16px;
}

#container {width:1020px;margin:0 auto;
	 padding-left:200px; border-right:dotted 1px #333;
}

#container .column {
	position:relative;
	float:left;
}

#center {
	padding:1px 19px;
	width:100%;min-height:600px;
	z-index:1;
}

#left {
	width:156px;
	padding:0 20px;
	right:240px;
	margin-left:-100%;
	margin-top:-1px;
}

#footer {
	clear:both;
}
	
/*** IE Fix ***/
* html #left {
	left:150px;
}
	
/*** Just for Looks ***/
body {
	margin:0;
	padding:0;
	min-width:960px;
	background-color:#C1C1C1;
}

#container {
	overflow:hidden;
}

#container .column {
	padding-bottom:20010px;
	margin-bottom:-20000px;
}


a:link {
	text-decoration:none;
}

a:visited {
	text-decoration:none;
}

#header {
	letter-spacing:3px;
	height:100px; background-color: #000;
	background-image:url(images/moonSat.jpg);
	background-repeat:no-repeat;
	background-position:middle;
}

#header h1 {
	color:#fff;margin-top:0;padding:12px 0 0 15%;font-size: 1.5em; text-shadow: 1px 1px 0 #333;
}

#footer {position:relative;
	font-size:13px; line-height: 30px;
	text-align:center;
	font-family:'Lucida Sans','Lucida Grande',Verdana,sans-serif;
	font-weight:600;
	letter-spacing:.3em;
	color:#333;
	border-top:dotted thin #444;
	border-bottom:dotted thin #444;
	background-image:url(images/graypanel.jpg);
	height:30px;
	background-color:#a6a6a6;
}

#left {
	border-left:thick double #444;
	background-color:#E7E7E7;
	color:#000;
}

#container #left h2 {
	font-family:'Lucida Sans','Lucida Grande',sans-serif;
	font-weight:300;
	font-size:16px;
	text-transform:uppercase;
	color:#000;
	background:#F7F7F7;
	text-align:center;
	margin:15px -11px 10px -9px;
	padding:4px 0 5px;
	letter-spacing:.3em;
	border-left:solid 2px #C03;
	border-right:solid 2px #C03;
	border-bottom:dotted thin black;
	border-top:dotted thin gray;
}

#center {
	background-color:#E7E7E7;
	color:#000;
	float:right;border-right: #d6d6d6 solid 1px;
}

#links {position:absolute;
	top:0;
	padding-top: 40px;
	left:25px;
	width:160px;
	border:solid  #C03;
	border-width:0 1px ;
	height:100%;
	z-index:100;
	letter-spacing:2.7px;
	color:#f7f7f7;
	font-size:17px;
	font-family: 'Lucida Sans Unicode','Lucida Grande',sans-serif;
}
#links {
	background-color: #d4d4d4;
	background-image: -webkit-gradient(linear, left center, right center, from(#c1c1c1), to(#e7e7e7));
	background-image: -webkit-linear-gradient(left, #c1c1c1, #e7e7e7);
	background-image: -moz-linear-gradient(left, #c1c1c1, #e7e7e7);
	background-image: -o-linear-gradient(left, #c1c1c1, #e7e7e7);
	background-image: -ms-linear-gradient(left, #c1c1c1, #e7e7e7);
	background-image: linear-gradient(left, #c1c1c1, #e7e7e7);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#c1c1c1', EndColorStr='#e7e7e7');
}
 #links a:hover {
	background-color: #d4d4d4;
	background-image: -webkit-gradient(linear, left center, right center, from(#e7e7e7), to(#c1c1c1));
	background-image: -webkit-linear-gradient(left, #e7e7e7, #c1c1c1);
	background-image: -moz-linear-gradient(left, #e7e7e7, #c1c1c1);
	background-image: -o-linear-gradient(left, #e7e7e7, #c1c1c1);
	background-image: -ms-linear-gradient(left, #e7e7e7, #c1c1c1);
	background-image: linear-gradient(left, #e7e7e7, #c1c1c1);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#e7e7e7', EndColorStr='#c1c1c1');
}


div#links a {
	display:block;
	text-align:left;
	font:1em sans-serif;
	margin:0;
	text-decoration:none;
	color:#f7f7f7;
	background-color:#444;
	padding:5px 0 5px 12px;
	border-bottom:solid 1px #777;
}
a.first {border-top: solid 1px #c03;}
a.last {border-bottom: solid 1px #c03;}

div#links a:hover {
	color:#333;
	border-right:3px solid #C03;
	border-bottom:thin solid #C03;
	display:block;
}

div#links a:active {
	color:#C03;
}

#container .column {
	text-align:left;
	font-family:'Lucida Sans','Lucida Grande',sans-serif;
	font-size:15px;
	line-height:1.2em;	
	border-bottom:solid thin #C03;
	
}

#container #center h1 {background-color: #fff;
	font-family:'Lucida Sans','Lucida Grande',  sans-serif;
	font-size:1.5em;
	font-variant:small-caps;
	color:#333;
	font-style:normal;
-webkit-border-bottom-right-radius: 35px;
-moz-border-radius-bottomright: 35px;
border-bottom-right-radius: 35px;
	border-right:double 4px #666;border-bottom:double 4px #666;
	letter-spacing:.2em;
	background-image:url(images/upleft2.png);
	background-repeat:no-repeat;
	padding:10px 0 4px 30px;
	margin:-1px 650px 25px 6px;
	box-shadow:5px 5px 5px rgb(204, 198, 200); z-index: 1000;
}

#container #center h2 {
	text-shadow:2px 2px 2px #d3d3d3;
	font-family:'Lucida Sans','Lucida Grande', sans-serif;
	font-size:16px;
	font-variant:small-caps;
	color:#333;
	text-indent:60px;
	background-color:#F7F7F7;
	letter-spacing:.2em;
	background-repeat:no-repeat;
	padding-top:4px;
}

#container #center blockquote {
	font-family:'Lucida Sans','Lucida Grande', sans-serif;
	line-height:1.5em;
	padding:25px;
	background-color:#FAFAFA;
	color:#000;
	font-size:100%;
	margin:10px 11% 10px 45px;
	-webkit-border-radius:25px;
	-moz-border-radius:25px;
	border-radius:25px;
	border:1px dotted #444;
}

.web #container #center blockquote {margin: 0 0 25px 50px; width:700px; padding: 25px 40px; box-shadow:5px 5px 5px #ccc; 
}
#Layer1 {
	box-shadow:5px 5px 5px #a4a4a4;
}
#container #center .r {margin: 0 30px 20px; float:right; width:380px; text-align: center}
img {max-width: 100%}
#container #center .r  img {
	background: #FFFFFF;
	padding: 3px;
	border: thin solid #000000;}

.r img  {float:right; margin:0 30px 30px 30px}


#container #center a:link,#container #center a:visited {
	text-decoration:none;
	color:#000;
	background-color:#e5e5e5;
	font-weight:bold;
}

#container #center a:hover {
	background-color:#d1d1d1;
	color:#520732;
}

#container #center p {
	padding-left:12px;
	
	padding-right:40px;
line-height: 1.6em;
}
#container #center .index p, #container #center .res p{
font-family: Georgia;
}
.style1 {
	font-family:'Lucida Sans','Lucida Grande',\,sans-serif;
	font-size:14px;
}
p.point {background-image: url(images/point.png); 
background-repeat: no-repeat;
background-position: right;

}
#header img {
	vertical-align:top;
	top:0;
}
.web a#web {color:#000;background-color:#f7f7f7;}
/************************************************************
Photo page 
*************************************************************/
.thumbs {width:830px; margin:30px auto}
.thumbs img {padding: 0 5px 5px 0}
 ul.pho {border-left:1px dotted #555; width:830px; margin:0 auto 20px; padding: 0;}
 ul.pho li {list-style: none; line-height: 1.5em;}         
 ul.pho li a:link {padding:2px 6px 2px 50px;  text-shadow: 1px 0 1px #e7e7e7;}
 ul.pho li a:hover{text-shadow: 1px 1px 0 #fff;} 
/************************************************************
Contact page 
*************************************************************/
.form {width:640px;margin:0 0 40px 30px; background:#f7f7f7;border:solid 1px #c03; float:left;-moz-border-radius: 30px;-webkit-border-radius: 30px;border-radius: 30px;-webkit-box-shadow: 5px 5px 30px #c1c1c1; -moz-box-shadow: 5px 5px 30px#c1c1c1;box-shadow: 5px 5px 30px #c1c1c1;}
.form a:link {color: #ccc;}	
.formin {padding:30px 50px;}
.phone { background:#f5f5f5; border:solid 1px #c03; float:left;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; 
margin:0 0 0 25px;padding:40px 20px;text-align:center;
 -moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px;
-webkit-box-shadow: -5px -5px 20px#c1c1c1;
 -moz-box-shadow: -5px -5px 20px #c1c1c1;
-o-box-shadow: -5px -5px 20px #c1c1c1;
box-shadow: -5px -5px 20px #c1c1c1;  }
.phone p {padding: 10px 0;}
.hexagon {width: 100px; height: 55px; position: relative;margin:-140px 0 0 450px;}
.hexagon, .hexagon:before, .hexagon:after {background-color: #939494;
background-image: -webkit-gradient(linear, left top, left bottom, from(#dfe0e0), to(#484949));
background-image: -webkit-linear-gradient(top, #dfe0e0, #484949);
background-image: -moz-linear-gradient(top, #dfe0e0, #484949);
background-image: -o-linear-gradient(top, #dfe0e0, #484949);
background-image: -ms-linear-gradient(top, #dfe0e0, #484949);
background-image: linear-gradient(top, #dfe0e0, #484949);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#dfe0e0', EndColorStr='#484949');
}
.hexagon:before, .hexagon:after { content: ""; position: absolute; left: 22px; width: 57px; height: 57px; -moz-transform: rotate(145deg) skew(22.5deg); -webkit-transform: rotate(145deg) skew(22.5deg);-o-transform: rotate(145deg) skew(22.5deg); transform: rotate(145deg) skew(22.5deg);}
.hexagon:before { top: -29px;}
.hexagon:after { top: 27px;}
.hexagon span { position: absolute; top: 0; left: 0; width: 100px; height: 55px; background:red; z-index: 1;}

.tooltip, .arrow:after {
  background: #444;
  border: 1px solid white;
}
.tooltip {
  pointer-events: none;
  opacity: 0;
  display: inline-block;
  position: absolute;
  padding: 10px 30px 16px;
  color: white;
  border-radius: 20px;
  margin:100px -150px -100px 0;
  text-align: center;
  font: bold 70px "Helvetica Neue", Sans-Serif;
  letter-spacing: 3px;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 0 7px #444; z-index: 2000;
}
.arrow {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: -16px;
}
.arrow:after {
  content: "";
  position: absolute;
  left: 20px;
  top: -20px;
  width: 25px;
  height: 25px;
  -webkit-box-shadow: 6px 5px 9px -9px #444,
                      5px 6px 9px -9px #444;
  -moz-box-shadow: 6px 5px 9px -9px #444,
                   5px 6px 9px -9px #444;
  box-shadow: 6px 5px 9px -9px #444,
              5px 6px 9px -9px black;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
}
.tooltip.active {
  opacity: 1;
  margin-top: 5px;
  -webkit-transition: all 0.2s ease;
  -moz-transition:    all 0.2s ease;
  -ms-transition:     all 0.2s ease;
  -o-transition:      all 0.2s ease;
}
.tooltip.out {
  opacity: 0;
  margin-top: -20px;
}