/*======================================================================
	*Author: Leonie Lindo
	*Project: Boxroom
	*Description: Global Stylesheet layout code for: 
		= reset margins/paddings/borders
		= generic typography
		= #accessibility
		= Generic layout and presentaion
		= STRUCTURAL LAYOUT - #wrapper, #header, #nav, #content,
							  #subnav, #breadcrumb, #main-content,
							  #secondary-content, #footer
		
		*Start date:16/02/2010
========================================================================*/
/*--------------------------------------------------------------------------------------------------
	= reset margins/paddings/borders
---------------------------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,img {margin:0; padding:0; line-height:1;}
table {border-collapse:collapse; border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,th,var {font-style:normal; font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-weight:normal;}
abbr,acronym {border:0;}

/*------------------------------------
	Prevent Firefox Scrollbar Jump
-------------------------------------*/
html{ overflow-y:scroll; }

/*------------------------------------------------------------------------------------------
	= generic typography
-------------------------------------------------------------------------------------------*/
h1 {font-size:7.0em; font-weight:normal; color:#333333;} 
h2 {font-size:3.5em; font-weight:normal; /*color:#666666;*/ color:#824737; }
h3 {font-size:2em; font-weight:normal; /*color:#333333;*/ color:#824737; }
h4 {font-size:1.2em; font-weight:normal; color:#333333;}
h5 {font-size:1.1em; font-weight:normal; color:#333333;}
h6 {font-size:1.0em; font-weight:normal; color:#333333;}

/*---------------------------------------------------------------------------------------------
	= #accessibility
----------------------------------------------------------------------------------------------*/
#accessibility { position:absolute; left:-1000px; top:-1000px; overflow:hidden; padding:0; margin:0;} 
#accessibility a {text-decoration:underline;}
#accessibility a:hover {text-decoration: underline;}
.hide {display:none}/* use this class for objects you wish to hide from the DOM*/
.offscreen {position:absolute; top:-1000px; left:-1000px;}/* use this class for objects you wish to hide offscreen but intent to be read by a screen reader*/

/*----------------------------------------------------------------------------------------------
	= Generic layout and presentaion
-----------------------------------------------------------------------------------------------*/
body {margin:0; padding:0; font:62.5% "Trebuchet MS", Verdana, sans-serif; background-color:#99cccc; /*color:#505253;*/ color:#333333;}
/* using "font size 62.5%" sets 1.0em = 10px
	makes matching font-size and line-heights to designs simpler
	1.5em = 15px
*/
#top {padding:5px 0 20px 0; margin:0 ; position:absolute; top:-1000px; left:-1000px;}
a.return-top {clear:both; font-size:1.6em; cursor:pointer; display:inline-block; background:url(../images/return_off.png) 0 22px no-repeat; padding:20px 0 0 30px; line-height:1.8;}
a.return-top:hover {background:url(../images/return_on.png) 0 22px no-repeat;}
.clear{clear:both;}
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

/*-----------------
	= link style
------------------*/
a { text-decoration:none; color:#824737;}
a:hover {text-decoration:underline; color:#0066CC;}
* :focus {  }/*[THIS GETS RID OF THE DOTTED OUTLINE FROM AROUND ANY LINK ON FOCUS]*/
* :active {}/*[THIS GETS RID OF THE DOTTED OUTLINE FROM AROUND ANY LINK ON FOCUS ON OLDER FIREFOX AND MOZILLA BROWSERS]*/
a img {border:none;}

#wrapper {width:990px; margin:0 auto; background:url(../images/wrapper_bg.jpg) 0 0 repeat-y; }

#wrapper h1 {padding:65px 0 0 0; margin-bottom:15px; width:100%;}
#content-wrapper {width:910px; margin:0 auto; background:url(../images/boxroom_bg.jpg) -2px 0 scroll no-repeat; }
#content {width:810px; margin:0 auto; position:relative; top:0; left:0; }
ul#change-font {width:35em; float:right;}
ul#change-font li {float:left; margin-left:10px; width:auto; font-size:1.3em;}
ul#change-font li a{float:left; width:auto; padding:8px; text-decoration:underline;}
ul#change-font li a:hover{-moz-border-radius:.3em; -webkit-border-radius:.3em; padding:7px; border:1px solid #fff;}
#nav {width:100%; float:left; display:block;  margin-bottom:50px;}
#nav ul{float:left; width:100%; }
#nav ul li {float:left; width:auto; margin-right:25px; list-style-type:none; /*line-height:1.8;*/}
#nav ul li a{float: left; width:auto; padding:10px 10px;/* color:#824737;*/ font-size:1.8em; }
#nav ul li a:hover{float:left; width:auto; background:#99cccc; color:#000; -moz-border-radius:.3em; -webkit-border-radius:.3em; padding:9px 9px; text-decoration:none; border:1px solid #fff;}
/*#nav ul li a:focus{float:left; width:auto; background:#99cccc color:#000; -moz-border-radius:.3em; -webkit-border-radius:.3em; padding:4px 9px; text-decoration:none; border:1px solid #fff;}
*/

#side-nav {width:auto; float:left; display:block; background-color:#F8F2DA; position:fixed; top:0; left:0;}
#side-nav ul {float:left; width:60px;}
#side-nav ul li {font-size:1.8em; padding:20px 0;}
#side-nav-title{background:#000; color:#fff; float:left; width:20px; height:170px}


.section{display:block; background:url(../images/section-bg.png) 0 0 repeat; width:763px; float:left; margin-bottom:75px; padding:20px; border:1px solid #fff; -moz-border-radius:1em; -webkit-border-radius:1em; }
.section.intro img {float:left; padding-right:30px; padding-top:30px;}
.section img {float:left; padding-right:30px; }
.section h2, .section h3 {padding-bottom:10px;}
.section p {padding-bottom:10px; font-size:1.5em; line-height:1.4;}
.section a {text-decoration:underline; }
.section a:focus {text-decoration:underline; color:#0066CC;}
.text {float:left; width:570px; }
#hero-slot {float:left; background:#00CCFF; width:810px; position:relative; height:400px;}
.sml-box {width:330px; float:left; /*border:1px solid #fff;*/ margin:20px 40px 0 0}
.sml-box p {font-size:1.4em;}
.section ul {margin:0; padding:0; font-size:1.4em; }
.section ul li{margin:0; padding:0 0 5px 15px; line-height:1.5; background:url(../images/bullet.gif) 0 6px no-repeat;}
.section .sml-box img {margin:0; padding:0;}
.section .sml-box ul {clear:both;}

/*----gallery ----*/
#portfolio-container {width:100%; float:left; clear:both;}
#portfolio-container ul.thumb {display:none;}
.hasJS #portfolio-container ul.thumb {
	display:block;
	float: left;
	list-style: none;
	margin: 0; padding: 10px 0 0 0;
	width: 360px;
}
#portfolio-container ul.thumb li {
	margin: 0; padding: 5px;
	float: left;
	position: relative;
	width: 110px;
	height: 110px;
}
#portfolio-container ul.thumb li img {
	width: 100px; height: 100px;
	border: 1px solid #ddd;
	padding: 5px;
	background: #f0f0f0;
	position: absolute;
	left: 0; top: 0;
	-ms-interpolation-mode: bicubic; 
}
#portfolio-container ul.thumb li img.hover {
	background:url(thumb_bg.png) no-repeat center center;
	border: none;
}
#main_view {
	float: left;
	padding: 9px 0;
	display:inline;
	width:400px;
	position:relative;

}
#main_view  img {padding:0; margin:0; border:1px solid #eeeeee}
#load {display:none; position:absolute; top:10px; right:10px; background:url(../images/loader.gif) 0 0 no-repeat; width:16px; height:16px; text-indent:-9999em;}
#gallery-alternative {display:block;}
#gallery-alternative a img{display:block; margin-top:20px;}
.hasJS #gallery-alternative {display:none;}
#footer {margin:0; float:left; margin-left:50px; padding:20px 0; display:inline;}
#footer ul li {font-size:1.3em; float:left; width:auto; margin-right:20px;}