﻿/*  
Website: http://hawksnestnc.com
Name: Hawk's Nest North Carolina - Green edition
Description: CSS based website, designed and hosted by Artemis Inc.
Version: 1.2
Author: Jefte Puente
Author URI: http://www.artemisit.com
Comments: This stylesheet is best viewed without word wrapping
*/


/* Body Styles */

body { background: url("images/page_bg.gif") repeat-x; background-color: #153B7D; background-attachment: fixed; font-size: 62.5%; font-family: Arial, Verdana, Sans-serif; } /**** This percentage sets 1.0 em to 10px. Lucida is a nicer mac font than Arial, it ships with all new macs and XP ****/
#page { margin: auto; padding: 0; width: 700px; background: white; border-right: 2px solid #888; border-bottom: 2px solid #888}
#header { width: 100%; height: 145px; background: url('images/header1.jpg'); }

/* Heading Styles */
h1 { display:none } 
h2 { margin: 0px; font-size: 2em; margin: 0px; letter-spacing: 0px; font-weight: normal; color: #666666; font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, serif; } 
h3 { margin: 0; font-size: 1.4em; margin: 0px; letter-spacing: -1px; font-weight: bolder; color: #4d6a9c;} 
h4 { margin: 0; font-size: 1.2em; margin: 0px; font-weight: bolder; } 
h5 { margin: 0; font-size: 1.0em; margin: 0px; font-weight: bolder; color: #777;}
hr { display:none } /* Horizontal Rules are hidden from standard browsers and screen readers, yet are visible in text-only browsers to help seperate content from nav.  */

/* Form Styles */
label,input { display: block; width: 200px; float: left; margin-bottom: 10px; } 
label { font-size: 1.2em; font-weight: bolder; text-align: right; width: 175px; padding-right: 20px; } /* WE CAN FINALLY STOP USING TABLES FOR FORMS! Check contact.html for proper xhtml markup syntax. */
#Telephone, #FAX, { width: 100px; }
#State { width: 20px; float: left; }
#Zip { width: 35px; }
#Comments { height: 55px; width: 250px; margin-bottom: 10px; }
form, br { clear: left; }
.submit { width: 50px; margin: auto; background-color: white; border: 1px solid brown; margin-right: 10px; }
#submit { margin-left: 100px;}
#form { margin-bottom: 20px; }

/* Table Styles - Tables are for tabular data */
table { clear: both; width: 100%; margin: 0; background-color: #f5f5f5; border-collapse: collapse;}
td { font-size: 1.1em; padding: 6px;}
.altrow { background-color: #e5e5e5; }

/* Content Styles */
p {color: #777; font: 1.2em Arial, Verdana, Sans-serif; line-height: 170%; margin: 0;}
.altbox { background-color: #E5DDCF; padding: 10px; margin-bottom: 15px;}
#column_container { float: left; }
#content { float: left; padding: 20px; margin: 0px; margin-bottom: 0px; width: 455px; color: #777; }
#content ul { font-size: 1.2em; font-family: Arial, Verdana, Sans-serif; margin-bottom: 20px; margin-top: 15px;}

.footer { margin: auto; width: 695px; padding: 4px 2px; color: #666; text-align: center; }
.footer p {text-align: left; float: left; width: 225px; font-size: 10px; color: #666;}
#footershim {background: #5d80bc; height: 20px; width: 698px; margin: auto auto; clear: left;border: 1px solid white;}
/* Footer Navigation */
#nav { color: white;  } 
ul#footerNavlist { width: auto; height: 20px; float: right; white-space: nowrap; padding-top: 0px; padding-left: 10px; margin-top: 0px; margin-bottom: 0px; }
#footerNavlist li { display: inline; list-style-type: none; }
#footerNavlist a:link, #footerNavlist a:visited { padding: 3px; color: #666; line-height: 16px; text-decoration: none; }
#footerNavlist a:hover { padding: 3px; color: #333; background-color: #c8c8c8; text-decoration: none; }

a:link { color: #b7161d; }
a:visited { color: #60785a; }
a:hover { color: #002463; }

.smallbold { font-size: 11px; font-weight: bolder; }

.hr { border-top: 1px solid #294622;; width: 270px; height: 1px; margin: 0 0 0 7px; padding: 0; } /* Inconsistant HR styling across browsers forces the use of a div with this class in lieu of the hr xhtml markup */

/* Misc Styles */
.contactinfo { width: 300px; background: #dbd5c2; padding: 10px; height: 155px; font-size: 1.1em;}

/* Navigation - Uses an unordered list and styles them as buttons */

#navcontainer { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; float: left; border-left: 1px solid white; width: 198px; background-color: #e7e7e7; margin: 20px 0 0 0; padding: 6px 4px 4px 0;}
#navcontainer ul { padding: 0; }
#navcontainer ul li { display: inline; }
#navcontainer ul { margin: 0; padding: 0 0 0 0; color: #ccc; font-family: verdana, geneva, arial, helvetica, sans-serif; font-size: 1.0em; letter-spacing: 0px; font-weight: bold; }
#navcontainer ul li a
{
border-bottom: 1px dashed #e7e7e7;
padding: 5px 10px;
width: 178px;
background-color: #fff;
color: #494949;
text-decoration: none;
float: left;
font: normal 1.2em/24px Verdana, lucida, arial, helvetica, sans-serif;
}

#navcontainer ul li a:hover
{
background-color: #f2f2f2;
color: #000;
}

#mainNavlist li a:hover, #navlist li a:active
{
color: #60785a;
text-decoration: none;
background: #CC3333;
text-align: left;
font: normal 1.2em/24px Verdana, lucida, arial, helvetica, sans-serif;
}

#mainNavlist li a:hover { }


/* Images & Alignments

	Using 'class="alignright"' on an image will align the image to the right. 
	And using 'class="centered', will of course center the image. This is much
	better than using align="center", being much more futureproof (and valid)              */
	
img.centered { display: block; margin-left: auto; margin-right: auto; border: none;}
img.alignright { padding-left: 8px; margin: 0 0 0px 0px; display: inline; border: none; }
img.alignleft { padding-right: 5px; margin: 0 0px 0px 0; display: inline; border: none; }
.alignright { float: right; }
.alignleft { float: left; }


/* Hacks - May become outdated when/if IE ships with proper CSS support */

div.spacer {
	clear: both;
} /* The infamous "clear div" or "spacer div" hack. An empty div placed below floated divs that clears the floats, so that content can continue to flow below the clear. http://www.complexspiral.com/publications/containing-floats/ */


