/*
------------------------------------------------------------------------ 
This is the placeholder page stylesheet for the 2008 Eull Woodworks design.

The graphics and design are Copyright (c) 2008 Smitty's Workshop and 
Eull Woodworks. Original site design by Smitty's Workshop. Code 
authoring by and Copyright (c) Joel Schou and Fuzzy Coconut. Reproducing 
the design in whole or part is strictly prohibited. However, creative 
inspiration is wonderful and inevitable. Contact us at www.smittypages.com

Feel free to learn from the CSS. Copying all or part is not only shallow,
but completely useless if you want to actually learn CSS. Please respect
our hard work and only use the code for reference. We will gladly answer
your questions. Contact us at fuzzycoconut.com/contact
-----------------------------------------------------------------------
*/

#wrapper {
	background: url(../img/portfolio/wrapper.gif) 0 147px repeat-x;
}

/* ######### header region ######### */



/* ######### content/sidebar regions ######### */
#content {
	padding: 0 0 0 0;
	height: 579px;
	text-align: left;
}

#scroller {
	padding: 0;
	/*height: 429px;*/
	height: 579px;
	/*overflow: auto;*/
	overflow: hidden;
	background: url(../img/portfolio/scroller.jpg) 725px 0 no-repeat;
}


/* ========= page items ========= */
#slideshow {
	display: inline;
	position: relative;
	margin: 44px 0 0 0;
	padding: 0 0 0 0;
	width: 720px;
	height: 534px;
	border-top: 1px solid #866b41;
	float: right;
}

#slideshow div.showwrapper {
	position: absolute;
	top: 7px;
	left: 0;
	width: 720px;
	height: 477px;
}

#slideshow .showwrapper ul.slides {
	position: relative;
	padding: 0;
	width: 720px;
	height: 477px;
	background: #1a0303;
	list-style: none;
}

#slideshow .showwrapper .slides li {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 720px;
	height: 477px;
	text-align: center;
	overflow: hidden;
}
#slideshow .showwrapper .slides li h2,
#slideshow .showwrapper .slides li p {
	padding: 10px 20px 4px 10px;
	font-size: 18px;
	line-height: 20px;
	font-weight: normal;
	text-align: left;
	color: #d3b16b;
}
#slideshow .showwrapper .slides li h2 span {
	padding: 0 15px;
	font-size: 14px;
}
#slideshow .showwrapper .slides li p {
	padding: 0 20px 20px 10px;
	font-size: 12px;
	line-height: 18px;
}

#slideshow .showwrapper .slides li img {
	/*display: block;*/
	margin: 0 auto;
}

.show1 .showwrapper .slides li h2,
.show1 .showwrapper .slides li p,
.show2 .showwrapper .slides li h2,
.show2 .showwrapper .slides li p,
.show3 .showwrapper .slides li h2,
.show3 .showwrapper .slides li p,
.show5 .showwrapper .slides li h2,
.show5 .showwrapper .slides li p,
.show8 .showwrapper .slides li h2,
.show8 .showwrapper .slides li p,
.show9 .showwrapper .slides li h2,
.show9 .showwrapper .slides li p,
.show12 .showwrapper .slides li h2,
.show12 .showwrapper .slides li p {
	display: inline;
	padding: 25px 25px 0 25px !important;
	width: 175px;
	float: left;
	clear: both;
}
.show1 .showwrapper .slides li h2 span {
	display: block;
	padding: 25px 0 0 0 !important;
}

#slideshow ul.showcontrols {
	position: absolute;
	top: 492px;
	padding: 0;
	height: 40px;
	width: 720px;
	border-top: 1px solid #866b41;
	border-bottom: 1px solid #866b41;
}

#slideshow .showcontrols li {
	position: relative;
	display: inline;
	margin: 0 5px;
	height: 40px;
	font-size: 14px;
	line-height: 40px;
	color: #ffe7b8;
	float: left;
}

#content #slideshow .showcontrols li a {
	position: relative;
	display: inline;
	height: 40px;
	color: #ffe7b8;
	float: left;
	cursor: pointer;
}

#slideshow .showcontrols li.playpause a {
	margin: 0 40px 0 0;
	padding: 0 10px 0 25px;
	width: 120px;
	background: url(../img/portfolio/showcontrols-pause.jpg) 0 50% no-repeat;
}
#slideshow .showcontrols li.playpause a.paused {
	background: url(../img/portfolio/showcontrols-play.jpg) 0 50% no-repeat;
}

#slideshow .showcontrols li.prev a,
#slideshow .showcontrols li.next a {
	margin: 0 40px;
	padding: 0 10px;
}

#content #slideshow .showcontrols li a:hover,
#content #slideshow .showcontrols li a:active {
	/*text-decoration: underline;*/
	color: #866b41;
	background-color: transparent;
}

#slideshow .showcontrols li.position {
	width: 60px;
	text-align: center;
}


div#showselector {
	display: inline;
	position: relative;
	padding: 0 11px 11px 11px;
	width: 222px;
	text-align: center;
	background: #240303 url(../img/portfolio/showselector.gif) repeat-x;
	float: left;
}

#showselector h2 {
	padding: 14px 0 0 0;
	font-size: 13px;
	line-height: 30px;
	font-weight: normal;
	text-transform: uppercase;
	color: #ffe7b8;
}

#showselector div.selectorwrapper {
	position: relative;
	padding: 25px 0 0 0;
	width: 220px;
	height: 497px;
	background: url(../img/portfolio/showswrapper.gif) 0 18px repeat-x;
	border: 1px solid #d3b16b;
	border-left-color: #b3965b;
	border-right-color: #947c4b;
	overflow: hidden;
}

#showselector .selectorwrapper div.showswrapper {
	position: relative;
	/*margin: 7px 0 0 0;*/
	padding: 0 7px 0 7px;
	height: 490px;
	/*border-top: 7px solid #240303;*/
	border-bottom: 7px solid #240303;
	overflow: hidden;
}

#showselector .selectorwrapper .showswrapper ul.shows {
	position: relative;
	margin: 0 0;
	padding: 0 2px 0 0;
	width: 220px;
	overflow: auto;
	border-left: none;
}

#showselector .selectorwrapper .showswrapper .shows li {
	display: inline;
	position: relative;
	margin: 0 0 1px 0;
	width: 206px;
	height: 97px;
	float: left;
	overflow: hidden;
}
#showselector .selectorwrapper .showswrapper .shows li.select {
	width: 204px;
	height: 95px;
	border: 1px solid #fff;
	background-position: -1px -1px !important;
}
#showselector .selectorwrapper .showswrapper .shows li.show1 { background: url(../img/portfolio/selectors/show1-bkg.jpg) no-repeat; }
#showselector .selectorwrapper .showswrapper .shows li.show2 { background: url(../img/portfolio/selectors/show2-bkg.jpg) no-repeat; }
#showselector .selectorwrapper .showswrapper .shows li.show3 { background: url(../img/portfolio/selectors/show3-bkg.jpg) no-repeat; }
#showselector .selectorwrapper .showswrapper .shows li.show4 { background: url(../img/portfolio/selectors/show4-bkg.jpg) no-repeat; }
#showselector .selectorwrapper .showswrapper .shows li.show5 { background: url(../img/portfolio/selectors/show5-bkg.jpg) no-repeat; }
#showselector .selectorwrapper .showswrapper .shows li.show6 { background: url(../img/portfolio/selectors/show6-bkg.jpg) no-repeat; }
#showselector .selectorwrapper .showswrapper .shows li.show7 { background: url(../img/portfolio/selectors/show7-bkg.jpg) no-repeat; }
#showselector .selectorwrapper .showswrapper .shows li.show8 { background: url(../img/portfolio/selectors/show8-bkg.jpg) no-repeat; }
#showselector .selectorwrapper .showswrapper .shows li.show9 { background: url(../img/portfolio/selectors/show9-bkg.jpg) no-repeat; }
#showselector .selectorwrapper .showswrapper .shows li.show10 { background: url(../img/portfolio/selectors/show10-bkg.jpg) no-repeat; }
#showselector .selectorwrapper .showswrapper .shows li.show11 { background: url(../img/portfolio/selectors/show11-bkg.jpg) no-repeat; }
#showselector .selectorwrapper .showswrapper .shows li.show12 { background: url(../img/portfolio/selectors/show12-bkg.jpg) no-repeat; }
#showselector .selectorwrapper .showswrapper .shows li.show13 { background: url(../img/portfolio/selectors/show13-bkg.jpg) no-repeat; }

#showselector .selectorwrapper .showswrapper .shows li a {
	display: block;
	height: 97px;
	color: #d3b16b;
	text-decoration: none;
	text-align: left;
}
#showselector .selectorwrapper .showswrapper .shows li a strong {
	padding: 10px 20px 4px 10px;
	display: none;
	font-size: 16px;
	line-height: 18px;
	font-weight: normal;
}
#showselector .selectorwrapper .showswrapper .shows li a span {
	padding: 0 20px 0 10px;
	display: none;
	font-size: 12px;
	line-height: 16px;
}
#showselector .selectorwrapper .showswrapper .shows li a img {
	display: block;
}

#showselector .selectorwrapper .showswrapper .shows li a:hover strong,
#showselector .selectorwrapper .showswrapper .shows li a:hover span { display: block; }
#showselector .selectorwrapper .showswrapper .shows li a:hover img { display: none; }

#showselector .selectorwrapper .showswrapper .shows li a:active {
	color: #866b41;
	background-color: transparent;
}

#showselector .selectorwrapper .showswrapper .shows li.select a img {
	margin: -1px;
}

#showselector .selectorwrapper .showswrapper .shows li.select a:hover { cursor: default; }
#showselector .selectorwrapper .showswrapper .shows li.select a:hover strong,
#showselector .selectorwrapper .showswrapper .shows li.select a:hover span { display: none; }
#showselector .selectorwrapper .showswrapper .shows li.select a:hover img { display: block; }

#showselector ul.controls {
	position: absolute;
	top: 44px;
	left: 11px;
	padding: 0;
	width: 222px;
	height: 19px;
	background: url(../img/portfolio/showselector-controls.jpg);
}

#showselector .controls li {
	display: inline;
	height: 15px;
	line-height: 15px;
}
#showselector .controls li a {
	padding: 0 8px;
	background: url(../img/portfolio/showselector-index.png) 50% 2px no-repeat;
	cursor: pointer;
}
#showselector .controls li.select a,
#showselector .controls li a:hover {
	background: url(../img/portfolio/showselector-index-on.png) 50% 2px no-repeat;
}
#showselector .controls li.select a {
	cursor: default;
}

#showselector .controls li.down,
#showselector .controls li.up {
	position: absolute;
	top: 2px;
	left: 3px;
	padding: 0;
	width: 36px;
	background: url(../img/portfolio/showselector-up.jpg) 50% 50% no-repeat;
}
#showselector .controls li.down {
	left: 183px;
	background: url(../img/portfolio/showselector-down.jpg) 50% 50% no-repeat;
}
#showselector .controls li.down a,
#showselector .controls li.up a {
	display: block;
	height: 15px;
	text-indent: -99px;
	background: transparent;
	overflow: hidden;
	cursor: pointer;
}
#showselector .controls li.down a:hover,
#showselector .controls li.up a:hover {
	height: 13px;
	border: 1px solid #240303;
}

/* --------- subnav --------- */


/* --------- text --------- */


/* --------- lists --------- */


/* --------- forms --------- */


/* --------- tables --------- */


/* --------- flash --------- */


/* ######### footer region ######### */
#footer {
	height: 41px;
	background: #240303 url(../img/html.jpg) 50% 31px;
}

/* --------- contact info --------- */
#footer p.contact {
	display: none;
}

/* ========= fineprint bar ========= */
/* --------- list items --------- */
#footer li {
	top: 12px;
}