@charset "UTF-8";
/* grid */

.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:620px; }
.grid_9 { width:700px; }
.grid_10 { width:780px; }
.grid_11 { width:860px; }
.grid_12 { width:940px; }

.column {
	margin: 0 10px;
	overflow: hidden;
	float: left;
	display: inline;
}
.row {
	width: 960px;
	margin: 0 auto;
	padding: 10px 0;
	overflow: hidden;
}
.row .row {
	margin: 0 -10px;
	width: auto;
	display: inline-block;
}

/* main elements */
body { 
	margin: 20px 0 0 0;
	font:13px/1.6 "Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
	color: #222;
	background-color: #eee;
	}
h1, h2, p {
	margin:0;
	padding:0;
}
a {
	color: #933;
	text-decoration: none
	}

/* IDs */
#header h1 {
	font-size: 2em;
	font-family: Georgia;
	color: #933;
	}
#twitter, #portfolio, #tumble, #flickr, #words, #footer {
	border-top: 2px dashed #ccc;
	margin-top: 30px;
	}
#twitter h3 {
	float: left;
	}
#twitter li:first-child {
	font-size: 2em;
	}	
#twitter ul {
	text-align: center;
	font-family: Georgia, sans-serif;
	margin: 0;
	padding: 0;
	list-style: none;
	}
#tumble li {
	margin: 5px 0;
	padding: 0;
	list-style: none;
	}
#portfolio h4 {
	padding: 0;
	margin: 0;
	}
#portfolio img {
	border:0;
	}	
#words img {
	border:1px solid #ccc;
	padding: 2px;
	}
#footer {
	color: #ccc;
	text-align: right;
	font-size: 0.8em;
	}
#portfoliomain .thumbs p img{
	background-color: #eee;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius:5px;
	-moz-border-radius: 5px;
	-webkit-border-radius:5px;
	}
#portfoliomain .thumbs p{
	text-align: center;
	}

	

/* classes */
ul.contact {
	margin: 0;
	padding: 0;
	float: right;
	}
.contact li {
	margin: 0 20px;
	padding: 0;
	display: inline;
	float: left;
	}
.clearall {
	clear: both;
	}

.menu p:first-child {
	font-size: 1.4em;
	margin-bottom: 10px;
	}
.menu a {
	color: #fff;
	background-color: #333;
	text-decoration: none;
	font-family: "Courier New";
	}
.menu a:hover {
	text-decoration: underline;
	}
	
	

/* coda slider */
#slider {
	width: 618px;
	margin: 0 auto;
	background-color: #eee;
	
}
#portfoliopage #slider {
	width: 460px;
}


.scroll {
  height: 430px;
  overflow: auto;
  position: relative; /* fix for IE to respect overflow */
  clear: left;
  background: #FFFFFF url(images/content_pane-gradient.gif) repeat-x scroll left bottom;
}
#portfoliopage .scroll {
  height: 380px;


}

.scrollContainer div.panel {
  padding: 10px 0;
  height: 410px;
  width: 618px; /* change to 560px if not using JS to remove rh.scroll */
  }
  
#portfoliopage .scrollContainer div.panel {
  width: 460px; 
  height: 325px;


}
.scrollContainer div.panel div {
width:598px;
  margin: 0 auto;

}

#portfoliopage .scrollContainer div.panel div {
width:450px;

}

ul.navigation {
	width:610px;
	list-style-type:none;
	margin:0 auto;
	padding:0;
	margin-left: 5px;
	font-size: 2em;
	}
#portfoliopage ul.navigation {
	width:450px;
	}
.navigation li {
	float:left;
	list-style-type:none;
	padding:10px 5px;
	margin:0 auto;
	
}

ul.navigation a img {
	background-color: #ddd;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius:5px;
	-moz-border-radius: 5px;
	-webkit-border-radius:5px;
}
#portfolio p {
	clear: left;
}

/* portfolio */

#portfoliopage .caption p {
	font: 0.8em/1.6 "Georgia, Lucida Sans Unicode", "Lucida Grande", Helvetica, Arial, sans-serif;
	color: #666;
	}
.caption h5, .captionSlider h5 {
	margin: 10px 10px 0 10px;
	padding: 0;}
.caption p {
	margin: 0 10px;
	padding: 0;}
.captionSlider p {
	margin: 0 10px;
	padding: 0;}
	
#portfoliomain .thumbs p img {
	background-color: #eee;
	border: 1px solid #ccc;

  /* HOVER OFF */
   -webkit-transition: border 2s;
   -webkit-transition: background-color 2s;
}

#portfoliomain .thumbs p img:hover {
	background-color: #ccc;
	border: 1px solid #eee;

  /* HOVER ON */
   -webkit-transition: border 2s;
   -webkit-transition: background-color 2s;
}