/* (C) Copyright 2006-2009 Long2 Consulting. All Rights Reserved */
/* Start Layout CSS. This top section of CSS is what is used to layout each of the pages. To change general styles, look for the Start General Styles section below. We strongly urge you not to change the Layout styles unless you have an advanced knowledge of CSS. We cannot help you if you mess it up. */

html {
	height: 100%; 
	margin-bottom: 1px;
}

body {
	margin: 0px;
	padding: 0px;
	font: 76.4% Verdana, Arial, Helvetica, sans-serif;
	color: #888888;
	background: #000000 url('../images/bg.jpg') repeat;
}

#wrapper {
	margin: 16px auto 0px auto; /* fix to center in firefox */
	width: 980px;
	background: #000000 url('../images/wrapper.jpg') repeat-y;
}

#headertop {
	margin: 0px auto; /* fix to center in firefox */
	background: #202020 url('../images/headertop.jpg') no-repeat;	
	height: 23px;
	width: 980px;
}


#header {
	text-align: center;
	margin: 0px auto; /* fix to center in firefox */
	background: #202020 url('../images/header.jpg') repeat-y;	
	height: 98px;
	width: 980px;
}

#headerleft {
	float: left;
	width: 350px;
	height: 98px;
}

.headerleftcontent {
}

/* This is the company name area */

.companyname {
	padding: 2px 0px 0px 25px;
	font-weight: bold;
	color: #b5904e;
	text-align: left;
	font-size: 30pt;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	font-variant: small-caps;
}

.tagline {
	padding: 6px 0px 0px 125px;
	color: #6f562b;
	text-align: left;
	font-size: 16pt;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	font-style: oblique;
	font-weight: bold;
}

.logo {
	float: left;
	margin-left: 8px;
	margin-right: 8px;
}


/* This is the picture area on pages other than the home page */

#middle2 {
	text-align: center;
	margin: 0px auto; /* fix to center in firefox */
	background: url('../images/middle.jpg') no-repeat;
	height: 223px;
	width: 980px;
}

#middleleft {
	float: left;
	width: 680px;
}

.middleleft {
	padding-top: 8px;
	padding-left: 55px;
}

#middleright {
	float: right;
	width: 300px;
}

.middleright {
	padding-top: 10px;
	padding-right: 40px;
	text-align: left;
	color: #b5904e;
}

.middleright h3 {
	color: #b5904e;
	border-bottom: thin #b5904e dashed;
}

.middleright h4 {
	color: #b5904e;
}

#middleline {
	text-align: center;
	margin: 0px auto; /* fix to center in firefox */
	background: url('../images/middleline.jpg') no-repeat;
	height: 1px;
	width: 980px;
}

/* Picture Rotator */
#mainpic {
    overflow: hidden;
    height:  210px;  
    width:   578px;  
}

.pics {  
    height:  200px;  
    width:   570px;  
    padding: 0;  
    margin:  0;  
} 
 
.pics img {  
    height:  200px;  
    width:   570px;  
    top:  0; 
    left: 0; 
    border: 2px #b5904e solid;
   
} 

/* This is the Gallery area on home page */

#middle {
	text-align: center;
	margin: 0px auto; /* fix to center in firefox */
	background: url('../images/middle.jpg') no-repeat;
	height: 625px;
	width: 980px;
}


.middlecontent {
	padding: 8px 8px 20px 20px;
}


/* Gallery Styles */
.caption {
	color:#a88549;
	font:125% 'helvetica neue',sans-serif;
	letter-spacing:3px;
	text-transform:uppercase;
	font-weight: bold;
}

.galleria {
	list-style:none;
	width:200px
}
.galleria li {
	display:block;
	width:80px;
	height:80px;
	overflow:hidden;
	float:left;
	margin:0 10px 10px 0;
}
.galleria li a {
	display:none
}
.galleria li div {
	position:absolute;
	display:none;
	top:0;
	left:180px;
}
.galleria li div img {
	cursor:pointer;
}
.galleria li.active div img,.galleria li.active div {
	display:block;
}
.galleria li img.thumb {
	cursor:pointer;
	top:auto;
	left:auto;
	display:block;
	width:auto;
	height:auto
}
.galleria li .caption {
	display:block;
	padding-top:.5em;
}
* html .galleria li div span{
	width:400px;
} /* MSIE bug */

.main {
	position:relative;

}

.gallery_main {
	width:200px;
	margin:0 0 0 5px;
	float: left;
	overflow: hidden;
}

.gallery_main ul {
		list-style-image: none;
}

.gallery_main li {
	width:68px;
	height:50px;
	border:3px double #111;
	margin: 2px;
	background:#000;
}

.gallery_main li div {
	left:240px;
}

.gallery_main li div .caption {
	font:italic 0.7em/1.4 georgia,serif;
}

#main_image {
	float: right;
	margin-right: 40px;
	height:500px;
	width:700px;
	background:black;
}

#main_image img {
	margin-bottom:10px;
	text-align: center;
	border: 2px solid #bf9753;
}
	
.nav {
	text-align: center;
	padding-bottom:15px;
	padding-left: 130px;
	clear:both;
	font:100% 'helvetica neue',sans-serif;
	letter-spacing:3px;
	text-transform:uppercase;
	color: #a88549;
	font-weight: bold;
}
	
.info { 
	text-align:left;
	width:700px;
	margin:30px auto;
	border-top:1px dotted #221;
	padding-top:10px;
}

.info p {
	margin-top:1.6em;
}


/* This is the horizontal top navigation bar */
#topnav {
	float: right;
	width: 615px;
	height: 98px;
}

.topnavlinks {
	padding: 74px 14px 9px 14px;
	text-align: right;
	font-size: 96%;
	font-weight: bold;
}

.topnavlinks a:link, .topnavlinks a:visited {
	padding: 10px 10px 10px 10px;
	color: #000000;
 	background: url('../images/navbuttons.jpg') repeat-x 0px 0px;
 	height: 31px;
	text-decoration: none;
}
	
.topnavlinks a:active, .topnavlinks a:hover {
	color: #000000;
 	background: url('../images/navbuttons.jpg') repeat-x 0px -31px;
 	height: 31px;

}

#middlebottom {
	clear: both;
	margin: 0px auto; /* fix to center in firefox */
	background: #202020 url('../images/footertop.jpg') no-repeat;	
	height: 13px;
	width: 980px;
}


/* This is the footer area */
#footertop {
	clear: both;
	margin: 0px auto; /* fix to center in firefox */
	background: #202020 url('../images/footertop.jpg') no-repeat;	
	height: 13px;
	width: 980px;
}

#footer {
	clear: both;
	margin: 0px auto; /* fix to center in firefox */
	background: #202020 url('../images/footer.jpg') repeat-y;	
	height: 45px;
	width: 980px;
}

#footerbottom {
	margin: 0px auto; /* fix to center in firefox */
	background: #202020 url('../images/footerbottom.jpg') no-repeat;	
	height: 26px;
	width: 980px;

}

.footercontent {
	padding: 10px 10px 0px 10px; /* If you want the footer to be below the white area, change the first padding number from 8px to 100px */
	color: #a88549;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
}

.footercontent a:link, .footercontent a:visited  {
	padding: 4px 4px;
	color: #a88549;
	text-decoration: underline;
}

.footercontent a:active, .footercontent a:hover {
	padding: 4px 4px;
	color: #dddddd;
}


/* Used in single column layouts */
#bodycolumn {
	margin: 0px auto; /* fix to center in firefox */
	width: 980px;
	min-height: 400px;
	clear: both;
}

.bodycolumncontent {
	padding: 0 20px;
	min-height: 400px;
}

/* Used in two column layout with left navigation */
#body1 {
	width: 745px;
	float: right;
}

#body2 {
	float: left;
	width: 200px;
}

.body1content {
	padding: 4px 25px 5px 0px;
}

.body2content  {
	padding: 4px 0px 5px 12px;
}


/* Used in three column layouts */
#body1b {
	width: 745px;
	float: left;
}

#body1c { 
	width: 525px;
	float: right;
}

#body2b {
	width: 200px;
	float: left;
}

#body3 {
	width: 180px;
	float: right;
	margin-right: 25px;
}

.body1bcontent {
	padding: 4px 6px 5px 0px;
}

.body2bcontent {
	padding: 4px 0px 5px 12px;
}

.body3content {
	padding: 4px 0px 0 0;
}


/* End of Layout CSS */


/*  The items below the properties for the links that appear in the
main text area as well as in the sidebar of the pages  */

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


a:active, a:hover {
	color: #888888;
}

ul {
	list-style-image: url('../images/bullet.gif');
	padding: 0;
	margin: 0 0 20px 30px;
	line-height: 145%;
}

ol{
	padding: 0;
	margin: 0 0 20px 30px;
	line-height: 135%;
}

p {
	padding: 3px 0;
	margin: 0;
	line-height: 135%;
}

img {
	border: none;
}

/*  The items below set the properties for the fonts, sizes, and
colors used for headings 1 through 6. Typically h1 - h3 are used
in the main content area and h4 - h6 are used in the sidebar  */


h1 { 
	color: #6f562b;
	font-size: 185%;
	text-align: left;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	font-variant: small-caps;
	margin: 8px 0;
}

h2 {	
	font-size: 165%;
	color: #a88549;
	text-align: left;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	font-variant: small-caps;
	margin: 4px 0;
}

h3 {	
	font-size: 165%;
	color: #777777;
	text-align: left;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	font-variant: small-caps;
	margin: 4px 0;
}

h4 { 
	font-size: 145%;
	color: #6f562b;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	margin: 4px 0;
}

h5 { 
	font-size: 145%;
	color: #a88549;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	margin: 4px 0;
}

h6 { 
	font-size: 145%; 
	color: #777777; 
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	margin: 4px 0;
}

.center {
	text-align: center;}

/*  This class can be applied to your buttons to create uniform submit or shopping cart buttons without using graphics.  */

.submitbuttons {
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	font-size: 100%;
	font-variant: small-caps;
	font-family: Verdana, Arial, sans-serif;
	border-top: 3px solid #202020;
	border-bottom: 4px solid #202020;
	border-left: 1px solid #202020;
	border-right: 1px solid #202020;
	background-color: #777777;
	width: 155px;
	height: 30px;
}

td {
	vertical-align: top;
}

table {
	border-collapse: collapse;
	font-size: 100%;
}

/*  The items below sets the properties for the left or right sidelinks.  */

.leftmenu {
	padding-top: 3px;
	padding-left: 3px;
	color: #bf9753;
}

.leftmenu { /*CSS class for menu headers in general (expanding or not!)*/
	font: bold 16px 'Trebuchet MS', Arial;
	color: #bf9753;
	margin-bottom: 10px; /*bottom spacing between header and rest of content*/
	cursor: hand;
	cursor: pointer;
}

.menuheader1 {
	width: 175px;
	background: url('../images/navbuttonbg.jpg') repeat-x;	
	text-align: left;
	font-variant: small-caps;
    padding: 6px 4px 6px 8px;
	color: #ffffff;
}

.menuheader1 a:link, .menuheader1 a:visited {
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
}

.menuheader1 a:hover, .menuheader1 a:active {
	color: #ffffff;
	text-decoration: underline;
}

.sidelinks {
	margin: 4px 0px 2px 0px;
	padding: 0px;
	text-align: left;
	font-family: 'Trebuchet MS', Arial, Sans-serif;
	font-size: 90%;
	font-weight:  bold;

}

.sidelinks a:link, .sidelinks a:visited {
	padding: 0px 10px 0px 10px;
	display: block; 
	line-height: 18pt;
	width: 168px;
	color: #bf9753;
	text-decoration: none;
}
	
.sidelinks a:hover, .sidelinks a:active {
	color: #bf9753;
	text-decoration: underline;
}


.clear {
	clear: both;
}

/*  The items below sets the properties for additional typography and page elements.  */

.block1 {
	color: #ffffff;
	text-align: left;
	font-family: Verdana, Arial, sans-serif;
	border-top: 1px solid #a88549;
	border-bottom: 4px solid #a88549;
	background-color: #5f471d;
	padding: 6px;
	margin-bottom: 8px;
}


.block2 {
	color: #202020;
	text-align: left;
	font-family: Verdana, Arial, sans-serif;
	border-top: 1px solid #6f562b;
	border-bottom: 4px solid #6f562b;
	background-color: #a88549;
	padding: 6px;
	margin-bottom: 8px;
}

.block3 {
	color: #ffffff;
	text-align: left;
	font-family: Verdana, Arial, sans-serif;
	border-top: 1px solid #a88549;
	border-bottom: 4px solid #a88549;
	background-color: #000000;
	padding: 6px;
	margin-bottom: 8px;
}

.news1 {
	padding: 4px;
	display: block; 
	width: 180px;
	color: #202020;
	background-color: #a88549;
	border-bottom: 2px solid #202020;
	font-weight: bold;
	text-align: center;
}

.news2 {
	padding: 4px;
	display: block; 
	width: 180px;
	color: #ffffff;
	background-color: #000000;
	border-bottom: 2px solid #a88549;
	font-weight: bold;
	text-align: center;
}

blockquote {
	color: #a88549;
	background-color: #000000;
	padding: 2px 12px;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	font-size: 115%;
	font-style: italic;
	border: 2px solid #a88549;
}


.tiny {
	font-size: 80%;
}

/*  Your smaller images can be floated to the left or the
right so your text can flow around them. You can also have
the images appear with or without a small border. The items
below sets the properties for the classes you may apply to
your images.  */

.image-border {
	border: 3px solid #444444;
}
	
.imageleft-noborder {
	margin: 0 10px 0 0; 
	float: left;
}

.imageright-noborder {
	margin: 0 0 0 10px; 
	float: right;
}
	
.imageleft-border   {
	margin: 0 10px 0 0; 
	float: left;
	border: 3px solid #444444;
}

.imageright-border  {
	margin: 0 0 0 10px; 
	float: right;
	border: 3px solid #444444;
}