/* /////////////////////////////////
	Arhaus CSS 
	by Benek Lisefski
	http://www.benekdesign.com
///////////////////////////////// */

/* reset whitespace */
* { 
	margin:0;
	padding:0;
}

/* /////////////////////////////////
	LAYOUT
///////////////////////////////// */

/* force scrollbar */

html {
	height: 101%;
}

body {
	font: normal 11px verdana, tahoma, arial;
	color: #666;
	background: #cecece;
	line-height: 17px;
	padding: 0;
}

#center {
	width: 866px;
	margin: 70px auto;
	background: #fff url('/i/bg.gif') repeat-y left top;
}

.left {
	float: left;
}

.right {
	float: right;
}

.clear { 
	clear: both; 
	height: 0; 
	line-height: 0px;
	font-size: 0px;
	text-indent: -5000px;
}

.hidden {
	display: none;
}


/* /////////////////////////////////
	BASIC TEXT
///////////////////////////////// */

h1 {
	font: bold 24px arial, tahoma, verdana;
	color: #fff;
	margin: 0;
	line-height: 22px;
}

h2 {
	font: normal 20px arial, tahoma, verdana;
	color: #000;
	margin: 0;
	line-height: 18px;
}

h2.home { color: #990000; }
h2.what { color: #666600; }
h2.news { color: #006699; }
h2.contact { color: #cc3300; }


h3 {
	font: bold 13px arial, tahoma, verdana;
	color: #666;
	margin: 0 0 2px 0;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 18px;
}

h4 {
	font: bold 10px verdana;
	color: #666;
	text-transform: uppercase;
	margin: 0;
}

h4.contact {
	color: #cc3300;
}

h5 {
	font: normal 9px verdana;
	color: #666;
	margin: 0;
}

p, ul, ol {
	margin: 12px 0px 12px 0px;
}

ul {
	list-style-type: none;
}


/* /////////////////////////////////
	DEFAULT LINKS
///////////////////////////////// */

a img { border: none }

a:link,
a:visited {
	color: #cc3300;
	text-decoration: none;
}

a:hover {
	color: #822722;
	text-decoration: none;
}

a:focus {
	outline: 0;
}


/* /////////////////////////////////
	HEADER
///////////////////////////////// */

#header {
	height: 143px;
	padding: 3px 3px 0 3px;
	background: transparent url('/i/bg-header.gif') no-repeat left top;
	position: relative;
}

#logo {
	display: block;
	float: right;
	width: 130px;
	height: 26px;
	overflow: hidden;
	background: transparent url('/i/arhaus.gif') no-repeat left top;
	text-indent: -5000px;
	margin: 22px 22px 0 0;
	display: inline
}

#tagline {
	width: 234px;
	height: 10px;
	overflow: hidden;
	background: transparent url('/i/tagline.gif') no-repeat left top;
	text-indent: -5000px;
	margin: 22px 0 0 22px;
}

/* /////////////////////////////////
	NAV
///////////////////////////////// */

ul#nav {
	width: 550px;
	height: 29px;
	margin: 0;
	list-style-type: none;
	position: absolute;
	bottom: 2px;
	left: 25px;
}

ul#nav li {
	display: block;
	float: left;
	width: 135px;
	height: 29px;
	margin-right: 2px;
	position: relative;
}

ul#nav li a:link,
ul#nav li a:visited {
	display: inline-block;
	float: left;
	width: 135px;
	height: 29px;
	text-align: center;
	color: #fff;
	font: normal 14px arial;
	overflow: hidden;
	text-transform: uppercase;
	text-indent: -5000px;
	background: #cecece;
}

/* images for each link */

ul#nav li#navHome a:link,
ul#nav li#navHome a:visited {
	background: #cecece url('/i/nav-home.png') no-repeat left top;
}

ul#nav li#navWhat a:link,
ul#nav li#navWhat a:visited {
	background: #cecece url('/i/nav-what.png') no-repeat left top;
}

ul#nav li#navNews a:link,
ul#nav li#navNews a:visited {
	background: #cecece url('/i/nav-news.png') no-repeat left top;
}

ul#nav li#navContact a:link,
ul#nav li#navContact a:visited {
	background: #cecece url('/i/nav-contact.png') no-repeat left top;
}

/* hover for each link */

ul#nav li#navHome a:hover {
	background-color: #990000;
}

ul#nav li#navWhat a:hover {
	background-color: #666600;
}

ul#nav li#navNews a:hover {
	background-color: #006699;
}

ul#nav li#navContact a:hover {
	background-color: #cc3300;
}

/* sub-nav */

ul#nav li#navWhat ul,
ul#nav li#navContact ul {
	width: 135px;
	height: 63px;
	position: absolute;
	top: -63px;
	left: 0;
	margin: 0;
	padding: 0;
	display: none;
}

ul#nav li#navWhat ul.open,
ul#nav li#navContact ul.open {
	display: block;
}

ul#nav li#navWhat ul li,
ul#nav li#navContact ul li {
	float: none;
	width: 135px;
	height: 19px;
	margin-right: 0;
	margin-bottom: 2px
}

ul#nav li#navWhat ul li a:link,
ul#nav li#navWhat ul li a:visited,
ul#nav li#navContact ul li a:link,
ul#nav li#navContact ul li a:visited {
	display: block;
	float: none;
	width: 135px;
	height: 19px;
	text-align: center;
	color: #fff;
	font: normal 14px arial;
	overflow: hidden;
	text-transform: uppercase;
	text-indent: -5000px;
	background: #dfdfdf;
}

/* images for sub-nav links */

ul#nav li#navWhat ul li#navCustom a:link,
ul#nav li#navWhat ul li#navCustom a:visited {
	background: #dfdfdf url('/i/nav-custom.png') no-repeat left top;
}

ul#nav li#navWhat ul li#navShelf a:link,
ul#nav li#navWhat ul li#navShelf a:visited {
	background: #dfdfdf url('/i/nav-shelf.png') no-repeat left top;
}

ul#nav li#navWhat ul li#navMod a:link,
ul#nav li#navWhat ul li#navMod a:visited {
	background: #dfdfdf url('/i/nav-mod.png') no-repeat left top;
}

ul#nav li#navContact ul li#navLogin a:link,
ul#nav li#navContact ul li#navLogin a:visited {
	background: #dfdfdf url('/i/nav-login.png') no-repeat left top;
}

ul#nav li#navContact ul li#navTeam a:link,
ul#nav li#navContact ul li#navTeam a:visited {
	background: #dfdfdf url('/i/nav-team.png') no-repeat left top;
}

ul#nav li#navContact ul li#navFAQ a:link,
ul#nav li#navContact ul li#navFAQ a:visited {
	background: #dfdfdf url('/i/nav-faq.png') no-repeat left top;
}

/* hover for sub-nav links */

ul#nav li#navWhat ul li#navCustom a:hover,
ul#nav li#navWhat ul li#navShelf a:hover,
ul#nav li#navWhat ul li#navMod a:hover {
	background-color: #666600;
}

ul#nav li#navContact ul li#navLogin a:hover,
ul#nav li#navContact ul li#navTeam a:hover,
ul#nav li#navContact ul li#navFAQ a:hover {
	background-color: #cc3300;
}

/* highlight current page? */

ul#nav li#navHome a.current:link,
ul#nav li#navHome a.current:visited { background-color: #990000; }
ul#nav li#navWhat a.current:link,
ul#nav li#navWhat a.current:visited { background-color: #666600; }
ul#nav li#navNews a.current:link,
ul#nav li#navNews a.current:visited { background-color: #006699; }
ul#nav li#navContact a.current:link,
ul#nav li#navContact a.current:visited { background-color: #cc3300; }

ul#nav li#navWhat ul li#navCustom a.current:link,
ul#nav li#navWhat ul li#navCustom a.current:visited, 
ul#nav li#navWhat ul li#navShelf a.current:link,
ul#nav li#navWhat ul li#navShelf a.current:visited,
ul#nav li#navWhat ul li#navMod a.current:link,
ul#nav li#navWhat ul li#navMod a.current:visited { background-color: #666600; }

ul#nav li#navContact ul li#navLogin a.current:link,
ul#nav li#navContact ul li#navLogin a.current:visited,
ul#nav li#navContact ul li#navTeam a.current:link,
ul#nav li#navContact ul li#navTeam a.current:visited,
ul#nav li#navContact ul li#navFAQ a.current:link,
ul#nav li#navContact ul li#navFAQ a.current:visited { background-color: #cc3300; }


/* /////////////////////////////////
	BANNER + THUMBS
///////////////////////////////// */

#banner {
	width: 816px;
	height: 245px;
	margin: 0 0 0 25px;
	background: #cecece;
	overflow: hidden;
	position: relative;
}

#scrollLeft:link,
#scrollLeft:visited {
	display: block;
	width: 22px;
	height: 22px;
	overflow: hidden;
	text-indent: -5000px;
	background: transparent url('/i/scroll-left.png') no-repeat left top;
	position: absolute;
	top: 111px;
	left: 0px;
	z-index: 2;
	display: none;
}

#scrollRight:link,
#scrollRight:visited {
	display: block;
	width: 22px;
	height: 22px;
	overflow: hidden;
	text-indent: -5000px;
	background: transparent url('/i/scroll-right.png') no-repeat left top;
	position: absolute;
	top: 111px;
	right: 0px;
	z-index: 2;
}

#scrollLeft:hover,
#scrollRight:hover {
	background-position: left -22px;
}

#banner img {
	display: block;
}

#banner .slides {
	width: 816px;
	height: 245px;
	overflow: hidden;
	position: relative;
}

#bannerScroll {
	width: 816px;
	height: 245px;
	overflow: hidden;
}

#bannerScroll #scroller {
	width: 10000px;
	margin: 0;
}

#scroller div.panel {
	width: 816px;
	height: 245px;
	float: left;
}

#scroller img {
	display: block;
}


.slides img {
    position:absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0.0;
}

.slides img.active {
    z-index: 3;
    opacity: 1.0;
}

.slides img.last-active {
    z-index: 2;
}

#banner #announce {
	width: 226px;
	height: 201px;
	padding: 22px;
	overflow: hidden;
	position: absolute;
	top: 0px;
	right: 0px;
	background: transparent url('/i/black50.png') repeat left top;
	z-index: 10;
}

#banner #announce p {
	color: #fff;
	line-height: 14px;
}

#video {
	width: 816px;
	height: 245px;
	background: #4a4a4a;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 100;
	display: none;
}

#player {
	width: 400px;
	height: 225px;
	margin: 10px auto 0;
}

#closeVid:link,
#closeVid:visited {
	position: absolute;
	top: 8px;
	right: 12px;
	font: normal 9px arial, tahoma, verdana;
	text-transform: uppercase;
	color: #999;
}

#closeVid:hover {
	color: #fff;
}

/* thumbs */

#thumbs{
	width: 819px;
	height: 100px;
	margin: 2px 0 0 25px;
	overflow: hidden;
	position: relative;
}

#thumbsScroll {
	width: 816px;
	height: 100px;
	overflow: hidden;
}

#thumbs #scroller {
	width: 10000px;
	margin: 0;
}

a.thumb:link,
a.thumb:visited,
div.thumb {
	display: block;
	width: 270px;
	height: 86px;
	float: left;
	margin-right: 3px;
}

.thumb .image {
	display: block;
	width: 270px;
	height: 66px;
}

.thumb .caption {
	display: block;
	font: normal 9px arial, tahoma, verdana;
	color: #fff;
	text-transform: uppercase;
	margin-top: 3px;
}

a.thumb:hover .image {
	background-position: left -66px;
}

a.thumb:hover .caption {
	color: #808080;
}

#thumbsRight:link,
#thumbsRight:visited,
#thumbsLeft:link,
#thumbsLeft:visited  {
	position: absolute;
	top: 69px;
	right: 3px;
	font: normal 9px arial, tahoma, verdana;
	text-transform: uppercase;
	color: #808080;
}

#thumbsRight:hover,
#thumbsLeft:hover {
	color: #333;
}

#thumbsLeft {
	display: none;
}

/* /////////////////////////////////
	CONTENT 
///////////////////////////////// */

#content {
	overflow: hidden;
	height: 1%;
	background: transparent url('/i/bg-content.gif') no-repeat left bottom;
	padding: 1px 25px 24px;
}

.subCol {
	width: 240px;
	float: left;
	margin-right: 33px;
}

.mainCol {
	width: 410px;
	float: left;
}

.navCol {
	width: 110px;
	float: right;
	text-align: right;
	height: 1%;
	overflow: hidden;
}

p.noMargin {
	margin: 0;
}

strong.red {
	color: #cc4213;
	font-weight: normal;
}

strong.marginLeft {
	margin-left: 18px;
}

.mainCol ul li {
	background: transparent url('../i/bullet.gif') no-repeat left 7px;
	padding-left: 9px;
}

.teamCol {
	padding-left: 136px;
	width: 274px;
}

.teamCol img.team {
	float: left;
	position: relative;
	left: -136px;
	margin: 4px -136px 0 0;
}

#faq {
	margin: 0 0 12px 0;
}

#faq li {
	margin-bottom: 6px;
}

#faq p {
	margin: 2px 0 6px;
}

#faq .active:link,
#faq .active:visited {
	color: #333;
	font-weight: bold;
}

p.caption {
	margin: -6px 0 12px 0;
	font-size: 10px;
	color: #999;
}

/* extra nav circle buttons */

.extraNav {
	width: 45px;
	height: 22px;
	float: right;
}

#leftNav:link,
#leftNav:visited,
#rightNav:link,
#rightNav:visited {
	display: block;
	width: 22px;
	height: 22px;
	overflow: hidden;
	text-indent: -5000px;
}

#leftNav:link,
#leftNav:visited {
	background: transparent url('/i/left-nav.gif') no-repeat left top;
	margin-right: 1px;
	float: left;
}

#rightNav:link,
#rightNav:visited {
	background: transparent url('/i/right-nav.gif') no-repeat left top;
	float: right;
}

#leftNav:hover,
#rightNav:hover {
	background-position: left -22px;
}

/* small item nav */

#itemNav {
	width: 110px;
	float: right;
	clear: both;
	margin-top: 12px;
	list-style-type: none;
}

#itemNav li {
	font: normal 9px arial;
	color: #808080;
	line-height: 11px;
	text-transform: uppercase;
}

#itemNav a:link,
#itemNav a:visited {
	color: #808080;
}

#itemNav a:hover {
	color: #333;
}

#itemNav a.team:link,
#itemNav a.team:visited {
	color: #cc3300;
}

#itemNav a.project:link,
#itemNav a.project:visited {
	color: #666600;
}

#itemNav a.news:link,
#itemNav a.news:visited {
	color: #006699;
}


/* /////////////////////////////////
	FORMS
///////////////////////////////// */

.formRows {
	margin: 0;
}

.mainCol .formRows li {
	clear: both;
	overflow: hidden;
	height: 1%;
	margin-top: 5px;
	padding: 0;
	background: none;
}

#enquiry {
	margin: 5px 0 10px 0;
	position: relative;
}

fieldset {
 	border: 0;
}

input:focus,
select:focus,
textarea:focus {
	outline: 0;
}

label {
	display: block;
	width: 64px;
	text-align: left;
	margin: 0;
	float: left;
}

.input {
	border: 0;
	background: #f1f0f0 url('/i/bg-input.gif') no-repeat left top;
	width: 330px;
	padding: 3px;
	font: normal 11px verdana, tahoma, arial;
	color: #000;
}

textarea {
	height: 75px;
}

.button {
	position: absolute;
	bottom: 0px;
	right: -70px;
}