/*

  Slim Pickings

*/



/* -------------------- Reset -------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* -------------------- Basic Styles -------------------- */
body, html {
  height: 100%;
  color: #fff;
  background: #090909;
  font-family: arial, verdana, sans serif;
}


/* -------------------- Header -------------------- */
#index #container {
	width: 950px;
	position: relative;
	margin: 0 auto;
}

#index  #header {
  width: 950px;
  height: 190px;
	position: absolute;
}

#header img {
  padding-top: 20px;
  float: left;
}

.nav li {  
  float: left; 
  padding-right: 20px;
}  

.nav li.contact {  
  float: left; 
  padding-right: 0;
}  

.nav a, .nav span {  
  display: block;  
  overflow: hidden;  
  text-indent: -99999px;  
}  

#header .nav {  
  float: right;  
  padding-top: 164px;
}  

#header .nav a, #header .nav span {  
  height: 14px;  
  background: url(/images/nav/navigation.gif) no-repeat;  
}  

#header .nav li.home a {background-position: 0 0; width: 40px;}  
#header .nav li.home a:hover {background-position: 0 -14px;}  
#header .nav li.home span {background-position: 0 -28px; width: 40px;}  

#header .nav li.web a {background-position: -40px 0; width: 27px;}  
#header .nav li.web a:hover {background-position: -40px -14px;}  
#header .nav li.web span {background-position: -40px -28px; width: 27px;}  

#header .nav li.print a {background-position: -67px 0; width: 35px;}  
#header .nav li.print a:hover {background-position: -67px -14px;}  
#header .nav li.print span {background-position: -67px -28px; width: 35px;}  

#header .nav li.contact a {background-position: -102px 0; width: 66px;}  
#header .nav li.contact a:hover {background-position: -102px -14px;}  
#header .nav li.contact span {background-position: -102px -28px; width: 66px;}  


/* -------------------- Index -------------------- */
#index #content {
  padding-top: 140px;
}


/* -------------------- Portfolio -------------------- */
#portfolio #container {
  width: 950px;
  margin: 0 auto;
  padding: 0 0 100px 3px;
  overflow: hidden;
}

#portfolio #header {
  height: 187px;
}

#portfolio  #content {
  padding-top: 3px;
}

#portfolio #content div {
  width: 276px;
  height: 270px;
  float: left;
  position: relative;
}

 #portfolio #content div.center {
  margin: 0 61px 0 61px;
}

#portfolio #content div img.heading {
  padding: 15px 0 2px 0;
}

div.case li {  
  float: left;  
}  

div.case li a, div.case li span  {  
  display: block;  
  height: 12px;  
  overflow: hidden;  
  text-indent: -99999px;  
}  

div.case li.details a {background: url(/images/nav/view-launch-5.gif) no-repeat; background-position: 0 0; width: 74px;}  
div.case li.details a:hover, div.case li.details a.hover {background-position: 0 -12px;}  

div.case li.launch a {background: url(/images/nav/view-launch-5.gif) no-repeat; background-position: -75px 0; width: 74px;}  
div.case li.launch a:hover  {background-position: -75px -12px;}  

div.case li.brochure span {background: url(/images/nav/print-media.gif) no-repeat; background-position: 0 0; width: 62px;}  
div.case li.business-card span {background: url(/images/nav/print-media.gif) no-repeat; background-position: 0 -12px; width: 86px;}  
div.case li.flyer span {background: url(/images/nav/print-media.gif) no-repeat; background-position: 0 -24px; width: 34px;}  
div.case li.leaflet span {background: url(/images/nav/print-media.gif) no-repeat; background-position: 0 -36px; width: 44px;}  
div.case li.newspaper span {background: url(/images/nav/print-media.gif) no-repeat; background-position: 0 -48px; width: 67px;}  
div.case li.magazine span {background: url(/images/nav/print-media.gif) no-repeat; background-position: 0 -60px; width: 62px;}  
div.case li.lightbox span {background: url(/images/nav/print-media.gif) no-repeat; background-position: 0 -72px; width: 57px;}  

div.case li.large-view a {background: url(/images/nav/print-media.gif) no-repeat; background-position: -86px 0; width: 70px;}  
div.case li.large-view a:hover, div.case li.large-view a.hover  {background-position: -86px -12px;}  

#portfolio #content div.shop {
	position: absolute;
	top: -3px;
	left: -3px;
	height: 59px;
	width: 74px;
  background: url(/images/content/shop.png) no-repeat;
}


/* -------------------- Case -------------------- */
#case #container {
  width: 950px;
  margin: 0 auto;
  padding-bottom: 100px;
}

#case #header {
  height: 190px;
}

#case #header .nav li.web {
  padding-right: 17px;
  background: url(/images/nav/slash.gif) no-repeat right;
}  

#case .nav li.anne-kuntsi span {background: url(/images/nav/anne-kuntsi.gif) no-repeat; width: 87px;}  
#case .nav li.darina span {background: url(/images/nav/darina.gif) no-repeat; width: 52px;}  
#case .nav li.diegodallapalma span {background: url(/images/nav/diegodallapalma.gif) no-repeat; width: 141px;}  
#case .nav li.eboutique span {background: url(/images/nav/eboutique.gif) no-repeat; width: 73px;}  
#case .nav li.energiakeskus-indigo span {background: url(/images/nav/energiakeskus-indigo.gif) no-repeat; width: 164px;}  
#case .nav li.energiakeskus-indigo-2 span {background: url(/images/nav/energiakeskus-indigo-2.gif) no-repeat; width: 173px;}  
#case .nav li.huoneistovalinta span {background: url(/images/nav/huoneistovalinta.gif) no-repeat; width: 132px;}  
#case .nav li.kokopelli-jewelry span {background: url(/images/nav/kokopelli-jewelry.gif) no-repeat; width: 132px;}  
#case .nav li.pr-coaching span {background: url(/images/nav/pr-coaching.gif) no-repeat; width: 100px;}  
#case .nav li.vihrea-tila span {background: url(/images/nav/vihrea-tila.gif) no-repeat; width: 79px;}  
#case .nav li.zadonna span {background: url(/images/nav/zadonna.gif) no-repeat; width: 70px;}  


/* -------------------- Contact -------------------- */
#contact #container {
  width: 950px;
  margin: 0 auto;
  padding-bottom: 100px;
}

#contact #header {
  height: 190px;
}

#contact #content h1 {
  padding: 20px 0 40px 0;
}

#contact #content h1 {  
  display: block;  
  overflow: hidden;  
  text-indent: -99999px;  
  height: 113px;  
  width: 866px;
  background: url(/images/heading/contact2.gif) no-repeat;  
}  

#contact #content h1 a:hover {background-position: 0 -113px;}  

#contact #content table {
  width: 400px;
}

#contact #content label {  
  display: block;  
  overflow: hidden;  
  text-indent: -99999px; 
  height: 18px;
  background: url(/images/heading/contact-form.gif) no-repeat;  
}  

#contact #content label#name {background-position: 0 0; width: 53px;}  
#contact #content label#email {background-position: 0 -18px; width: 52px;}  
#contact #content label#captcha {background-position: 0 -36px; width: 110px;}  
#contact #content label#message {background-position: 0 -54px; width: 71px;}  

#contact #content input, #contact #content textarea {
  background: #222222;
  color: #ffffff;
  font-family: arial, verdana, sans serif;
  font-size: 14pt;
  padding: 7px 0 0 5px;
  border: 0;
  
}

#contact #content .name, #contact #content .email {
  width: 295px;
  height: 29px;
  margin-bottom: 20px;
}

#contact #content td.captcha {
  width: 155px;
  vertical-align: top;
}

#contact #content input.captcha {
  width: 140px;
  height: 29px;
  margin-bottom: 20px;
}

#contact #content td.captchaImg {
  vertical-align: top;
  float: left;
}

#contact #content .message {
  width: 400px;
  height: 150px;
  margin-bottom: 20px;
  overflow: auto;
}

#contact #content .submit {
  padding: 0;
}

#contact #content p.error {
  color: #ff0000;
  font-family: arial, verdana, sans serif;
  font-size: 12px;
  line-height: 150%;
  width: 400px;
  padding-bottom: 15px;
}


/* -------------------- Misc -------------------- */
.foo {
  border: solid 1px #00CCFF;
}

/* -------------------- Hacks -------------------- */

/* The belowed ie6 added a blue text link after content, 3px more width to the content div removed it which makes perfect sence as usual */
* html #portfolio #content {
  width: 953px;
}

* html  #portfolio #content div.shop {
  background: url(/images/content/shop.gif) no-repeat;
}