/*
References 

Width - 300px
gutter - 20px

*/


body {
	margin: 20px 0 0 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #4e4e50;
	line-height: 1.5em;
	background:url(images/bg.png) repeat-x;
}

/* ********************** */
/*          Links         */
/* ********************** */

a { 
	color: #2cc9b1; 
	font-weight:bold; 
}

a:hover {
	color:#666;
}

/* ********************** */
/*        Structure       */
/* ********************** */

#container {
	width: 960px;
	margin: 0 auto;
}

#logo, #description, #list {
	width: 300px;
	float:left;
	margin: 0 20px 0 0;
	border-bottom: 1px solid #737374;
	height: 40px;
}

#header {
	float:left;
}

#list {
	margin: 0;
}

#logo {
	border-bottom: 5px solid #737374;
}

#content-footer {
	float:left;
	background: #f1f2f2;
	padding: 30px 0 0 0;
	margin: 20px 0 0 0;
}

#content-f-left, #content-f-center, #content-f-right {
	float:left;
	width: 300px;
	margin: 0 20px 0 0;
}

#footer {
	background: #f1f2f2;
	float: left;
	width: 940px;
	padding: 20px 0 20px 0;
	color: #939393;
	margin: 20px 0 0 0;
}

#footer-left, #footer-center, #footer-right {
	width: 300px;
	border-top: 1px solid #babcbf;
	margin: 0 20px 0 0;
	float:left;
	padding: 5px 0 0 0;
}

#footer-right {
	margin: 0;
}

#content-f-right {
	margin: 0;
}

/* ************************* */
/*          Typography       */
/* ************************* */

h1 {
	margin: 0 0 10px 0;
}

h2 {
	font-size: 17px;
	font-weight:bold;
	text-transform:uppercase;
}

strong {
	font-weight: bold;
}

p {
	margin: 0 0 10px 0;
}

/* ********************** */
/*          Forms         */
/* ********************** */

select {
	background:#FFF;
	padding: 3px;
	width: 300px;
	border: 1px solid #8c8c8c;
	color:#333;
}

option.chosen {
	font-weight:bold;
}

/* ******************************* */
/*          Home Scroller         */
/* ****************************** */

#scroller {
	float:left;
	width: 940px;
	margin: 50px 0 0 0;
}

#slider {
  width: 940px;
  margin: 0 auto;
  position: relative;
}

.scroll {
  height: 220px;
  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;
}

.scrollContainer div.panel {
  height: 210px;
  width: 140px; /* change to 560px if not using JS to remove rh.scroll */
  padding: 0 0px 0 15px;
}

.scrollButtons {
  position: absolute;
  top: 150px;
  cursor: pointer;
}

.scrollButtons.left {
  left: -70px;
  z-index: 2;
  top: 89px;
  border-right: 1px solid #999;
  padding: 0 10px 0 0;
}

.scrollButtons.right {
  right: -50px;
  top: 89px;
  z-index: 2;
  border-left: 1px solid #999;
  padding: 0 0 0 10px;
}

/* ********************** */
/*          Lists         */
/* ********************** */

ul {
	float: left;
}

li {
	width: 140px;
	display:block;
	margin: 0 10px 0 0;
}

li.triangle {
	margin: 0 0 0px 0;
	height: 150px;
}

li.name {
	font-weight: bold;
	margin: 0 0 0px 0;
}

#footer li {
	float:left;
	width: auto;
}

/* ******************************* */
/*          Profile Styles         */
/* ****************************** */

#profile {
	float:left;
	width: 940px;
	margin: 50px 0 0 0;
}

#profile-col-left {
	float:left;
	width: 300px;
	margin: 0 20px 0 0;
}

#profile-col-right {
	float:left;
	width: 620px;
}

#profile-name {
	width: 115px;
	float:left;
	margin: 0 15px 0 0;
}

#profile-description {
	width: 170px;
	float:left;
}

.work-piece, .work-piece-left {
	float:left;
	width: 300px;
	height: 450px;
	margin: 0 0 20px 0;
}

.work-piece-left {
	margin-right: 20px;
}

.profile-contact {
	padding: 20px 0 0 0;
}

#profile-back {
	float:left;
	width: 170px;
	border-top: 1px solid #babcbf;
	margin: 80px 0 0 0;
	padding: 10px 0 0 130px;
}