@charset "utf-8";
/* CSS Document */

body {
	/*THE TAN BACKGROUND AT THE BOTTOM OF THE PAGE SO THE SITE CAN SCROLL VERTICALLY IF NEEDED*/
	background-color:#50442E;
	/*THESE ARE THE DEFAULT SETTINGS FOR ALL TEXT IN THE SITE UNLESS OTHERWISE SPECIFIED IN A CONTAINING DIV*/
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#000000;
	/*THIS MAKES THE BG STRETCH COMPLETELY TO THE EDGE OF THE BROWSER WINDOW RATHER THAN HAVE YOUR PAGE AUTOMATICALLY PADDED ON ALL SIDES*/ 
	margin:0;
	line-height: 20px;
	background-position: center;
}
.captiontext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: italic;
}

/*THIS IS USED TO MAKE A CLEAN BREAK AFTER ANYTIME YOU HAVE 2 DIVS SIDE BY SIDE. IF YOU DON'T CLEAR THE DIVS WITH THIS, SOME BROWSERS WILL RENDER THE HEIGHT OF PARTS OF YOUR LAYOUT INCORRECTLY. THIS CONCEPT IS A LITTLE DIFFICULT TO LEARN AT FIRST BUT ONCE YOU GET THE HANG OF IT, IT BECOMES AN INVALUABLE TOOL.

TO IMPLEMENT WITHIN THE HTML ALL THAT IS NEEDED IS <div class="clear"></div>*/
.clear {
	clear:both;
}

/*THIS IS THE BLACK BAR ACROSS THE TOP AND THE DIV IN WHICH THE .HEADER DIV IS PLACED*/
.header-bg {
	background-color:#000000;
	width:100%;
	height:100px;
}

/*DIV CONTAINING THE LOGO AND NAV*/
.header {
	width:861px;
	margin:0 auto;
}


/*CLASS CONTROLLING HOW THE LOGO IS POSITIONED*/
.logo {
	width:325px;
	/*THE FLOAT POSITIONS IT FLOATING LEFT WITHIN THE .header DIV*/
	float:left;
	
	/*THE PADDING CONTROLS THE POSITIONING OF THE LOGO AND IS READ CLOCKWISE STARTING WITH TOP - i.e. [PADDING: TOP, RIGHT, BOTTOM, LEFT]. IF THERE ARE LESS THAN 3 VALUES SPECIFIED THEN THE VALUES ARE GROUPED TOGETHER - i.e [PADDING: TOP & BOTTOM, LEFT & RIGHT] or [PADDING: ONE SET VALUE FOR ALL 4 DIRECTIONS]*/
	padding:5px 0px;
}

/*THIS CONTROLS HOW THE FLASH NAV IS POSITIONED WITHIN THE HEADER*/
#nav {
	/*ALTHOUGH POSITIONED TO THE RIGHT OF THE LOGO, THE FLASH NAV DIV IS ONLY 516px	WIDE AND HAS A LEFT PADDING OF 20px SO PUTTING A LEFT FLOAT ON IT WILL PUSH IT UP AND TO THE LEFT WITHIN THE .HEADER DIV AND FIT SNUGLY NEXT TO THE LOGO.
	
	EXPLANATION: THE .HEADER DIV IS 861px WIDE SO CAN CONTAIN EXACTLY THAT MUCH CONTENT. THE LOGO IS 325px WIDE AND THE FLASH NAV IS 516px WIDE WITH A LEFT PADDING OF 20px SO 325+516+20=861 AND ALL CONTENT WILL FIT SNUGLY WITH NO ROOM FOR ANYTHING ELSE.*/
	float:left;
	width:516px;
	padding:0px 0px 0px 20px;
}

/*THIS WILL STRETCH THE MOULDING BG IMAGE ACROSS THE BROWSER WINDOW. THE REPEAT-X TAKES THE 1px GIF AND STRETCHES HORIZONTALLY ACROSS THE X AXIS. THE MINIMUM HEIGHT WILL ENSURE THAT THE ENTIRE BG IMAGE IS ALWAYS VISIBLE AND NOT AWKWARDLY CUT OFF*/
.bg-moulding {
	width:100%;
	min-height:472px;
	/*THIS IS A CSS HACK FOR IE6 TO READ THE MIN. HEIGHT PROPERTY*/
	height:auto !important;
	background-image:url(../images/bg-moulding.gif);
	background-repeat:repeat-x;
}

/*DIV WRAPPING MAIN CONTENT IN THE SITE*/
.main-content {
	/*THIS CENTERS THE ENTIRE DIV WITHIN THE BROWSER WINDOW*/
	margin:0px auto;
	/*THIS PUSHES THE CONTENT DOWN TO BELOW THE MOULDING*/
	position:relative;
	top:33px;
	height:482px;
	width:786px;
	border-left:#ffffff 1px solid;
	border-right:#ffffff 1px solid;
	border-bottom:#ffffff 1px solid;
}

.portfoliomenu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #FFFFFF;
	padding-left: 25px;
}

.home-pageimage {
	background-image: url(../images/homepage_image.jpg);
	background-repeat: no-repeat;
	height: 465px;
	background-position: center;
}

/*THIS STYLES THE MAIN HEADERS FOR EACH PAGE. THE SPECIFIED HEADER ON EACH PAGE SIMPLY NEEDS TO HAVE <span class="header"></span> AROUND IT TO HAVE THE STYLING APPLIED*/
.headertext {
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	color:#1F1400;
	font-size:30px;
	font-weight:bold;
}

/*THIS STYLES DROP CAPS. SIMPLY TYPE <span class="dropcap"></span> AROUND THE PARTICULAR LETTER YOU WISH TO CONVERT TO A DROP CAP*/
.dropcap {
	font-family:Georgia, "Times New Roman", Times, serif;
	float: left;
	font-size: 40px;
	line-height: 40px;
	padding-top: 0px;
	padding-right: 5px;
	color:#1F1400;
}

/*STYLE FOR BOLDED TEXT CAPTIONS*/
.boldtext {
	font-weight:bold;
	color:#1F1400;
}

/*LEFT CONTENT ARE WITH BRICK BACKGROUND */
.left-content {
	width:208px;
	min-height:472px;
	margin:0px 0px 0px 10px;
	/*THIS IS A CSS HACK FOR IE6 TO READ THE MIN. HEIGHT PROPERTY*/
	height:auto !important;
	/*THE FLOAT POSITIONS THIS DIV TO THE LEFT WITHIN THE MAIN-CONTENT WRAPPER*/
	float:left;
	background-image:url(../images/bk_wood3.gif);
	/*THIS BG IMAGE IS EXACTLY 218px WIDE AND THE REPEAT-Y WILL ALLOW IT TO REPEAT VERTICALLY DOWN THE Y AXIS UNTIL IT HITS THE END OF THE DIV*/
	background-repeat:repeat-y;
}

.left-content-none {
	width:208px;
	min-height:462px;
	margin:0px 0px 0px 10px;
	/*THIS IS A CSS HACK FOR IE6 TO READ THE MIN. HEIGHT PROPERTY*/
	height:auto !important;
	/*THE FLOAT POSITIONS THIS DIV TO THE LEFT WITHIN THE MAIN-CONTENT WRAPPER*/
	float:left;
	padding:10px 0px 0px 10px;
	background-color: #003333;
}

.left-content-none a:link, .left-content-none a:visited {
	color:#ffffff;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
}

.left-content-none a:hover {
	color:#ffffff;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	text-decoration:none;
	font-weight:bold;
}

.galleryheader {
	width:547px;
	background-color: #003333;
	padding:0px 0px;
	text-align:center;
	font-weight:bold;
	color:#ffffff;
}

.gallerycontent {
	position:absolute;
	width:547px;
	left:218px;
}

.gallerytext {
	font-family:Verdana, Geneva, sans-serif
	font-size: 10px;
	width:537px;
	text-align:center;
	color: #FFFFCC;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
}

*:first-child+html .gallerycontent {
	left:218px;
}

.right-content {
	/*THIS IS THE LIGHT TAN COLOR OF THE CONTENT BG*/
	background-color:#efe3bd;
	height:472px;
	width:557px;
	/*THE WAY FLOATS WORK IS EXPLAINED ABOVE IN THE NAV CLASS*/
	float:left;
	text-align:left;
}

/*TO SPECIFY A STYLE TO A SPECIFIC HTML TAG SUCH AS <P>, <TD>, <IMG>, ETC. YOU CAN SIMPLY TYPE THAT TAG AFTER WHICHEVER DIV HOLDS THE SPECIFIC TAG YOU WISH TO STYLE. FOR EXAMPLE: TO STYLE ALL P TAGS IN CSS, SIMPLY WRITE - p {styling goes here}. TO STYLE A P TAG WITHIN A DIV WRITE - .div-class-name p {styling goes here} [REAL WORLD EXAMPLE BELOW]*/

/*THIS PUTS A 10px PADDING ON EACH SIDE OF ANYTHING CONTAINED IN A P (PARAGRAPH) TAG WITHIN THE LEFT CONTENT AND RIGHT-CONTENT DIVS.*/
.left-content p {
	/*CENTER ALIGNS ANY CONTENT IN P TAGS IN .LEFT-CONTENT*/
	text-align:center;
	/*THIS POSITIONS THE CONTENT TO THE CENTER OF THE BRICK BG GRAPHIC*/
	padding:10px 10px 0px 0px;
}

/*THIS PUTS A 1px BLACK BORDER ON ANY IMAGE PLACED WITHIN THE MAIN-CONTENT DIV (THAT INCLUDES LEFT AND RIGHT-CONTENT BECAUSE THEY ARE WITHIN MAIN-CONTENT*/
.main-content img {
	border:#000000 2px solid;
}

/*THIS STYLES THE FOOTER AND COPYRIGHT INFO*/
.footer {
	width:773px;
	text-align:right;
	color:#ffffff;
	font-size:10px;
	/*THIS CENTERS THE WHOLE DIV UNDER MAIN-CONTENT*/
	margin:0 auto;
	/*THIS POSITIONS THE FOOTER INFO UNDER THE WHITE BORDER OF THE MAIN-CONTENT AREA*/
	position:relative;
	top:43px;
	left:-12px;
}

/*THIS STYLES ALL LINKS WITHIN THE FOOTER*/
.footer a {
	color:#ffffff;
	text-decoration:none;
}

/*THIS PUTS AN UNDERLINE ON THE LINKS ON ROLLOVER*/
.footer a:hover {
	text-decoration:underline;
}

/*ALL CLASSES BELOW STYLE THE SCROLLBARS IN THE MAIN-CONTENT AREA*/
.scrollgeneric {
	line-height: 1px;
	font-size: 1px;
	position: absolute;
	top: 0; left: 0;
}

.vscrollerbase {
	width: 10px;
	background-color: #948B6C;
}
.vscrollerbar {
	width: 10px;
	background-color: #000000;
}
.hscrollerbase {
	height: 10px;
	background-color: #948B6C;
}
.hscrollerbar {
	height: 10px;
	background-color: #000000;
}

.scrollerjogbox {
	width: 10px;
	height: 10px;
	top: auto; left: auto;
	bottom: 0px; right: 0px;
	background-color: gray;
}

#mycustomscroll {
	padding:0px 10px;
	height:472px;
	width:537px;
	overflow: auto;
	/* IE overflow fix, position must be relative or absolute*/
	position: relative;
}
.featured_image {
	background-image: url(/dev/images/featured_image.jpg);
}

.gallerycontroller {
width: 240px;
background-color:#003333;
border:#003333 3px solid;
margin:0px;
color:#ffffff;
font-size:10px;
font-family:Verdana, Geneva, sans-serif;
}

.gallerycontroller option{
	cursor:pointer;
	padding:5px 0px 0px 10px;
	height: 27px;
	background-color:#003333;
	border:0px;
}

.gallerycontent{
	width: 557px;
	height: 28px;
	padding-top:5px;
	color:#ffffff;
	font-weight:bold;
	text-align:center;
	background-color: #003333;
	display: block;
	padding-left: 30px;
	padding-right: 30px;
}

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 1px solid #ffffff;
width: 450px; /*width of featured content slider*/
height: 300px;
margin:0 auto;
}



.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 5px;
width: 450px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

.pagination{
width: 434px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
background-color: #003333;
padding: 5px 10px;
margin:0 auto;
}

.pagination a{
	padding: 0 5px;
	text-decoration: none;
	color: #FFFFFF;
	background: white;
}

.pagination a:hover, .pagination a.selected{
color: #ffffff;
background-color: #000000;
}
.gallery-pageimage {
	background-image: url(/dev/images/gallery-page-one.gif);
	background-repeat: no-repeat;
	height: 465px;
	background-position: center;
}
.contact-pageimage {
	background-image: url(../images/contact_bkg.jpg);
	background-position: center;
	background-repeat: no-repeat;
	height: 472px;
	padding-left: 35px;
}
.left-content-brick {
	width:208px;
	min-height:472px;
	margin:0px 0px 0px 10px;
	/*THIS IS A CSS HACK FOR IE6 TO READ THE MIN. HEIGHT PROPERTY*/
	height:auto !important;
	/*THE FLOAT POSITIONS THIS DIV TO THE LEFT WITHIN THE MAIN-CONTENT WRAPPER*/
	float:left;
	background-image:url(../images/bg-brick.gif);
	/*THIS BG IMAGE IS EXACTLY 218px WIDE AND THE REPEAT-Y WILL ALLOW IT TO REPEAT VERTICALLY DOWN THE Y AXIS UNTIL IT HITS THE END OF THE DIV*/
	background-repeat:repeat-y;
}
.left-content-brick p {	/*CENTER ALIGNS ANY CONTENT IN P TAGS IN .LEFT-CONTENT*/
	text-align:center;
	/*THIS POSITIONS THE CONTENT TO THE CENTER OF THE BRICK BG GRAPHIC*/
	padding:10px 10px 0px 0px;
}