html, body {

	height: 100%;
	margin: 0px;
	padding: 0px;
	font-family: Calibri, Fallback, sans-serif;
	font-size: 1em;
	color: #191646;
}

#wrapper {

	font-family: calibri, sans-serif;	
	width: 90%;
	max-width: 960px;
	min-width: 300px;
	margin-left: auto;
	margin-right: auto;
}

h1 {
	font-size: 1.5em;
	line-height: 1.2em;
	font-weight: 100;
	margin-bottom: 1em;
}



/* Header - All Pages
--------------------------------------------- */



#masthead {

	width: 100%;
	margin: 0;
}


#topcontact {

	font-size: .90em;
	text-align: right;
	width: 35%;
	margin-top: 1em;
	float: right;
}

#topcontact p {

	margin-bottom: 5px;
}


#logo	{
	width: 55%;
	margin-top: 3em;
	float: left;
}

#nogst { float: right; }



/* Header Media Queries
-------------------------- */


@media all and (min-width: 601px) and (max-width: 900px) { 

	#nogst { width: 40%; }
}


@media all and (min-width: 601px) and (max-width: 768px) {

	#logo {
		width: 60%;
		float: left; }

	#topcontact { 

		text-align: right;
		width: 40%;
		float: right; }
}


@media screen and (max-width: 600px) {

	#logo {
		min-width: 95%;
		margin-top: 2em;
		float: left; }

	#topcontact { 

		font-size: .90em;
		text-align: left;
		width: auto;
		margin-bottom: 1em;
		float: left; }
}



/* Navigation
--------------------------------------------- */


nav	{ 
	
	width: 100%;
	float: left;
}

nav li { 	

	font-size: 1.2em;
	text-align: center; 
	width: 33.333%; 	
	height: 30px;
	line-height: 30px;
	border-top: thin solid #D8D8E0;
	float: left; 
}

nav li a {

	color: #787D97;
	text-decoration: none;
	display: block;
}

nav li a:hover {

	color: #191646;
	text-decoration: none;
}

nav .current a {

	color: #7E6C53;
}



/* Nav Media Query
---------------------- */
	

@media screen and (max-width: 480px) {

	nav[role="navigation"] li {

		font-size: 1.1em;
		text-align: left;
		line-height: 30px;
		width: 100% !important;
		height: 30px;
		border-top: 1px solid #D8D8E0;
		border-bottom: 1px solid #D8D8E0;
		float: left; }

	nav[role="navigation"] li a {

		color: 	#494976;
		text-decoration: none;
		display: block; }

	nav[role="navigation"] li:nth-child(2) { border-top: 0; }

	nav[role="navigation"] li:last-child { border-top: 0; }

	nav[role="navigation"] li a:hover {

		color: 	#494976;
		background-color: #D8D8E0;
		font-weight: normal;
		text-decoration: none;
		display: block; 

	-webkit-transition: background-color 500ms ease-in-out, color 500ms ease-in-out 100ms;
	-moz-transition: background-color 500ms ease-in-out, color 500ms ease-in-out 100ms;
	-ms-transition: background-color 500ms ease-in-out, color 500ms ease-in-out 100ms;
	-o-transition: background-color 500ms ease-in-out, color 500ms ease-in-out 100ms;
	transition: background-color 500ms ease-in-out, color 500ms ease-in-out 100ms; }

	nav .current a {

		font-weight: normal;
		background-color: #E7E7F2; }
}



/* Home Page
--------------------------------------------- */


#mainimage1 {

	width: 100%;
	float: left;
}

#contenthome {

	color: #2A2F63; 
	font-size: 1.25em;
	font-weight: 100;
	line-height: 1.2em;
	width: 100%;
	margin-top: 50%;
	float: left;
}

#contenthome h2 {

	font-size: 1.5em;
	margin-top: 1.1em;
}

#contenthome img {

	width: 35%;
	margin: 0 0 0 3%;
}

#thumbnailgallery { 

	color: #2A2F63;
	width: 100%;
	margin: 1em 0 2em 0;
	float: left;
}

#thumbnailgallery h1 {

	margin-top: .25em;
}

#thumbnailgallery li {

	float: left;
	width: 23%;
}

#thumbnailgallery li:first-child, #thumbnailgallery li:nth-child(2), #thumbnailgallery li:nth-child(3) {

	margin-right: 2.65%;
}

#thumbnaigallery li figcaption { color: #7E6C53; }


#slides {

	width: 100%;
	height: auto;
	margin: 0;
	position: relative;
}

#slides:first-child img { display: block; }

#slides img {

	width: 100%;
	position: absolute;
	transition: opacity 1s;
	opacity: 0;

	  -webkit-transition: opacity 1s linear;
	  transform: translate3d(0,0,0);
	  -webkit-transform: translate3d(0,0,0);
}

#slides img:first-child {

	z-index: 2; /* frontmost */
	opacity: 1;
}

#slides img:last-child {

	z-index: 1; /* behind current slide */
	opacity: 1;
}




/* Home Page Media Queries
--------------------------- */


@media all and (min-width: 601px) and (max-width: 768px) {

	#contenthome {

		font-size: 1.1em;
		width: 100%;
		padding-right: 2%;
		float: left; }

	#contenthome h2 {

		font-size: 1.5em;
		margin-top: 1.25em; }

	#contenthome img { width: 40%; }

	#thumbnailgallery h1 { font-size: 1.5em; }
}


@media all and (min-width: 481px) and (max-width: 600px) {

	#contenthome { font-size: 1em; }
	#contenthome h2 { font-size: 1.3em; margin-top: 1.3em; }
	#contenthome img { width: 40%; }
	#thumbnailgallery h1 { font-size: 1.3em; }
}


@media screen and (max-width: 480px) {

	#contenthome { font-size: 1em; margin-top: 55%; }
	#contenthome h2 { font-size: 1.1em; margin-top: 1.4em; }
	#contenthome img { width: 40%; }
	#thumbnailgallery { margin-bottom: 2em; }
	#thumbnailgallery h1 { font-size: 1.1em; }
	#thumbnailgallery li figcaption { font-size: .80em; }
}



/* Gallery Page
--------------------------------------------- */
	

#mainimage2 {

	width: 100%;
	margin: 0;
	float: left;
}

#gallery {

	color: #2A2F63;
	font-weight: 100;
	margin-top: 1em;
	float: left;
}

#gallery dl:nth-child(odd) { background-color: #EFEFF6; }


#windowdoor {

	font-size: 1.1em;
	width: 100%;
	margin-top: 2em;
	float: left;
}

#windowdoor dt {

	font-size: 1.5em;
	font-weight: normal;
	width: 57%;
	margin: 2.5% 0 2% 3%;
	float: left;
}

#windowdoor dd {

	margin-left: 3%;
	margin-bottom: 3%;
}

#windowdoor dd img {

	width: 35%;
	margin: 0 0 0 5%;
	float: right;
}

#patiodoors {

	font-size: 1.1em;
	width: 100%;
	margin-top: 2em;
	padding: 2.5% 0 2.5% 0;
	border-top: 1px solid #D8D8E0;
	border-bottom: 1px solid #D8D8E0;
	float: left;
}

#patiodoors dt {

	font-size: 1.5em;
	font-weight: normal;
	width: 57%;
	margin: 1% 0 2% 3%;
	float: left;
}

#patiodoors dd { margin-left: 3%; }

#patiodoors dd:nth-child(4) { margin-top: 1.5em; }

#patiodoors dd img {

	width: 35%;
	margin: 0 0 0 5%;
	float: right;
}


#sunroom {

	font-size: 1.1em;
	width: 100%;
	margin-top: 2em;
	float: left;
}

#sunroom dt {

	font-size: 1.5em;
	font-weight: normal;
	width: 57%;
	margin: 2.5% 0 2% 3%;
	float: left;
}

#sunroom dd {

	margin-left: 3%;
	margin-bottom: 3%;
}

#sunroom dd img {

	width: 35%;
	margin: 0 0 0 5%;
	float: right;
}


#header:after,

#gallery dl:after { /* for browsers that support :after */

	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

* html #header,
* html #gallery dl { height: 1%; } /* for IE6 */

*:first-child+html #header,
*:first-child+html #gallery dl { min-height: 1px; } /* for IE7 */


table {
	color: #2A2F63;
  	background: #FFF;
  	width: 60%;
 	margin: 0;
  	text-align: center;
}

table th {

	background: #D9E1E8;
	padding: .35em 0;
}

table th:first-child {

	text-align: left;
	padding-left: 2em;
}

table td {

	font-size: .90em;
	width: 2000px;
	padding: .35em 0;
	border-top: 1px solid #b5b5b5;
}

table td:first-child {

	text-align: left;
	padding-left: 2em;
}



/* Gallery Page Media Queries
------------------------------ */


@media screen and (max-width: 958px) {

	#gallery { margin: 0 0 2em 0; }
	#gallery dd:nth-child(4) { display: none; }
}


@media screen and (max-width: 480px) {

	#gallery { margin: 0 0 2em 0; color: #2A2F63; }
	#gallery dt { font-size: 1.1em; }
	#gallery dd { font-size: .90em; }
	#patiodoors { padding: 2.5% 0 4.5% 0; }
	#patiodoors dt { margin-top: 2%; }
}



/* Contact Page
----------------------------------------------- */

	
#contentleft-contact {

	color: #2A2F63;
	font-size: 1.1em;
	font-weight: 100;
	line-height: 1.2em;
	width: 60%;
	margin: 1.5em 0 0 0;
	padding-right: 1em;
	float: left;
}

#contentleft-contact h1 {

	font-size: 175%;
	margin-bottom: .75em;
}


#contactinfo { 

	font-size: 1.1em;
	line-height: 1.1em;
}

#contactinfo a {

	color: #191646;
	text-decoration: none;
}

#contactinfo a:hover { color: #628728; }

#map-canvas {

	width: 100%;
	height: 250px;
	margin-top: 2em;
	border: thin solid #A6A7AA;
}

#contentright-contact {

	width: 35%;
	float: right; 
}



/* Form for Catalogue
---------------------- */
	

#form-1 {

	background: #E7E7F2;
	margin: 4em 0 3em 0;
	padding: 3% 3% 0 3%;
	width: 90%;
	max-width: 300px;
	border: thin solid #A6A7AA;
	-webkit-border-radius: 2%;
	-moz-border-radius: 2%;
	border-radius: 2%;
	background-image: url(catalogue.png);
	background-repeat: no-repeat;
	background-position: 89% 18%;
	background-size: 30%;
	float: right;
}

fieldset { margin: 3%; }

legend {

	font-size:  1.3em;
	line-height: 1.2em;
	margin: 0;
	padding: 3%;
}

#form-1 input[type="radio"] { vertical-align: middle; }

#form-1 label {

	font-size: .90em;
	line-height: 1.2em;
	margin-left: 3%;
}

#form-1 input {

	border: 1px solid lightgray;
	height: 1.5em;
	width: 94%;
	margin-left: 3%;
}

#form-1 textarea {

	border: 1px solid lightgray;
	width: 94%;
	margin-left: 3%;
}

#form-1 input[type="submit"] {

	background-color: #787D97;
	color: #D8D8E0;
	height: 1.5em;
	width: 15%;
	border: none;
	margin-top: 5%;
	margin-right: 2%;
	float: right;
}

input[type=radio] {

	color: rgb(153,204,102);
	cursor: pointer;
	width: 30%;
	height: 1em;
}

.button {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #D8D8E0));
	background:-moz-linear-gradient(top, #f9f9f9 5%, #f9f9f9 100%);
	background:-webkit-linear-gradient(top, #f9f9f9 5%, #D8D8E0 100%);
	background:-o-linear-gradient(top, #f9f9f9 5%, #D8D8E0 100%);
	background:-ms-linear-gradient(top, #f9f9f9 5%, #D8D8E0 100%);
	background:linear-gradient(to bottom, #f9f9f9 5%, #D8D8E0 100%);

	background-color:#f9f9f9;
	  -moz-border-radius:6px;
	  -webkit-border-radius:6px;
	  border-radius: 6px;
	border: 1px solid #dcdcdc;
	margin: .5em 0;
	display: inline-block;
	cursor: pointer;
	color: #494976;
	font-family: arial;
	font-size: 15px;
	padding: 6px 6px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #ffffff;
	float: right;
}

.button:hover {

	color: dodgerblue;
	
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #D8D8E0), color-stop(1, #f9f9f9));
	background:-moz-linear-gradient(top, #D8D8E0 5%, #f9f9f9 100%);
	background:-webkit-linear-gradient(top, #D8D8E0 5%, #f9f9f9 100%);
	background:-o-linear-gradient(top, #D8D8E0 5%, #f9f9f9 100%);
	background:-ms-linear-gradient(top, #D8D8E0 5%, #f9f9f9 100%);
	background:linear-gradient(to bottom, #D8D8E0 5%, #f9f9f9 100%);
}



/* Form for Driving Directions
-------------------------------- */


#form-2 {

	width: 90%;
	float: left;
}

#form-2 legend {

	color: #5B632B;
	font-size:  1.2em;
	line-height: 1.2em;
	text-align: left;
	width: 100%;
	margin: 0;
	padding: 0;
}

#form-2 input {

	height: 2em;
	width: 100%;
	border: 1px solid #AAB566;
	float: left;
}

#form-2 input[type="submit"] {

	color: #444A20;
	background-color: #787D97;
	border: 1px solid #B6BA72;
	height: 6%;
	width: 100px;
	margin-top: 3%;
	float: left;
}

#form-2 input:hover[type="submit"] { color: olivedrab; }

.getdir {

	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #DBDCB8), color-stop(1, #B6BA72));
	background:-moz-linear-gradient(top, #DBDCB8 5%, #B6BA72 100%);
	background:-webkit-linear-gradient(top, #DBDCB8 5%, #B6BA72 100%);
	background:-o-linear-gradient(top, #DBDCB8 5%, #B6BA72 100%);
	background:-ms-linear-gradient(top, #DBDCB8 5%, #B6BA72 100%);
	background:linear-gradient(to bottom, #DBDCB8 5%, #B6BA72 100%);

	background-color:#f9f9f9;

	  -moz-border-radius:6px;
	  -webkit-border-radius:6px;
	  border-radius: 6px;

	display: inline-block;
	cursor: pointer;
	font-size: 15px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #ffffff;
	float: right;
}

.getdir:hover {

	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #B6BA72), color-stop(1, #DBDCB8));
	background:-moz-linear-gradient(top, #B6BA72 5%, #DBDCB8 100%);
	background:-webkit-linear-gradient(top, #B6BA72 5%, #DBDCB8 100%);
	background:-o-linear-gradient(top, #B6BA72 5%, #DBDCB8 100%);
	background:-ms-linear-gradient(top, #B6BA72 5%, #DBDCB8 100%);
	background:linear-gradient(to bottom, #B6BA72 5%, #DBDCB8 100%);
}



/* Contact Page Media Queries
------------------------------- */
	

@media screen and (max-width: 700px) {

	#contentleft-contact {

		font-size: 1em;
		width: 100%;
		float: left; }

	#contentleft-contact h1 { font-size: 150%; }

	#contentright-contact { width: 100%; padding: 1em 0 2em 0; }

	#form-1 {

		background-size: 35%;
		background-position: 92% 18%;
		margin: 0 auto;
		float: none; }

	#form-2 .getdir { font-size: .90em; }
}





/* Footer
--------------------------------------------------- */
	

#footer {

	font-size: .90em;
	line-height: 1.3em;
	width: 100%;
	margin-top: 2em;
	padding-bottom: 2em;
	position: relative;
	float: left;
}

#footerbar {

	border-top: 1px solid #A2A2A8;
	margin: 0;
}

#bottomimage {

	width: 150px;
	height: 150px;
	margin: 1em 1em 0 0;
	float: left;
}

.bottomimgdesc {

	display: none;
	color: yellow;
	font-size: 1.3em;
	font-weight: bold;
	font-style: italic;
	text-align: center;
	text-shadow: 1px 1px #58595B;
	margin-top: -140px;
}

a:hover + .bottomimgdesc { display: block; }

#footercontact {

	color: #2A2F63;
	margin: 1.5em 0 0 0;
	float: left;
}

#footercontact a:hover {

	color: #2A2F63;
	font-weight: bold;
}

#elk	{

	margin: 2.5em 6em 0 0;
	float: right;
}

#bottomnav {

	font-size: 1em;
	text-align: right;
	border-top: 1px dotted #A2A2A8;
	padding-top: 10px;
	position: absolute;
	bottom: 5em;
	right: 0;
}

#bottomnav a {

	color: #2A2F63;
	text-decoration: none;
	margin-right: 1em;
}

#bottomnav a:nth-child(3) { margin: 0; }

#bottomnav a:hover { color: #7E6C53; }

#bottomnav a.active-link { font-weight: bold; }

#copyright {

	font-size: .75em;
	margin: -3em 1.5% 0 0;
	float: right;
}



/* Footer Media Queries
------------------------------------------------------- */


@media all and (min-width: 481px) and (max-width: 700px) {

	#bottomimage { margin: 1em 1em 0 0; }

	#footer { margin: 0 0 3em 0; }

	#footercontact {

		margin: 1.5em 0;
		float: left; }

	#elk	{

		width: 100%;
		margin: 0;
		padding: 1em 0 3em 0;
		text-align: center; }

	#bottomnav {

		text-align: center;
		width: 100%;
		bottom: 4em;
		display: inline-block; }

	#copyright {

		font-size: .75em;
		text-align: center;
		float: none; }
}


@media screen and (max-width: 480px) {


	#footer { margin: 0 0 3em 0; }

	#bottomimage {

		max-width: 100px;
		height: auto; }

	.bottomimgdesc {

		font-size: 1em;
		margin-top: -100px;
		margin-bottom: 0;
		height: 100px; }

	#footercontact {

		font-size: .90em;
		line-height: 1.1em;
		margin: 1.5em 0;
		float: left; }

	#elk	{

		width: 100%;
		margin: 0;
		padding: 1em 0 3em 0;
		text-align: center; }

	#bottomnav {

		text-align: center;
		width: 100%;
		margin-top: 0;
		bottom: 4em; }

	#copyright {

		font-size: .75em;
		text-align: center;
		bottom: 3em;
		float: none; }
}

