/* The basics */
#content-port {
	font: normal 11px/16px "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	color: #ffffff;
}
h4 {
	font-size: 14px;
	font-weight: lighter;
	color:#FFFFFF;
	margin:10px 0 18px 0;
}
p {
	margin:0 0 18px 0;
}
#content-port li {
	margin: 0 0 8px 0;
	list-style-type: none;
}
 
a {
	text-decoration: none;
	font-weight: bold;
	color:#ffffff;
}

/* Helpers */
.last, div.last, #footer div.last {
	margin-right: 0;
}

/* Main content region */
.wrapper {
	width: 940px;
	/* _width:939px;  fudge IE6 */
	margin: 0px auto;
	clear:both;
}
 
.slidable-page {
	z-index: -1;
	padding:50px 0px 0px 70px;

}
.slidable-page .wrapper {
	min-height: 600px;
}



/* Preload background images after JS loads */
#preload {
	display: none;
}


 
 
/* Work */
#work-page {
	
}
#work-page .wrapper {
	width: 780px;
}
#work-page #circles {
	
}
.work-sample {
	background: #9ecb3b;
	width: 240px;
	height: 150px;
	float: left;
	margin: 0 30px 30px 0;
	cursor: pointer;
}
.work-sample h2 {
	font-size:16px !important;
	margin: 20px 0 0 20px !important;
	font-family:"Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
}
div.info h4 {
	color:#535353;
	font-weight:bold;
}
.work-number {
	background: url("../images/work-numbers.png") no-repeat 0 0;
	width: 220px;
	height: 80px;
	padding: 0px 10px 10px;
}
.work-sample .two {
	background-position: 0 -140px;
}
.work-sample .three {
	background-position: 0 -280px;
}
.work-sample .four {
	background-position: 0 -420px;
}
.work-sample .five {
	background-position: 0 -560px;
}
.work-sample .six {
	background-position: 0 -700px;
}
#work-sample-one {
	background-color: #3366cc;
}
#work-sample-two {
	background-color: #333;
}
#work-sample-three {
	background-color: #3366cc;
}
#work-sample-four {
	background-color: #333;
}
#work-sample-five {
	background-color: #3366cc;
}
#work-sample-six {
	background-color: #333;
}
.work-sample:hover {
	background-color: #3366cc;
}
#flip-side a {
	color: #000000;
	text-decoration: none;
}
#flip-side a:hover {
	text-decoration: underline;
}
.close-flip {
	background: url("../images/close.png") no-repeat 0 0;
	width: 83px;
	height: 30px;
}
.close-flip span {
	display: none;
}

/* The work sample "flip side", initially hidden div */
#flip-side {
	position: absolute;
	z-index: 1000;
	width: 201px;
	min-height: 150px;
}
.flip-content {
	display: none;
}
#flip-side .screenshot {
	background-color: #3498d7;
	width: 49.9%;
	height: 100%;
	float: left;
	overflow: hidden;
	text-align: center;
}
#flip-side .screenshot img {
	height: 100%;
	border:0;
}
#flip-side .info {
	background-color: #FFF;
	color: #333;
	width: 50%;
	height: 100%;
	float: right;
}
#flip-side .actions {
	color: #296eb5;
}

#flip-side .info .wrapper {
	width: 90%;
	height: 80%;
	margin: 0 auto;
	padding: 0px 0px;
}
#flip-side h3 {
	font-size: 14px;
	color: #1b5aaa;
	font-weight: bold;
	
}
#flip-side p {
	margin-bottom: 15px;
}
#flip-side .info a.close-flip {
	position: absolute;
	right: 10px;
	bottom: 10px;
}
.work-sample h1 {
	font-size: 20px; 
	margin-bottom: 15px;
}