/* CSS Document */

/**
*  Global properties
*/
html,
body
{
	color:					#000000;
	background:		 		#ffda0d;
	margin: 				0;
	padding:				0;
	font:					normal 10px Verdana, Arial, Helvetica, sans-serif;
}

img
{
	border:					none;
}

a
{
	text-decoration:		none;
}

p
{
	margin:					0;
	padding:				0 0 10px 0;
}

form
{
	padding:				0;
	margin:					0;
}

form fieldset
{
	border:					none;
	padding:				0;
	margin:					0;
}

/**
*  Common classes
*/
img.ricolaLogo
{
	position:				absolute;
	top:					146px;
	left:					736px;
}

.box
{
	position:				relative;
	background:				url('/images/box_bg.gif');
	border-top:				1px solid #cbe4cd;
	border-left:			2px solid #dfede2;
	border-bottom:			2px solid #dfede2;
	padding:				12px;
}

.box .topCorner
{
	position:				absolute;
	top:					-1px;
	right:					0;
}

.box .bottomCorner
{
	position:				absolute;
	bottom:					-2px;
	left:					-2px;
}

.topLeftShadow
{
	position:				absolute;
	width:					20px;
	height:					30px;
	background:				url('/images/top_left_shadow.gif') no-repeat;
	top:					0;
	left:					0;
}

.bottomStageShadow
{
	margin-left:			90px;
	width:					794px;
	height:					20px;
	background:				url('/images/stage_shaddow_bottom.gif') no-repeat;
}

.sideStrapline
{
	position:				absolute;
	width:					20px;
	height:					45px;
	top:					0;
	left:					-20px;
	background:				url('/images/shadow_strapline_side.gif') no-repeat;
}

.floatRight
{
	float:					right;
}

.message
{
	color:					#F00;
	margin:					0 0 10px 0;
}

.noMargin
{
	margin:					0	!important;
}

.noPadding
{
	padding:				0	!important;
}

.noPaddingTop
{
	padding-top:			0 !important;
}

.noPaddingBottom
{
	padding-bottom:			0	!important;
}

.marginTop_10
{
	margin-top:				10px !important;
}

.marginTop_20
{
	margin-top:				20px !important;
}

.marginBottom_20
{
	margin-bottom:			20px !important;
}

.marginLeft_30
{
	margin-left:			30px !important;
}

.padddingBottom_20
{
	padding-bottom:			20px !important;
}

.paddingBottom_25
{
	padding-bottom:			25px !important;
}

.paddingBottom_30
{
	padding-bottom:			30px !important;
}

.overflow
{
	overflow:				hidden;
}

.relative
{
	position:				relative;
}

.floatLeft
{
	float:					left;
}

.bold
{
	font-weight:			bold;
}

/**
*  Primary layout of the content stage
*/
#stage
{
	position:				relative;
	overflow:				hidden;
	width:					774px;
	margin:					100px 0 0 90px;
	padding:				0 0 0 20px;
	background:				url('/images/side_shadow.gif') repeat-y #FFF;
}

#stageShaddow
{
	position:				absolute;
	top:					0;
	left:					0;
	width:					794px;
	height:					435px;
	margin:					100px 0 0 90px;
	background:				url('/images/side_shaddow.gif') repeat-y;
}

/**
*  Top navigation layout
*/
#topNavigation
{
	position:				absolute;
	top:					0;
	left:					0;
	width:					774px;
	height:					20px;
	margin:					100px 0 0 110px;
	background:				#ffda0d url('/images/nav_bg.gif') no-repeat top left;
	color:					#007260;
	z-index:				2;
}

#topNavigation a
{
	color:					#007260;
}

#topNavigation p,
#topNavigation span.ricolafamily
{
	position:				relative;
	padding:				2px 0 0 10px;
	float:					left;
	width:					200px;
	font-weight:			bold;
	background:				url('/images/nav_separator.gif') no-repeat top left;
}

#topNavigation span.ricolafamily
{
	width:					100px;
}

#topNavigation ul,
#topNavigation ul li
{
	float:					right;
	font-size:				9px;
	list-style:				none;
	padding:				0;
	margin:					0;
	display:				inline;
}

#topNavigation ul
{
	width:					305px;
}

#topNavigation ul li a
{
	position:				relative;
	display:				block;
	height:					13px;
	padding:				3px 10px 2px 10px;
	background:				url('/images/nav_separator.gif') no-repeat top left;
	float:					left;
}

/**
*  Footer layout
*/
#footer
{
	position:				relative;
	width:					774px;
	height:					40px;
	background:				#2f6567;
	margin:					0 0 0 110px;
	color:					#FFF;
	z-index:				2;
}

#footerShaddow
{
	position:				absolute;
	top:					0;
	left:					0;
	width:					794px;
	height:					60px;
	margin:					535px 0 0 90px;
/*	background:				url('/images/footer_shaddow.gif') no-repeat top left;*/
}

.standardRates
{
	position:				absolute;
	top:					50px;
	right:					0;
	color:					#000;
	font-size:				9px;
	font-weight:			bold;
}

/**
*  Home page
*/

.indexRicola,
.index
{
	padding:				20px 0 0 0;
}

.index .leftCol img.mainImage
{
	padding-top:			80px;
}

.indexRicola .leftCol,
.index .leftCol
{
	position:				relative;
	float:					left;
	width:					543px;
}

.index .leftCol copy
{
	margin:					0;
}

.indexRicola .rightCol,
.index .rightCol
{
	position:				relative;
	float:					left;
	width:					231px;
	overflow:				hidden;
}

.index .leftCol .copy
{
	position:				relative;
	width:					510px;
	background:				#2f6567;
	margin-top:				18px;
}

.indexRicola .leftCol .copy p,
.index .leftCol .copy p
{
	background:				#FFF;
	margin-left:			15px;
	padding:				8px 0 0 30px;
	font-size:				11px;
	line-height:			15px;
}

/**
*  Ricola Family page layout
*/

.indexRicola
{
	position:				relative;
	width:					774px;
	height:					395px;
	background:				url('/images/ricola_family_background.gif') no-repeat top left;
}

.indexRicola .leftCol
{
	padding:				0 0 0 24px;
}

.indexRicola .rightCol .copy p
{
	margin:					0;
	font-size:				11px;
	line-height:			15px
}

.indexRicola .rightCol
{
	width:					185px;
	padding:				115px 0 0 0;
}

.indexRicola .leftCol div
{
	text-align:				center;
	padding:				30px 0 0 0;
}

img.sweets
{
	border:					0;
}

img.naturallyGood
{
	position:				absolute;
	bottom:					30px;
	right:					30px;
	border:					0;
}

/**
*  Competition Form
*/

.download .rightCol .comp .box,
.index .rightCol .comp .box
{
	width:					160px;
}

.download .rightCol {
	width:					500px;
	float:					right;
}

.download .rightCol .comp,
.index .rightCol .comp
{
	position:				relative;
	width:					187px;
	padding-bottom:			25px;
	margin:					80px 30px 0 14px;
	font-size:				9px;
	overflow:				hidden;
}

form fieldset.answers
{
	margin:					5px 0 7px 0;
}

.download .rightCol .comp form,
.index .rightCol .comp form
{
	width:					159px;
	padding-bottom:			0;
}

.download .rightCol .comp form div,
.index .rightCol .comp form div
{
	position:				relative;
	overflow:				hidden;
}

.download .rightCol .comp form fieldset.fillInForm,
.index .rightCol .comp form fieldset.fillInForm
{
	position:				relative;
	overflow:				hidden;
	padding-bottom:			8px;
	margin-top:				-1px;
}

.download .rightCol .comp form fieldset div,
.index .rightCol .comp form fieldset div
{
	height:					15px;
	margin:					0 0 5px 0;
	width:					159px;
}

.index .rightCol .comp form fieldset div.note
{
	height:					15px;
	margin:					10px 0 5px 0;
	width:					159px;
	text-align:				right;
}

.download .rightCol .comp form fieldset div label,
.index .rightCol .comp form fieldset div label
{
	float:					left;
	width:					48px;
	margin:					3px 7px 0 0;
	text-align:				right;
}

.download .rightCol .comp form fieldset div input,
.index .rightCol .comp form fieldset div input
{
	float:					left;
	width:					100px;
	border:					0;
	font-size:				9px;
	height:					15px;
	padding:				0;
	margin:					0;
}

.download .rightCol .comp form fieldset.optin,
.index .rightCol .comp form fieldset.optin
{
	position:				relative;
	float:					left;
	display:				inline;
	width:					119px;
	height:					25px;
}

.download .rightCol .comp form fieldset.sms input,
.index .rightCol .comp form fieldset.sms input
{
	float:					left;
	margin:					0 5px 0 0;
}

.download .rightCol .comp form fieldset.sms label,
.index .rightCol .comp form fieldset.sms label
{
	float:					left;
	padding-bottom:			8px;
	width:					120px;
}

.download .rightCol .comp form fieldset.optin input,
.index .rightCol .comp form fieldset.optin input
{
	float:					left;
	margin:					0 5px 0 0;
}

.download .rightCol .comp form fieldset.submit, 
.index .rightCol .comp form fieldset.submit
{
	position:				relative;	
	float:					left;
	width:					35px;
}

/**
*  download page layout styles
*/

.download
{
	position:				relative;
	width:					774px;
}

.download .title
{
	margin:					48px 0 0 30px;
	padding:				4px 0 25px 0;
}

.download .leftCol
{
	position:				relative;
	float:					left;
	width:					720px;
	padding-bottom:			10px;
}

.download .rightCol
{
	position:				relative;
	float:					left;
	width:					231px;
}

div.download img.ricolaSweets {
	position:				absolute;
	top:					135px;
	right:					-25px;
}

.download .rightCol .comp
{
	margin:					99px 30px 0 14px;
	padding-bottom:			1px;
}

.download .leftCol .leftCol
{
	position:				relative;
	float:					left;
}
.download .leftCol .copy .ringToneHeader p
{
	padding-top:			0;
	padding-bottom:			0;
	margin-top:				-1px;
}

.download .leftCol .copy .ringToneHeader
{
	position:				relative;
	width:					590px;				
	background:				#2f6567;
}

.download .leftCol .copy form,
.download .leftCol .copy img,
.download .leftCol .copy p
{
	position:				relative;
	background:				#FFF;
	margin:					0 0 0 15px;
	padding:				0 0 0 15px;
	font-size:				11px;
	line-height:			15px;
}

.download .leftCol .copy img
{
	padding:				13px 0 5px 15px;
}

.download .leftCol .selectList
{
	font-weight:			bold;
	padding:				15px 0 9px 15px !important;
}

.download .leftCol form select.optionRingtone
{
	float:					left;
	width:					146px;
	margin-top:				1px;
	margin-bottom:			8px;
	overflow:				visible;
}

.download .leftCol form option
{
	width:					60px;
}

.download .rightCol .comp .box
{
	padding-bottom:			11px;
}

.download .leftCol form .submit
{
	width:					66px;
	height:					22px;
	margin:					0px 0 0 10px;
	padding:				0;
	font-size:				12px;
	float:					left;
	cursor:					pointer;
/*	background:				url('/images/download_button.gif') no-repeat;*/
}

.download img.vodcast
{
	padding:				0px 0 4px 0;
	margin-left:			30px;
}

.download p.downloadQT
{
	margin-left:			30px;
	padding-bottom:			10px;
}

/**
*  Thankyou page layout styles
*/

.thankyou
{
	position:				relative;
	height:					415px;
	padding:				0 0 0 190px;
	background:				url('/images/thankyou_bg.jpg') no-repeat bottom left;
}

.thankyou .copy
{
	margin:					-2px 60px;
	padding-bottom:			4px;
	width:					500px;
}

.thankyou .copy p
{
	margin:					0 0 25px 0;
	padding-bottom:			0;
	font-size:				11px;
	line-height:			15px;
}

.thankyou .leftRightCol .box p
{
	margin-top:				-4px;
}

.thankyou .leftRightCol .box
{
	width:					201px;
	padding-bottom:			0;
	font-size:				10px;
	line-height:			15px;
}

.thankyou .leftRightCol
{
	position:				relative;
	overflow:				hidden;
	width:					500px;
	margin:					0 0 0 60px;
}

.thankyou .leftCol,
.thankyou .rightCol
{
	float:					left;
	width:					225px;
	margin:					0 17px 0 0px;
}

.thankyou .rightCol
{
	margin:					0 0 0 17px;
}

/**
*  refer a friend page layout styles
*/
.ricolarefer,
.referafriend,
.referafriend_thankyou
{
	position:				relative;
	height:					415px;
	padding:				0 0 0 190px;
	background:				url('/images/referafriend_bg.jpg') no-repeat bottom left;
}

.referafriend_thankyou
{
	background:				url('/images/thankyou_bg.jpg') no-repeat bottom left;
}

.referafriend .copy
{
	margin:					0 60px;
	width:					500px;
}

.referafriend_thankyou .copy
{
	margin:					165px auto 0 auto;
	text-align:				center;
	width:					500px;
}

.referafriend_thankyou .copy p
{
	margin:					0 0 30px 0;
}

.ricolaFriend .box .copy p,
.referafriend .copy p
{
	font-size:				11px;
	line-height:			15px;
}

.referafriend .referForm
{
	margin:					10px 30px;
}

.referafriend .box
{
	width:					498px;
	margin:					0;
}

.referafriend form fieldset.submit .errorMessage
{
	position:				absolute;
	top:					0px;
	right:					317px;
}

.referafriend .box .titles
{
	margin:					0;
	padding-bottom:			12px;
}

.referafriend .box .titles img.yourfriendsdetails
{
	margin:					0 0 0 74px;
	padding:				0;
}

.referafriend form
{
	position:				relative;
	overflow:				hidden;
	font-size:				9px;
}

.referafriend form fieldset
{
	position:				relative;
	float:					left;
	width:					162px;
	margin:					0 3px 0 0;
	overflow:				hidden;
}

.referafriend form fieldset div
{
	height:					15px;
	margin:					0 0 5px 0;
}

.referafriend form fieldset div label
{
	float:					left;
	width:					48px;
	margin:					3px 7px 0 0;
	text-align:				right;
	overflow:				hidden;
}

.referafriend form fieldset div input
{
	float:					left;
	width:					104px;
	border:					0;
	font-size:				9px;
	height:					15px;
	padding:				0;
	margin:					0;
}

.referafriend form .submit
{
	width:					489px;
	clear:					both;
	margin:					18px 0 0 0;
	padding:				0;
	text-align:				right;
}

/**
*  ricola family layout styles
*/

.ricolarefer
{
	height:					415px;
}

.ricolarefer .ricolaFriend .box
{
	width:					499px;
}

.ricolarefer .box
{
	margin:					0 30px;
}

.ricolarefer .copy p
{
	margin:					0;
	padding:				0 0 15px 0 ;
}

.ricolarefer .box div.mailButtons
{
	overflow:				hidden;
}

/**
*  terms / privacy page layout styles
*/
.terms
{
	position:				relative;
	height:					415px;
	padding:				0 0 0 190px;
	background:				url('/images/terms_bg.jpg') no-repeat bottom left;
}

.terms a
{
	text-decoration:		underline;
	color:					#666;
}

.terms a:hover
{
	text-decoration:		underline;
	color:					#000;
}

.terms ol
{
	margin-top:				0;
}

.terms ol li
{
	margin-top:				10px;
}

.terms .copy
{
	position:				relative;
	margin:					0 30px;
	height:					300px;
	overflow:				hidden;
}

.scrollControls
{
	position:				absolute;
	right:					7px;
	top:					100px;
	width:					15px;
}

.scrollControls img
{
	float:					left;
}