/* @override 
	http://dev.smallsociety.com/styles/projects.css
*/

/* @group Selector */



#project-selector {
	padding-left: 79px;
	height: 140px;
	background: url(project-selector.png);
	position: relative;
}

#project-selector h3 {
	height: 31px;
	margin: 0;
	text-indent: -10000px;
}

html.js #project-scrollbox {
	overflow: hidden;
	width: 610px;
	-webkit-user-select: none;
}

/* @group Prev / Next buttons */

#project-selector .project-screen-button {
	width: 69px;
	top: 31px;
	height: 104px;
	position: absolute;
	margin: 0;
	text-indent: -10000px;
}

#project-selector .project-screen-button.disabled {
	display: none;
}

#project-selector #next-project-screen-button {
	right: 10px;
}

#project-selector #previous-project-screen-button {
	left: 10px;
}

#project-selector .project-screen-button a {
	background-image: url(next-project-button.png);
	display: block;
	width: 69px;
	height: 104px;
}

#project-selector #next-project-screen-button a {
	background-position: top right;
}

#project-selector #previous-project-screen-button a {
	background-position: top left;
}

#project-selector #next-project-screen-button a:hover {
	background-position: right 100px;
}

#project-selector #previous-project-screen-button a:hover {
	background-position: left 100px;
}

/* @end */

html.js #project-selector ul {
	margin: 0;
	padding: 0;
	width: 1830px;
	height: 107px;
}

html.js #project-selector .project-icon {
	display: block;
	width: 121px;
	height: 104px;
	text-align: center;
	float: left;
	margin-left: 1px;
	list-style-type: none;
	text-shadow: #fff 0 1px 0;
}

html.js #project-selector .project-icon a {
	display: block;
	width: 121px;
	height: 104px;
	text-decoration: none;
	color: #6e6e6e;
}

html.js #project-selector .project-icon a:link, html.js #project-selector .project-icon a:visited {
	background: transparent url(project-selector-normal.png) no-repeat;
}

html.js #project-selector .project-icon a.current:link,
html.js #project-selector .project-icon a.current:visited {
	background: transparent url(project-selector-selected.png) no-repeat;
	color: #262626;
}

html.js #project-selector .project-icon a:hover {
	background: transparent url(project-selector-hover.png) no-repeat;
	color: #4b4b4b;
}



#project-selector .project-icon img {
	width: 57px;
	height: 57px;
	margin-top: 17px;
}

#project-selector .project-icon span {
	display: block;
	margin: 0;
}

/* @end */

/* @group Content */

html.js .content {
	position: relative;
	height: 600px;
}

html.js .content div.project {
	margin-left: 350px;
	margin-right: 40px;
	padding-top: 50px;
}

html.js #screenshot-viewer {
	width: 340px;
	height: 600px;
	background: url(screenshot-iphone.png);
	position: relative;
	float: left;
	-webkit-user-select: none;
}

html.js #screenshot-viewer div.scroller {
	top: 114px;
	left: 56px;
	height: 360px;
	width: 240px;
	position: absolute;
	overflow: hidden;
}

html.js #screenshot-viewer div.scroller div {
	background: black;
	width: 100000px;
	height: 360px;
}


html.js #screenshot-viewer img {
	height: 360px;
	width: 240px;
}

html.js div#screenshot-viewer-controls {
	width: 240px;
	text-align: center;
	position: absolute;
	left: 57px;
	height: 360px;
	color: white;
	top: 114px;
}

html.js div#screenshot-viewer-controls a {
	display: block;
	width: 120px;
	height: 360px;
	position: absolute;
	background-image: url(screenshot-control-normal.png);
	background-position-y: 150px;
	background-repeat: no-repeat;
	text-indent: -10000px;
}

html.js div#screenshot-viewer-controls a:hover {
	background-image: url(screenshot-control-highlight.png);
	color: black;
}

html.js div#screenshot-viewer-controls a.previous {
	left: 0;
	background-position: 50px 200px;
	
}

html.js div#screenshot-viewer-controls a.next {
	right: 0;
	background-position: -70px 200px;
}

html.js div#screenshot-viewer-controls a.disabled {
	background-image: url(screenshot-control-disabled.png);
}


/* @end */

#top-decor {
	background: #ccc url(top-white.png) left;
	height: 10px;
}

#bottom-decor {
	background: #ccc url(white-bottom.png) top left;
	height: 20px;
}