/* jon added - homepage main */
#backstage_main_js {
	padding-top:20px;
}
#backstage_main_js #content-left {
	width:330px;
	float:left;
	margin-right:55px;
}
#backstage_main_js #content-left ul {
	margin:30px 0 0 0;
	padding:0;
}
#backstage_main_js #content-left ul li {
	padding:0 0 0 60px;
	margin:20px 0 0 0;
	list-style:none;
	font:11px/13px 'Segoe UI',tahoma,sans-serif;
	color:#999;
	background-position:left top;
	background-repeat:no-repeat;
}
#backstage_main_js #content-left ul li b {
	font:24px/30px 'Segoe UI',tahoma,sans-serif;
	color:#fe5815;
	display:block;
}
#backstage_main_js #content-left ul li.conversations {
	background-image:url(/images/icons/backstage_conversations.gif); 
}
#backstage_main_js #content-left ul li.scenes {
	background-image:url(/images/icons/backstage_scenes.gif); 
}
#backstage_main_js #content-left ul li.prizes {
	background-image:url(/images/icons/backstage_prizes.gif); 
}
#backstage_main_js #content-left ul li.latest {
	background-image:url(/images/icons/backstage_latest.gif); 
}
#backstage_main_js #content-right {
	width:296px;
	float:left;
}
#backstage_main_js #content-right .quote {
	position:relative;
	margin-top:30px;
	font:36px/40px 'Segoe UI',tahoma,sans-serif;
	color:#999;
	background:transparent url(/images/css/quote_end.gif) bottom right no-repeat;
	
}
#backstage_main_js #content-right .quote span {
	position:absolute;
	top:8px;
	left:-24px;
	height:19px;
	width:19px;
	background:transparent url(/images/css/quote_start.gif) no-repeat;
}
#backstage_main_js #content-right .author {
	font:12px/16px 'Segoe UI',tahoma,sans-serif;
	color:#666;
	margin-top:25px;
}
#backstage_main_js #content-right .author img {
	float:left;
	margin:0 10px 10px 0;
}
#backstage_main_js #content-right .author span {
	font-size:14px;
	display:block;
}
#backstage_main_js #content-right .author span span {
	font-size:16px;
	color:#333;
}


/*
body,
html {
	font-family: Arial;
	font-size: 12px;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	overflow-x: hidden;
	overflow-y: hidden;
}
*/
#container {
	/*
	background-image:url(../images/traceimage.png);
	*/
	margin: 0px auto;
	width: 1024px;
}

#container #logo {
	margin-top: 0px;
	margin-left: 0px;
	padding-left: 15px;
	padding-top: 23px;
}

#container #register 
{
	font-family: "Segoe UI", Arial, Helvetica;
	font-size: 11px;
	font-weight:normal;
	color: #666666;
	margin-top: 0px;
	float: right;
	margin-right: 20px;
}

#container #signupMolecule {
	z-index: 100;
	position: absolute;
	float: right;
	display: none;
	margin-left: 835px;
	width:152px;
	height:142px;
	background-color: #1BA1E2;
}


#container #signupMolecule #signUpBox {
	display: none;
	/*margin-left: -90px;*/
	width:240px;
	height:142px;
	background-color: #1BA1E2;
}

/*
#footer 
{
	clear: both;
	z-index: 40;
	text-align: center;
	font-family: Arial, Helvetica;
	font-size: 11px;
	color: #999;
	background-color: #fff;
	width: 100%;
	height: 32px;
}
*/
#footerwrapper {
	margin: 0 auto;
   	/*padding: 0;  Zero to prevent IE box trouble. */
	/* top left bottom right */
	padding-left: 25px;
	background-color: #fff;
	width: 926px; 
	height: 32px;
}

#footerwrapper #footerrule {
	border-top: #ccc solid thin;
	width: 926px;
	height: 1px;
}


#footerwrapper #copyright {
	padding: 10px 0px 0px 0px;
	float: left;	
}

#footerwrapper #mlogo {
	padding-top: 8px;
	float: right;
}



#main 
{
	margin-left: 50px;
	padding-top: 10px;
}

#leftmain 
{
	float:left;
	margin-right: 5px;
	width:240px;
}

#rightmain 
{
	float:left;
	width: 710px;
}

.minipersonapanel 
{
	/*width: 220px;
	height: 175px;
	margin-top: -20px;
	padding: 0px;*/
	width: 224px;
	-x-system-font:none;
	color:#FFFFFF;
	font-family:'Segoe UI',tahoma,sans-serif;
	font-size:13px;
	font-size-adjust:none;
	font-stretch:normal;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	height:175px;
	line-height:15px;
	margin-left: -8px;
	top: 0px;
	padding:8px;
	position:relative;
}

#minipersona
{
	background-color: #FE5815;
	margin-top: 44px;
	width: 220px;
	padding: 10px;
	height: 170px;
	font-family: "Segoe UI", Arial, Helvetica;
	font-size: 14px;
	font-weight:normal;
	color: #FFFFFF;
	position: relative;
}

#minipersona a
{
	color: #ffffff;
	text-decoration: none;
}

#minipersona-footer 
{
	clear: both;
	position: absolute;
	bottom: 15px;
}

#minipersona-footer a
{
	font-family: "Segoe UI", Arial, Helvetica;
	font-size: 10px;
	font-weight:normal;
}


#minipersona-username
{
	font-size: 24px;
	font-family: "Segoe UI", Arial, Helvetica;
	line-height: 95%;
	font-weight: normal;
	
}

#minipersonaimage 
{
	clear: both;
	font-size: 12px;
	font-family: "Segoe UI", Arial, Helvetica;
	font-weight: normal;
	margin-top: 10px;
	float: left;
	margin-right: 10px;
}

#minipersonainfo
{
	font-size: 12px;
	font-family: "Segoe UI", Arial, Helvetica;
	font-weight: normal;
	margin-top: 10px;
	float: left;
	width: 150px;
}

.backstageNotLoggedIn 
{
	position: relative !important;
	bottom: auto !important;
}

#subhead 
{
	background-color: #fe5815;
	height: 20px;
	padding: 10px;
	vertical-align: middle;
	margin-top: 5px;
	color: #ffffff;
	font-size: 18px;
	font-family: "Segoe UI", Arial, Helvetica;
}


.removearrow 
{
	background: none;
}

.backstage-body-header 
{
	font-family: 'Segoe UI', Arial; 
	color: #333333; 
	font-size: 30px; 
	font-weight: lighter; 
	padding: 10px; 
	line-height: 30px; 
	padding-top: 30px;
}

.graytext 
{
	color: #999999;
	line-height: 120%;
}

.graytext p
{
	color: #999999;
	font-size: 120%;
	line-height: 120%;
}
.graytext a 
{
	color: #FE5815;
	font:18px 'Segoe UI',tahoma,sans-serif;
	padding-right:13px;
	background:transparent url(/images/css/arrow_orange_right.gif) 100% 50% no-repeat;
}
.graytext a.cta_arrow {
	padding-right:10px;
	background:transparent url(/images/css/arrow_small_white.png) 100% 70% no-repeat;
}

#exclusive-title 
{
	color: #fe5815;
	font-size: 30px;
	margin-top: 30px;
	line-height: 1em;
}


/****************** LOGIN / REGISTER MODULE *****************/
.orangeCTA 
{
	padding: 2px;
	font:12px 'Segoe UI',tahoma,sans-serif;
	font-weight: normal;
	border: solid 1px #FFFFFF;
	background-color: #fe5815;
	color: #FFFFFF;
}

.orangeCTA:hover
{
	border: solid 1px #FFFFFF;
	background-color: #FFFFFF;
	color: #fe5815;
}

.whiteCTA 
{
	padding: 2px;
	font:12px 'Segoe UI',tahoma,sans-serif;
	font-weight: normal;
	border: solid 1px #fe5815;
	background-color: #FFFFFF;
	color: #fe5815;
}

.whiteCTA:hover
{
	border: solid 1px #FFFFFF;
	background-color: #fe5815;
	color: #FFFFFF;
}
#regstep1
{
	padding-top: 10px;
}

#regstep1 input.error  
{
	border: 1px solid red; 
    background-color: #FFCCCB;
    color: #333333;
}

#login-register-module 
{
	padding-top: 15px;
	padding-left: 40px;
}

#login-register-module a
{
	text-decoration: underline;
	color: #FFFFFF;
}
#login-links
{
	font-size: 24px;
	font-family: "Segoe UI", Arial, Helvetica;
	font-weight: lighter;
	color: #333333 !important;
	
}

#login-links a
{
	font-size: 24px;
	font-family: "Segoe UI", Arial, Helvetica;
	font-weight: lighter;
	text-decoration: none;
	color: #333333 !important;
	
}

/*

ADDED TO HIDE BOTH LINKS IN THE LOGIN PAGE TO AVOID HAVING TO ADD LOGIC BEHIND */

#login-links a 
{
	display: none;
	text-align: right;
}

#login-urls p 
{
	margin: 0px;
	padding: 0px;
	margin-bottom: 0px;
	text-align: right;
	height: 13px;
	display: block;
	cursor: pointer;
}

#login-links .selected-login-link
{
	font-size: 24px;
	font-family: "Segoe UI", Arial, Helvetica;
	font-weight: lighter;
	color: #FFFFFF !important;
	display: inline;
}

#login-urls
{
	font-size: 11px;
	font-family: "Segoe UI", Arial, Helvetica;
	font-weight: normal;
	position: absolute;
	margin-top: -22px;
	margin-left: 188px;
	display: block;
	text-align:right;
}

#login-urls .selected-login-link 
{
	display: block;
}

#login-urls a 
{
	display: none;
	text-decoration: none;
	color: #333333;
}

p a:link, p a:active, p a:hover p a:visited {
	color: #FE5815;
}

.orangeLink {
	color: #FE5815 !important;
}

/* 

END HIDING/SHOWING

*/

#cta-right-content 
{
	font-size: 12px;
	font-family: "Segoe UI", Arial, Helvetica;
	font-weight: lighter;
	color: #FFFFFF !important;
}

#register 
{
	padding-top: 50px;
	width: 690px;
	font-size: 14px;
	font-family: "Segoe UI", Arial, Helvetica;
	font-weight: lighter;
	color: #999999;
}

#register .small 
{
	font-size: 12px;
	font-family: "Segoe UI", Arial, Helvetica;
	font-weight: lighter;
	color: #999999;
}

#register .small a
{
	font-size: 12px;
	font-family: "Segoe UI", Arial, Helvetica;
	font-weight: lighter;
	text-decoration: none;
	color: #FE5815;
}

#register ul
{
	padding-top: 10px;
}

#register li
{
	height: 25px;
}

#register tr
{
	padding-top: 10px;
	padding-bottom: 10px;
}

.register-table-header 
{
	font-size: 14px;
	font-family: "Segoe UI", Arial, Helvetica;
	background-color: #999999; 
	padding: 5px;
}

.regform input
{
	border: 1px solid #FE5815;
}

.regform input
{
	border: 1px solid #FE5815;
}

.regform input.error  
{
	border: 1px solid red; 
    background-color: #FFCCCB;
}

.regform label.error 
{
	color: #FF0000;
	font-size: 11px;
	font-family: "Segoe UI", Arial, Helvetica;
	clear: both;
	display:block;
}


.regform select 
{
	border: 1px solid #FE5815;
}

.regcheckbox 
{
		border: 1px solid #FE5815;
}

/************************** FORM FIELDS ***********************/
.inputField  {
 border:1px solid #FE5815;
 height:  20px;
 text-align: top;
 padding: 0px;
 margin: 0px;

input:hover {
	background: white;
	border:1px solid #FE5815;
	height: 20px;
	width: 40px;
	padding-bottom: 3px;
	text-transform: lowercase;
	color: #FE5815;
}

/*  ************************************************************   SCROLLABLE HORIZONTAL */
/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 1024px;
	height:250px;

	/* custom decorations 
	border:1px solid #ccc;*/
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

/* single scrollable item */
.scrollable img {
	float:left;
	margin:20px 5px 20px 21px;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
	cursor:pointer;
	width:100px;
	height:75px;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

/* active item */
.scrollable .active {
	border:2px solid #000;
	z-index:9999;
	position:relative;
}




/*  ************************************************************   BUTTONS  */
/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(../images/hori_large.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	margin:40px 10px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right 				{ background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover 		{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; } 


/* left */
a.left				{ margin-left: 0px; } 
a.left:hover  		{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }

/* up and down */
a.up, a.down		{ 
	background:url(../images/vert_large.png) no-repeat; 
	float: none;
	margin: 10px 50px;
}

/* up */
a.up:hover  		{ background-position:-30px 0; }
a.up:active  		{ background-position:-60px 0; }

/* down */
a.down 				{ background-position: 0 -30px; }
a.down:hover  		{ background-position:-30px -30px; }
a.down:active  	{ background-position:-60px -30px; } 


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 	

.rememberme input
{
    float:left;
}
.rememberme label
{
    vertical-align:middle;
    padding-top:3px;
    display:block;
}



/*  ************************************************************   SCROLLABLE NAVIGATOR */
/* position and dimensions of the navigator */
.navi {
	margin-left:328px;
	width:200px;
	height:20px;
}


/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../images/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
.navi a.active {
	background-position:0 -16px;     
}