/*! Copyright 2010 Stardoll AB */

/*!
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 3.0.0
build: 1549
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}

/**
 * Clearfix
 */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

html[xmlns] .clearfix {
	display: block;
}

* html .clearfix {
	height: 1%;
}

/**
 *	CSS with base/default styles, i.e. element selectors used throughout the site.
 *	Example: a, input, ul li
 *	Not: a.user, input.text, ul.clean li
 */

a {
	color: #943f88;
	text-decoration: none;
	cursor: pointer;
}

a:hover, a:focus {
	color: #c549b4;
	text-decoration: underline;
}

a:hover img, a:focus img {
	text-decoration: none;
}

body {
	color: #000;
	background: #fff url('../i/sprite/main_bg.jpg?5739') center -475px no-repeat;
	font-size: 12px;
}

body.lang_ar {
	text-align:left;
	direction:rtl;
}
body.lang_ar #footer dt {
	float: right;
	clear: right;
	margin-left: 5px;
	margin-right: 0;
	text-align: right;
}
body.lang_ar #footer dd,
body.lang_ar #footerContainer #footer .navigation dd ul li {
	float: right;
}
/* The user name in the friends list at user/friends.php*/
body.lang_ar .info .user {
	float: right;
}

/* Put the star on the other sider for arabic.*/
body.lang_ar .user-hasIcon {
	margin-left:16px;
	margin-right: 0;
	position:relative;
}
/* Put the star on the other sider for arabic.*/
body.lang_ar .user-hasIcon span.ic {
	margin-left: -16px;
	margin-right: 0;
}
.bidiLevel {
	unicode-bidi: embed;
	display: inline-block;
}

#pageContainer {
	background-color: white;
}

/* The flower above the menu.*/
#stencilContainer {
	margin-top: 10px;
	height: 92px;
	margin-bottom: -102px;
	background:url('../i/sprite/ribbon.png?5885') no-repeat scroll left -1250px transparent;
	margin-left: -30px;
}

/* The white bordered background of the page is a little wider than
 * the container and contents, to allow the border to be drawn. The
 * block lies before the actual contents, but with a negative margin.
 */
#pageTopBackground {
	height: 500px;
	margin: 75px -3px -575px;
	padding: 0 3px;
	background:url('../i/sprite/ribbon.png?5885') no-repeat scroll center -548px transparent;
}

#footerBorder {
	position: absolute;
	top: -186px;
	+top: -176px;
	left: 0;
	+left: -1px;
	width: 100%;
	height: 186px;
	background:transparent url('../i/sprite/ribbon.png?5885') no-repeat center -1362px;
	z-index: 1;
	_zoom: 1;
}

body, textarea, input {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

/* Special mode if bar/ribbon is pinned to footer */
body.isPinned {
	padding-bottom: 50px;
}

/* Remove inner background in leaderboard */
body.isPinned #leaderboardContainer {
	background-position: center 4px;
	background-color: #787084;
}

body.isPinned #leaderboardContainer .content {
	background: none;
}

/* Add some padding in case we are in popup-window mode */
body.popup {
	padding: 10px;
	background: #fff;
}

em {
	font-style: italic;
}

h1,
h2,
.h1,
.h2,
h2 a {
	text-transform:uppercase;
	font-weight: normal;
	color: #540049;
}

h2 a:hover,
h2 a:focus,
h3 a:hover,
h3 a:focus {
	color: #540049;
	text-decoration: none;
}

h1,
.h1 {
	font-size: 22px;
	margin-bottom: 10px;
}

#pageContainer h1 {
	margin-left: 4px;
}

h2,
.h2 {
	font-size: 14px;
}

h3,
.h3,
h3 a {
	font-size: 15px;
	color: #540049;
	font-style: italic;
}

h4 {
	color: #540049;
}

span.p {
	font-size: 12px;
	font-weight: normal;
	color: #000;
}

strong {
	font-weight: bold;
}

ol {
	padding-left: 20px;
}

ol li {
	list-style-type: decimal;
}

/* Default table style */
table {
	width:100%;
	background:#fff;
	border-collapse:collapse;
	text-align:left;
}

table td {
	padding:5px 10px;
}

/**
 *	CSS with common styles, i.e. used in most views throughout the site.
 */

html .alignedRight {
	text-align: right;
}
html .alignedLeft {
	text-align: left;
}
html .alignedCenter {
	text-align: center;
}

/* Sizes of avatars (e.g. users or dolls) */
.dressupAvatarSmall {
	width: 30px;
	height: 30px;
}

/* base: avtar */
.avatar {
	display: block;
	position: relative;
}

	.avatar .frame {
		display: block;
		position: absolute;
		z-index: 10;
		background: transparent url('../i/sprite/ribbon.png?5885') no-repeat -160px -1610px;
		_background: transparent url('../i/sprite/ribbon_8.png?5885') no-repeat -160px -1610px;
	}

/*extends: avatar*/
.avatarTiny {
	width: 30px;
	height: 30px;
}

	.avatarTiny .frame {
		width: 32px;
		height: 32px;
		top: -1px;
		left: -1px;
		background-position: -160px -1610px;
	}

/*extends: avatar*/
.avatarSmall {
	width: 44px;
	height: 44px;
	border: 1px solid #CECECE;
}

	.avatarSmall .frame {
		width: 52px;
		height: 52px;
		top: -5px;
		left: -2px;
		background-position: -100px -1610px;
	}

/*extends: avatar*/
.avatarMedium {
	width: 88px;
	height: 88px;
}

	.avatarMedium .frame {
		width: 93px;
		height: 92px;
		top: -3px;
		left: -1px;
		background-position: 0 -1610px;
	}

.avatarLarge {
	width: 76px;
	height: 76px;
	padding:2px;
	background:transparent url('../i/makeover/common/avatarBgLargeBlue.gif?5739') 0 0 no-repeat;
}

.avatarLargeGold {
	background-image: url('../i/makeover/common/avatarLargeBgGold.jpg?5790');
}

html .framedAvatar {
	background:transparent url('../i/avatar_bg.png?5739') no-repeat 0 0;
	width:106px;
	height:100px;
	padding-top:9px;
	position:relative;
}

html .framedAvatar span.icm-superstar {
	display:block;
	position:absolute;
	bottom:6px;
	right:0;
}

html .block {
	display: block;
}

html .bottomRight {
	right: 0;
	bottom: 0;
}

/* Used for • spans, separating inline items */
html .bullet {
	margin-left: 4px;
	margin-right: 4px;
}

html .centeredContent {
	text-align: center;
}

html .deemphasized {
	color: #777;
}

html .floatLeft {
	float: left;
}

html .floatRight {
	float: right;
}

html .clearBoth {
	clear:both;
}

html .fullWidth {
	width: 100%;
}

html .fontSmall {
	font-size: 10px;
}

html .fontLarge {
	font-size: 16px;
}

html .hidden {
	display: none;
}

html .hideOverflow {
	overflow: hidden;
}

html .highlightedBackground,
table tr.highlightedBackground td,
table tr.highlightedBackground th {
	background-color: #f6ebf5;
}

html .imageCaption {
	display: block;
}

html .marginedTop {
	margin-top: 20px;
}

html .marginedTopSmall {
	margin-top: 10px;
}

html .marginedTopSmaller {
	margin-top: 5px;
}

html .marginedTopSmallest {
	margin-top: 3px;
}

html .marginedRight {
	margin-right: 20px;
}

html .marginedRightSmall {
	margin-right: 10px;
}

html .marginedRightSmaller {
	margin-right: 5px;
}

html .marginedBottom {
	margin-bottom: 20px;
}

html .marginedBottomSmall {
	margin-bottom: 10px;
}

html .marginedBottomSmaller {
	margin-bottom: 5px;
}

html .marginedBottomSmallest {
	margin-bottom: 3px;
}

html .marginedLeft {
	margin-left: 20px;
}

html .marginedLeftSmall {
	margin-left: 10px;
}

html .marginedLeftSmaller {
	margin-left: 5px;
}

html .marginedLeftSmallest {
	margin-left: 3px;
}

html .metadata {
	font-size: 10px;
}

html .new {
	color: #a9389a;
	text-transform: uppercase;
}

html .noContentsMessage {
	color: #777;
	padding: 20px;
	text-align: center;
}

html .relative {
	position: relative;
}

/* Block describing a section */
html .sectionDescription {
	margin-bottom: 10px;
}

html .separator {
	margin-left: 5px;
	margin-right: 5px;
}

html .small {
	font-size: 11px;
}

html .smaller {
	font-size: 10px;
}

html .vAlignedTop {
	vertical-align: top;
}

html .vAlignedMiddle {
	vertical-align: middle;
}

/* Standalone section, same behavior as a box*/
.standaloneSection {
	margin: 4px;
}

/* Link that surrounds first relative parent. */
a.blockLink {
	position:absolute;
	top:0;
	left:0;
	display:block;
	height:100%;
	cursor:pointer;
	width:100%;
	z-index:1;
}

/* Link that contains a dressup avatar and a span */
a.dressupAvatar {
	cursor: pointer;

}

a.dressupAvatar img {
	vertical-align: middle;
	margin-right: 5px;
}

a.dressupAvatar:hover,
a.dressupAvatar:focus {
	text-decoration: none;
}

a.dressupAvatar:hover span,
a.dressupAvatar:focus span {
	text-decoration: underline;
	cursor: pointer;
}

/* Link image that gets highlighted with a border */
a.highlighted img {
	border: 1px solid #fff;
}

a.highlighted:hover img,
a.highlighted:focus img {
	border: 1px solid #c549b4;
}

a.directing,
a .directing,
.plateText .directing {
	background: transparent url('../i/icon-sprite.png?5856') no-repeat right -2045px;
	padding-right: 19px;
	height: 12px;
}

.plateLarge .directing,
.plateMedium .directing,
.plateSmall .directing {
	line-height: 1.12em;
}
.plateMedium .directing,
.plateSmall .directing  {
	margin-top: 16px;
}
.plateLarge .directing  {
	margin-top: 26px;
}

a span.directing,
.plateText .directing {
	display: -moz-inline-box;
	display: inline-block;
}

/* Link with an icon on the right */
a.iconRight {
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 15px; /* TODO update when icon size has been changed */
}

/* Prevent icons from being underlined */
.user-hasIcon {
	position:relative;
	margin-right:20px;
}

.user-hasIcon span.ic {
	margin-left: 0;
	margin-right: -16px;
	margin-top: -1px;
}

/* Container for icons, e.g. to get more hit area */
a.iconContainer {
	padding: 3px 5px;
	text-decoration: none;
}

a.iconContainer:hover
a.iconContainer:focus {
	text-decoration: none;
}

a.iconContainer:hover span,
a.iconContainer:focus span {
	text-decoration: underline;
}

/* Link with a label inside it */
a.labelled {
	position: relative;
	border: 1px solid #fff;
	display: block;
}

a.labelled .label {
	position: absolute;
	top: 0;
	right: 0;
	padding: 5px;
	background-color: transparent;
	color: #fff;
	display: none;
}
a.labelled:hover .label ,
a.labelled:focus .label {
	background-color: #c549b4;
}

a.labelled:hover,
a.labelled:focus {
	border: 1px solid #c549b4;
}

a.labelled:hover .label,
a.labelled:focus .label {
	display: block;
}

a.padded {
	padding: 1px 5px;
}

/* Add friend plate*/
.plateFriend {
	display: inline-block;
	position: relative;
	margin-right: 15px;
	padding: 12px 10px 10px 43px;
	background: transparent url('../i/sprite/plates.png?5858') no-repeat 0 -390px;
}

	.plateFriend .end {
		display: block;
		position: absolute;
		top: 0;
		right: -15px;
		width: 15px;
		height: 37px;
		background: transparent url('../i/sprite/plates.png?5858') no-repeat 100% -390px;
	}

/* Tiny plate */
.plateTiny {
	background: transparent url('../i/sprite/plates.png?5858') no-repeat -158px -330px;
	padding: 6px 15px 5px;
	position: relative;
	display: -moz-inline-box;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
}

.plateTiny:hover,
.plateTiny:focus {
	text-decoration: none;
}

.plateTiny:hover span.ic,
.plateTiny:focus span.ic {
	text-decoration: underline;
	cursor: pointer;
}

.plateTiny span.end {
	background: transparent url('../i/sprite/plates.png?5858') no-repeat -343px -330px;
	height: 26px;
	width: 15px;
	position: absolute;
	right: 0;
	top: 0;
}

.plateTiny span.ic {
	margin-top: -1px;
	margin-left: -5px;
}

/* Small plate */
.plateSmall {
	display:block;
	height: 46px;
	background: url('../i/sprite/plates.png?5858') center -215px no-repeat;
	text-align:center;
}

/* Medium plate */
.plateMedium {
	display:block;
	height: 46px;
	background: url('../i/sprite/plates.png?5858') center -116px no-repeat;
	text-align:center;
}

/* Large plate */
.plateLarge {
	display: block;
	clear: both;
	background: url('../i/sprite/plates.png?5858') center 0 no-repeat;
	text-align: center;
	width: 514px;
	height: 66px; /* same as bg img */
	line-height: 63px;
	margin-right: auto;
	margin-left: auto;
}


/*
 * Dropdown style
 */
a.dropdown,
a.dropdown .end {
	display: inline-block;
	position: relative;
	z-index: 2;
	float: left;
	height: 27px;
	margin: -2px 0 0 0;
	padding: 0 0 0 10px;
	background: transparent url('../i/sprite/dropdown.png?5739') no-repeat 0 -60px;
	outline: none;
	text-decoration: none;
	overflow: hidden;
}

a.dropdown .end {
	padding: 6px 11px 0 0;
	margin: 0;
	background-position: right -90px;
	height: 21px;
	line-height: 15px;
}
/* Icons has to be raised 1px inside dropdown-buttons */
a.dropdown .end .ic {
	margin-top: -1px;
	padding-left: 16px;
}
a.dropdown:hover {
	background-position: 0 -120px;
	text-decoration: none;
}
a.dropdown:hover .end {
	background-position: right -150px;
}
/* Fix for a flag in a dropdown-button */
a.dropdown .end .ic-flag {
	margin-top: 2px;
	padding-left: 16px;
}

/* Disabled */
a.dropdown.dd-disabled {
	background-position: 0 0;
	cursor: default;
	color: #777;
}

a.dropdown.dd-disabled .end {
	background-position: right -30px;
}

/* Expanded */
a.dropdown.dd-expanded,
a.dropdown.dd-expanded:hover,
a.dropdown.dd-expanded:focus {
	background-position: 0 -180px;
}

a.dropdown.dd-expanded .end,
a.dropdown.dd-expanded:hover .end,
a.dropdown.dd-expanded:focus .end {
	background-position: right -210px;
}

/* Expanded in pinned bar */
body.isPinned #barContainer a.dropdown.dd-expanded { background-position: 0 -420px; }
body.isPinned #barContainer a.dropdown.dd-expanded .end { background-position: right -450px; }

/* Yellow */
a.dd-yellow { background-position: 0 -240px; }
a.dd-yellow .end { background-position: right -270px; }
a.dd-yellow:hover { background-position: 0 -300px; }
a.dd-yellow:hover .end { background-position: right -330px; }
a.dd-yellow.dd-expanded { background-position: 0 -360px; }
a.dd-yellow.dd-expanded .end { background-position: right -390px; }
/* Expanded in pinned bar */
body.isPinned #barContainer a.dd-yellow.dd-expanded { background-position: 0 -480px; }
body.isPinned #barContainer a.dd-yellow.dd-expanded .end { background-position: right -510px; }

/* Active */
a.dropdown.dd-active {
	background-position: 0 -539px;
}

a.dropdown.dd-active .end {
	background-position: right -570px;
	color: #fff;
	font-weight: bold;
}

/* Dropdown elements below a link */
div.dropdown {
	display: none;
	position: absolute;
	left: 1px;
	top: 24px;
	z-index: 1;
	width: 202px;
	padding: 0 9px 8px 0;
	background: transparent none;
}

#barContainer li.events div.dropdown {
	top: 25px;
}

div.dropdown div.contentContainer {
	position: relative;
	background-color: #fff;
	border: 1px solid #be69b3;
}

div.dd-yellow { border-color: #b59f8f; }

/* show header in pinned mode*/
.isPinned #chatable .onlineListHeader {
	display: block;
}

body.isPinned #barContainer div.dropdown {
	top: auto;
	padding-bottom: 0;
	bottom: 27px;
	max-height: none;
}

body.isPinned #barContainer .chat div.logContainer {
	bottom: 25px;
	+bottom: 0;
}

/* Link used for sharing page */
a.sharePage {
	background: url('../i/sprite/social.png?5739') no-repeat scroll left top transparent;
	font-size: 10px;
	height: 24px;
	padding-top: 27px;
	position: absolute;
	right: -7px;
	text-align: center;
	top: -4px;
	width: 51px;
}

a.sharePage:hover,
a.sharePage:focus {
	background-position: 0 -62px;
	color: #a9389a;
	text-decoration: none;
}

a.user,
a .user {
	font-weight: bold;
	word-wrap: break-word;
	padding-right:3px;
}

/* "Box" with user's avatar, name and asl */
a.userVisual {
	text-align: center;
	display: block;
	text-decoration: none;
	position: relative;
}

a.userVisual img {
	display: block;
	margin: 0 auto 3px;
}

a.userVisual .asl {
	display: block;
	margin-top: 3px;
	color: #000;
}

a.userVisual .user {
	font-weight: bold;
}

a.userVisual .icm-superstar,
a.userVisual .icm-superstar {
	position: absolute;
	right: 0;
	top: 70px;
}

a.userVisual:hover .user,
a.userVisual:focus .user {
	text-decoration: underline;
}
a.userVisual:hover .asl,
a.userVisual:focus .asl {
	text-decoration: none;
}

/* Auto-complete search results */
div.ac_results {
	background-color: #fff;
	border: 1px solid #c3bcc3;
	z-index: 4;
}

div.ac_results ul {
	margin: 0 5px;
}

div.ac_results ul li {
	padding: 10px 5px;
	cursor: pointer;
	border-bottom: 1px solid #e5e5e5;
	color: #943f88
}

div.ac_results ul li.ac_over {
	color: #c549b4;
	text-decoration: underline;
	background-color: #fbeafb;
}

/* Quote from a user or similar */
div.quote .text {
	float: left;
	width: 184px;
}

div.quote .text p {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 14px;
	margin-bottom: 3px;
}

div.quote div.sender {
	float: right;
	margin-left: 10px;
	width: 76px;
}

/* Equally sized columns */
dl.columns dt {
	float: left;
	clear: left;
	width: 50%;
}

dl.columns dd {
	float: left;
	width: 50%;
}

dl.columns .lastColumn {
	float: right;
}

/* Used in 2-1 column mode */
dl.columns .primaryColumn,
dl.columnsWeighedRight dd {
	width: 70%;
}

dl.columns .secondaryColumn,
dl.columnsWeighedRight dt {
	width: 29%;
}

/* Make sure child columns aren't affected */
dl.columns dd dl dt,
dl.columns dd dl dd {
	width: auto;
}

/* Columns with a border separating them */
dl.columns .bordered {
	width: 46%;
	border-right: 1px solid #ccc;
	margin-right: 10px;
	padding-right: 10px;
}

dl.columns .borderedSecondary {
	width: 46%;
	border-left: 1px solid #ccc;
	margin-left: 10px;
	padding-left: 10px;
}

/* Fluid columns, i.e. the right next to the left*/
dl.fluidColumns dt {
	float: left;
	clear: left;
	margin-right: 5px;
}

dl.fluidColumns dd {
	float: left;
}

/* Info list */
dl.info {
	width: 100%;
}

dl.info dt {
	color: #000;
	font-style: italic;
	padding: 3px 0;
}

dl.info dd {
	float: left;
	padding: 3px 0;
}

dl.info dd.hasIcon {
	padding: 0;
}

dl.infoRight dd {
	text-align: right;
}

/* Default form style */

/* Table with form inputs */
table.form tr th,
table.form tr td {
	vertical-align: top;
}

table.form tr th {
	padding: 10px 3px 3px;
}

table.form tr td {
	padding: 6px 3px 3px;
}

table.form tr th,
table.form tr th label,
form label.block {
	font-weight: bold;
	font-style: normal;
}

table.form tr th.light,
table.form tr th.light label {
	font-weight: normal;
}

form label.editable {
	font-weight: bold;
}

form fieldset {
	display: block;
	clear: both;
	margin: 0 0 10px 0;
	line-height: 21px;
}

form fieldset label {
	display: block;
	float: left;
	clear: both;
	width: 180px;
	margin: 0 10px 5px 0;
	font-weight: bold;
}

form fieldset div.indented {
	clear: both;
	margin: 0 0 5px 190px;
}

form label.inline,
form fieldset label.inline {
	cursor: pointer;
}

form fieldset label.inline {
	display: inline;
	float: none;
	clear: none;
	width: auto;
	margin-bottom: 0;
	font-weight: normal;
}

form fieldset .inputText {
	float: left;
}

/* Character counter used in forms */
form .characterCounter {
	font-weight: bold;
	color: #777;
	padding-left: 5px; /* only affects arabic users */
}

form .characterCounterInvalid {
	color: #ff4570;
}

form .feedbackMessage {
	margin: 10px 0;
}

img.avatar {
	overflow: hidden;
}

/* Placeholder for images (e.g. club logos to be uploaded) */
img.placeholder {
	background-color: #eee;
	border: 1px solid #ccc;
}

/* Image placed to the right with text wrapped around */
img.wrappedRight {
	float: right;
	margin-left: 20px;
	margin-bottom: 20px;
}

/* Input checkbox style */
input.checkbox {
	height: 13px;
	width: 13px;
}

/* Default text input style */
input.text {
	padding: 4px;
	border: 1px solid #C3BCC3;
	background-color: #fff;
	width: 130px;
}

/* Label positioned as a block */
label.block {
	display: block;
	margin-bottom: 5px;
}

/* Highscore list with users */
ol.highscore li {
	list-style: none outside;
}

ol.highscore li .rank,
ol.highscore li .userInfo,
ol.highscore li .score {
	margin-top: 16px;
}

ol.highscore li .rank {
	float: left;
	margin-right: 15px;
	font-weight: bold;
}

ol.highscore li .visual {
	float: left;
	margin-right: 10px;
}

ol.highscore li .userInfo {
	float: left;
}

ol.highscore li .userInfo .asl {
	margin: 0 10px;
}

ol.highscore li .score {
	float: right;
	width: 100px;
	text-align: right;
	font-weight: bold;
}

/* Age-sex-location for user */
span.asl {
	font-size: 11px;
}

table tr.own th,
table tr.own td {
	background-color: #fcf9e3;
}

table thead tr th {
	font-style: italic;
}

table thead tr th.selectedSorting {
	font-weight: bold;
}

/* Table with auto-sizing columns */
table.autoSize {
	width: auto;
}

table.autoSize tbody tr th {
	padding-right: 10px;
}

/* Lists/tables with zebra background */
.zebra .odd {
	background: #feeefa;
}

.zebraVariant .odd {
	background: #e5f5ed;
}

/* Always display the first three items by default or all in case the contents are set to be displayed */
div.undisclosedItems ul li.content {
	display: none;
}

div.undisclosedItems ul li.order-0,
div.undisclosedItems ul li.order-1,
div.undisclosedItems ul li.order-2,
div.uncoverAllUndisclosedItems ul li.content {
	display: block;
}

div.uncoverAllUndisclosedItems .bottom .wrapper .pagination {
	display: block;
}

ul li.newRow,
ol li.newRow {
	clear: both;
}

/* List without bullets etc. */
.clean li {
	list-style: none outside;
}

/* Grid with thumbnails */
.gridThumbnails {
	margin: -20px 0 0 -15px;
}

.gridThumbnails li {
	list-style-type:none;
	float:left;
	margin: 20px 0 0 15px;
	height:115px;
	width:80px;
	overflow:hidden;
}

.gridThumbnails li .imageCaption {
	width:76px;
	height:30px;
	overflow:hidden;
	text-align:center;
	margin:6px auto 0 auto;
}

.gridThumbnails li a:hover .imageCaption,
.gridThumbnails li a:focus .imageCaption {
	text-decoration: underline;
}

.gridThumbnails li img {
	display: block;
	margin: auto;
}

.gridThumbnailsLarge li {
	width: 90px;
	height: 124px;
}

.gridThumbnailsLarge li a {
	position:relative;
}

.lastGridColumn .gridThumbnailsLarge {
	margin: -10px -8px 0;
}

.lastGridColumn .gridThumbnailsLarge li {
	margin: 10px 0 0 4px;
}

/* Grid thumbs with dressups */
.gridThumbnailsDressups li {
	width: 80px;
}

.gridThumbnails.centered {
	width:540px;
	margin:0 auto;
}

.gridThumbnails.wide {
	width:auto;
	margin: 12px 0 0 -55px;
}

.gridThumbnails.wide li {
	margin:0 0 20px 55px;
}

/* Grid thumbnails in last grid column */
.lastGridColumn .gridThumbnails {
	margin-top: -5px;
}

.lastGridColumn .gridThumbnails li {
	margin-top:10px;
}

.gridThumbnailsHalf li {
	width: 300px;
}

/* Contest list with the best contributors in a list, with the winner extra emphasized */
.contest li {
	position: relative;
	text-align: center;
	margin: 0 0 20px 26px;
}

.contest li img {
	display: block;
	margin-bottom: 10px;
}

.contest li .bubble {
	height: 21px;
	width: 26px;
	position: absolute;
	top: 0;
	left: 0;
	background: url('../i/sprite/contestlist.png?5739') no-repeat -274px -60px;
	color: #540049;
	font-weight: bold;
	z-index: 10;
	text-align: center;
	padding-top: 5px;
}

.contest li .bubble span {
	margin-right: 3px;
}

.contest li.winner {
	overflow: visible;
	margin: 0 5px 20px 20px;
	width: 274px;
	background: url('../i/sprite/contestlist.png?5739') repeat-y 0 0;
	border: 1px solid #ccc;
}

.contest li.winner .bubble {
	height: 47px;
	width: 55px;
	left: -20px;
	top: 10px;
	padding-top: 8px;
	background-position: -274px 0;
	font-size: 30px;
}

.contest li.winner dl {
	padding: 5px 5px 5px 15px;
}

.contest li.winner dl dt {
	float: left;
	width: 130px;
	margin-right: 10px;
}

.contest li.winner dl dd {
	float: left;
	width: 100px;
	padding-top: 20px;
}

.contest li.first {
	clear: both;
	margin: 0 0 20px 0;
}

/* List aligned with grid size, and some kind of square or such as style */
ul.squared li {
	list-style-type: square;
	list-style-position: outside;
	margin-left: 15px;
	margin-bottom: 2px;
	color: #d8d8d8;
	line-height: 16px; /* the squares differs in height if this isnt set to an even number */
}

/* List with steps in some kind of process, e.g. 1-2-3-4 (where steps are completed along the way) */
ul.steps li {
	list-style-type: decimal;
	list-style-position: outside;
	margin-left: 17px;
	margin-bottom: 5px;
}

ul.steps li.completed {
	text-decoration: line-through;
	color: #777;
}

ul.steps li.current {
	font-weight: bold;
}

/* Definition list flowing vertically */
dl.flowingVertically dt {
	margin-bottom: 5px;
}

dl.flowingVertically dd {
	margin-bottom: 10px;
}

/* Horizontally laid out list */
dl.horizontal dt,
dl.horizontal dd,
ol.horizontal li,
ul.horizontal li {
	float: left;
}

/* Horizontally laid out list with spacings */
dl.separatedHorizontally dt,
dl.separatedHorizontally dd,
ol.separatedHorizontally li,
ul.separatedHorizontally li {
	margin: 0 5px 0 0;
}

/* Maximum separation between items */
dl.separatedHorizontallyLarge dt {
	margin: 0 5px 0 0;
}

dl.separatedHorizontallyLarge dd {
	margin: 0 30px 0 0;
}

ul.separated li {
	margin: 0 0 5px 0;
}

ul.linear li,
ol.linear li,
table.linear tr td,
table.linear tr th,
#memberAcceptAllSection {
	padding: 5px;
	border-bottom: 1px solid #e5e5e5;
}

dl.linear dt,
	dl.linear dd {
	border-bottom: 1px solid #e5e5e5;
}

ul.linear li.last,
ol.linear li.last,
table.linear tr td.last,
table.linear tr th.last,
dl.linear dt.last,
dl.linear dd.last {
	border-bottom: none;
}

/* List with an image/icon/avatar next to some content */
ul.visualizedContent li {
	list-style: none outside;
	overflow: hidden;
}

ul.visualizedContent li.content,
ul.visualizedContent li.content a.block {
	background-position: left top;
	background-repeat: no-repeat;
	padding-left: 35px;
	padding-top: 4px;
	padding-bottom: 4px;
	overflow: hidden;
}

ul.visualizedContent li.content.superstar {
	background: #fff8c6 url('../i/sprite/ribbon_bg.png?5872') repeat-x 0 -180px;
}
ul.visualizedContent li.content.superstar.blockHover {
	background: #fbeafb;
}
ul.visualizedContent li.content.superstar img.visual {
	border:1px solid #bf934f;
}

ul.visualizedContent li.content .visual,
ul.visualizedContent li.content .visualThumb {
	float: left;
	margin-left: -35px;
	display: inline;
	overflow: hidden;
	width: 44px;
}

ul.visualizedContent li.content .visualThumb {
	width: 30px;
}
/* override double visual image */
ul.visualizedContent li.content .visual img.visual {
	margin: 0;
	float: none;
}

/* Content with only one row, e.g. a name */
ul.visualizedContent li.simpleContent .visual {
	margin-bottom: -8px;
	margin-top: -8px;
}

/* Content with a dressup */
ul.visualizedContentDressupAvatar li.content,
ul.visualizedContentDressupAvatar li.content a.block {
	padding: 12px 5px 12px 45px;
}

ul.visualizedContentDressupAvatar li.content .visual {
	margin-left: -40px;
}

ul.visualizedContentDressupAvatar li.content a.block span.new {
	display: inline-block;
	margin:0 10px -3px;
	background-color:#943f88;
	color:#fff;
	padding:1px 3px;
	font-size:10px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;
}

ul.visualizedContentDressupAvatar li.content .asl {
	margin-left: 5px;
}

/* Superstar highlight */
ul.visualizedContentDressupAvatar li.superstar { background-color: #fcf9e3; }
ul.visualizedContentDressupAvatar li.highlightedSuperstar,
ul.visualizedContentDressupAvatar li.superstar a:hover,
ul.visualizedContentDressupAvatar li.superstar a:focus {
	background:transparent url('../i/makeover/gradients/avatar_gold_bg_b.jpg?5739') repeat-x left top;
	border-color:#efe4b7;
}
ul.visualizedContentDressupAvatar li.superstar span.ic { margin-left: 10px; margin-bottom:-3px; }
ul.visualizedContentDressupAvatar li.superstar a.visual { background:transparent url('../i/makeover/gradients/avatar_gold_bg_s.jpg?5739') no-repeat left top; }


/* Visualized content with description of the visual */
ul.visualizedDescribedContent dl.contentContainer {
	padding-bottom: 10px;
}

ul.visualizedDescribedContent dl.contentContainer dd.visual {
	width: 88px;
	text-align: center;
	margin-right: 20px;
	float: left;
}

ul.visualizedDescribedContent dl.contentContainer dd.content {
	float: left;
	width: 502px;
	border-bottom: 1px solid #e5e5e5;
	min-height: 140px;
	height: auto !important;
	height: 140px;
}

/* Fix for fullwidth inputs/textareas with padding */
textarea.fullWidth {
	width: 97%;
}

/* Success, notice and error boxes */
.error,
.note,
.success {
	padding:10px;
	border:2px solid #ddd;
	margin:10px 0;
}
.error {
	background:#ffc0cb;
	border-color:#ff4570;
}
.note {
	background:#fff6bf;
	border-color:#ffd800;
}
.success {
	background:#eafda8;
	border-color:#bbdf56;
}
/* In case we use it on strong (which is common) it should be a block element */
strong.error,
strong.note,
strong.success {
	display: block;
}

/**
 * Hacks for Webkit
 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	/* Remove Chrome's focus outline */
	input:focus,
		textarea:focus,
		button:focus {
		outline: none;
	}
}

/* outline.css */
/**
 *	CSS with styles for the main outline, i.e. header & main container layout, as well
 *	as the grid (column sizes etc).
 *
 *	Main outline:
 *  leaderboardContainer
 *	barContainer
 *	mainContainer
 *		headerContainer
 *		pageContainer
 *			pageContent
 *			footerContainer
 *
 *	Dimensions:
 *	960 px wide | 6 columns
 *
 */

#leaderboardContainer {
	background: transparent url('../i/sprite/ribbon_bg.png?5872') repeat-x center top;
}

#leaderboardContainer .content {
	text-align: center;
	height: 96px;
	background: transparent url('../i/sprite/ribbon.png?5885') no-repeat center 82px;
}

body.loggedOut #leaderboardContainer .content { background-image: none; height: 92px; }

#barContainer {
	z-index: 100000;
}

/* In cases where we do not use leaderboard nor bar adjust background to top, the padding prevents a margin-collapse */
body.slim {
	padding-top: 1px;
}

#mainContainer {
	width: 970px;
	min-height: 580px;
	_height: 580px;
	margin: 0 auto;
	position: relative;
	+z-index: 30;
}

.slim #mainContainer {
	min-height: 680px;
	_height: 680px;
}

#pageContainer {
	padding: 7px 11px 0;
	background-color: #fff;
}

#pageContent {
	/* to allow overlays to position versus this node.*/
	position: relative;
	z-index: 2;
	padding-bottom: 10px;
}

#pageContent .interstitial {
	padding: 10px;
}
/**
 *	Column setup for the grid.
 */

/* Used for full-width content */
.singleGridColumn {
	margin: 4px 4px 16px;
}

.gridColumns {
	margin-left: -12px;
}

.gridColumns .gridColumn {
	float: left;
	width: 308px;
	margin-left: 12px;
}

/* Smallest column width, e.g. used in 6-column layout */
.gridColumns .gridColumn .gridColumn,
.minimalGridColumns .gridColumn {
	width: 140px;
	margin-left: 10px;
}

.gridColumns .minimalGridColumn {
	width: 168px;
	margin-left: 4px;
}

/* 2-1 relation, primary column uses two "slots" */
.gridColumns .primaryGridColumn {
	width: 628px;
}

.gridColumns .primaryGridColumn h1 {
	margin: 4px;
}

/* Max width of column, e.g. in a 5-1 grid*/
.gridColumns .maximumGridColumn {
	width: 776px;
}

/* Columns within the primary column (logically 3 columns, since the primary wouldn't be used otherwise) */
.gridColumns .primaryGridColumn .gridColumn {
	width: 308px;
}

/* Smallest column sizes within the primary column (likely to be 3 columns) */
.gridColumns .primaryGridColumn .minimalGridColumns {
	margin-left: -20px;
}

.gridColumns .primaryGridColumn .minimalGridColumns .gridColumn {
	width: 135px;
	margin-left: 20px;
	margin-right: 0;
}


/*
 * Icon default properties
 * Default size is small (.ic)
 */
.ic, .icm, .icl {
	display: inline-block;
	background: transparent url('../i/icon-sprite.png?5856') no-repeat -30px 0;
	vertical-align: middle;
	padding-left: 16px;
	height: 16px;
	line-height: 16px;
}

/* Medium size icon */
.icm {
	padding-left: 25px;
	height: 25px;
	line-height: 25px;
}

/* Large size icon */
.icl {
	padding-left: 37px;
	height: 30px;
	line-height: 31px;
}

/* Icon with a label */
.icLabelled {
	width: auto;
	padding-left: 20px;
}

/* Medium sized icon with label */
.icmLabelled {
	width: auto;
	padding-left: 30px;
}

/* Large sized icon with label */
.iclLabelled {
	width: auto;
	padding-left: 38px;
}

span.iconLabel {
	line-height: 16px;
	margin-left: 3px;
}

/* Icon within another element */
a .ic,
span .ic {
	vertical-align: top;
}

/* small icons */
.ic-like { background-position: 0 0; }
.ic-share { background-position: 0 -20px; }
.ic-ok { background-position: 0 -40px; }
.ic-ignore { background-position: 0 -60px; }
.ic-block, .ic-expulse { background-position: 0 -80px; }
.ic-pin { background-position: 0 -100px; }
.ic-report { background-position: 0 -120px; }
.ic-delete { background-position: 0 -140px; }
.ic-back, .ic-reply { background-position: 0 -160px; padding-left: 20px; }
.ic-liked { background-position: 0 -180px; }
.ic-quote, .ic-comments { background-position: 0 -200px; }
.ic-pen, .ic-edit { background-position: 0 -220px; }
.ic-read { background-position: 0 -240px; }
.ic-unread { background-position: 0 -260px; }
.ic-stardollars { background-position: 0 -280px; }
.ic-playearn { background-position: 0 -300px; }
.ic-superstar { background-position: 0 -320px; }
.ic-right { background-position: 0 -340px; }
.ic-left { background-position: 0 -360px; }
.ic-up { background-position: 0 -380px; }
.ic-down { background-position: 0 -400px; }
.ic-joinclub { background-position: 0 -420px; padding-left: 20px; }
.ic-leaveclub { background-position: 0 -440px; padding-left: 20px; }
.ic-addfriend { background-position: 0 -2246px; cursor: pointer;}
.ic-sound { background-position: 0 -480px; }
.ic-starpoints { background-position: 0 -500px; }
.ic-starpointsPurple { background-position: 0 -1488px; }
.ic-pages { background-position: 0 -585px; }
.ic-demote { background-position: 0 -605px; }
.ic-promote { background-position: 0 -625px; }
.ic-publish { background-position: 0 -645px; }
.ic-events { background-position: 0 -665px; }
.ic-chat { background-position: 0 -685px; }
.ic-stardollarsButton { background-position: 0 -1070px; }
.ic-clip { background-position: 0 -1050px; }
.ic-boy { background-position: 0 -962px; }
.ic-girl { background-position: 0 -978px; }

/* superstar icon in a context with blue bg */
.blueBox .ic-superstar { background-position: 0 -1331px; }
.shopItems .ic-superstar { background-position: 0 -1351px; }

.ic-suitechat {
	background-position: 0 -2075px;
	opacity: 0.3;
	filter: alpha(opacity=30);
}

.ic-suitechat:hover,
.ic-suitechat:focus {
	opacity: 1;
	filter: alpha(opacity=100);
}

.ic-gotosuite {
	background-position: 0 -2096px;
	opacity: 0.3;
	filter: alpha(opacity=30);
}

.ic-gotosuite:hover,
.ic-gotosuite:focus {
	opacity: 1;
	filter: alpha(opacity=100);
}

.ic-partychat { background-position: 0 -740px; padding-left: 20px; }
.ic-partyinvite { background-position: 0 -760px; padding-left: 20px; }
.ic-message { background-position: 0 -810px; }
.ic-options { background-position: 0 -830px; padding-left: 20px; }
.ic-on { background-position: 0 -847px; padding-left: 20px; }
.ic-neutral { background-position: 0 -862px; padding-left: 20px; }
.ic-off { background-position: 0 -877px; padding-left: 20px; }

/* medium icons */
.icm-newpost { background-position: 0 -520px; }
.icm-superstar { background-position: 0 -555px; }
.icm-starpoints { background-position: 0 -1455px; }
.icm-starpointsBig { background-position:0 -895px; }
.icm-mouth { background-position:0 -1372px; }
.icm-addfriend { background-position:0 -2261px; height:20px; line-height:20px; }

/* large icons */
.icl-audio { background-position: 0 -780px; }
.icl-help { background-position: 0 -1405px; padding-left: 20px; }
.icl-newpost { background-position: 0 -1544px; padding-left: 41px; height: 41px; line-height: 42px; }
.icl-addfriend { background-position:0 -2282px; height:35px; line-height:35px; }

/* Club logo sizes */
img.clubLogoSmall {
	width: 30px;
	height: 30px;
}
img.clubLogoLarge {
	width: 125px;
}

/* Item sizes */
img.item {
	width: 76px;
	height: 76px;
}

/**
 * Flags and icons
 */
.ic-flag {
	background: url('../i/makeover/common/icons/flags-mini-sprite.png?5739') no-repeat 0 -2718px;
	height: 11px;
	line-height: 11px;
}

img.ic-flag {
	height: 11px;
	width: 16px;
}

span.ic-flag, a.ic-flag {
	padding-left: 20px; /* 16px to cover the flag width and four more to insert some space  */
}

/* Small flags */
.ad { background-position: 0 0 }
.ae { background-position: 0 -11px }
.af { background-position: 0 -22px }
.ag { background-position: 0 -33px }
.ai { background-position: 0 -44px }
.al { background-position: 0 -55px }
.am { background-position: 0 -66px }
.an { background-position: 0 -77px }
.ao { background-position: 0 -88px }
.ar { background-position: 0 -99px }
.as { background-position: 0 -110px }
.at { background-position: 0 -121px }
.au { background-position: 0 -132px }
.aw { background-position: 0 -143px }
.ax { background-position: 0 -154px }
.az { background-position: 0 -165px }
.ba { background-position: 0 -176px }
.bb { background-position: 0 -187px }
.bd { background-position: 0 -198px }
.be { background-position: 0 -209px }
.bf { background-position: 0 -220px }
.bg { background-position: 0 -231px }
.bh { background-position: 0 -242px }
.bi { background-position: 0 -253px }
.bj { background-position: 0 -264px }
.bm { background-position: 0 -275px }
.bn { background-position: 0 -286px }
.bo { background-position: 0 -297px }
.br { background-position: 0 -308px }
.bs { background-position: 0 -319px }
.bt { background-position: 0 -330px }
.bv { background-position: 0 -341px }
.bw { background-position: 0 -352px }
.by { background-position: 0 -363px }
.bz { background-position: 0 -374px }
.ca { background-position: 0 -385px }
.catalonia { background-position: 0 -396px }
.cc { background-position: 0 -407px }
.cd { background-position: 0 -418px }
.cf { background-position: 0 -429px }
.cg { background-position: 0 -440px }
.ch { background-position: 0 -451px }
.ci { background-position: 0 -462px }
.ck { background-position: 0 -473px }
.cl { background-position: 0 -484px }
.cm { background-position: 0 -495px }
.cn { background-position: 0 -506px }
.co { background-position: 0 -517px }
.cr { background-position: 0 -528px }
.cs { background-position: 0 -539px }
.cu { background-position: 0 -550px }
.cv { background-position: 0 -561px }
.cx { background-position: 0 -572px }
.cy { background-position: 0 -583px }
.cz { background-position: 0 -594px }
.de { background-position: 0 -605px }
.dj { background-position: 0 -616px }
.dk { background-position: 0 -627px }
.dm { background-position: 0 -638px }
.do { background-position: 0 -649px }
.dz { background-position: 0 -660px }
.ec { background-position: 0 -671px }
.ee { background-position: 0 -682px }
.eg { background-position: 0 -693px }
.eh { background-position: 0 -704px }
.england { background-position: 0 -715px }
.er { background-position: 0 -726px }
.es { background-position: 0 -737px }
.et { background-position: 0 -748px }
.europeanunion { background-position: 0 -759px }
.fam { background-position: 0 -770px }
.fi { background-position: 0 -781px }
.fj { background-position: 0 -792px }
.fk { background-position: 0 -803px }
.fm { background-position: 0 -814px }
.fo { background-position: 0 -825px }
.fr { background-position: 0 -836px }
.ga { background-position: 0 -847px }
.gb { background-position: 0 -858px }
.gd { background-position: 0 -869px }
.ge { background-position: 0 -880px }
.gf { background-position: 0 -891px }
.gh { background-position: 0 -902px }
.gi { background-position: 0 -913px }
.gl { background-position: 0 -924px }
.gm { background-position: 0 -935px }
.gn { background-position: 0 -946px }
.gp { background-position: 0 -957px }
.gq { background-position: 0 -968px }
.gr { background-position: 0 -979px }
.gs { background-position: 0 -990px }
.gt { background-position: 0 -1001px }
.gu { background-position: 0 -1012px }
.gw { background-position: 0 -1023px }
.gy { background-position: 0 -1034px }
.hk { background-position: 0 -1045px }
.hm { background-position: 0 -1056px }
.hn { background-position: 0 -1067px }
.hr { background-position: 0 -1078px }
.ht { background-position: 0 -1089px }
.hu { background-position: 0 -1100px }
.id { background-position: 0 -1111px }
.ie { background-position: 0 -1122px }
.il { background-position: 0 -1133px }
.in { background-position: 0 -1144px }
.io { background-position: 0 -1155px }
.iq { background-position: 0 -1166px }
.ir { background-position: 0 -1177px }
.is { background-position: 0 -1188px }
.it { background-position: 0 -1199px }
.jm { background-position: 0 -1210px }
.jo { background-position: 0 -1221px }
.jp { background-position: 0 -1232px }
.ke { background-position: 0 -1243px }
.kg { background-position: 0 -1254px }
.kh { background-position: 0 -1265px }
.ki { background-position: 0 -1276px }
.km { background-position: 0 -1287px }
.kn { background-position: 0 -1298px }
.kp { background-position: 0 -1309px }
.kr { background-position: 0 -1320px }
.kw { background-position: 0 -1331px }
.ky { background-position: 0 -1342px }
.kz { background-position: 0 -1353px }
.la { background-position: 0 -1364px }
.lb { background-position: 0 -1375px }
.lc { background-position: 0 -1386px }
.li { background-position: 0 -1397px }
.lk { background-position: 0 -1408px }
.lr { background-position: 0 -1419px }
.ls { background-position: 0 -1430px }
.lt { background-position: 0 -1441px }
.lu { background-position: 0 -1452px }
.lv { background-position: 0 -1463px }
.ly { background-position: 0 -1474px }
.ma { background-position: 0 -1485px }
.mc { background-position: 0 -1496px }
.md { background-position: 0 -1507px }
.me { background-position: 0 -1518px }
.mg { background-position: 0 -1530px }
.mh { background-position: 0 -1541px }
.mk { background-position: 0 -1552px }
.ml { background-position: 0 -1563px }
.mm { background-position: 0 -1574px }
.mn { background-position: 0 -1585px }
.mo { background-position: 0 -1596px }
.mp { background-position: 0 -1607px }
.mq { background-position: 0 -1618px }
.mr { background-position: 0 -1629px }
.ms { background-position: 0 -1640px }
.mt { background-position: 0 -1651px }
.mu { background-position: 0 -1662px }
.mv { background-position: 0 -1673px }
.mw { background-position: 0 -1684px }
.mx { background-position: 0 -1695px }
.my { background-position: 0 -1706px }
.mz { background-position: 0 -1717px }
.na { background-position: 0 -1728px }
.nc { background-position: 0 -1739px }
.ne { background-position: 0 -1750px }
.nf { background-position: 0 -1761px }
.ng { background-position: 0 -1772px }
.ni { background-position: 0 -1783px }
.nl { background-position: 0 -1794px }
.no { background-position: 0 -1805px }
.np { background-position: 0 -1816px }
.nr { background-position: 0 -1827px }
.nu { background-position: 0 -1838px }
.nz { background-position: 0 -1849px }
.om { background-position: 0 -1860px }
.pa { background-position: 0 -1871px }
.pe { background-position: 0 -1882px }
.pf { background-position: 0 -1893px }
.pg { background-position: 0 -1904px }
.ph { background-position: 0 -1915px }
.pk { background-position: 0 -1926px }
.pl { background-position: 0 -1937px }
.pm { background-position: 0 -1948px }
.pn { background-position: 0 -1959px }
.pr { background-position: 0 -1970px }
.ps { background-position: 0 -1981px }
.pt { background-position: 0 -1992px }
.pw { background-position: 0 -2003px }
.py { background-position: 0 -2014px }
.qa { background-position: 0 -2025px }
.re { background-position: 0 -2036px }
.ro { background-position: 0 -2047px }
.rs { background-position: 0 -2058px }
.ru { background-position: 0 -2069px }
.rw { background-position: 0 -2080px }
.sa { background-position: 0 -2091px }
.sb { background-position: 0 -2102px }
.sc { background-position: 0 -2113px }
.scotland { background-position: 0 -2124px }
.sd { background-position: 0 -2135px }
.se { background-position: 0 -2146px }
.sg { background-position: 0 -2157px }
.sh { background-position: 0 -2168px }
.si { background-position: 0 -2179px }
.sj { background-position: 0 -2190px }
.sk { background-position: 0 -2201px }
.sl { background-position: 0 -2212px }
.sm { background-position: 0 -2223px }
.sn { background-position: 0 -2234px }
.so { background-position: 0 -2245px }
.sr { background-position: 0 -2256px }
.st { background-position: 0 -2267px }
.sv { background-position: 0 -2278px }
.sy { background-position: 0 -2289px }
.sz { background-position: 0 -2300px }
.tc { background-position: 0 -2311px }
.td { background-position: 0 -2322px }
.tf { background-position: 0 -2333px }
.tg { background-position: 0 -2344px }
.th { background-position: 0 -2355px }
.tj { background-position: 0 -2366px }
.tk { background-position: 0 -2377px }
.tl { background-position: 0 -2388px }
.tm { background-position: 0 -2399px }
.tn { background-position: 0 -2410px }
.to { background-position: 0 -2421px }
.tr { background-position: 0 -2432px }
.tt { background-position: 0 -2443px }
.tv { background-position: 0 -2454px }
.tw { background-position: 0 -2465px }
.tz { background-position: 0 -2476px }
.ua { background-position: 0 -2487px }
.ug { background-position: 0 -2498px }
.um { background-position: 0 -2509px }
.us { background-position: 0 -2520px }
.uy { background-position: 0 -2531px }
.uz { background-position: 0 -2542px }
.va { background-position: 0 -2553px }
.vc { background-position: 0 -2564px }
.ve { background-position: 0 -2575px }
.vg { background-position: 0 -2586px }
.vi { background-position: 0 -2597px }
.vn { background-position: 0 -2608px }
.vu { background-position: 0 -2619px }
.wales { background-position: 0 -2630px }
.wf { background-position: 0 -2641px }
.ws { background-position: 0 -2652px }
.ye { background-position: 0 -2663px }
.yt { background-position: 0 -2674px }
.za { background-position: 0 -2685px }
.zm { background-position: 0 -2696px }
.zw { background-position: 0 -2707px }

/* 3rd party logos */
.logo-facebook {
	background: url('../i/sprite/social.png?5739') no-repeat scroll 0 -180px transparent;
	width: 55px;
	height: 21px;
	display:inline-block;
	text-indent:-9999px;
}

.logo-twitter {
	background: url('../i/sprite/social.png?5739') no-repeat scroll 0 -125px transparent;
	width: 71px;
	height: 21px;
	display:inline-block;
	text-indent:-9999px;
}

.logo-msn {
	background: url('../i/sprite/social.png?5739') no-repeat scroll 0 -212px transparent;
	width: 50px;
	height: 19px;
	display:inline-block;
	text-indent:-9999px;
}

.logo-email {
	background: url('../i/sprite/social.png?5739') no-repeat scroll 0 -151px transparent;
	width: 31px;
	height: 21px;
	display:inline-block;
	text-indent:-9999px;
}

/**
 * Ad-styles for the various ad formats used throughout the site.
 */

/* Leaderboard */
#leaderboardContainer .stardollads {
	width: 728px;
	height: 90px;
	margin: 0 auto;
	overflow: hidden;
	display: block !important; /* XXX empty leaderboards has a hide-script */
}

/* Rectangle/MPU */
div.sdadmpu {
	width: 300px;
	height: 250px;
	background-color: #dadada; /* XXX Temporary, so we can see where the ads should be */
	margin: 0 4px 20px;
	overflow: hidden;
}

/* Ad-info text (over ads, not for leaderboard) */
div.sdadinfo {
	font-size: 10px;
	color: #999;
	border-bottom: 1px solid #ccc;
	margin: 0 4px 1px 4px;
}

/* Skyscraper */
#sdads_bt_2 {
	width: 160px;
	overflow: hidden;
	margin: 0 4px;
}

/**
 * Buttons
 */
a.goldButton,
a.button {
	display: inline-block;
}

a.goldButton,
a.button,
button {
	background: transparent url('../i/sprite/button.png?5739') no-repeat left 0;
	height: 30px;
	color: #000;
	border: 0;
	cursor: pointer;
	width: auto;
	overflow: visible; /* removes extra side padding in IE */
	text-decoration: none;
	margin: -1px 8px 0 -1px; /* use margins to align with other elements, e.g. textareas */
	padding: 0;
	position:relative;
	zoom:1;
}

a.goldButton span,
a.button span,
button span {
	background: transparent url('../i/sprite/button.png?5739') no-repeat right -45px;
	display: block;
	white-space: nowrap;
	position: relative;
	line-height: 26px;
	height: 26px;
	text-decoration: none;
	padding: 1px 20px 3px 7px;
	right:-12px;
	top:0;
	margin-right:0;
}

a.goldButton { background-position:0 -360px; }
a.goldButton span { background-position:right -405px;}

a.goldButton:hover,
a.goldButton-hover {
	background-position: left -450px;
	text-decoration: none;
}

a.goldButton:hover span,
a.goldButton-hover span {
	background-position: right -495px;
	text-decoration: none;
}

a.goldButton:focus {
	outline: none;
}

a.goldButton:active,
a.goldButton-down {
	background-position: left -540px;
}

a.goldButton:active span,
a.goldButton-down span {
	background-position: right -584px;
	color: #540049;
}


/* Firefox bug fix with inner element behavior */
button::-moz-focus-inner {
	border: none;
	padding: 0; /* overrides extra padding in Firefox */
}

/* Safari and Google Chrome only - fix margins */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	button span {
		margin-top: -1px;
	}
}

/* Button states */

/* Over state */
a.button-hover,
button.button-hover {
	background-position: left -90px;
	text-decoration: none;
}

a.button-hover span,
button.button-hover span {
	background-position: right -135px;
	text-decoration: none;
}

a.button:focus,
button:focus {
	outline: none;
}

/* Down state */
a.button:active,
button:active,
a.button-down,
button.button-down {
	background-position: left -180px;
}

button.button-down {
	/* IE8 fix */
	-ms-background-position-x: 1;
	-ms-background-position-y: -179px;
}

a.button:active span,
button:active span,
a.button-down span,
button.button-down span {
	background-position: right -225px;
	color: #540049;
}

/* Disabled state */
a.button[disabled],
button[disabled],
a.button-disabled,
button.button-disabled {
	background-position: left -269px;
	cursor: default;
}

a.button[disabled] span,
button[disabled] span,
a.button-disabled span,
button.button-disabled span {
	background-position: right -314px;
	color: #616161;
}

/**
 * Input areas, textarea, aso
 * which need some special style for rounded corners etc.
 */

/*
 * Normal text <input> element.
 */
span.inputText {
	display:inline-block;
	position: relative;
	margin:0 5px 0 0;
}

span.inputText input,
span.inputText .end {
	background: #fff url('../i/makeover/common/inputText_sprite.png?5739') 0 0 no-repeat;
	padding:0;
	margin:0;
	border:0 none;
}

span.inputText input {
	width: 155px;
	border:0 none;
	padding:5px;
	height:15px;
}

span.inputText .end {
	display:block;
	background-position:100% 0;
	height:25px;
	width: 5px;
	position: absolute;
	right:0;
	top:0;
	*top:1px; /* target ie7 and below */
}

span.inputText.err input{
	background-position: 0 -58px;
	background-color: #ffe6e6;
}

span.inputText.err .end {
	background-position: 100% -58px;
	background-color: #ffe6e6;
}

span.inputText.foc input{
	background-position: 0 -83px;
	background-color: #fff;
}

span.inputText.foc .end {
	background-position: 100% -83px;
	background-color: #fff;
}

span.inputText input.textLarge {
	width: 200px;
}

span.inputText input.textLarger {
	width: 350px;
}

/* Full width input (in a 1-column box) */
span.inputText input.fullWidth {
	width: 257px;
}

/* Larger font */
span.inputText input.fontLarge {
	height: 17px;
	padding: 4px 5px;
	font-weight: bold;
	font-size: 16px;
}

/* Full width input (in a 2-column box) */
.primaryGridColumn span.inputText input.fullWidth {
	width: 503px;
}

/*
 * <textarea> input.
 */
div.textarea {
	background-color: #fff;
}

div.textarea div.areaHead,
div.textarea div.areaFoot {
	background: transparent url('../i/makeover/common/inputText_sprite.png?5739') 0 0 no-repeat;
	height: 5px;
	position: relative;
}

div.textarea.err div.areaHead {
	background-position: 0 -58px;
	background-color: #FFE6E6;
}

div.textarea div.areaHead span,
div.textarea div.areaFoot span {
	width: 5px;
	height: 5px;
	position: absolute;
	right: 0;
	top: 0;
	background: transparent url('../i/makeover/common/inputText_sprite.png?5739') right 0 no-repeat;
}

div.textarea.err div.areaHead span {
	background-position: 100% -58px;
	background-color: #FFE6E6;
}

div.textarea div.areaFoot {
	background-position: left -20px;
}

div.textarea.err div.areaFoot {
	background-position: 0 -78px;
	background-color: #FFE6E6;
}

div.textarea div.areaFoot span {
	background-position: right -20px;
}

div.textarea.err div.areaFoot span {
	background-position: right -78px;
	background-color: #FFE6E6;
}

div.textarea div.areaContainer {
	border-right: 1px solid #c3bcc3;
	border-left: 1px solid #c3bcc3;
	overflow: hidden;
	background-color: #fff;
	_zoom: 1;
}

div.textarea.err div.areaContainer {
	border-left-color: #ff0000;
	border-right-color: #ff0000;
	background-color: #FFE6E6;
}

div.textarea div.areaContainer textarea {
	margin: 0 3px;
	padding: 0;
	border: none;
	background-color: #fff;
	width: 98%; /* don't expand fully due to problems with outside padding */
}

div.textarea.err div.areaContainer textarea {
	background-color: #FFE6E6;
}

/* Label placed inside an input */
span.inlinedLabel {
	background-color: #fff;
	overflow: hidden;
}

span.inlinedLabel label {
	position: absolute;
	top:0;
	left:0;
	display: block;
	padding: 5px 3px 1px 7px;
	color: #777;
	font-style: italic;
	z-index:1;
}
span.inlinedLabel input {
	position:relative;
	background-color:transparent;
	z-index:2;
}

span.inlinedLabel label.focus,
span.inlinedLabel label.hasText {
	visibility: hidden;
}

span.inlinedLabel .end {
	z-index:3;
}

/**
 * Header area, i.e. the area with the menu, profile card, logo etc.
 */

#headerContainer div.header {
	position: relative;
	height: 156px;
}

#headerContainer div.header .logo {
	position: absolute;
	left: 1px;
	top: 2px;
	display: inline;
}

#headerContainer div.header .logo a {
	float: left;
	text-decoration: none;
	overflow: hidden;
	width: 111px;
	height: 66px;
	border: 0;
	margin-top: 17px;
}

#headerContainer div.header .logo a.starLogo {
	background: transparent url('../i/sprite/sd_logos.png?5739') 2px 2px no-repeat;
	padding-top: 66px;
	height: 0;
	margin-top: 0;
}

#headerContainer div.header .menu {
	position: absolute;
	top: 77px;
	width: 100%;
}

.slim #headerContainer div.header {
	height:91px;
}

/**
 * Footer area
 */

#footerContainer {
	position: relative;
	font-size: 10px;
	background: transparent url('../i/sprite/main_bg.jpg?5739') no-repeat center -5px;
	_zoom: 1;
}

#footerContainer .contents {
	margin: 0 auto 0;
	padding: 15px;
	width: 940px;
}

#footerContainer .gridColumns {
	margin: 10px 0 0 0;
}

#footerContainer .gridColumns .primaryGridColumn {
	margin: 0;
	width: 620px;
	color: #828284;
}

#footerContainer a.stardollLogo {
	background: transparent url('../i/sprite/sd_logos.png?5739') no-repeat -110px 0;
	width: 78px;
	height: 51px;
	margin-left: -6px;
	display:block;
	text-indent:-9999px;
	direction: ltr;
	overflow: hidden;
}
body.lang_ar #footerContainer a.stardollLogo {
	text-indent:9999px;
}
#footerContainer .navigation {
	float: left;
	width: 620px;
}

#footerContainer .navigation dt {
	font-style: italic;
	width: 70px;
}

#footerContainer .navigation dd {
	margin-bottom: 15px;
	width: 530px;
}

#footerContainer .navigation dd ul li {
	float: left;
	margin-left: 0;
	margin-right: 0;
	list-style: none outside;
	font-size: 7px;
	white-space: nowrap;
}

#footerContainer .navigation dd ul li.first {
	list-style: none;
}

#footerContainer .navigation dd ul li a {
	font-size: 10px;
}

#footerContainer .privo {
	display: block;
	background: transparent url('../i/sprite/sd_logos.png?5739') no-repeat -323px top;
	width: 86px;
	height: 0;
	overflow: hidden;
	padding-top: 17px;
	margin-top: 5px;
}

#footerContainer .inputText {
	float: left;
}

#footerContainer button {
	float: left;
	margin-left: 5px;
	margin-top: -1px;
}

#footerContainer .languageSelector {
	margin-bottom: 20px;
}

/* Partner logos */
#footer.nonetworklogos .logotypes {
	display: none;
}
#footerContainer .logotypes {
	margin-top: 20px;
}
#footerContainer .logotypes a {
	background: transparent url('../i/sprite/sd_logos.png?5739') no-repeat left top;
	display: block;
	float: left;
	margin-right: 20px;
	overflow: hidden;
	height: 0;
}

#footerContainer .logotypes .stardoll {
	background-position:-188px 0;
	width: 136px;
	padding-top: 14px;
	margin-top: 11px;
}

#footerContainer .logotypes .piczo {
	background-position:-473px 0;
	width: 58px;
	padding-top: 41px;
}

#footerContainer .logotypes .pdh {
	background-position:-410px 0;
	width: 58px;
	padding-top: 37px;
}

/**
 * Styles for the bar containing chat, broadcast etc.
 */
#barContainer {
	background: transparent url('../i/sprite/ribbon_bg.png?5872') left -122px repeat-x;
	width: 100%;
	position: relative;
	height: 38px;
	margin-bottom: -9px;
}

#barContainer div.bar {
	background: transparent url('../i/sprite/ribbon.png?5885') center -42px no-repeat;
}

#barContainer ul.content {
	margin: 0 auto;
	width: 970px;
	padding: 3px 0 10px;
}

#barContainer .content li {
	float: left;
	margin: 0 8px 0 0;
	padding: 0 9px 0 0;
	background: transparent url('../i/sprite/ribbon.png?5885') right -162px no-repeat;
}

/* Search box */
#barContainer ul.content li.search {
	float: right;
	margin: 0 0 0 9px;
	padding: 0;
}

#barContainer ul.content .inlineLabel {
	position: relative;
	margin-right: 5px;
}

/* Label placed inside an input */
#barContainer ul.content label {
	position: relative;
	z-index: 1;
	display: block;
	padding: 4px 3px 2px 7px;
	color: #777;
	height:15px;
}

#barContainer ul.content label.hasText {
	visibility: hidden;
}

#barContainer ul.content input.text {
	padding: 3px;
	margin-top: -21px;
	position: relative;
	z-index: 2;
	display: block;
	background: transparent;
	border: 1px solid #ccc;
}

#barContainer ul.content li.search label {
	font-style: italic;
	width:50px;
	padding-left:20px;
}

#barContainer ul.content li.search .inputText,
#barContainer ul.content li.search .end {
	background: transparent url('../i/sprite/ribbon.png?5885') -939px -217px no-repeat;
}

#barContainer ul.content li.search input.text {
	width: 70px;
	padding: 4px 3px 4px 20px;
	border: none;
}

#barContainer ul.content li.search .end {
	background-position: right -217px;
	width: 5px;
	height: 23px;
}

/* Language selector */
.languageSelector li {
	background-image: none !important;
	float: left;
	width: 95px !important;
	margin: 0 5px 5px 0 !important;
	padding: 0 !important;
}

.languageSelector li a {
	font-size: 10px;
}

#barContainer ul.content li.language {
	float: right;
	margin: 0;
	position: relative;
	padding: 0;
	background-image: none;
}

/* Clear the dropdown background (in this special case) */
#barContainer .language a.dropdown,
#barContainer .language a.dropdown .end {
	background-position: 100px 100px;
}

#barContainer .language a.dd-expanded {
	background-position:0 -180px;
}

#barContainer .language a.dd-expanded .end {
	background-position: right -210px;
}

#barContainer .language div.dropdown {
	display: none;
	width: 310px;
	padding: 0;
	right: 1px;
	top:24px;
	left: auto;
	background: none;
}

#barContainer .language div.dropdown .contentContainer {
	padding: 5px 0 0 5px;
}

/* Special mapping of flag icons via language */
.languageSelector .sv, #barContainer .language .sv { background-position: 0 -2146px; }
.languageSelector .da, #barContainer .language .da { background-position: 0 -627px; }
.languageSelector .ar, #barContainer .language .ar { background-position: 0 -2091px; }
.languageSelector .pt, #barContainer .language .pt { background-position: 0 -308px; }

/* Notifications area */

#barContainer ul.content li.events a.dropdown,
#minime_messages a {
	display: block;
	width: 30px;
	height: 28px;
	padding: 0;
	z-index: 4;
	position: relative;
	margin: -2px 0 0 1px;
	background: transparent url('../i/icon-sprite.png?5856') no-repeat 0 0;
}

#barContainer ul.content li.events div.dropdown {
	z-index: 3;
}

#barContainer ul.content li.events a.dropdown { background-position: 0 -1680px; }
#barContainer ul.content li.events a.unread { background-position: 0 -1712px; }
#barContainer ul.content li.events a.dd-expanded { background-position: 0 -1983px; }
#barContainer ul.content li.eventsUnread a.dd-expanded { background-position: 0 -1744px; }
body.isPinned #barContainer ul.content li.events a.dd-expanded { background-position: 0 -1952px; }
body.isPinned #barContainer ul.content li.eventsUnread a.dd-expanded { background-position: 0 -1918px; }

#minime_messages a { background-position: 0 -1779px; }
#minime_messages a:hover { background-position: 0 -1814px; }
#minime_messages a.highlight { background-position: 0 -1848px; }
#minime_messages a.highlight:hover { background-position: 0 -1883px; }

#barContainer ul.content li.events {
	background-image: none;
	padding: 0;
	margin: 0;
	position: relative;
}

#barContainer ul.content li.events ul {
	margin: 10px 0;
	position: relative;
}
#barContainer ul.content li.events a.close {
	position: absolute;
	background: transparent none;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	font-weight: bold;
	top: 1px;
	right: 14px;
}
#barContainer ul.content li.events a.close:hover {
	text-decoration: none;
}
#barContainer ul.content li.events ul li {
	float: none;
	padding: 0;
	margin: 0;
	background-image: none;
	border-bottom: 0 none;
}

#barContainer ul.content li.events ul li.highlight {
	background-color: #FBEAFB;
	font-weight: bold;
}
#barContainer ul.content li.events ul li a.block {
	position: relative;
	padding: 3px 10px;
}
#barContainer ul.content li.events ul li a span {
	color: #000;
}

/* pin bar */
#barContainer ul.content li.pin {
	margin-left: 5px;
}

#barContainer li.pin a.pin {
	float: left;
	background: transparent url('../i/icon-sprite.png?5856') 0 -1650px no-repeat;
	width: 28px;
	height: 23px;
	padding-bottom: 5px;
}

.isPinned #barContainer li.pin a.pin { background-position: 0 -2019px; }

/*
 * Chat Conversations
 */
/* Element to show online-count in */
/* Chat style */
#chatable {
	position: relative;
	padding-right: 6px;
	margin-right:0;
	max-width: 427px;
}

#chatContainer .logContainer {
	position: absolute;
	top: 24px;
	left: 0;
	padding: 0;
}

body.isPinned #chatContainer div.dropdown {
	+bottom: 0;
}

#barContainer .chat div.dropdown {
	background-position: -931px bottom;
}

/* chat status */
#chatable .status {
	padding: 5px;
	background: #eee;
	display: none;
}


#chatable .im_disconnecting a.dropdown,
#chatable .im_disconnected a.dropdown {
	font-style: italic;
}

#chatable .im_disconnecting .status,
#chatable .im_disconnected .status {
	display: block;
}

#chatable div.activeListContainer {
	position: relative;
	float: left;
	overflow: hidden;
	max-width: 306px;
	height: 26px;
}

#chatable .active {
	position: relative;
	left: 0;
	top: 0;
}

#chatable .onlineListHeader {
	display: none;
	padding: 3px;
	background-color: #be69b3;
	font-weight: bold;
	color: #fff;
}

#chatable .im_disconnected .online,
#chatable .im_disconnecting .online {
	display: none;
}

#chatable .online {
	padding: 3px;
	max-height: 135px;
	_height: 135px;
	overflow: auto;
}

	#chatable .online li {
		position: relative;
		font-size: 11px;
		border-bottom: 1px solid #ececec;
		background-image: none;
		float: none;
		margin: 0;
		padding: 0;
	}

		#chatable .online li:last-child {
			border-bottom: none;
		}

		#chatable .online a {
			display: block;
			padding: 5px 0 5px 8px;
			font-weight: bold;
			outline: none;
			+zoom:1;
		}

		#chatable .online li:hover a,
		#chatable .online .liHover a {
			text-decoration: underline;
			background-color: #FBEAFB;
		}

		#chatable .online .ic {
			position: absolute;
			width: 20px;
			height: 23px;
			top: 1px;
			right: 0;
			padding: 0;
			cursor: pointer;
			overflow: visible;
		}

		#chatable .online .ic-suitechat {
			right: 30px;
		}

		#chatable .online small {
			display: none;
			position: absolute;
			top: 4px;
			right: 50px;
			height: 15px;
			padding: 0 4px 0 3px;
			color: #fff;
			font-size: 11px;
			font-weight: bold;
			line-height: 15px;
			background: transparent url('../i/icon-sprite.png?5856') no-repeat 0 -2120px;
			z-index: 1336;
		}

		#chatable .online .gtsTip {
			right: 20px;
		}

			#chatable .online small span {
				display: block;
				padding: 0 8px 0 2px;
				white-space: nowrap;
				background: transparent url('../i/icon-sprite.png?5856') no-repeat 100% -2140px;
			}

/* Bold unread conversations */
#barContainer ul #chatable ul.active li a.hasUnread span.end {
	font-weight: bold;
}

/* Active conversations */
#barContainer ul #chatable ul.active li {
	float: left;
	_display: inline;
	position: relative;
	margin: 0 0 0 3px;
	padding: 0;
	background: none;
}

/* Chat input field */
#chatable .logContainer textarea {
	font-size: 11px;
	padding: 1px 0;
	border: none;
	max-height: 16px;
	width: 180px;
	_width: 177px;
	overflow-y: scroll;
	background-color: transparent;
	resize:none;
}

#chatable .logContainer .taContainer {
	border-top: 1px solid #ccc;
	_zoom: 1;
}

#chatable .logContainer .taIcon {
	background: transparent url('../i/icon-sprite.png?5856') no-repeat 2px -686px;
	width:20px; height:14px; float:left;
}

/* Input area in pinned mode */
body.isPinned #chatable .logContainer textarea {
	max-height: 100px;
}

body.isPinned #chatable .logContainer .taContainer {
	border-bottom: 1px solid #ccc;
}

#barContainer ul #chatable ul.active li a.dropdown {
	padding-left: 10px;
}

#barContainer ul #chatable ul.active li .end {
	overflow: hidden;
	width: 77px;
}

#barContainer ul #chatable ul.active li .end .label {
	display: block;
	float: left;
	overflow: hidden;
	width: 68px;
	height: 15px;
}

#chatable b.close,
#chatable b.minimize {
	background: transparent url('../i/sprite/ribbon.png?5885') no-repeat -383px -515px;
}

#chatable b.close {
	float: right;
	margin: -4px -8px 0 0;
	padding: 4px 8px 4px 4px;
	width: 4px;
}

#chatable b.closeHover {
	background-position:-407px -515px;
}

/* links in the top of the chat log */
#chatable .logContainer .top b {
	margin: -5px 0;
	padding: 4px 6px;
	display: block;
	float: right;
	font-size: 11px;
	color: #fff;
	cursor: pointer;
}

#chatable .logContainer .top b.close,
#chatable .dd-active b.close {
	background-position: -431px -515px;
}

#chatable .logContainer .top b.closeHover,
#chatable .dd-active b.closeHover {
	background-position: -455px -515px;
}

#chatable .logContainer .top b.minimize {
	background-position: -479px -515px;
}

#chatable .logContainer .top b.minimizeHover {
	background-position: -503px -515px;
}
/* Nick and timestamp */
#chatable .top,
#chatable .log div em,
body.isPinned #chatable .log br {
	display: none;
}

#chatable .chatNav {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 43px;
	height: 22px;
	margin: 0;
	padding: 0;
	background: transparent url('../i/icon-sprite.png?5856') no-repeat 0 -2160px;
}

	#chatable .chatNav a {
		display: block;
		float: left;
	}

		#chatable .chatNav .ic {
			display: block;
			width: 22px;
			height: 20px;
			margin: 0 0 0 3px;
			padding: 0;
			text-indent: -9999px;
			opacity: 1;
			filter: alpha(opacity=100);
		}

		#chatable .chatNav .ic-gotosuite {
			width: 11px;
			margin-left: 3px;
		}

.isPinned #chatable .chatNav {
	display: block;
	position: static;
	width: auto;
	height: 22px;
	background-position: 0 -2190px;
	background-repeat: repeat-x;
	overflow: visible;
}

	.isPinned #chatable .chatNav a {
		width: 99px;
		height: 21px;
		text-align: center;
		border-right: 1px solid #E5C3E1;
	}

	.isPinned #chatable .chatNav a:last-child {
		border-right: none;
		border-left: 1px solid #fff;
	}

	.isPinned #chatable .chatNav a:hover {
		text-decoration: none;
		background: transparent url('../i/icon-sprite.png?5856') repeat-x 0 -2220px;
	}

		.isPinned #chatable .chatNav .ic {
			display: inline;
			width: auto;
			height: auto;
			margin: 0;
			padding: 4px 0 2px 22px;
			+padding-top: 0;
			font-size: 10px;
			line-height: 21px;
			text-indent: 0;
			text-shadow: #fff 1px 1px 0px;
			+zoom: 1;
		}

		.isPinned #chatable .chatNav .ic-gotosuite {
			margin: 0;
			padding-left: 12px;
		}

#chatable .log {
	font-size: 11px;
	height: 68px;
	overflow-x: hidden;
	overflow-y: scroll;
	padding: 0 0 1px 8px;
}

#chatable .log p {
	padding: 1px 3px 0 0;
	word-wrap: break-word;
}
#chatable .log .in,
#chatable .log .out {
	display: inline-block;
	margin-left: -5px;
	padding: 2px 3px 0 0;
}

#chatable .log .in b { color: #b0a68e; }
#chatable .log .out b { color: #69c; }

/* First <p> after a <div> */
#chatable .log p.f {
	display: inline;
}

#chatable .top a {
	font-weight: bold;
	color: #fff;
}
#chatable .pl1 .top span.ic-superstar {
	margin-left: 4px;
}

/* Pinned chat */
body.isPinned #chatable .log {
	height: 178px;
	padding: 0 0 1px;
}
body.isPinned #chatable .log .in,
body.isPinned #chatable .log .out {
	display: block;
	margin: 0 2px;
	padding: 1px 3px 0;
	border-top: 1px solid #ececec;
}

body.isPinned #chatable .log em,
body.isPinned #chatable .log em {
	display: inline-block;
	float: right;
	font-style: normal;
	font-size: 10px;
	color: #999;
	overflow: hidden;
}

body.isPinned #chatable .log p,
body.isPinned #chatable .log p.f {
	padding: 2px 5px;
	display: block;
}
body.isPinned #chatable .top {
	display: block;
	background-color: #be69b3;
	padding: 3px 2px 3px 5px;
}
body.isPinned #chatable .active input {
	padding: 3px 1px 3px 18px;
	background-position: 2px -683px;
}

#chatboxlink .ic-chat {
	margin-left: -1px;
}

/* Online counter */
#chatboxlink .end b { font-weight: normal; }

/* Conversation nav scroller buttons */
#barContainer ul #chatable a.scroll {
	padding: 3px 4px 5px;
	_padding: 3px 2px 5px;
	display: block;
	float: left;
	outline: none;
	text-decoration: none;
}

#barContainer ul #chatable a.scroll:hover {
	background-color: #fbeafb;
}

#barContainer ul #chatable a.scroll:active {
	color: #000;
	background: none;
}

#barContainer ul #chatable a.scroll.disabled,
#barContainer ul #chatable a.scroll.disabled:hover,
#barContainer ul #chatable a.scroll.disabled:focus {
	color: #ccc;
	background: none;
	cursor: default;
}

#barContainer ul #chatable a.scroll.left {
	margin-left: 5px;
}

/* Broadcast */
#barContainer ul.content li.broadcast {
	position: relative;
	float: right;
	font-size: 11px;
	margin: -4px 0 0;
	padding: 0 33px 0 9px;
	background-position: right -159px;
	overflow:hidden;
	line-height:28px;
}

#barContainer ul.content li.broadcast a.write {
	position: absolute;
	right: 0;
	top: 4px;
	width: 28px;
	height: 23px;
	background: transparent url('../i/icon-sprite.png?5856') 0 -1617px no-repeat;
}

#barContainer ul.content li.broadcast #broadcastmsg {
	float: left;
	display: block;
	margin-top: 2px;
	height: 28px;
	overflow: hidden;
}

#barContainer ul.content li.broadcast #broadcastmsg .sender {
	position: absolute;
	top: 2px;
	left: 5px;
	overflow: hidden;
}

	#broadcastmsg .sender small {
		padding-left: 2px;
		font-size: 11px;
	}

body.lang_ar #barContainer ul.content li.broadcast #broadcastmsg .sender {
	float: right;
	text-align: right;
}

#barContainer ul.content li.broadcast #broadcastmsg .text {
	text-align: left;
	margin-left: 2px;
}

body.lang_ar #barContainer ul.content li.broadcast #broadcastmsg .text {
	float: right;
	text-align: right;
	margin-left: 0;
	margin-right: 2px;
}

#barContainer ul.content li.broadcast #broadcastmsg.compactMode .sender {
	float: right;
	margin-left: 5px;
}

#barContainer ul.content li.broadcast #broadcastmsg.compactMode .text {
	float: none;
	display: inline;
}

#barContainer ul.content li.broadcast a {
	display: block;
	position: relative;
	top: 0;
	color: #a9389a;
	padding: 0;
	text-decoration: none;
}


/* Pinned style (in footer) */
body.isPinned #barContainer {
	top: auto;
	bottom: 0;
	position: fixed;
	background: transparent url('../i/sprite/ribbon_bg.png?5872') left -105px repeat-x;
	height: 49px;
	left: 0;
}

body.isPinned #barContainer div.bar {
	background-position: center -110px;
	padding-top: 9px;
}

body.isPinned #barContainer ul.content {
	position: static;
	border-bottom: none;
}


/**
 * Styles for the menu and sub-navigation.
 */
div.menu ul {
	height: auto;
	border: none;
	margin: 0;
}

div.menu ul li {
	margin: 0;
	float: left;
}

div.menu ul li a {
	display: block;
	text-decoration: none;
	float: left;
	color: #000;
}

div.menu ul li a span {
	text-decoration: none;
}

.menu .topNav {
	height: 47px;
}

.topNav li {
	background: transparent url('../i/makeover/menu/parts_sprite.png?5739') no-repeat right -275px;
	_background-image: url('../i/makeover/menu/parts_sprite_8.png?5739');
	direction: ltr;
}

.topNav a {
	position: relative;
	z-index: 2;
	outline: none;
}

#topNav a.active,
.topNav a:hover {
	left: -1px;
	top: -9px;
	_width: 1%;
	height: 47px;
	text-decoration: none;
}

.topNav a .label {
	display: block;
	padding: 14px 24px 9px;
	font-size: 13px;
	_white-space: nowrap;
	direction: rtl;
}

.topNav a:hover .label,
#topNav a.active .label {
	position: relative;
	color: #620756;
	height: 27px;
	_height: 21px;
	padding-top: 19px;
	z-index: 2;
}

.topNav a:hover .start,
#topNav a.active .start {
	display: block;
	position: absolute;
	_width: 100px;
	top: 0;
	left: 0;
	right: 10px;
	height: 55px;
	background: transparent url('../i/makeover/menu/parts_sprite.png?5739') no-repeat 0 -83px;
	_background-image: url('../i/makeover/menu/parts_sprite_8.png?5739');
	z-index: 1;
}

#topNav .first a.active .start {
	background-position: 0 -332px;
	right: 9px;
}

.topNav a:hover .start {
	left: 1px;
	height: 48px;
	background-position: 0 0;
}

.topNav a:hover .end,
#topNav a.active .end {
	display: block;
	position: absolute;
	top: 0;
	right: -1px;
	_right: -2px;
	width: 11px;
	height: 55px;
	background: transparent url('../i/makeover/menu/parts_sprite.png?5739') no-repeat right -145px;
	_background-image: url('../i/makeover/menu/parts_sprite_8.png?5739');
	z-index: 1;
}

#topNav .first a.active .end {
	background-position: 100% -393px;
}

.topNav a:hover .end {
	height: 48px;
	background-position: 100% -459px;
}

/*.topNav a:hover span,
.topNav .active span {
	color: #620756;
	background-position: 0 -83px;
}
*/
/* First active item has special background */
div.menu ul.subNav {
	position: relative;
	top: -9px;
	background: transparent url('../i/makeover/menu/parts_sprite.png?5739') repeat-x 0 -230px;
	_background-image: url('../i/makeover/menu/parts_sprite_8.png?5739');
	border: none;
	margin: 0;
	min-height: 35px;
	overflow: hidden;
	clear: both;
	text-transform:uppercase;
}

div.menu ul.subNav li {
	padding-bottom: 11px;
}

div.menu ul.subNav li a {
	padding: 9px 27px 6px;
	font-size: 10px;
	outline: none;
	text-align: center;
	white-space: nowrap;
	margin-top: 1px;
	_overflow: hidden;
}

div.menu ul.subNav li.active {
	background: transparent url('../i/makeover/menu/parts_sprite.png?5739') no-repeat center -181px;
	_background-image: url('../i/makeover/menu/parts_sprite_8.png?5739');
}

div.menu ul.subNav li a:hover,
div.menu ul.subNav li.active a {
	color: #000;
	text-decoration: none;
	font-weight: bold;
}

/* Menu for slim pages */
div.menu ul.slim { height: 39px; }

/* Menu style modifications needed for some languages with long words */
body.lang_el div.menu ul.subNav li a {
	padding-right: 23px;
	padding-left: 23px;
}

body.lang_it div.menu ul.subNav li a {
	padding-right: 24px;
	padding-left: 24px;
}

body.lang_nl div.menu ul.subNav li a {
	padding-right: 25px;
	padding-left: 25px;
}

body.lang_pl div.menu ul.subNav li a {
	padding-right: 23px;
	padding-left: 23px;
}

body.lang_ru div.menu ul.subNav li a {
	padding-right: 23px;
	padding-left: 23px;
}

/**
 * Login box and minime
 */
#loginArea, #minime {
	position: absolute;
	top: 0;
	overflow: hidden;
	font-size: 12px;
	color: #4c471d;
	z-index: 2;
}
#loginArea {
	right: -17px;
}

#minime {
	right: -16px;
}

#loginArea {
	width: 255px;
	height: 96px;
	padding: 20px 20px 10px;
	background: transparent url('../i/sprite/ribbon.png?5885') left -424px no-repeat;
}

#loginArea .inputText {
	margin: 0;
}

/* use input sprite with matching background */
#loginArea .inputText input {
	width: 115px;
	background-position: left -118px;
}

#loginArea .inputText .end {
	background-position: right -118px;
}

#loginArea div.remember {
	float: left;
	margin-top: 7px;
	width: 50%;
}

#loginArea a.button,
#loginArea button {
	float: right;
	margin-right: 8px;
	font-size: 11px;
}

#loginArea button span {
	padding-right: 12px;
	padding-left: 0;
}

#loginArea div.metadata {
	padding-top: 5px;
	margin-top: 5px;
	border-top: 1px solid #c5aecf;
}

#loginArea div.metadata .forgotPassword {
	float: left;
	width: 60%;
}

#loginArea div.metadata .signup {
	float: right;
	font-size: 12px;
	width: 40%;
	text-align: right;
}

/**
 * Stylesheet for user's minime ("profile card")
 */
#minime {
	top: 13px;
	width: 280px;
	height: 73px;
	padding: 20px 3px 10px 10px;
	background: transparent url('../i/sprite/ribbon.png?5885') -296px -193px no-repeat;
}

#minime a.logout {
	position: absolute;
	right: 7px;
	top: 10px;
	width: 22px;
	height: 22px;
	display: block;
}

#minime dl.user {
	height: 53px;
	padding: 10px;
	width: 256px;
}

#minime dl.user .avatar {
	float: left;
	width: 44px;
}
#minime dl.user dt.avatar {
	background: transparent url('../i/sprite/ribbon.png?5885') -210px -309px no-repeat;
	padding:1px;
	margin-top:7px;
	position: relative;
}

#minime dl.user dt.avatar .icm {
	position: absolute;
	left: -7px;
	top: -11px;
}

#minime dl.user .avatar .visual {
	padding: 0;
	display: block;
}

#minime dl.user .info {
	float: right;
	width: 202px;
}

#minime dl.user dl .nickname {
	float: left;
	width: 70%;
	overflow: hidden;
}

#minime dl.user dl .starPoints {
	float: right;
	margin: 0;
	text-align: right;
	width: 27%;
	padding: 0 5px 0 0;
}

#minime .financials {
	width: 100%;
	margin-top: 8px;
}

#minime .financials dd {
	float: left;
	padding: 7px;
}

#minime .financials .starDollars { padding-right:0; padding-left:3px; }

#minime .financials .playEarn {
	float:right;
	padding-left:0;
	padding-right:5px;
}
#minime .financials .cta {
	float: right;
	padding: 0;
	position:relative;
	margin-top:-1px;
}

#minime .financials .cta a {
	background: transparent url('../i/sprite/ribbon.png?5885') -2px -309px no-repeat;
	width:97px;
	display:block;
	text-align:center;
	padding-top:6px;
	padding-bottom:6px;
	margin-top:2px;
	color:#000;
}

#minime .financials .cta a:hover { text-decoration:none; background-position: -2px -341px; }
#minime .financials .cta a:active { text-decoration:none; background-position: -2px -373px; }

#minime .financials .cta .button {
	margin-top: -1px;
}

#minime a {
	color: #000;
}

#minime h3 a {
	color: #540049;
	font-weight: normal;
	font-style: normal;
	font-family: Georgia, serif;
}

#minime .icm-starpointsBig,
a.upgradeButton .icm-starpointsBig {
	position:absolute;
	right:-8px;
	top:-7px;
	width:7px;
	background-position:0 -895px;
}
#minime .icm-starpointsBig { background-position:0 -1511px; }

/**
 * Profilecard superstar specific
 */
#minime.superstar { background-position:-592px -193px; }
#minime.superstar dl.user dt.avatar { background-position:-257px -309px; }
#minime.superstar .financials .cta a { width:104px; background-position:-105px -309px; }
#minime.superstar .financials .cta a:hover { text-decoration:none; background-position:-105px -341px; }
#minime.superstar .financials .cta a:active { text-decoration:none; background-position:-105px -373px; }

/**
 * Language specific.
 */
body.lang_el h1, body.lang_el h2,
body.lang_el .h1, body.lang_el .h2,
body.lang_el h2 a,
body.lang_el div.menu ul.subNav {
	text-transform:none;
}

/**
 * Stylesheet for the section boxes.
 */
div.box {
	border-top: 1px solid #d8d8d8;
	border-bottom: 1px solid #d8d8d8;
	background: #fff url('../i/makeover/common/box/tm.png?5739') left top repeat-x;
	margin: 4px 4px 15px;
	position: relative;
}

div.box h2 {
	padding: 15px 14px 5px;
	position: relative;
	z-index: 1;
}

div.box .contents {
	padding: 10px 14px 15px;
	overflow: hidden;
}

div.box .headerRightElement {
	position: absolute;
	right: 15px;
	top: 20px;
	z-index: 2;
}

div.box h2,
	div.box .contents {
	border-left: 1px solid #d8d8d8;
	border-right: 1px solid #d8d8d8;
}

div.box .contents h3 {
	width: 130px;
	margin: 0 0 15px;
}

div.box div.end {
	height: 5px;
}

div.box div.end img {
	width: 5px;
	height: 5px;
	float: right;
}

div.box div.foot {
	position: relative;
	margin-top: -4px;
	bottom: -1px;
	background: transparent url('../i/sprite/box_corners.png?5739') left bottom no-repeat;
}

div.box div.foot img {
	background: transparent url('../i/sprite/box_corners.png?5739') right bottom no-repeat;
}

div.box div.head {
	position: relative;
	top: -1px;
	background: transparent url('../i/sprite/box_corners.png?5739') left top no-repeat;
}

div.box div.head img {
	background: transparent url('../i/sprite/box_corners.png?5739') right top no-repeat;
}

div.box ul.pagination {
	margin: 20px -14px -16px;
}

div.box a.readMore {
	background: url('../i/sprite/box_common.png?5739') -914px 0 transparent no-repeat;
	clear:both;
	text-align:center;
	display:block;
	margin: 20px -14px -16px;
	padding:23px 0 10px;
	outline: none;
}

/* other bg (smaller gradient) and thinner when displayed in right column */
.lastGridColumn div.box a.readMore {
	padding: 19px 0 6px;
	background-position:-598px 0;
}

div.box a.readMoreArrow {
	outline: none;
}

div.box a.readMoreArrow span.image {
	background:url('../i/sprite/box_common.png?5739') no-repeat scroll -1537px 0 transparent;
	display:block;
	position:relative;
	width:44px;
	height:17px;
	margin:-17px auto 0;
	bottom:-16px;
}

/* Styles when all undisclosed items in the box are displayed */
div.box.uncoverAllUndisclosedItems a.readMore {
	display: none;
}

div.box.uncoverAllUndisclosedItems a.readMoreArrow span.image {
	background-position: -1537px -28px;
}

/* Uses for standard boxes without background */
div.boxClean {
	background: none;
}

/**
 * Stylesheet for the 'clear' (less prominent) section boxes.
 */
div.clearBox {
	border-top: 1px solid #d8d8d8;
	border-bottom: 1px solid #d8d8d8;
	background-color: #fff;
	margin: 4px 4px 14px;
	position:relative;
}

div.clearBox h2 {
	padding: 10px 0 5px;
}

div.clearBox .contents {
	padding: 6px 9px 10px;
	overflow: hidden;
	border-left: 1px solid #d8d8d8;
	border-right: 1px solid #d8d8d8;
}

div.clearBox div.end {
	height: 5px;
}

/*TODO: remove img from all places and put in a div*/
div.clearBox div.end img,
div.clearBox div.end div {
	width: 5px;
	height: 5px;
	float: right;
}

div.clearBox div.head {
	margin-top: -1px;
	background: transparent url('../i/makeover/common/clearBox/clearBox_sprite.png?5739') 0 0 no-repeat;
	_overflow: hidden;
}

/*TODO: remove img from all places and put in a div*/
div.clearBox div.head img,
div.clearBox div.head div {
	background: transparent url('../i/makeover/common/clearBox/clearBox_sprite.png?5739') 0 -15px no-repeat;
}

div.clearBox div.foot {
	bottom:-1px;
	margin-top:-4px;
	position:relative;
	background: transparent url('../i/makeover/common/clearBox/clearBox_sprite.png?5739') 0 -45px no-repeat;
}

/*TODO: remove img from all places and put in a div*/
div.clearBox div.foot img,
div.clearBox div.foot div {
	background: transparent url('../i/makeover/common/clearBox/clearBox_sprite.png?5739') 0 -30px no-repeat;
}

/* Artistic imagery, e.g. the leaves at the bottom */
.clearBox .artisticDetail {
	position: absolute;
	left: -14px;
	top: -10px;
}

.clearBox .leavesLeft {
	background: transparent url('../i/makeover/common/artistic/leaves_left.png?5739') no-repeat left top;
	width: 31px;
	height: 24px;
}

/* thumbnails in a clearbox */
.clearBox ul.gridThumbnails {
	margin-left: -10px;
}

.clearBox ul.gridThumbnails li {
	margin-left: 8px;
}

/**
 * flowingSection - Stylesheet for the section boxes.
 */

/* Style of a section that can flow height-wise (i.e. counterpart of a 'box') */
.flowingSection {
	border-bottom: 1px solid #cccccc;
	position: relative;
	margin: 4px 4px 14px 4px;
}

/* Last section of a page */
.lastFlowingSection {
	border-bottom: none;
}

.flowingSection .gridColumns {
	margin: 0 -4px 14px -12px;
}

.flowingSection h2,
.flowingSection h3 {
	margin-bottom: 5px;
}

.flowingSection .rightHeaderElement {
	position: absolute;
	right: 0;
	top: 0;
}

.flowingSection div.contents {
	padding-bottom: 20px;
}

/* Artistic imagery, e.g. the leaves at the bottom */
.flowingSection .artisticDetail {
	position: absolute;
	right: -4px;
	bottom: -1px;
}

.flowingSection .leavesRight {
	background: transparent url('../i/makeover/common/artistic/leaves_right.png?5739') no-repeat left top;
	width: 31px;
	height: 24px;
}

/* Box showing the user some instructions */
div.helpInstructions {
	padding: 10px;
	margin: 0 auto;
	text-align: center;
	width: 294px;
}

div.helpInstructions .rightHeaderElement {
	display: block;
	position: static;
	text-align: right;
	margin-bottom: 10px;
}

/**
 * interactiveBox - Box that user can interact with, e.g. the comments box.
 */
/* regular */
div.interactiveBox {
	background: #fedef5 url('../i/sprite/box.png?5739') left top repeat-x;
	margin: -1px 0 4px;
	position: relative;
	overflow: hidden;
}

div.interactiveBox h2 {
	padding: 0 0 10px;
}

div.interactiveBox h2.guestbook {
	padding: 5px 0 10px;
	background: transparent url('../i/makeover/common/icons/note.png?5739') right top no-repeat;
}

/* use input sprite with matching background */
div.interactiveBox span.inputText input { background-position: 0 -143px; }
div.interactiveBox span.inputText .end { background-position: 100% -143px; }

/* Lists of visualized content, e.g. avatars */
div.interactiveBox ul.visualizedContent li {
	position: relative;
	margin: 5px 0 0 0;
	padding-left: 61px;
}

div.interactiveBox ul.visualizedContent li .visual,
div.interactiveBox ul.visualizedContent li .avatar {
	float: left;
	margin-left: -60px;
	_margin-left: -30px;
	margin-top: 5px;
}

div.interactiveBox .headerRightElement {
	position: absolute;
	right: 20px;
	top: 11px;
}

div.interactiveBox .main, div.interactiveBox .bottom {
	position: relative;
	background: transparent url('../i/sprite/box_shadow.png?5739') left top repeat-y;
}

div.interactiveBox .main {
	margin: 10px 0 0 0;
	z-index: 3;
	padding: 10px 20px 15px;
}

div.interactiveBox .bottom {
	background: url('../i/sprite/box.png?5739') -1259px bottom no-repeat;
	z-index: 2;
	padding-top: 10px;
}

div.interactiveBox .bottom .wrapper {
	text-align: center;
	line-height: 30px;
	padding: 0 0 17px;
	background: url('../i/sprite/box_common.png?5739') -274px 20px no-repeat;
}

div.interactiveBox .bottom .wrapper.showMore .pagination {
	display: none;
}

div.interactiveBox.uncoverAllUndisclosedItems .bottom .wrapper {
	background: none;
}

div.interactiveBox.uncoverAllUndisclosedItems .bottom .wrapper.paginated {
	background: url('../i/sprite/box_common.png?5739') -274px 20px no-repeat;
}

div.interactiveBox.uncoverAllUndisclosedItems .bottom .wrapper .pagination {
	display: block;
}

div.interactiveBox .bottom .wrapper a.readMore {
	display: block;
	padding: 22px 0 6px;
	cursor: pointer;
	margin-top: -22px;
}

div.interactiveBox .bottom .wrapper a.readMore span.image {
	display: block;
	position: relative;
	bottom: -19px;
	width: 44px;
	height: 17px;
	margin: -16px auto 0;
	cursor: pointer;
	background: url('../i/sprite/box_common.png?5739') -213px 0 no-repeat;
}

div.uncoverAllUndisclosedItems .bottom .wrapper.showMore a.readMore {
	padding-top: 0;
}

div.uncoverAllUndisclosedItems .bottom .wrapper.showMore a.readMore span.label {
	display: none;
}

div.uncoverAllUndisclosedItems .bottom .wrapper.showMore a.readMore span.image {
	background-position: -213px -27px;
}

div.interactiveBox .main .rightBorder,
div.interactiveBox .bottom .rightBorder,
div.interactiveBox .main .leftBorder,
div.interactiveBox .bottom .leftBorder {
	position: absolute;
	top: 0;
	right: 0;
	width: 5px;
	background: transparent url('../i/sprite/box_shadow.png?5739') right top repeat-y;
	height: 100%;
}

div.interactiveBox .main .rightBorder,
div.interactiveBox .bottom .rightBorder {
	padding-top:10px;
	top: -26px;
}

div.interactiveBox .main .leftBorder, div.interactiveBox .bottom .leftBorder {
	top: auto;
	bottom: 25px;
	right: auto;
	left: 0;
	background: transparent url('../i/sprite/box_shadow.png?5739') left top repeat-y;
}

div.interactiveBox div.rightTopBorder, div.interactiveBox div.rightBottomBorder {
	background: transparent url('../i/sprite/box.png?5739') -620px 0 no-repeat;
	width: 15px;
	height: 11px;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 4;
}

div.interactiveBox div.rightBottomBorder {
	background:url('../i/sprite/box.png?5739') no-repeat scroll -1879px -68px transparent;
	height: 9px;
	top: auto;
	right: 0;
	bottom: 16px;
}

/* blue background plate */
div.interactiveBoxBlue {
	background: #e6f2f7 url('../i/sprite/box_blue.png?5739') left top repeat-x;
}

div.interactiveBoxBlue .main,
div.interactiveBoxBlue .bottom {
	background: transparent url('../i/sprite/box_shadow.png?5739') 1px top repeat-y;
}

div.interactiveBoxBlue .bottom {
	background: url('../i/sprite/box_blue.png?5739') -636px -113px no-repeat;
}

div.interactiveBoxBlue .main .rightBorder,
div.interactiveBoxBlue .bottom .rightBorder,
div.interactiveBoxBlue .main .leftBorder,
div.interactiveBoxBlue .bottom .leftBorder {
	background: transparent url('../i/sprite/box_shadow.png?5739') right top repeat-y;
}

div.interactiveBoxBlue .main .leftBorder,
div.interactiveBoxBlue .bottom .leftBorder {
	background: transparent url('../i/sprite/box_shadow.png?5739') left top repeat-y;
}

div.interactiveBoxBlue div.rightTopBorder,
div.interactiveBoxBlue div.rightBottomBorder {
	background: transparent url('../i/sprite/box_blue.png?5739') -619px top no-repeat;
}

div.interactiveBoxBlue div.rightBottomBorder {
	background: transparent url('../i/sprite/box_blue.png?5739') -1255px -115px no-repeat;
}

/**
 * Function specific styling
 */

/* Comments within an interactive box */
div.interactiveBox .comments {
	margin: 0;
}

div.interactiveBox .comments div.rightTopBorder {
	right: -1px;
}

div.interactiveBox .comments .main .rightBorder,
div.interactiveBox .comments .bottom .rightBorder {
	top: -15px;
}

/* Styles when showing comment actions (remove etc) */
div.interactiveBox .comments .showActionToggler .actions {
	display: block;
}
div.interactiveBox .comments .showActions .actions { width: 175px; }
div.interactiveBox .comments .showActions .actions p {
	display: block;
}

div.interactiveBox .comments .showActions .metadata {
	visibility: hidden;
}

div.interactiveBox .comments .actions {
	width: 0;
	position: absolute;
	bottom: 0;
	right: 13px;
}

div.interactiveBox .comments .actions p {
	float: left;
	display: none;
	padding: 0;
}

div.interactiveBox .comments .actions p a {
	display: block;
	float: left;
	margin-right: 10px;
	font-size: 10px;
}

div.interactiveBox .comments .actions a.toggle {
	float: right;
}

div.interactiveBox .comments .confirmation .main {
	text-align: center;
}

div.interactiveBox .comments .confirmation .main h4 {
	margin-bottom: 5px;
}

div.interactiveBox .comments .confirmation .main a {
	margin-right: 5px;
}
div.interactiveBox .comments .actions {
	height: 20px;
}
div.interactiveBox .comments .showActions .actionBox {
	background:url('../i/sprite/comments.png?5739') no-repeat scroll -2721px 0 transparent;
}
div.interactiveBox .comments .actions .actionBox {
	height: 22px;
	padding-left: 3px;
}
div.interactiveBox .comments .actions .actionBox p {
	padding-top: 3px;
}
div.interactiveBox .comments .metadata {
	/*height: 17px;*/
	line-height: 22px;
}
div.interactiveBox .comments .showActions .actionsEnd {
	background:url('../i/sprite/comments.png?5739') no-repeat scroll -2914px 0 transparent;
}
div.interactiveBox .comments .actionsEnd {
	float: right;
	width: 7px;
	height: 17px;
	margin-right: -24px;
}
div.interactiveBox .comments .replyable .actionBox {
	float: left;
	width: 150px;
}
div.interactiveBox .comments  .ic-options,
div.interactiveBox .comments  .reply {
	margin-top: 3px;
}
div.interactiveBox .comments .actions {
	width: 175px;
}

div.interactiveBox .comments .ic-addfriend {
	margin-left:2px;
	margin-top:2px;
}

/* Comments in an interactive box */

div.interactiveBox li .comment {
	background: #fefcf5 url('../i/sprite/comments.png?5739') -162px 0 no-repeat;
	position: relative;
	overflow: hidden;
	height: 100%;
}

div.interactiveBox li.recent .comment {
	background:#fdf8e8 url('../i/sprite/comments.png?5739') -162px 0 no-repeat;
}


div.interactiveBox .comments .main {
	margin-bottom: -15px;
	background-image: url('../i/sprite/comments_shadow.png?5739');
	padding: 5px 18px 0;
}

div.interactiveBox .comments .bottom {
	background: #fefcf5 url('../i/sprite/comments.png?5739') -1441px bottom no-repeat;
	padding-bottom: 15px;
}

div.interactiveBox .comments .main .rightBorder,
div.interactiveBox .comments .bottom .rightBorder,
div.interactiveBox .comments .main .leftBorder,
div.interactiveBox .comments .bottom .leftBorder {
	background-image: url('../i/sprite/comments_shadow.png?5739');
	background-position:right top;
}

div.interactiveBox .comments .main .leftBorder,
div.interactiveBox .comments .bottom .leftBorder {
	background-position:left top;
}

div.interactiveBox .comments .bottom .leftBorder {
	bottom: 15px;
}

div.interactiveBox .comments .bottom .rightBorder {
	top: -15px;
}

div.interactiveBox .comments div.rightTopBorder,
div.interactiveBox .comments div.rightBottomBorder {
	background: transparent url('../i/sprite/comments.png?5739') -787px top no-repeat;
}

div.interactiveBox .comments div.rightBottomBorder {
	background-position:-2066px bottom;
	height: 15px;
	bottom: 0;
}

div.interactiveBox .comments .bubbleStart {
	background: transparent url('../i/sprite/comments.png?5739') 0 0 no-repeat;
	width: 19px;
	height: 18px;
	position: absolute;
	left: 48px;
	top: 15px;
	z-index: 4;
}

div.interactiveBox .comments .metadata {
	margin-right: 20px;
	margin-bottom: 0;
	_margin-bottom: 10px;
	overflow:hidden; zoom:1;
}

div.interactiveBox .comments .ssIcon {
	background-position:0 -1511px; float:left; width:3px; margin:3px 5px 0 -5px;
}

div.interactiveBox .comments .nickAndDate {
	float:left;
}

div.interactiveBox .comments .date {
	display: block;
	position: relative;
	top: -3px;
	line-height: 10px;
}

div.interactiveBox .comments .icon {
	margin-left: 2px;
}

/* Comment made by viewing user */
div.interactiveBox li.own .comment {
	background: #eaf5fe url('../i/sprite/comments.png?5739') -802px 0 no-repeat;
}

div.interactiveBox .comments .own .main {
}

div.interactiveBox .comments .own .bottom {
	background: #eaf5fe url('../i/sprite/comments.png?5739') -2081px bottom no-repeat;
}

div.interactiveBox .comments .own .main .rightBorder,
div.interactiveBox .comments .own .bottom .rightBorder,
div.interactiveBox .comments .own .main .leftBorder,
div.interactiveBox .comments .own .bottom .leftBorder {
	background-image: url('../i/sprite/comments_shadow.png?5739');
	background-position:right top;
}

div.interactiveBox .comments .own .main .leftBorder,
div.interactiveBox .comments .own .bottom .leftBorder {
	background-position:left top;
}

div.interactiveBox .comments .own div.rightTopBorder,
div.interactiveBox .comments .own div.rightBottomBorder {
	background: transparent url('../i/sprite/comments.png?5739') -1426px top no-repeat;
}

div.interactiveBox .comments .own div.rightBottomBorder {
	background-position:-2706px bottom;
	right: -1px;
}

div.interactiveBox .comments .own .bubbleStart {
	background: transparent url('../i/sprite/comments.png?5739') -38px 0 no-repeat;
}

/* A reply to another comment */
div.interactiveBox ul.visualizedContent li.reply {
	padding: 0 61px 0 0;
	background-position: 100% 5px;
}

div.interactiveBox ul.visualizedContent li.reply a.visual,
div.interactiveBox ul.visualizedContent li.reply .avatar {
	margin-left: 15px;
	margin-right: -61px;
	float: right;
	width: 44px;
	display: inline;
}

div.interactiveBox .comments .reply .bubbleStart {
	left: auto;
	right: 48px;
	background-position: -18px 0;
}

/* Reply made by the viewing user */
div.interactiveBox .comments .ownReply .bubbleStart {
	background-position:-56px 0;
}

/* Search within an interactive box */
div.interactiveBox.search input.text {
	width: 175px;
}

/* Comments within different types of containers */
.gridColumn ul.comments li dl dt {
	margin-right: 0;
}

.gridColumn ul.comments li dl dd {
	width: 233px;
}

/* Box with option to show more content */
div.interactiveBoxMinimized {
	margin-bottom: 9px;
}

div.interactiveBoxMinimized .bottom {
	padding-top: 25px;
}

div.interactiveBoxMinimized .main .rightBorder,
div.interactiveBoxMinimized .bottom .rightBorder {
	padding-top: 0;
	top: -25px;
}

div.interactiveBoxMinimized .comments {
	margin: 0 0 -30px 0;
}

div.interactiveBoxMinimized .comments .main {
	/*padding-bottom: 0;*/
}

div.interactiveBoxMinimized .comments .bottom {
	/*padding-bottom: 25px;*/
	padding-bottom: 0;
}

/**
 * Styles for the breadcrumbs of a page.
 */
ul.breadcrumbs {
	margin: 0 0 4px 5px;
	font-size: 11px;
	color: #a3a2a2;
}

ul.breadcrumbs li {
	float: left;
	margin-right: 3px;
}

body.lang_ar ul.breadcrumbs li {
	float: right;
	margin-right: 0;
	margin-left: 3px;
}

ul.breadcrumbs li a {
	margin-right: 3px;
	color: #a3a2a2;
}

ul.breadcrumbs li.label {
	font-style: italic;
}

ul.breadcrumbs li.current {
	color: #525252;
}

/* List containing anchors that make the entire list items clickable */
ul.blockAnchorItems li,
ul.blockAnchorItems li.content {
	/* clear padding */
	padding: 0;
}

ul.blockAnchorItems li a.block {
	display: block;
	text-decoration: none;
	padding: 5px;
}
#friendsSection ul.blockAnchorItems li a.block {
	padding: 0;
}

/* override link color of "non-link" items */
ul.blockAnchorItems li a.block span,
ul.blockAnchorItems li a.block p {
	color: #000;
}

ul.blockAnchorItems li a.blockIcon {
	padding: 5px;
}

ul.blockAnchorItems li a.block .label,
ul.blockAnchorItems li a.blockIcon span,
ul.blockAnchorItems li a.block .user {
	text-decoration: none;
	color: #943f88;
}

ul.blockAnchorItems li a.block:hover .label,
ul.blockAnchorItems li a.block:focus .label,
ul.blockAnchorItems li a.blockIcon:hover span,
ul.blockAnchorItems li a.blockIcon:focus span {
	color: #c549b4;
	text-decoration: underline;
}

ul.blockAnchorItems li a.block:hover,
ul.blockAnchorItems li a.block:focus{
	background-color: #fbeafb;
}

/* allow block behavior items within anchor */
ul.blockAnchorItems li a.block .block {
	display: block;
}

/* Hover state for lists trying to act like a "block anchor items" list */
ul li.blockHover {
	background-color: #fbeafb;
	cursor: pointer;
}

ul li.blockHover .label {
	color: #c549b4;
	text-decoration: underline;
}

/**
 * Lower-level, e.g. 3rd, navigation, e.g. club navigation.
 */
.lowerNavContainer {
	position: relative;
}

.lowerNavContainer h2 {
	margin: 0 0 2px	8px;
}

	.lowerNavContainer h2 a {
		position: relative;
		padding-right: 30px;
		font-size: 17px;
		text-transform: none;
		_zoom: 1;
	}

	.lowerNavContainer h2 .add {
		display: block;
		position: absolute;
		top: 2px;
		right: 4px;
		width: 18px;
		height: 18px;
		background: transparent url('../i/makeover/common/lowerNav/sprite.png?5872') no-repeat 0 -1600px;
	}

	.lowerNavContainer h2 .icm-addfriend { margin-left:7px; }

.lowerNavDecor {
	position: relative;
	left: -5px;
	height: 16px;
	margin-left: 40px;
	background: transparent url('../i/makeover/common/lowerNav/sprite.png?5872') repeat-x 0 -1540px;
}

	.lowerNavDecor .start {
		position: absolute;
		top: 0;
		left: -40px;
		width: 40px;
		height: 16px;
		background: transparent url('../i/makeover/common/lowerNav/sprite.png?5872') no-repeat 0 -1510px;
	}

.lowerNav {
	position: relative;
	left: -5px;
	padding: 0 0 0 8px;
	margin-bottom: 18px;
	list-style:none;
}

	.userNavigation .lowerNav {
		margin-bottom: 12px;
		padding: 0;
	}

.lowerNav li {
	display:block;
	float: left;
	padding-left: 12px;
	padding-right: 10px;
	background: transparent url('../i/makeover/common/lowerNav/sprite.png?5872') no-repeat 100% -1560px;
}

.lowerNav h2 {
	font-size: 17px;
}
.lowerNav .label {
	padding: 0;
	margin-top: 2px;
}

.lowerNav .label,
.lowerNav .last {
	background: none;
}

.lowerNav .label h1 {
	margin: 5px 0;
}

.lowerNav li a {
	margin: 0 6px 0 0px;
	display: block;
	text-decoration: none;
	float: left;
	overflow: hidden;
}

.lowerNav li a span {
	cursor: pointer;
}

.lowerNav li .icon, .lowerNav li .noicon {
	/* bg-positoined to show no icon when undefined */
	background: transparent url('../i/makeover/common/lowerNav/sprite.png?5872') no-repeat 0 30px;
	width: 33px;
	height: 21px;
	float: left;
	margin: 3px 0 2px -5px;
}
.lowerNav li .noicon {
	width: 8px;
}

.lowerNav .clean {
	background: none;
}

/* messages */
ul.lowerNav li.messages .icon { background-position: 0 0; margin-right: -3px; }
ul.lowerNav li.messagesSelected .icon { background-position: 0 -30px; margin-right: -3px; }
ul.lowerNav li.notifications .icon { background-position: 0 -180px; margin-left:-8px; margin-right:-3px; }
ul.lowerNav li.notificationsSelected .icon { background-position: 0 -210px; margin-left:-8px; margin-right:-3px; }
ul.lowerNav li.broadcast .icon { background-position: 0 -120px; margin-left: -6px; }
ul.lowerNav li.broadcastSelected .icon { background-position: 0 -150px; margin-left:-6px; }

/* clubs */
ul.lowerNav li.clubHome .icon { background-position: 0 -240px; }
ul.lowerNav li.clubHomeSelected .icon { background-position: 0 -270px; }
ul.lowerNav li.clubComicStrips .icon { background-position: 0 -300px; margin-left:-3px; margin-right:2px; }
ul.lowerNav li.clubComicStripsSelected .icon { background-position: 0 -330px; margin-left:-3px; margin-right:2px; }
ul.lowerNav li.clubForum .icon { background-position: 0 -360px; margin-left: -7px; }
ul.lowerNav li.clubForumSelected .icon { background-position: 0 -390px; margin-left: -7px; }
ul.lowerNav li.clubMembers .icon { background-position: 3px -420px; width: 40px; }
ul.lowerNav li.clubMembersSelected .icon { background-position: 3px -450px; width: 40px; }

/* my brand */
ul.lowerNav li.myBrand .icon { background-position: 0 -480px; margin-right: -2px; }
ul.lowerNav li.myBrandSelected .icon { background-position: 0 -510px; margin-right: -2px; }
ul.lowerNav li.starDesignFashion .icon  { background-position: 0 -540px; margin-left: -10px; margin-right: -4px; }
ul.lowerNav li.starDesignFashionSelected .icon  { background-position: 0 -570px; margin-left: -10px; margin-right: -4px; }
ul.lowerNav li.starDesignInterior .icon { background-position: 0 -60px; margin-left: -9px; margin-right: -3px; }
ul.lowerNav li.starDesignInteriorSelected .icon { background-position: 0 -90px; margin-left: -9px; margin-right: -3px; }

/* user page */
.lowerNav .suite .icon { background-position: 0 -600px; margin-right: -4px; margin-left: -10px; }
.lowerNav .suiteSelected .icon { background-position: 0 -630px; margin-right: -4px; margin-left: -10px; }
.lowerNav .medoll .icon { background-position: 0 -660px; margin-left:-9px; margin-right:-4px; }
.lowerNav .medollSelected .icon { background-position: 0 -690px; margin-left:-9px; margin-right:-4px; }
.lowerNav .album .icon { background-position: 0 -720px; margin-left:-7px; margin-right:-2px; }
.lowerNav .albumSelected .icon { background-position: 0 -750px; margin-left:-7px; margin-right:-2px; }
.lowerNav .mymagazine .icon { background-position: 0 -780px; margin-right: 1px; }
.lowerNav .mymagazineSelected .icon { background-position: 0 -810px; margin-right: 1px; }
.lowerNav .starbazaar .icon { background-position: 0 -840px; margin-left: -6px; margin-right: -3px; }
.lowerNav .starbazaarSelected .icon { background-position: 0 -870px; margin-left: -6px; margin-right: -3px; }
.lowerNav .starbazaarinterior .icon { background-position: 0 -840px; margin-left: -6px; margin-right: -3px; }
.lowerNav .starbazaarinteriorSelected .icon { background-position: 0 -870px; margin-left: -6px; margin-right: -3px; }
.lowerNav .scenery .icon { background-position: 0 -300px; margin-left: -3px; margin-right: 2px; }
.lowerNav .scenerySelected .icon { background-position: 0 -330px; margin-left: -3px; margin-right: 2px; }
.lowerNav .friends .icon,
.lowerNav .friendsSelected .icon { background-position: 0 -1667px; margin-right: 1px; }

/* promotion page (realcelebs) */
ul.lowerNav li.promotion .icon { background-position: 0 -900px; }
ul.lowerNav li.promotionSelected .icon { background-position: 0 -930px; }

/* contests */
ul.lowerNav li.coverGirlWinner .icon { background-position: 0 -1080px; margin-right: -3px; }
ul.lowerNav li.coverGirlWinnerSelected .icon { background-position: 0 -1290px; margin-right: -3px; }
ul.lowerNav li.catwalkWinner .icon { background-position: 0 -1110px; margin-right: -3px; }
ul.lowerNav li.catwalkWinnerSelected .icon { background-position: 0 -1320px; margin-right: -3px; }
ul.lowerNav li.designWinner .icon { background-position: 0 -1170px; margin-right: -3px; }
ul.lowerNav li.designWinnerSelected .icon { background-position: 0 -1380px; margin-right: -3px; }
ul.lowerNav li.albumWinner .icon { background-position: 0 -1230px; margin-right: -3px; }
ul.lowerNav li.albumWinnerSelected .icon { background-position: 0 -1260px; margin-right: -3px; }
ul.lowerNav li.sceneryWinner .icon { background-position: 0 -1140px; margin-right: -3px; }
ul.lowerNav li.sceneryWinnerSelected .icon { background-position: 0 -1350px; margin-right: -3px; }

ul.lowerNav li a .label {
	margin-top: 7px;
	float: left;
}

ul.lowerNav li.selected a {
	color: #540049;
	background: url('../i/makeover/common/lowerNav/sprite.png?5872') repeat-x 0 -1460px;
}

ul.lowerNav li.item a:hover,
ul.lowerNav li.item a:focus {
	background: url('../i/makeover/common/lowerNav/sprite.png?5872') repeat-x 0 -1460px;
}

/* Polls */
div.poll ul.answers,
div.poll ul.answers li,
div.poll p.question {
	margin-bottom: 10px;
}

div.poll p.question,
div.poll ul.answers li.correct {
	font-weight: bold;
}

div.poll #pollvoteform li {
	padding-bottom: 8px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 8px;
}
div.poll #pollvoteform li.last { border-bottom: none; }

div.poll ul.answers li input {
	margin-right: 5px;
}

div.poll dl.results dd {
	width: 75%;
}

div.poll dl.results dt {
	padding: 1px 0;
}


/**
 * Progress bars, e.g. in polls.
 */
div.progressBar {
	position: relative;
}

div.progressBar .track {
	height: 14px;
	background: transparent url('../i/makeover/modules/progressBar_sprite.png?5739') no-repeat left top;
}

div.progressBar .fill {
	height: 14px;
	background: transparent url('../i/makeover/modules/progressBar_sprite.png?5739') no-repeat left -24px;
	overflow: hidden;
	margin-top: -14px;
}

/* Sections that can be toggled with links */
div.sectionTogglers a {
	padding: 5px 0;
}

div.sectionTogglers a.selected {
	font-weight: bold;
	color: #540049;
}

/**
 * Pagination.
 */
ul.pagination {
	clear: both;
	text-align: center;
	background: url('../i/sprite/box_common.png?5739') -914px 0 transparent no-repeat;
	margin: 20px 0 0 0;
	padding: 17px 0 10px 0;
}

.lastGridColumn .box ul.pagination {
	background: url('../i/makeover/common/pagingBgSlim.png?5739') 50% 0 transparent no-repeat;
}

ul.pagination.roundedParent {
	position: relative;
	top: -69px;
}

ul.pagination li {
	display: inline-block;
	margin-top: -17px;
	padding: 23px 0 0;
}

ul.pagination li a {
	padding: 9px;
	outline: none;
}

ul.pagination li.active {
	font-weight: bold;
	background: url('../i/sprite/box_common.png?5739') 0 0 transparent no-repeat;
}

ul.pagination li.active a {
	color: #000;
	text-decoration: none;
	cursor: text;
}

ul.pagination li.hidden {
	visibility: hidden;
}

ul.pagination a.leftArrow, ul.pagination a.rightArrow {
/*	display: inline-block;*/
	background: transparent url('../i/icon-sprite.png?5856') no-repeat right -2045px;
	padding: 0 12px 0 0;
	text-decoration: none;
}

ul.pagination a.leftArrow {
	background-position: 0px -2058px;
}

/* Pagination inside flowing section */
.flowingSection ul.pagination {
	margin-bottom: -20px;
}

/* Pagination inside interactiveBox */
div.interactiveBox ul.pagination {
	background-image:none;
	margin-top:0;
}

div.interactiveBox ul.pagination li {
	display: inline-block;
	margin-top: -10px;
	padding: 17px 0 0;
}

div.interactiveBox .pagination li.active {
	background-position: -92px 0;
}

/**
 * Overlay - old popovers
 */
#overlay {
	display: none;
	left: 0;
	position: absolute;
	top: 0;
}

#overlay .loadingIndicator {
	margin: 10px auto;
	width: 160px;
	padding: 10px;
	text-align: center;
}

#overlay .overlayContents {
	position: absolute;
	width: 390px;
}

#overlay .modalCover {
	position: fixed;
	top: 0;
	left: 0;
	background-color: #fff;
	opacity: 0.01;
	filter: alpha(opacity=1)
}

#overlay .corners {
	background: url('../i/makeover/modules/overlay/sprite.png?5872') no-repeat;
}

#overlay .top {
	background-position: 0 -50px;
	height: 30px;
}

#overlay .unClosable .top {
	background-position: 0 -198px;
}

#overlay .shaddow-left {
	background: url('../i/makeover/modules/overlay/left_shaddow.png?5739') repeat-y left top;
	width: 389px;
	margin-right: 1px;
}

#overlay .shaddow-right {
	background: url('../i/makeover/modules/overlay/right_shaddow.png?5739') repeat-y top right;
}

#overlay .contentContainer {
	overflow:hidden;
	background-color: #e6f5f5;
	margin: 0 12px;
	padding: 0 20px;
	text-align: center;
}

#overlay.white .contentContainer {
	background-color: #fff;
}

#overlay .contentContainer p.buttons span.close {
	margin-left:15px;
}

#overlay .contentContainer p.close {
	clear:both;
	text-align: right;
	margin-top: 10px;
	padding-bottom: 0;
	font-weight: normal;
	margin-right: -10px;
}

#overlay .bottom {
	background-position: 0 -81px;
	height: 19px;
}

#closeBtn {
	display: block;
	height: 23px;
	width: 23px;
	position: absolute;
	top: 7px;
	right: 10px;
}

#overlay .error,
#overlay .note,
#overlay .success {
	margin-top:0;
}

/* Overlay dimensions */
#overlay.small {
	width: 357px;
}

#overlay.small #closeBtn {
	right:50px;
}

#overlay.small .shaddow-left {
	width: 349px;
	/* To cope with RLT rendering (arabic).*/
	margin-right: 41px;
}

#overlay.small .top {
	background-position: 0 0;
}

#overlay.small .unClosable .top {
	background-position: 0 -148px;
}

#overlay.small .bottom {
	background-position: 0 -33px;
}

#overlay.large,
#overlay.large .overlayContents {
	width: 650px;
}

#overlay.large .shaddow-left {
	width: 642px;
	/* To cope with RLT rendering (arabic).*/
	margin-right: 8px;
}

#overlay.large .top {
	background-position: 0 -98px;
}

#overlay.large.white .top {
	background-position: 0 -294px;
}

#overlay.large .unClosable .top {
	background-position: 0 -246px;
}

#overlay.large .bottom {
	background-position: 0 -129px;
}

#overlay.large.white .bottom {
	background-position: 0 -325px;
}

div.overlayContents textarea {
	padding: 3px;
	border: 1px solid #c3bcc3;
	width: 310px;
}

#overlay .overlayContents .steps {
	text-align: left;
}

#overlay .coverContent {
	opacity: 0.70;
	filter: alpha(opacity=70);
	position: absolute;
}

/**
 * Styles for the boxes linking to other pages on the site.
 */
div.crossLinkBox,
div.crossLinkBoxStatic,
div.crossLinkBoxWideStatic,
div.crossLinkBoxWide {
	background:#f8f8f8 url('../i/sprite/box.png?5739') -3760px 0 repeat-y;
	width: 258px;
	padding: 10px 25px 17px;
	text-align: center;
	overflow: hidden;
	position: relative;
	margin: 0 0 8px;
}
div.crossLinkBox a.blockLink,
div.crossLinkBoxStatic a.blockLink,
div.crossLinkBoxWideStatic a.blockLink,
div.crossLinkBoxWide a.blockLink { z-index: 3; }

div.crossLinkBoxStatic,
div.crossLinkBoxWideStatic {
	height:152px;
}

div.crossLinkBoxWide,
div.crossLinkBoxWideStatic {
	width:574px;
	background:transparent url('../i/sprite/box.png?5739') -2518px top repeat-y;
}

div.crossLinkBox div.topBg,
div.crossLinkBox div.bottomBg,
div.crossLinkBoxStatic div.topBg,
div.crossLinkBoxStatic div.bottomBg,
div.crossLinkBoxWideStatic div.topBg,
div.crossLinkBoxWideStatic div.bottomBg,
div.crossLinkBoxWide div.topBg,
div.crossLinkBoxWide div.bottomBg  {
	background:#f8f8f8 url('../i/sprite/box.png?5739') -3142px 0 no-repeat;
	width:308px;
	position:absolute;
	left:0;
	z-index:1;
}

div.crossLinkBox div.topBg,
div.crossLinkBoxStatic div.topBg,
div.crossLinkBoxWideStatic div.topBg,
div.crossLinkBoxWide div.topBg {
	top:0;
	height:50px;
}

div.crossLinkBox div.bottomBg,
div.crossLinkBoxWide div.bottomBg,
div.crossLinkBoxStatic div.bottomBg,
div.crossLinkBoxWideStatic div.bottomBg {
	background-position: -3451px bottom;
	height:20px;
	bottom:0;
}

div.crossLinkBoxWide div.topBg,
div.crossLinkBoxWideStatic div.topBg {
	height:80px;
	width:624px;
	background:transparent url('../i/sprite/box.png?5739') -635px top no-repeat;
}
div.crossLinkBoxWide div.bottomBg,
div.crossLinkBoxWideStatic div.bottomBg {
	height:81px;
	width:624px;
	background:transparent url('../i/sprite/box.png?5739') -1894px bottom no-repeat;
}

div.crossLinkBox div.wrapper,
div.crossLinkBoxWide div.wrapper,
div.crossLinkBoxStatic div.wrapper,
div.crossLinkBoxWideStatic div.wrapper {
	position:relative;
	z-index:2;
}

div.crossLinkBox h2,
div.crossLinkBoxWide h2,
div.crossLinkBoxStatic h2,
div.crossLinkBoxWideStatic h2 {
	text-align: center;
	margin-bottom: 8px;
}

div.crossLinkBox p.info,
div.crossLinkBoxWide p.info,
div.crossLinkBoxStatic p.info,
div.crossLinkBoxWideStatic p.info {
	float:left;
	width:140px;
	margin:30px 0 0 5px;
}

div.crossLinkBox .numbers,
div.crossLinkBoxWide .numbers,
div.crossLinkBoxStatic .numbers,
div.crossLinkBoxWideStatic .numbers {
	font-size:18px;
}

div.crossLinkBox img.screen,
div.crossLinkBoxWide img.screen,
div.crossLinkBoxStatic img.screen,
div.crossLinkBoxWideStatic img.screen {
	height: 61px;
	width: 128px;
	background-color: #eee;
}

div.crossLinkBox div.foot,
div.crossLinkBoxWide div.foot,
div.crossLinkBoxStatic div.foot,
div.crossLinkBoxWideStatic div.foot {
	display: block;
	width: 100%;
	text-align:center;
	z-index:2;
}

div.crossLinkBox div.foot,
div.crossLinkBoxWide div.foot {
	margin:5px 0 0 0;
	clear:both;
	position:relative;
}

div.crossLinkBoxStatic div.foot,
div.crossLinkBoxWideStatic div.foot {
	position: absolute;
	bottom: 16px;
	left: 0;
}

div.crossLinkBoxWide div.foot,
div.crossLinkBoxWideStatic div.foot {
	width:574px;
}

div.crossLinkBoxWide ul.gridThumbnails {
	margin-left:-23px;
}

div.crossLinkBoxWide ul.gridThumbnails li {
	display:block;
	float:left;
	width:76px;
	overflow:hidden;
	margin-left:23px;
	height:80px;
}

.forceLineBreaks {
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
}

/*
- User presentation.
- Club presentation.
- Blog entries.
*/
#aboutme p,
.presentation p,
ul.entries div.body p
{
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
}

#aboutme p {
	overflow: hidden;
}
#aboutme .wrapper {
	text-align: left;
}

/* XXX - Kept here so we don't miss it */
#popoverMessageBox {
	position: absolute;
	background: #fc0;
}

/** the joinsplash styles are used when the user is not logged on and tries to load a specific page.*/
#joinSplash {
	background-image:url('../i/makeover/common/log_in_become_member.jpg?5739');
	background-repeat: no-repeat;
	width: 622px;
	height: 373px;
	position: relative;
	_overflow: hidden;
}

#joinSplash ul {
	padding-top: 240px;
}

#joinSplash li {
	display: block;
	text-align: center;
	color: black;
	float: left;
	width: 24%;
	margin-right: 1%;
	overflow: hidden;
}

#joinSplash .directing {
	font-size: 16px;
	text-transform: uppercase;
	+margin-top: -15px;
	_margin-top: 26px;
	font-weight: bold;
	position: relative;
	z-index: 1;
}
#joinSplashLink {
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
#joinSplashLink:hover {
	text-decoration: none;
}
.alreadyMember {
	font-style: italic;
}

#buyGiftCard {
	position: relative;
	height: 200px;
	width: 317px;
	background: transparent url('../i/giftcard.jpg?5798') no-repeat;
}
#buyGiftCard h2 { position: absolute; top: 23px; left: 25px; }
#buyGiftCard a { position: relative; height: 100%; display: block; }
#buyGiftCard a span {
	display: block;
	width: 166px;
	text-align: center;
	position: absolute;
	bottom: 11px;
	right: 16px;
}
#buyGiftCard a span span {
	display: inline;
	width: auto;
	position: static;
}

/* Signup to save ad */
.signUpToSave .deco {
	display: block;
	background: transparent url('../i/makeover/dolls-games/dgSpritePNG8.png?5739') no-repeat 0 -100px;
	width: 156px;
	height: 82px;
	margin: 0 auto;
}

/* Rectangle box with a thin rounded line */
div.rectangle {
	background: transparent url('../i/makeover/common/rectangle.png?5739') no-repeat 0 0;
	position: relative;
	padding: 6px 6px 5px;
}

div.rectangle .end {
	position: absolute;
	right: 0;
	top: 0;
	height: 27px;
	width: 6px;
	background: transparent url('../i/makeover/common/rectangle.png?5739') no-repeat right 0;
}

#clubEntryTable td {
	width: 215px;
}
#clubEntryTable .textarea {
	margin-right: 5px;
}
#clubEntryTable #nameInput {
	width: 200px;
}
#clubEntryTable #categorySelect,
#clubEntryTable #languageSelect {
	width: 180px;
}
#clubEntryTable #clubSubmit {
	float: right;
}

/**
 * Good to know box.
 */

.infoBox h2 {
	color: #540049;
	font-size: 14px;
	font-weight: normal;
	text-transform: uppercase;
}

.infoBox p {
	text-align: left;
}

.infoBox .wrapper {
	margin: 15px 0 20px;
}

/* "Share on social sites"-overlay */
#overlay.social .contentContainer {
	text-align: center;
}

#overlay.social .contentContainer h2 {
	margin-bottom: 10px;
}

#overlay.social .contentContainer input {
	width: 280px;
}

#overlay.social .applicationContainer {
	width: 160px;
	margin: 0 auto;
}

#overlay.social .applicationContainer .bullet {
	float: left;
	margin: 3px 10px 0;
	color: #3b3b3b;
}

#overlay.social .applicationContainer .application {
	margin: 0;
	padding: 0;
	float: left;
}

#overlay.social .instructions {
	font-size: 10px;
	color: #777;
	margin: 15px 0 10px;
	font-style: italic;
}

/* Hot User Designs */
ul.customItems {
	margin-left: -20px;
	margin-bottom: 0;
}

ul.customItems li {
	float: left;
	width: 76px;
	height: 138px;
	overflow: visible;
	margin-left: 20px;
	margin-bottom: 0;
	text-align: center;
	display: inline; /* IE6 hack for double margins bug*/
}

ul.customItems li a.item {
	display: block;
	height: 76px;
	width: 76px;
}

ul.customItems li .creator {
	margin-top: 3px;
}

ul.customItems li .creator a {
	position: relative;
	display: block;
	margin-right: 0;
}

ul.customItems li .label {
	display: block;
	margin-bottom: 3px;
}

/* base: listAvatar
*
*  Can be used on lists and divs (and probably other block elements as well).
*/
.listAvatar {
}

	.listAvatar li {
		position: relative;
		border-bottom: 1px solid #e5e5e5;
		+zoom: 1;
	}

		/* ua = user anchor */
		.listAvatar .ua {
			display: block;
			padding: 5px 3px;
			color: #000;
			direction: ltr;
			overflow: hidden;
			background: transparent;
			_zoom: 1;
		}

		.listAvatar .ua:hover {
			background: #FBEAFB;
			text-decoration: none;
		}

			.listAvatar .ss .ua {
				padding: 8px 3px;
				background: #fff8c6 url('../i/sprite/ribbon_bg.png?5872') repeat-x 0 -180px;
				_background-image: url('../i/sprite/ribbon_bg_8.png?5872');
			}

			.listAvatar .ss .ua:hover {
				background: #FBEAFB;
			}

			.listAvatar .avatar {
				float: left;
				margin-right: 10px;
			}

				.listAvatar img {
					_display: block;
				}

			.listAvatar .label,
			.listAvatar .title {
				display: block;
				color: #943F88;
				margin-bottom: 2px;
				font-weight: bold;
				line-height: 16px;
				+line-height: 17px;
			}

				.listAvatar .ua:hover .label {
					color: #C549B4;
					text-decoration: underline;
				}

			.listAvatar .title {
				color: #777;
				font-weight: normal;
			}

			/*TODO: there MUST be a better way..?*/
			.listAvatar .action {
				position: absolute;
				bottom: 12px;
				right: 8px;
			}

/* extend: listAvatar */
.listAvatar.medium {
	margin: 0 -8px; /*TODO: Fix the box padding instead*/
	overflow: hidden;
	_zoom: 1;
}

	.listAvatar.medium li {
		float: left;
		width: 95px;
		margin-bottom: 6px;
		border: none;
		_overflow: hidden;
	}

		.listAvatar.medium .ua {
			height: 125px;
			padding: 2px 3px 0;
		}

			.listAvatar.medium .avatar {
				display: block;
				float: none;
				margin: 0 auto 2px;
				border: 1px solid #CECECE;
			}

			.listAvatar.medium .label {
				clear: both;
				margin-bottom: 2px; /*2px right to make up for the star frame */
				text-align: center;
				white-space: nowrap;
			}

			.listAvatar.medium .asl {
				display: block;
				text-align: center;
			}

				.listAvatar.medium .bullet {
					margin: 0 1px;
				}

/*extend: .listAvatar*/
/*Multiple actions: ugly hack to get around multiple actons in list*/
.listAvatar.ma {}

	.listAvatar.ma .ua {
		padding: 10px 3px;
	}

	.listAvatar.ma .action {
		bottom: 3px;
	}

		.listAvatar.ma .action a {
			display: block;
			_width: 1%;
		}

/*extend: .listAvatar.medium */
/* .w because ie6 confuses it with the other .wide*/
.listAvatar.w li {
	width: 20%;
}

/* extend: listAvatar */
.listAvatar.single {
}

	.listAvatar.single .ua,
	.listAvatar.single .ss .ua {
		padding: 2px 3px;
	}

/* base: userList
*
*  Fancy list of users differs from listavatar.
*  TODO: make this extend listAvatar instead.
*/
.listUser {
	margin: 10px 0 0;
}

	.listUser li {
		float: none;
		height: 52px;
		padding: 0 5px;
		line-height: 52px;
		overflow: hidden;
	}

		.listUser .odd {
			background: #F8F8F8;
		}

		.listUser .ssRow {
			background: transparent url('../i/sprite/ribbon_bg.png?5872') repeat-x 0 -180px;
			_background-image: url('../i/sprite/ribbon_bg_8.png?5872');
			border-bottom: 1px solid #EBEBEB;
		}

		.listUser .ssRow.start{
			border-top: 1px solid #EBEBEB;
		}

		.listUser div {
			float: left;
			min-height: 1px;
			overflow: hidden;
		}

		.listUser .avatarContainer {
			margin: 3px 9px 3px 2px;
			overflow: visible;
		}

		.listUser .nick {
			width: 155px;
		}

		.listUser .aslContainer {
			width: 100px;
			height: 14px;
			margin: 19px 0 0;
			line-height: 1.2;
		}

		.listUser .comment {
			width: 165px;
			padding-left: 5px;
		}

			.listUser .nocomments {
				display: none;
			}

		.listUser .actions {
			float: none;
			width: auto;
			_margin-top: 12px;
			overflow: hidden;
			text-align: right;
		}

			.listUser .actions a {
				margin: 0 2px;
			}

			.listUser .actions span {
				vertical-align: middle;
			}

/* base: listBlog */
.listBlog {

}

	.listBlog li {
		position: relative;
		padding: 10px 5px 10px 0;
		overflow: hidden;
		border-bottom: 1px solid #E5E5E5;
		_zoom: 1;
	}

	.listBlog .last {
		border-bottom: none;
	}

		.listBlog .avatar {
			float: left;
			margin-left: 2px;
			margin-right: 8px;
		}

		.listBlog .label {
			display: block;
			margin-bottom: 3px;
		}

		.listBlog .content {
			margin-top: 3px;
		}

		.listBlog .action {
			position: absolute;
			right: 10px;
			bottom: 10px;
		}

.highScore li { list-style-type:none; }
.highScore .actions { font-weight:bold; }
.highScore .score { padding-right:5px; }