@import url('/css/reset.css');


/*---------------------------------- 
	Body, Headers, Links 
---------------------------------------------*/
body {
	font-size: 62.5%;
	font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
	background: #C1E0FA url(/images/bg-tile.gif) left top repeat-x;
	color: #4b4b4b; }
	
h1 {
	font-size: 2.8em;
	color: #4c892f;
	font-weight: bold;
	margin: 0 0 15px;
	line-height:1.1em; }
	
h2 {
	font-size: 3em;
	color: #4c892f;
	font-weight: bold;
	margin: 0 0 5px; }
	
h3 {
	font-size: 1.6em;
	color: #3b3b3b;
	font-weight: bold;
	margin: 0 0 5px; }
	
h4 {
	font-size: 1.5em;
	color: #595959;
	font-weight: bold;
	margin: 0 0 5px; }
	
h5 {
	font-size: 1.4em;
	font-weight: bold;
	color: #4c892f;
	margin: 0 0 5px; }

h6 {
	font-size: 1.4em;
	font-weight: bold;
	color: #20231f; 
	margin: 0 0 3px; }
	
p {
	font-size: 1.4em; 
	margin: 0 0 15px;
	line-height: 1.35em; }

a,
a:link,	 		
a:visited	{color: #4c892f; text-decoration: none; font-weight: bold; }	
a:hover		{color: #a2c41c; text-decoration: underline; }
a:active	{color: #3b3b3b; text-decoration: underline; }

em {font-style: italic; }

strong {font-weight: bold; }

.logo { float: left; margin: 0; text-indent: -9999px; }

.login {
	float: right;
	height:30px;
	margin:10px 0;
	width:72px; }
	
.login a, .login a:link, .login a:visited {
	background:url(/images/nav-sprite.png) no-repeat scroll -167px -246px transparent;
	display:block;
	height:100%;
	overflow:hidden;
	text-indent:-9999px;
	width:100%; }
	
.login a:hover {
	background-position: -167px -276px; }


/*---------------------------------- 
	Structure 
---------------------------------------------*/
.shell-out {
	margin: 0 auto;
	background: url(/images/bg-page.gif) center top no-repeat; }
	
.shell {
	width: 960px; 
	margin: 0 auto 80px; }
	
.header {
	margin: 0 auto;
	width: 960px;
	padding: 10px 0; }

.content { background: transparent url(/images/content-tile.gif) top left repeat-y; padding: 20px 0; }
.content.nobg { background: #fff; } 
.content.alt { background: transparent url(/images/content-tile-alt.gif) top left repeat-y; }	

.billboard { background: #4b4b4b; padding: 15px 25px; }

.maincol {
	width: 600px;
	float: left; 
	padding: 0 0 0 25px; }
	
.sidebar {
	width: 255px;
	padding: 0 25px 0 20px;  
	float: right; }
	
	
/*---------------------------------- 
	Billboard 
---------------------------------------------*/
.billboard { background: #4b4b4b; padding: 15px 25px 30px; }

ul#billboard-nav { width:322px; float: left; margin: 0; }	
ul#billboard-nav li {
	height:68px;
	margin:0 0 10px;
	width:322px; }
	
ul#billboard-nav li a {
	background:url(/images/nav-sprite.png) no-repeat scroll 0 0 transparent;
	display:block;
	height:100%;
	overflow:hidden;
	text-indent:-9999px;
	width:100%; }

ul#billboard-nav li.share-designs a, 
ul#billboard-nav li.share-designs a:link,
ul#billboard-nav li.share-designs a:visited, 
ul#billboard-nav li.share-designs a:hover, 
ul#billboard-nav li.share-designs a:active { background-position: -685px 0; }

ul#billboard-nav li.share-designs a:hover  	{ background-position: -685px -68px; }
ul#billboard-nav li.share-designs a:active 	{ background-position: -685px -68px; }
ul#billboard-nav li.share-designs a.current { background-position: -685px -136px !important; }

ul#billboard-nav li.collect-feedback a, 
ul#billboard-nav li.collect-feedback a:link,
ul#billboard-nav li.collect-feedback a:visited, 
ul#billboard-nav li.collect-feedback a:hover, 
ul#billboard-nav li.collect-feedback a:active { background-position: -342px 0; }

ul#billboard-nav li.collect-feedback a:hover  	{ background-position: -342px -68px; }
ul#billboard-nav li.collect-feedback a:active 	{ background-position: -342px -68px; }
ul#billboard-nav li.collect-feedback a.current  { background-position: -342px -136px !important; }

ul#billboard-nav li.manage-approvals a, 
ul#billboard-nav li.manage-approvals a:link,
ul#billboard-nav li.manage-approvals a:visited, 
ul#billboard-nav li.manage-approvals a:hover, 
ul#billboard-nav li.manage-approvals a:active { background-position: 0 0; }

ul#billboard-nav li.manage-approvals a:hover  	{ background-position: 0 -68px; }
ul#billboard-nav li.manage-approvals a:active 	{ background-position: 0 -68px; }
ul#billboard-nav li.manage-approvals a.current  { background-position: 0 -136px !important; }	

.billboard .billboard-panels { width: 540px; float: right; }

.billboard .billboard-panels ul { list-style: disc; margin: 260px 0 0 65px; position: absolute; }
.billboard .billboard-panels ul li { color: #dddddd; font-size: 1.5em; font-weight: normal; margin: 0 0 10px; }

.billboard .billboard-panels #image-panels { margin: -90px 0 0; width: 540px; position: relative; }

.billboard .billboard-panels #image-panels #collect-wrap,
.billboard .billboard-panels #image-panels #share-wrap,
.billboard .billboard-panels #image-panels #manage-wrap {  }
	
.billboard .billboard-panels #image-panels #collect { 
	position: absolute;
	z-index: 90;
	top: 30px;
	left: 0; }
	
.billboard .billboard-panels #image-panels #share { 
	position: absolute;
	z-index: 100; 
	top: 0;
	left: 100px; }
	
.billboard .billboard-panels #image-panels #manage { 
	position: absolute;
	z-index: 90;
	top: 30px;
	left: 267px; }
	
.billboard .billboard-panels #image-panels img#collect,
.billboard .billboard-panels #image-panels img#manage {
	width: 273px;
	height: 190px; }

#image-panels-magnify { 
	display: block; 
	height: 29px; 
	width: 29px;
	position: absolute;
	right: 92px;
	top: 0;
	z-index: 105;
	/*background: transparent url(/images/ico-magnify.png) 0 0 no-repeat;*/ }
	
/*---------------------------------- 
	Global 
---------------------------------------------*/
ul.features { margin: 25px 0 0; }

.features li { 
	display: inline; 
	float: left; 
	color: #3d3d3d; 
	font-weight: bold; 
	font-size: 1.2em; 
	width: 130px; 
	margin: 0 0 10px;
	height: 32px; }

.features li.item-1, .features li.item-2, .features li.item-3, .features li.item-4, .features li.item-5, .features li.item-6 { 
	background-image: url(/images/icon-sprite.png);
	background-color: transparent;
	background-repeat: no-repeat; }

.features li.item-1 { background-position: 0 0;  padding: 14px 20px 20px 50px; }
.features li.item-2 { background-position: 0 -576px; padding: 16px 20px 20px 50px; }
.features li.item-3 { background-position: 7px -727px; padding: 16px 20px 20px 50px; }
.features li.item-4 { background-position: 0 -303px; padding: 20px 20px 20px 50px; }
.features li.item-5 { background-position: 0 -502px; padding: 14px 20px 20px 50px; }
.features li.item-6 { background-position: 3px -652px; padding: 16px 20px 20px 50px; }

blockquote { margin: 0 0 35px; }

blockquote p.quote {
	background-image: url(/images/icon-sprite.png);
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0 -800px;
	padding: 0 0 10px 50px;
	font-size: 1.6em; 
	margin: 0; }

blockquote p.credit { font-weight: bold; font-size: 1.5em; padding: 0 0 0 50px; }

.sidebar h2 { font-size: 1.8em; }
.sidebar p { font-size: 1.3em; }

ul { list-style: disc; margin: 0 0 20px 15px; }
ol { list-style: decimal; margin: 0 0 20px 20px; }

ul li, ol li { font-size: 1.3em; margin: 0 0 10px; }


/*---------------------------------- 
	Main Menu 
---------------------------------------------*/
.menu {
	background: transparent url(/images/pg-top.png) top left no-repeat; padding: 6px 0 0; }
	
.menu ul { background: #2f2f2f; padding: 6px 25px 12px; list-style: none; margin: 0; }
.menu ul li { color: #fff; font-size: 1.4em; font-weight: bold; display: inline; margin: 0 12px 0 0; }

.menu ul li a,
.menu ul li a:link,
.menu ul li a:visited { color: #fff; margin: 0 10px 0 0; }
.menu ul li a:hover { color: #b2d234; }
.menu ul li.current a { text-decoration: underline; }


/*---------------------------------- 
	Form 
---------------------------------------------*/
form fieldset {
	padding:5px 0 0 0; }
	
form fieldset label {
	color: #81a4c2;
	font-size: 1.4em;
	font-weight: bold;
	padding: 0 0 9px 0; 
	display: block; }	
	
form fieldset input.textfield {
	background: #fff;
	border: 1px solid #dad7c0;
	color: #4c892f;
	font-size: 1.3em;
	font-weight: bold;
	font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
	margin-bottom: 5px;
	padding: 8px;
	width: 95%; 
	display: block;
	width: 200px; 
	height: 16px; }
	
form fieldset .fieldblock.psw input.textfield, 
form fieldset .fieldblock.verify input.textfield { width: 130px; }

form fieldset .fieldblock {
	display: block; 
	padding: 12px 0 8px; }
	
form fieldset .fieldblock .input-bg { 
	background-color: #fff;
	height:34px;
	margin:-39px 0 0;
	width:218px;
	z-index:0; }
	
form fieldset .fieldblock.psw .input-bg,  
form fieldset .fieldblock.verify .input-bg	{ width: 148px; }
	
.frmHelp { float:right; font-size:1.1em; margin:-10px 0 0; width:100px; }	

form fieldset input.textfield.txtErr { border: 2px solid #d04b13; }
.errors { color: #d04b13; font-size: 1.2em;  font-weight: bold; }	
.frmErr { color: #d04b13; font-size: 1.2em; }

input.signup {
	height: 37px;
	width: 152px;
	background-image: url(/images/nav-sprite.png);
	background-repeat: no-repeat;
	background-position: 0 -246px;
	margin: 10px 0 0; }

input.signup:hover { background-position: 0 -283px; }

/* placeholder for verification */
#verify { height: 33px; width: 100px; display: block;  background: #BEBEB4; margin: -9px 0 0; float: left; }



/*---------------------
	Inline Form Labels
------------------------------------------*/	
label.inlined + input.input-text {
	margin-top: -32px;
	background-color: transparent;
	position: relative; z-index: 2; }
	
label.inlined {
	padding-left: 10px;
	font-weight: bold;
	font-size: 1.3em;
	position: relative; z-index: 1;
	opacity: 1;
	width: 80%;
	-webkit-transition: opacity 0.15s linear;
	-moz-transition: opacity 0.15s linear; }

label.focus { opacity: 0.25; }

label.has-text {
	opacity: 0.0;
	-webkit-transition-duration: 0s;
	-moz-transition-duration: 0s; }
	
input.input-text:focus,
textarea:focus,
fieldset input.textfield:focus,
form fieldset input.textfield:focus {
	border: 2px solid #4c892f; 
	outline-color: -moz-use-text-color; 
	outline-style: none;
	outline-width: medium;
	padding: 7px; }	
	


/*---------------------------------- 
	Footer 
---------------------------------------------*/
#footer { background: #b2d234; padding: 30px; }
#footer .left { float: left; width: 320px; }
#footer .right { float: right; width: 500px; }

#footer p { color: #20231f; font-size: 1.2em; margin: 0; }

#footer ul { float: left; width: 120px; padding: 0 20px 0 0; }
#footer ul li { font-weight: bold; font-size: 1.2em; list-style: disc; color: #4c892f; margin: 0 0 8px 14px; }
#footer ul li.list-head { font-size: 1.4em; font-weight: bold; color: #20231f; margin: 0 0 4px; list-style: none; }

#footer ul li a,
#footer ul li a:link,	 		
#footer ul li a:visited		{color: #4c892f; text-decoration: none; }	
#footer ul li a:hover		{color: #102d03; text-decoration: underline; }


/*------- 
Clearing floats without extra markup 
---------------------------------------------*/
/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/* floats */
.floatleft {float: left; }
.floatright {float: right; }