/*=========> CSS Tribe <===========*/
/*=========> copyright Robarov <===========*/

*{
/* all fonts to a uniform size, including form fields,headings etc. */
	font-size:100%;
	margin:0;
	padding:0;
}

body{
	font-family: "Lucida Sans Console", Arial, Verdana, Helvetica, Geneva, sans-serif;
	font-size: 70%; /* relative fonts; 70% ~ 11pt */
	line-height: 1.8em;
	color:#fff;
	text-align:center; /*IE 5 center */
	background:#7d4092;
}
/*
body#home{background:#333 url(../i/layout/wheel.jpg) top center;}
body#over-tribe{background:#333 url(../i/layout/concrete.jpg) top center;}
body#collectie-meubelen{background:#26ade4 url(../i/layout/bg-wood.jpg) top center;}
body#your-tribe{background:#333 url(../i/layout/rust.jpg) top right;}
body#contact{background:#333 url(../i/layout/tree.jpg) top center;}
*/
body#home{background:#333 url(../i/background/home.jpg) top center;}
body#over-tribe{background:#333 url(../i/background/over-tribe.jpg) top center;}
body#werk-tribe{background:#26ade4 url(../i/background/werk-tribe.jpg) top center;}
body#your-tribe{background:#333 url(../i/background/your-tribe.jpg) top right;}
body#contact{background:#333 url(../i/background/contact.jpg) top center;}
body#nieuws{background:#333 url(../i/background/nieuws.jpg) top center;}

.hide, #hdr{
/* When you want to hide your elements use this. (NOT display:none;) search engine friendlyness ;) */
	position:absolute;
	left:-9999px;
	width:0px;
	overflow:hidden;
}
.border{border: 10px solid #000;}
#home .border{border: 14px solid #000;}


/*=========> Main Headings <===========*/
h2, h3{font-weight:normal;}
h1{
	font-size:1.4em;
	line-height:1.2em;
	text-transform:uppercase;
	clear:both;
}
h2{
	font-size:1.5em;
	line-height:1.8em;
}
/*=========> Lists : ol ul dl <===========*/
ol,#content ul{margin:1em 0 1.3em 0;}
ul{list-style-type:none;}

#content li{
	padding:0 0 0 16px;
	margin:0.3em 0;
	background:transparent url(../i/layout/bullet.gif) 0 0.2em no-repeat;
}

/*=========> Images <===========*/
img {
	border:none;
	behavior: url("/pngbehavior.htc");
}


/*=========> Links <===========*/
a{
	color:#fff;
	outline:none;
}
a:hover{
	color:#fff;
	text-decoration:underline;
}

/*=========> Container <===========*/
#container{
	position:absolute;
	left:50%;
	top:50%;
	width:770px;
	height: 500px;
	text-align:left;
	margin-left:-385px;
	/*\*/
	margin-top:-220px;
}

#container #logo{
	/*background:transparent url(../i/layout/logo.png) 0 0 no-repeat;*/
	position:absolute;
	float: right;
	top:36px;
	right:0px;
}
* html #container #logo{background:transparent;}
/*=========> Navigation <===========*/
#nav{
	position:absolute;
	top:-40px;
	left: 100px;
}
#nav li{
	float:left;
	text-transform:uppercase;
	border-right:1px solid #e3e3e3;
	text-align:center;
	font-weight:bold;
	font-size:1.2em;
	letter-spacing:1px;
	line-height:1.2em;
	margin: 0px;
	padding: 0px;
}
#nav li a, #nav .active li a {
	display:block;
	float:left;
	padding: 0 1em;
	color: #fff;
	text-decoration: none;
}
#nav li.last, #nav li.last-active {border-right:none;}
#nav a:hover, #nav .active a, #nav .active .active a{color:#f00;text-decoration:none;}

#nav ul {
	width: 760px;
	float: left;
	position: absolute;
	top: 30px;
	left: 0px;
	}
#nav li li {
	font-size: 1em;
}

/*=========> Content <===========*/
body#contact #content{padding-top:80px;padding-left:50px;width:200px;}
#content{
	width:250px;
	position:absolute;
	top:10px;
	right:0px;
	padding-top:80px;
	font-size:1.1em;
}
#content p{
	margin-bottom: 15px;
}
#home #content p{
	text-transform:uppercase;
	font-size:1.1em;
	font-weight:600;
	line-height:1.8em;
}
#content2 {
	width:500px;
	position:absolute;
	top:40px;
	left:0px;
}
body#your-tribe #content2 li{
	font-weight: bold;
	font-size:1.4em;
	line-height:1.2em;
	text-transform:uppercase;
	padding: 5px;
	margin: 5px;
}
body#your-tribe #content2 li.viewed{
	font-weight: normal;
}

/*=========> Projects <===========*/
#sloophout-meubelen #content2, #over-tribe #content2 {padding-left: 80px;}

.project{
	position:relative;
	margin:0px;
	float:left;
	display: inline;
}

.project img {
	border: 10px solid #000;
	margin: 0 14px 15px 0;
}

.project div{
	display:none;
}
.show h2{font-weight: bold;}
.show h2, .show p{font-size:1em;}
.show div{
	position:absolute;
	top:60%;
	left:60%;
	display:block;
	background:#fff;
	padding:10px 20px;
	width:220px;
	color:#000;
	z-index:2;
	line-height:1.1em;
	text-align: left;
}


/*=========> Flick <===========*/
#description{float:left;width:190px;text-align:justify;}
#flick{
	color:#000;
	margin: 0;
	padding: 0;
	width: 350px;
	height: 410px;
	background: #000;
}
#swap {
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 1;
}

#flick img{
	width:320px;
	cursor:pointer;
}
#flick ul {
	position: absolute;
	padding: 345px 0 6px 0;
	margin: 0 0 0 15px;
	height: 40px;
}
#flick p{
	position:absolute;
	top:20px;
	left:20px;
	width:230px;
	padding:10px;
	background:#fff;
	opacity: 0.70;
	-moz-opacity:0.70;
	filter: alpha(opacity=70);
	text-align:center;
}
#flick li{
	float:left;
	margin: 0 10px 0 0;
	background:transparent;
	padding:0 10px 0 0;
}
#flick a img{
	z-index: 2;
}
#flick li a img{
	width:40px;
	border:0px;
	margin: 10px 0 0 0;
	z-index: 10;
}
#flick li a{
	display:block;
	width:40px;
	height:40px;
}
#flick span a{
	position: absolute;
	left: 330px;
	bottom: 10px;
	color: #ddd;
	text-decoration: none;
}
#flick div{
	background: #000;
	width: 320px;
	padding:0 15px;
	position:relative;
	margin: -10px 0 0 0;
}

/*=========> Contact <===========*/
.floatl{
	width:250px;
	float:left;
}
.floatr{
	width:250px;
	float:right;
}
input, textarea{
	font-family:  Arial, Verdana, Helvetica, Geneva, sans-serif;
	font-size:1em;
	border: 1px solid #efefef;
	padding:2px 0;
	background: #fff;
	opacity: 0.7;
	-moz-opacity:0.7;
	filter: alpha(opacity=70);
}
input{width:240px;}

span.error{color:#e42323;font-size:.9em;background:#fff;}
fieldset{border:none;}
form div {margin: 0 0 .6em 50px;}
form label {display:block;}
form div.cr label{display:inline;}
div.cr input{
	background: transparent;
	border: 0px;
	width: auto;
}
#message{width:100%;}
#submit{
	background:#000;
	color:#FFF;
	float:right;
	width:100px;
	height:30px;
	border:none;

}
.attention{
	background:#ffddd8;
	border-top:1px solid #e00000;
	border-bottom:1px solid #e00000;
	padding: 5px 10px;
	margin:0 0 20px 0;
	color:#e00000;
}
.attention li{
	background:url(../i/layout/attention.gif) 0 0  no-repeat;
	padding:0 0 0 20px;
}


/*=========> about <===========*/
.about{
	position:relative;
	width:245px;
	float:left;
	display: inline;
	margin-right: 10px;
}
.about p, #caption{
	display:none;
}

#about1, #about3{text-align:right;}
#about1{margin-top:20px;}
#about3{margin-top:-50px;}
#about2{width:160px;margin-bottom: 10px;}
#about4{width:135px;}

#caption.show{
	position:absolute;
	top:280px;
	left:295px;
	display:block;
	background:#fff;
	padding:10px 10px;
	width:300px;
	color:#000;
	font-size: 1.1em;
	z-index:2;
	line-height:1.1em;
	text-align:left;
}
.show2 p{
	position:absolute;
	top:75%;
	left:65%;
	display:block;
	background:#fff;
	padding:10px 10px;
	width:220px;
	color:#000;
	font-size: 1.1em;
	z-index:2;
	line-height:1.1em;
	text-align:left;
}

/*=========> your tribe <===========*/
.detail, #mylist{
	margin: 0;
	position: relative;
	background-color: #574747;
	border-bottom: 2px solid #000;
	filter:alpha(opacity=70);
	opacity: 0.7;
	-moz-opacity:0.7;
	width: 100%;
}
dl {
	margin: 0 20px 15px;
	text-transform: uppercase;
 }
dt {
	width: 20em;
	padding: .3em;
	float: left;
	margin: 0;
	border-top: 1px solid #000;
	font-weight: bold;
}
dd	{
	margin-left: 21em;
	padding: .3em;
	border-top: 1px solid #000;
}
#mylist a{
color: #ec6420;
}
#mylist a:hover{color: #fff;}
#content2 .detail h2, #mylist h2{
	background: #000;
	padding:4px 20px 4px 20px;
	margin:0 0 10px 0;
	color: #ec6420;
	font-weight: bold;
}
.date {position: absolute; top: 10px; right: 20px;margin: 0px;padding: 0px;font-size: 0.9em;}

.detail p{padding:0 20px;}
.detail ul {
  _height:1%;
  overflow:auto;
  padding:0 20px;
}
.detail ul li{float:left;padding:5px;}


.itemnav{
	background-color: #000;
	font-size: 0.9em;
	text-align: right;
}
.itemnav a{
	text-decoration: none;
}


/*=========> Nieuws <===========*/
#nieuws #content2{
	width: 770px;
	position: absolute;
	top: 80px;
	left: 0px;
	font-size:1.1em;
}
#nieuws #content {display: none;}

.newsitem {
	position: relative;
	width: 240px;
	padding: 0 10px 10px 130px;
	float: left;
	display: inline;
	background: transparent;
	color: #fff;
	min-height: 120px;
	height: auto !important;
	height: 120px;
}
.newsitem a {
	color: #fff;
	text-decoration: none;
}
.newsitem a:hover {
	text-decoration: underline;
	color: #fff;
}
.date-cat {
	position: absolute;
	right: 0px;
	top: 10px;
}
.newsitem h1 {
	font-weight: bold;
	text-transform: uppercase;
	font-size:1.4em;
	line-height:1.2em;
}
.newsitem img {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0;
	border: 10px solid #000;
}
.newsdetail img {
	border: 10px solid #000;
	float: right;
	margin: 0 0 0 12px;
}
.back  {
	margin: 10px 0;
}
.back a {
	display: block;
	float: left;
	padding: 0 20px;
	height: 24px;
	line-height: 24px;
	color: #fff;
	background: #000;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	font-size: 0.9em;
}
.back a:hover {text-decoration: underline;}
/*=========> Footer <===========*/
#footer{
	clear:both;
	font-size:.9em;
}
.viewed{
	color: #E4CDAE;
}



#slide {
	background: #000 url(../i/loading_product.gif) 50% 50% no-repeat;
	text-align: center;
	width: 420px;
	height: 344px;
	position: relative;
	float: left;
	display: inline;
}
#slide img {
	background: #000;
	float: left;
	width: 420px;
}
#slider {
	background: #000;
	border: 14px solid #000;
	width: 420px;
	height: 320px;
	position: relative;
}
#slider .slide {
	background: #000;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 420px;
	height: 320px;
	overflow: hidden;
	text-align: center;
}
#slider .slide {
	width: 420px;
}
.slide img {margin: 0 auto;}
#extra_slides {
	position:absolute;
	left:-9999px;
	width:0px;
	overflow:hidden;
}

#content ul.rel_links { padding: 0; }
#content ul.rel_links li { padding: 0; }