/* 
VERSION 1.0

SNAPPAGES CSS TEMPLATE
The following template is designed to be a starting point to help
you design your own custom theme for your website. There are other
CSS elements that have styles applied to them that aren't listed
in this document however, you can still override these. Please note
that if you modify any other elements not listed here, it could
result in the website not functioning properly.

IMAGES
All the images associated with this CSS will be stored in the
same directory as the CSS itself so write your URLs accordingly.

PAGE STRUCTURE EXAMPLE
Below you'll find an example of how the elements are nested on
the page so you can plan accordingly.

[html]
	[body]
		[wrapper]
			[header]
				[headerBg]
					[headerElements/]
				[/headerBg]
				[naviation]
					[headerLinks/]
					[secondaryNav/]
				[/navigation]
			[/header]
			[container]
				[pageTitle/]
				[content/]
			[/container]
			[footer]
				[footerLinks/]
			[footer]
		[/wrapper]
	[/body]
[/html]

*/

/*____________________________________________________
  Tags
  ____________________________________________________
*/


html, body { font-family:Georgia, serif; font-size:15px; background: #000 url(bg5.jpg) top center repeat-x; color: #ddd; }

a:link, a:visited{ color:#B89F57; }

a:hover{ color: #EBD1A5;}

/*____________________________________________________
  Divs
  ____________________________________________________
*/

/* This div wraps around all the other divs */
#wrapper { position: relative; width: 880px; margin: 0 auto; padding: 0; height: auto; background: transparent;}

/* for the header area of the site */
#header { position: relative; margin: 0 auto; padding: 0; width: 871px; height: 325px;}

/* used if you need a seperate div for the background */
#headerBg { background: transparent url(logo.png) top left no-repeat; width: 380px; height: 182px; position: absolute; top: 46px; left: 5px;}

/* used if you need a seperate div for logos and things like that */
#headerElements { background: transparent url(logo.png) left center no-repeat; }

/* used for positioning the main navigation */
#navigation { position: absolute; bottom: 0; margin: 0; margin-left: auto; margin-right: auto; width: 936px; }

/* used to style the actual main navigation links */
#headerLinks { position: relative; padding: 0; text-align: left; bottom: 0;}
#headerLinks ul{ list-style: none; margin: 0; padding: 0; overflow: visible; }
#headerLinks ul li {display: inline}
#headerLinks ul li a { 
background: transparent url(nav-bg.png) no-repeat 0% 0%;
color: #ddd;
display: inline-block;
font-family: Georgia;
font-style: normal;
font-weight: normal;
height: 33px;
line-height: 33px;
list-style: ;
padding-left: 0px;
position: relative;
text-align: center;
text-decoration: none;
text-shadow: -1px -1px 1px #000;
font-size: 16px;
letter-spacing; -0.05em;
width: 117px;}
/* the first link in the list */
#headerLinks ul li.first a {width: 87px; background-image: url(nav-first.png)}
/* the last link in the list */
#headerLinks ul li.last a {width: 87px; background-image: url(nav-last.png)}
/* displays if the link is the current page being viewed */
#headerLinks ul li a.selected{ color: #fff; background-position: left bottom;}
#headerLinks a:link, #headerLinks a:visited {}
#headerLinks a:hover{ color: #fff; background-position: left bottom; }

/* the drop down navigation that appears when you rollover the main navigation */
#secondaryNav { background: #FFF; }
#secondaryNav ul{ list-style: none; margin: 0; padding: 0; overflow: visible; }
#secondaryNav ul li {}
#secondaryNav a:link, #secondaryNav a:visited { text-decoration: none; display: block; padding: 2px; padding-left: 15px; padding-right: 15px; }
#secondaryNav a:hover{ color:#FFFFFF; background: #99CC00; }

/* the div that wraps around content */
#container { padding: 0; padding-bottom:0; width: 900px; }

/* the div that contains the main content on the page */
/* must be at least 850px wide */
#content{ overflow:hidden; width: 900px; padding-left: 20px; padding-right: 20px; padding-top: 40px; padding-bottom: 40px; }

#column1 {width: 545px}
#column2 {width: 260px}

/* for positioning the flash billboards on the page */
#billboard { float:left; margin-left: -14px; padding-bottom: 30px; }

/* for positioning the footer information on the page */
#footer { clear: both; height: 49px; width: 100%; margin: 0 auto; padding-top: 30px; padding-bottom: 30px; font-size: 12px; text-align: center; background: transparent url(footer-bg.png) top center no-repeat; }

/* for styling the footer navigation links */
#footer a:link, #footer a:visited { color: #999; font-style: normal; font-weight: normal; margin-right: 14px; }
#footer a:hover{}
#footerLinks { padding-bottom: 5px; }
#footerLinks ul{ list-style: none; margin: 0; padding: 0; padding-bottom: 3px; overflow: visible; }
#footerLinks ul li { list-style: none; display: inline; margin-right: 0px; margin-left: 0px; padding: 0px; padding-left: 10px; border-right: #999 solid 1px; }
#footerLinks ul li.first{ border-left: none; }
#footerLinks ul li.last{ border-right: none; }
#footerLinks ul li a.selected{}
#footerLinks a:link, #footerLinks a:visited {}
#footerLinks a:hover{}

/*____________________________________________________
  Columns
  ____________________________________________________
*/

/* Columns are controlled by a seperate style sheet and and we highly recommend that you don't modify them.
   This is because there are different types of page layouts that are set by the user so the columns need to
   react accordingly. For instance in a two column layout #column1 needs to be a different width then if it
   were in a three column layout. If you simply try to adjust the styles, the page layouts won't funciton properly */

/*____________________________________________________
  Headings
  ____________________________________________________
*/
#pageTitle{ padding: 0; margin: 0; color: #EBD1A5; font-size: 32px; text-shadow: 1px 1px 1px #000; padding-left: 8px;}
.h2 { font-family: Georgia, serif; font-style: italic; font-weight: bold; color: #B89F57}
.h3 { font-family: Georgia, serif; color: #B89F57; font-weight: normal; text-shadow: 1px 1px 1px #111;  }
.h4 {font-family: Georgia, serif; color: #B89F57; font-weight: normal; text-shadow: 1px 1px 1px #111;  }
.h1 {font-family: Georgia, serif; font-style: italic; font-weight: bold; color: #B89F57}

/*____________________________________________________
  Blog Classes
  ____________________________________________________
*/
/* the blog post title */
.blogHeading {}
.blogHeading a:link, .blogHeading a:visited {}
.blogHeading a:hover{}

/* the date the blog post was published */
.blogDate { float: left; font-size: 13px; line-height: 120%; color: #999; }

/* items that appear on the side of the blog page ex: recent posts, tags, catagories... */
.blogSide { margin-left: 15px; margin-bottom: 20px; }

.blogSideHeading {}

.blogSideList { padding-bottom: 10px; margin-left: 10px; line-height: 120%; }
/* post comment */
.comment{}

/* comment that is a reply to another comment */
.commentReply{}

/* the name of the person that left the comment */
.commentHeader{}

/* Indicates that a comment was left by the websites admin */
.adminCommentHeader{}

/* the comment text */
.commentBody{}

/* displays how many comments a blog post has */
.blogCommentCount {}

/* the title "Comments" that shows up at the bottom of the post */
.commentTitle{}

/* the link to add a comment */
.commentLink{}

/* displayed when linking to "next posts" */
.rightArrow {}

/* displayed when linking to "previous posts" */
.leftArrow {}

/* displayed on the "add comment" button */
.plusSign {}

/* the icon for categories */
.folderIcon {}

/* the icon for tags */
.tagIcon {}

/* signifies a comment as a reply */
.replyLink{}

/*____________________________________________________
  Form Elements
  ____________________________________________________
*/

form { display: inline; margin: 0; }

/* displays if a field is required after form validation occurs*/
.req {}

/* displays a field before validation occurs*/
.formInput {}

/* the input field for the search box */	
.searchInput {}

/* the small search button that appears right next to the search box */		
.searchButton{}

/*____________________________________________________
  Misc Classes
  ____________________________________________________
*/
/* the page divider */
.divider { width: 100%; border-bottom: 1px solid #999; margin-bottom: 20px; }
    
iframe { background-color: #FBEBD4 }
textarea { width: 350px !important; height: 180px;}
.right {float: right}
.left {float: left}
/*.album-links-holder { width: 230px !important; }
.album-link { position: static !important; clear: both !important; display: block  !important; float: left !important; top: 0  !important; left: 0 !important; margin-bottom: 20px !important;}
.album-link a { text-decoration: none; display: block; width: 100px; height: 100px; text-align: center; clear: both;}
.album-link a:hover { padding-top: 5px;}*/
.album-link a { text-decoration: none;}
.album-link span { background-image: none !important}