@charset "UTF-8";

*{
	margin:0px;
	padding:0px;
}


/*
---------------------------------------------------------------------
Overal layout
---------------------------------------------------------------------
*/

body {
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #2F2520;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 11px;
	background-color: #FFFFFF;
	background-repeat: no-repeat;
	background-position: center top;
}
#container {
	width: 900px;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	position: relative;
	margin-bottom:20px;
}

#header {
	background-color: #FFFFFF;
	background-image: url(../images/header_bg.gif);
	background-repeat: repeat-x;
	background-position: center top;
	width: 100%;
	height:105px;
}

#footer{
	width:270px;
	height:13px;
	position: absolute;
	left: 630px;
	top: 525px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	padding-top:2px;
	text-align: right;
	line-height: 100%;
}


ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
img { border: 0; }

a { color: #08c; }
a:link, a:visited, a:active { text-decoration: none; }
a:hover { text-decoration: underline; }


/*
---------------------------------------------------------------------
Header details
---------------------------------------------------------------------
*/

#header_contents{
	width:900px;
	height:105px;
	margin: 0 auto;
	padding:0;
	position: relative;	
}

#header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}

.sw_logo{
	height: 50px;
	width: 220px;
	margin:0;
	left:0px;
	top: 25px;
	position: absolute;
}




/*
---------------------------------------------------------------------
CSS ROLLOVER NAV
---------------------------------------------------------------------
*/

#nav_menu {
	height:14px;
	left:630px;
	position:absolute;
	top:30px;
}

#nav_menu ul
{
	list-style: none;
	padding: 0;
	margin: 0;
}

#nav_menu li
{
	float: left;
	height: 14px;
}


/* BUTTONS */

#nav_menu li#btn_buildings_selected a{
	background-image: url(../images/btn_buildings.gif);
	background-repeat: no-repeat;
	background-position: 0 -28px;
	width:88px;
	height: 0;
	padding-top: 14px;
	overflow: hidden;
	float: left;
	display: block;
}
#nav_menu li#btn_arts_selected a{
	background-image: url(../images/btn_arts.gif);
	background-repeat: no-repeat;
	background-position: 0 -28px;
	width:76px;
	height: 0;
	padding-top: 14px;
	overflow: hidden;
	float: left;
	display: block;
}
#nav_menu li#btn_info_selected a{
	background-image: url(../images/btn_info.gif);
	background-repeat: no-repeat;
	background-position: 0 -28px;
	width:106px; 
	height: 0; 
	padding-top: 14px; 
	overflow: hidden; 
	float: left; 
	display: block;
}



#nav_menu li#btn_buildings a
{
	background-image: url(../images/btn_buildings.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
	width:88px;
	height: 0;
	padding-top: 14px;
	overflow: hidden;
	float: left;
	display: block;
}

#nav_menu li#btn_arts a
{
	background-image: url(../images/btn_arts.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
	width:76px;
	height: 0;
	padding-top: 14px;
	overflow: hidden;
	float: left;
	display: block;
}

#nav_menu li#btn_info a
{
	background-image: url(../images/btn_info.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
	width:106px; 
	height: 0; 
	padding-top: 14px; 
	overflow: hidden; 
	float: left; 
	display: block;
}

/* OVER STATES */

#nav_menu li#btn_buildings a:hover
{
	background-image: url(../images/btn_buildings.gif);
	background-repeat: no-repeat;
	background-position: 0 -14px;
	width:88px;
	height: 0;
	padding-top: 14px;
	overflow: hidden;
	float: left;
	display: block;
}

#nav_menu li#btn_arts a:hover
{
	background-image: url(../images/btn_arts.gif);
	background-repeat: no-repeat;
	background-position: 0 -14px;
	width:76px;
	height: 0;
	padding-top: 14px;
	overflow: hidden;
	float: left;
	display: block;
}

#nav_menu li#btn_info a:hover
{
	background-image: url(../images/btn_info.gif);
	background-repeat: no-repeat;
	background-position: 0 -14px;
	width:106px; 
	height: 0; 
	padding-top: 14px; 
	overflow: hidden; 
	float: left; 
	display: block;
}

/* PRESSED STATES */

#nav_menu li#btn_buildings a:active
{
	background-image: url(../images/btn_buildings.gif);
	background-repeat: no-repeat;
	background-position: 0 -28px;
	width:88px;
	height: 0;
	padding-top: 14px;
	overflow: hidden;
	float: left;
	display: block;
}

#nav_menu li#btn_arts a:active
{
	background-image: url(../images/btn_arts.gif);
	background-repeat: no-repeat;
	background-position: 0 -28px;
	width:76px;
	height: 0;
	padding-top: 14px;
	overflow: hidden;
	float: left;
	display: block;
}

#nav_menu li#btn_info a:active
{
	background-image: url(../images/btn_info.gif);
	background-repeat: no-repeat;
	background-position: 0 -28px;
	width:106px; 
	height: 0; 
	padding-top: 14px; 
	overflow: hidden; 
	float: left; 
	display: block;
}


/*
---------------------------------------------------------------------
Main Contents Area
---------------------------------------------------------------------
*/

#mainContent {
	width:900px;
	height:500px;
	margin: 0 auto;
	padding-top:45px;
	position: relative;	
}
 #footer {
    
	
}


/*
---------------------------------------------------------------------
PROJECT LIST PAGE
---------------------------------------------------------------------
*/


#project_list {
	width:900px;
	height:500px;	
}


/*--------------------------------------------------------------
 HOVER-BLOCK 
---------------------------------------------------------------*/

ul.hover_block li{
			list-style:none;
			float:left;
			background: #EEEEEE;
			width:270px;
			height:195px;
			position: relative;
			margin-right: 0px;
			margin-bottom:45px;
			}

		ul.hover_block li a {
	display: block;
	position: relative;
	overflow: hidden;
	height: 195px;
	width: 270px;
	padding-top:0px;
	z-index: 99;
		}

ul.hover_block li span {
	display: block;
	position:absolute;
	overflow: hidden;
	width:250px;
	padding-left:10px;
	padding-right:10px;
	top:50%;
	left:0 !important;
	margin-top:-0.5em;
	/*text-align: center;*/
	color: #000;
	text-decoration: none;
	letter-spacing: 0.2em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	text-transform: uppercase;
}

		ul.hover_block li img {
	position: absolute;
	top: 0;
	left: 0;
	border: 0;

		}

	

/*--------------------------------------------------------------
  SCROLLABLE - THUMB CSS
---------------------------------------------------------------*\

/* root element for the whole scrollable setup */
div.scrollable {
position:relative;
overflow:hidden;
width: 900px;
height:435px;
}

/*
 root element for scrollable items. It is
 absolutely positioned with large width.
*/
#thumbs {
position:absolute;
width:20000em;
clear:both;
border:0px solid #222;
}

/* custom positioning for navigational links */
a.prev, a.next {
 margin-top:500px;
}



/* single item */
#thumbs div {
	float:left;
	width:270px;
	height:195px;
	background:#fff url(../images/global/gradient/h150.png) repeat-x 0 146px;
	color:#fff;
	border-left:0px solid #333;
	cursor:pointer;
	padding-right:45px;
	text-align: center;
	vertical-align: middle; 

}

/* style when mouse is over the item*/ 
/*#thumbs div.hover {
 background-image:url(../images/test_214x100_Layer%201-2.jpg);
}/*

/* style when element is active (clicked) */
#thumbs div.active {
 background-color:#ffffff; 
 cursor:default;
}

#thumbs h3, #thumbs p{
 margin:13px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:13px;
 color:#fff;
}

#thumbs h3 em {
 font-style:normal;
 color:yellow;
} 

/*--------------------------------------------------------------
  SCROLLABLE- NAVIGATION 
---------------------------------------------------------------*/


/* this makes it possible to add next button beside scrollable */
div.scrollable {
	float:left;	
}


/* prev, next, prevPage and nextPage buttons */
a.prev, a.prevPage {
	display:block;
	width:15px;
	height:16px;
	background:url(../images/left.gif) no-repeat;
	float:left;
	margin:45px 0px 0px 0px;
	cursor:pointer;
	font-size:1px;
}

a.next, a.nextPage {
	display:block;
	width:16px;
	height:16px;
	background:url(../images/right.gif) no-repeat;
	float:left;
	margin:45px 0px 0px 0px;
	cursor:pointer;
	font-size:1px;
}


/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -16px;		
}

/* disabled navigational button */
a.disabled {
	/*visibility:hidden*/  !important;	
	background-position:0px -32px;
}
a.disabled:hover{
	background-position:0px -32px;
}

/* next button uses another background image */
a.next, a.nextPage {
	width:16px;
	background-image:url(../images/right.gif);
	clear:right;
}

.navbox{
	display:block;
	width:15px;
	height:16px;
	margin:45px 0px 0px 0px;
	background-image:url(../images/bg_box.gif);
	background-repeat: repeat-x;
	float:left;
}

.navbox_whole{
	display:block;
	width:15px;
	height:16px;
	margin:45px 0px 0px 0px;
	background-image:url(../images/bg_box_whole.gif);
	background-repeat: repeat-x;
	float:left;
}



/*********** navigator ***********/


/* position and dimensions of the navigator */
/*div.navi {
	margin:10px auto;
	width:50px;
	height:20px;
	visibility:hidden;
}/*


/* items inside navigator */
div.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../images/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
div.navi a:hover {
	background-position:0 -16px;      
}

/* active state (current page state) */
div.navi a.active {
	background-position:0 -16px;     
} 	


/*
--------------------------------------------------------------
PROJECT PAGE
---------------------------------------------------------------
*/

#project_left{
	width:585px;
	float:left;
}

#project_right{
	width:270px;
	margin-left:45px;
	float:right;
}

.clear{
	clear:both;
}

.project_title{
	font-size: 14px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #2F2520;
    padding-bottom:12px;
	letter-spacing: 0.15em;
}
.project_description{
	padding-top:12px;
	line-height: 145%;
}

/*
--------------------------------------------------------------
NAV BOX 4pix line test
---------------------------------------------------------------
*/
.navlistbg{
	width:84px;
	height:24px;
	background-image:url(../images/nav_list_bg.gif);
	position:absolute;
	top:521px;
	left:-4px;
	z-index: -99;
}