#project-selector {
	padding-left: 40px;
	width: 900px;
	height: 105px;
	background: url(project-selector.png);
	position: relative;
}

#project-selector h3 {
	height: 0px;								/* offset from top of box */
	margin: 0px;
	text-indent: -10000px;
}

html.js #project-scrollbox {
	overflow: hidden;
	width: 819px;								/* keep in sync with project-selector ul */
	-webkit-user-select: none;
}

#project-selector .project-screen-button {
	width: 117px;
	top: 0px;									/* offset from top of box */
	height: 105px;
	position: absolute;
	margin: 0px;
	text-indent: -10000px;
}

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

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

#project-selector #next-project-screen-button {
	right: 40px;
	width: 41px;
}

#project-selector #previous-project-screen-button {
	left: 0px;
	width: 40px;
}

#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: center right;
}

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

html.js #project-selector ul {
	margin: 0px;
	padding: 0px;
	width: 2457px;								/* productPagesCount (see js) times the project-scrollbox */
	height: 105px;
}

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

html.js #project-selector .project-icon a {
	display: block;
	width: 117px;
	height: 105px;
	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: 64px;
	height: 64px;
	margin-left: 1px;
	margin-top: 16px;
}

#project-selector .project-icon span {
	display: block;
	margin: 0px;
	padding-top: 3px;							/* Gap between icon and title */
}

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

html.js .content div.project-details {
	margin-left: 365px;
	margin-right: 40px;
	padding-top: 116px;
	-webkit-user-select: text;
}

html.js .content div.project-details h3 {
	color: #2a4562;
	font-size: 30px;
	text-shadow: #fff 0 1px 0;
	margin-top: 8px;
	margin-bottom: 0.5em;
}

html.js .content div.project-details p.subtitle {
	font-weight: bold;
	color: #626262;
	text-shadow: #fff 0 1px 0;
}

html.js .content div.project-details p.launchdate {
	color: #626262;
	text-shadow: #fff 0 1px 0;
}

html.js .content div.project-details .text {
	font-weight: bold;
	color: #2a4562;
	text-shadow: #fff 0 1px 0;
}

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

html.js #screenshot-area {
	top: 92px;
	left: 52px;
	height: 360px;
	width: 240px;
	position: relative;
	float: left;
	-webkit-user-select: none;
}

html.js #screenshot-area div.scroller {
	top: 0px;
	left: 0px;
	height: 360px;
	width: 240px;
	position: relative;
	overflow: hidden;
}

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


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

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

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);
}

#desc-for-robots {
	font-size: 12px;
	align:left;
	display: none;
}