@charset "UTF-8";

/* •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
   ••  Project: leinehed.com                                        ••
   ••  Author:  hello@leinehed.com                                  ••
   ••  Date:    2010-10-08                                          ••
   •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••   

-- Common Elements ------------------------------------------------ */

a, a:link, 
a:visited{
	color: #3e575b;
	font-size: 12px;
	letter-spacing: 0.2pt;
	text-decoration: none;
	}

a:active, 
a:hover{
	color: #848fa4;
	font-size: 12px;
	letter-spacing: 0.2pt;
	text-decoration: underline;
	}
	
b{
	font-weight: bold;
	}	
	
body{
	background-color: #f2e8de;
	background-image: url(images/bg.png);
	background-repeat: repeat;
	color: #818181;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.5;
	margin: 10px auto 10px auto; 
	padding: 0px; 
	height: 100%; 
	}
	
h1, 
h1 a:link, 
h1 a:visited{
	color: #49433e;
	font-family: Georgia;
	font-size:25px;
	font-style: italic;
	font-weight: bold;
	line-height: auto;
	margin-bottom:0px;
	margin-top:10px;
	letter-spacing: -1px;
}

h2, 
h2 a:link, 
h2 a:visited {
	color: #49433e;
	font-family: Georgia;
	font-size:20px;
	font-style: italic;
	font-weight:bold;
	letter-spacing:-1px;
	margin: 10px 0 5px 0;
}
	
h3, 
h3 a:link, 
h3 a:visited {
	color: #c2915f;
	font-family: Georgia;
	font-size:15px;
	font-style: italic;
	font-weight:bold;
	letter-spacing:-0.5px;
	word-spacing: -2px;
	margin: 5px auto 5px auto;
	}

h4, 
h4 a:link, 
h4 a:visited {
	color:#49433e;
	font-family: Georgia;
	font-size:15px;
	font-style: italic;
	font-weight:bold;
	letter-spacing:-0.5px;
	line-height: 0pt;	
}	

/* -- Menu ----------------------------------------------------------- */
	
.menu{
	color:#737373;
	width: auto;
	height: 40px;
	background-color: white;
	padding: 0 0px 0 20px;
	margin: 20px 0 0 30px;
	}

.menu ul{
	list-style:none;
	margin:0;
	padding:0;
	}

.menu li {
	float:left;
	width:auto;
	margin:0;
	text-align:center;
	}

.menu li a {
	color: #999;
	font-size: 12px;
	display:block;
	height:100%;
	text-decoration:none;
	padding: 10px;
	}

.menu li a:hover {
   color: #d7b797;
	background-color: #000;
	}

/* -- Custom Elements ------------------------------------------------ */

.container{
	width: 960px;
	height: 430px;
	margin: 0px auto 0px auto;
	background-color: white;
	padding: 0 20px 0 20px;
	}

.container-menu{
	background-color: white;
	padding: 5px 20px 0 20px;
	margin: 0px auto 0px auto;
	width: 960px;
	height:70px;
	}
		
.container-text{
	background-color: white;
	padding: 10px 20px 0 20px;
	margin: 0 auto 0 auto;
	width: 960px;
	height:480px;
	border-bottom: 1px solid #ccc;
	}

.container-description{
	background-color: white;
	padding: 10px 20px 0 20px;
	margin: 0 auto 0 auto;
	width: 960px;
	height:310px;
	border-bottom: 1px solid #ccc;
	}
	
.container-work{
	background-color: white;
	padding: 10px 20px 0 20px;
	margin: 0 auto 0 auto;
	width: 960px;
	height:600px;
	border-bottom: 1px solid #ccc;
	}

.container-generic{
	background-color: white;
	padding: 10px 20px 0 20px;
	margin: 0 auto 0 auto;
	width: 960px;
	border-bottom: 1px solid #ccc;
	}
	
.column-left{
	width:300px;
	height:auto;
	float:left;
	}	
	
.column-right{
	width:auto;
	height:auto;
	float:right;
	}	
	
.block-beige{
	width:156px;
	height:58px;
	float:right;
	line-height: 0pt;
	padding-top: 0px;
	margin: 10px 0 0 2px;
	border: solid 1px #fff;
	}			
	
.block-beige h3{
	font-size: 14px;
	line-height: 0pt;
	margin: 15px 0 0 0;
	}
	
.block-black{
	background-color:#000;
	background-image:url(images/blackblock.jpg);
	background-repeat:no-repeat;
	width:140px;
	height:60px;
	float:left;
	line-height: 0pt;
	padding-top: 0px;
	margin: 10px 0 0 0;
	}			

.block-black h1, 
.block-black h1 a:link, 
.block-black h1 a:visited{
	color: #fff;
	font-family: Georgia;
	font-size:20px;
	font-style: italic;
	font-weight:bold;
	letter-spacing:-1px;
	line-height: 0pt;
	margin: 10px 0 10px 0;
	}

.block-black h3{
	margin-top: -7pt;
	letter-spacing:-1px;
	}
	
.block-grey{
	height: 330px;
	width:189px;
	float:left; 
	line-height: 1.5;
	letter-spacing: 0.1px;
	float:left;
	margin: 0 0 0 0;
	padding:0px 20px 10px 20px; 
	border-left: 1px dotted #ccc;
	}
	
.block-pink{
	width:180px;
	height:auto;
	font-size: 10px;
	font-variant:small-caps;
	font-weight:bold;
	color: #fff;
	line-height: 1.1;
	letter-spacing: 0.1px;
	text-align: center;
	text-transform: uppercase;
	padding:10px; 
	margin: 0 0 0 0;
	background: #d46f5d; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d46f5d', endColorstr='#ae5646'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#d46f5d), to(#ae5646)); /* for webkit browsers */
	background: -moz-linear-gradient(top, #d46f5d, #ae5646); /* for firefox 3.6+ */
	-moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
	}
	
.block-pink h3{
	color: #fff;
	font-size: 18px;
	margin: 3px 0 0 0;
	text-transform: none;
	}

.block-pink h4{
	color: #fff;
	font-size: 12px;
	margin: 0;
	text-transform: none;
	}	
	
.tagline{
	position: relative;
	padding: 10px 0 0 10px;
	margin: 0 0 0 0;
	}
	
.blog{
	color: #9b9b9b;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: -0.5px;
	margin: 0;
	padding: 0 0 0 20px;
	height: 350px;
	width: 210px;
	float: left;
	border-left: 1px dotted #ccc;
}

.blog a:link, 
.blog a:visited {
	color: #c2915f;
	font-family: Georgia;
	font-size:14px;
	font-style: italic;
	font-weight:bold;
	letter-spacing:-1px;
	}

.blog a:hover, 
.blog a:active {
	color: #ccc;
	}
	
.blog ul{
	list-style: none;
	padding: 0;
	margin: 0;
	} 
	
.blog div{
	padding-bottom: 15px;
	} 
	
.infobox {
	color: #d7b797;
	font-size: 12px;
	font-variant: small-caps;
	font-weight: bold;
	line-height: 1.1;
	float: right; 
	width: 200px; 
	padding: 3px 10px 10px 10px; 
	margin: 0px 10px 0 0;
	background-color:#d46f5d;
	background: #d46f5d; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d46f5d', endColorstr='#ae5646'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#d46f5d), to(#ae5646)); /* for webkit browsers */
	background: -moz-linear-gradient(top, #d46f5d, #ae5646); /* for firefox 3.6+ */
	-moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px; 
    border-radius: 3px;
	}
	
.infobox a, 
.infobox a:link {
	color: #fff;
	font-size:12px;
	}
	
.infobox a:active, 
.infobox a:hover {
	color: #ccc;
	font-size:12px;
	}

.infobox h3{
	color:#fff;
	padding-bottom:4px;
	}
	
/* -- Last.FM -------------------------------------------------------- */
		
.lastfm{
	color: #737373;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.5;
	margin: 0 10px 0 0; 
	padding: 0 0 0 20px; 
	height: 350px; 
	width: 230px;
	float: right;
	border-left: 1px dotted #ccc;	
	}

.lastfm ul{
	list-style: none;
	padding: 0;
	margin: 0;
	} 
	
.lastfm ul > li:first-child a {
	font-size:12px;
	color:#4c4c4c;
}

.lastfm ul > li:nth-child(2) a {
	font-size:11.5px;
	color:#555;
}

.lastfm ul > li:nth-child(3) a {
	font-size:11px;
	color:#5d5d5d;
}

.lastfm ul > li:nth-child(4) a {
	font-size:10.5px;
	color:#666;
}

.lastfm ul > li:nth-child(5) a {
	font-size:10px;
	color:#6e6e6e;
}

.lastfm ul > li:nth-child(6) a {
	font-size:9.5px;
	color:#777;
}

.lastfm ul > li:nth-child(7) a {
	font-size:9px;
	color:#7f7f7f;
}

.lastfm ul > li:nth-child(8) a {
	font-size:8.5px;
	color:#888;
}

.lastfm ul > li:nth-child(9) a {
	font-size:8px;
	color:#909090;
}

.lastfm ul > li:nth-child(10) a {
	font-size:7.5px;
	color:#999;
}	
	
#creditfooter{
	display:none;
	}	

/* -- Individual Project Pages ----------------------------------------- */

.projectwrapper{
	width:960px;
	height:400px;
	margin-top:82px;
	background-color:#000;
	}
	
.wrapper-description{
	width:960px;
	height:400px;
	margin-top:10px;
	}
	
.wrapper-description h2{
	margin:5px 0 5px 0;
	}

/* -- Image Slider ------------------------------------------------------ */
	
/*--Main Container--*/
.main_view {
	width: 960px;
	height: 400px;
	float: left;
	position: relative;
	margin:0;
}
/*--Window/Masking Styles--*/
.window {
	width: 960px;
	height:400px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
	margin-left:0px;
}
.image_reel {
	position: absolute;
	top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
	position: absolute;
	bottom: 4px; right: -6px;
	width: 80px; height:32px;
	z-index: 100; /*--Assures the paging stays on the top layer--*/
	text-align: center;
	line-height: 24px;
	background: url(images/paging-bg.png) no-repeat;
	display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
	padding: 1px 5px 1px 5px ;
	text-decoration: none;
	color: #fff;
}
.paging a.active {
	font-weight: bold;
	background: #d46f5d;
	border: 1px solid #0F0F0F;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.paging a:hover {font-weight: bold;}

/* -- Quicksand ------------------------------------------------------ */

#wrapper {
  width: 690px;
  margin: 5px 15px 0 auto;
  float: right;
}

#site {
  padding: 0px;
}

ul {
	padding-left: 0px;
}

/* -- Splitter ------------------------------------------------------- */

.splitter {
	width: 670px;
	height: 15px;
  	color: #f2e8de;
  	text-align: left;
  	margin:0 0 0 15px;
  	padding: 10px;
  	background-color: #0f0f0f;
}

.splitter li,
.splitter ul {
  display: inline;
  display: inline-block;
  line-height: 1;
  padding-left: 0px;
}


.splitter ul li a,
.splitter ul li a:link {
  padding: 5px 5px 6px;
  color: #d7b797;
  text-decoration: none;
}

.splitter ul li a:active, 
.splitter ul li a:hover, {
  padding: 5px 5px 6px;
  color: #d7b797;
  text-decoration: none;
}

/* -- Image Grid ----------------------------------------------------- */

.image-grid {
  margin: 0;
  width: 710px;
}

.image-grid:after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

.image-grid li {
  height: 130px;
  width: 220px;
  margin: 15px 0 0 15px;
  float: left;
  overflow: hidden;
}

.image-grid li img,
.image-grid li strong {
  display: block;
}

.image-grid li strong {
  color: #fff;
}