﻿/**
 * Coke.com Global Stylesheet
 * 
 * @author Adam Hey
 * 
 */


/*  HTML5 Boilerplate  */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, 
menu, nav, section, summary, time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}                  
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display:block;
}
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; outline:none; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }


body { font:13px/1.231 sans-serif; *font-size:small; } 
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }

body, select, input, textarea {   color: #444; }
h1,h2,h3,h4,h5,h6 { font-weight: bold; }
html { overflow-y: scroll; }

a:hover, a:active, a:visited, a:focus { outline: none; }
a, a:active { color: #fd7500; outline: none; }
a:hover { color: #000000; }

ul, ol { margin-left: 1.8em; }
ol { list-style-type: decimal; }

nav ul, nav li { margin: 0; } 
small { font-size: 85%; }
strong, th {
	font-weight: bold;
	font-size: 16px;
	font-style: normal;
}
td, td img { vertical-align: top; } 
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }
pre {  padding: 15px;  white-space: pre;  white-space: pre-wrap;  white-space: pre-line;  word-wrap: break-word; }
textarea { overflow: auto; } 
.ie6 legend, .ie7 legend { margin-left: -7px; } 
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type=button], input[type=submit], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { border-radius: 1px;  -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red;  box-shadow: 0px 0px 5px red; }
.no-boxshadow input:invalid, 
.no-boxshadow textarea:invalid { background-color: #f0dddd; }

::-moz-selection{ background: #ff7a01; color:#fff; text-shadow: none; }
::selection { background:#000; color:#fff; text-shadow: none; } 
a:link { -webkit-tap-highlight-color: #ff7a01; } 

button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }

.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; } 
.visuallyhidden { position: absolute !important; clip: rect(1px 1px 1px 1px);  clip: rect(1px, 1px, 1px, 1px); }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after {  content: "\0020"; display: block; height: 0; visibility: hidden;	 } 
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }









 /* Fanta Styles
    Author: Adam Hey
 */



/* Globals */ 

body {
	min-width: 980px;
}


nav,
header,
#toolbar ul,
#main,

#container {
	position: relative;
	width: 100%;
}

.hide {
	display: none;
}

#main{position:relative;}


/* Header, Nav & Toolbar */
 #sharePopupFacebook, 
#sharePopupSites, #shareLaunch, #shareLaunch span, #facebookPosts .scrollbar, #facebookPosts .scrubber, #facebookComment, 
#shareFooter, .btnClose, .btnViewComments, #all_social_media .scrollbar, #all_social_media .scrubber {
background-image: url(../img/spriteMain.png);
background-repeat: no-repeat;
}

header {
	*z-index:110;
	*display:block;
}


	header h1,
	header p {
		display: block;
		height: 155px;
		position: absolute;
		width: 160px;
		z-index: 101;
		vertical-align:top;
	}
	header p.logo img{
		margin-top: -55px;
	}
	
	header h1 {
		top:-999999px;
	}
	header a{
		position:relative;
		display:block;
		
	}
	header p a img{
		position: absolute;
		display: block;
		top: 0px;
		left: 0px;
		width: 160px;
		height: 155px;
		}
	nav {
		height: 39px;
		padding-top: 7px;
	}

		nav li {
			float: left;			
		}
		
		nav ul li .nav_separator{
			float:left;
			width:5px;
			height:30px;
			/*background:url(../img/separator.png) no-repeat 0 0 transparent!important;*/
		}
		nav ul li a {
			float:left;
			padding:0;
			margin:0;
			vertical-align:middle;
		}
			nav li a, nav li a:hover {
				color: #fff;
				text-transform: uppercase;
				font-weight: bold;
				text-decoration: none;
				font-size: 20px;
				display: block;
				text-shadow: 0px -1px 2px #d44800;
				vertical-align:middle;
				
				padding:0;
				margin:0;
				vertical-align:middle;
			}
			
			nav ul li a .icon_img{
				float:left;
				padding:0;
				margin-left:20px;
				height:30px;
				cursor:pointer;
			}		
			
			nav ul li a .nav_text{
				float:left;
				padding-top:10px;
				padding-right:10px;
				margin-left:6px;
				margin-right:14px;
				cursor:pointer;
			}
			
		nav li.main_nav_1 .nav_separator {
			background: none!important;
		}
			nav li.main_nav_1 a .icon_img{
				background-repeat:no-repeat!important;				
			}
				nav li.main_nav_1 a:hover .icon_img{
					background-repeat:no-repeat!important;					
				}

			nav li.main_nav_2 a .icon_img{
				background-repeat:no-repeat!important;				
			}
				nav li.main_nav_2 a:hover .icon_img {
					background-repeat:no-repeat!important;
				}

			nav li.main_nav_3 a .icon_img{
				background-repeat:no-repeat!important;
			}
				nav li.main_nav_3 a:hover .icon_img {
					background-repeat:no-repeat!important;				
				}			
			
			nav li.main_nav_4 a .icon_img{
				background-repeat:no-repeat!important;
			}			
				nav li.main_nav_4 a:hover .icon_img {
					background-repeat:no-repeat!important;
				}

/* Main content area */
.downloadPC, .downloadMac { cursor:pointer; border:0;}

#main {
	margin-top: 14px;
}

#ep {
	width: 980px;
	height: 410px;
	margin-top: -16px;
	position: relative;
	margin-bottom: 20px;
	z-index:0;
}
	#runtimeID {
		position: absolute;
		z-index: 2;
		left: 0;
		top: 0px;
	}
	#fullWidthShadow {
	background-position: -185px 100%;
		width: 100%;
		height: 38px;
		position: absolute;
		bottom: 0;
		z-index: 1;
	}
	#alternateContent {
		display: none;
	}
		#alternate {
			width: 980px;
			height: 395px;
			background: #f76b21;
			position: absolute;
			z-index: 2;
			text-align: center;
			top: 14px;
		}
			#alternate p {
				font-size: 18px;
				font-weight: bold;
				color: #fff;
				margin: 20px 150px 0;
			}
/*
Enhancement Fanta Global 0.5 Release - 
Revert Shadow Enhancement - 
1. The background positions given under all callout ids (such as #oneWideCallouts,
#twoWideCallouts, #oneWideCalloutsTop, #twoWideCalloutsTop, #threeWideCallouts,
#threeWideCalloutsTop, #fourWideCalloutsTop, #fourWideCallouts..) are removed.
*/
.feature_module {width: 982px; margin: 0 auto;}
.feature_module .callout { display:inline; float:left;} /*margin added for top and bottom teasers*\
		
		
/* List page */

#pageHeading {
	background: #a00000;
	width: 980px;
	height: 98px;
	margin-top: 28px;
}
	#pageHeading h1 {
/* 		text-indent: -10000em; */
		margin: 45px 0 0 40px;
		float: left;
		font-size: 22px;
		color:#fff;
		text-transform: uppercase;
		text-decoration:none;
		font-weight:bold;
		display: block;
		height: 23px;
	}
	#pageHeading ul {
		float: left;
		border-left: 0px solid #000;
		margin: 45px 0 0 0px;
		padding-left: 0px;
	}
		#pageHeading li {
			float: left;
			list-style: none;
			margin-right: 10px;
		}
			#pageHeading li a {
				/*text-indent: -10000em;*/
				background-image:none !important;
				color:#fff;
				text-transform: uppercase;
				text-decoration:none;
				font-weight:bold;
				display: block;
				height: 16px;
				padding-top:4px;
			}
			#pageHeading li a:hover {
				color:#000000;
			}
			#pageHeading li a.active {
				/*color:#fff; need an active color?*/
			}
#pageContent {
	background-position: -185px 100%;
	padding-bottom: 37px;
}
		
		
	.downloadsRow {
		border-bottom: 1px solid #d6d6d6;
		color: #595959;
		padding: 0 20px;
		overflow: hidden;
		background: #fff;
	}	
		.downloadsRow .item {
			width: 220px;
			float: left;
			margin: 40px 7px 20px 7px;
		}
			.downloadsRow .item.last {
				margin-right: 0;
			}
			}
			.downloadsRow h2 {
				font-size: 18px;
				color: #595959;
			}
.downloadsRow .link {
width: 220px;
height: 220px;
margin-bottom: 15px;
position: relative;
background-position: -1719px 219px;
}
				.downloadsRow .link span,
				.downloadsRow .link a {
					background:url(../img/maskBG.png);
					color: #FFFFFF;
					display: block;
					font-size: 12px;
					font-weight: bold;
					height: 63px;
					left: 0;
					padding: 47px 0 0;
					position: absolute;
					text-align: center;
					text-decoration: none;
					top: 0;
					width: 220px;
				}
					.downloadsRow .link a {
						padding: 0;
						width: 220px;
						height: 110px;
					}
						/* full height, wallpaper link */
						.downloadsRow .link a.download {
							height: 220px;
							text-align: center;
						}
							.downloadsRow .link a.download span {
								background: none;
								padding-top: 100px;
								padding-left: 0;
								width: 220px;
								height: 100px;
							}
						.downloadsRow .link a:hover {
							background-color: #000;
						}
							.downloadsRow .link a.download:hover {
								background-color: transparent;
							}
						.downloadsRow .link a span {
							background: none;
						}
					.downloadsRow .link a.downloadMac {
						top: 110px;
						border-top: 1px solid #434343;
					}
						.downloadsRow .link a.downloadMac span {
							background-position: 0 0;						
						}



	

/* Footer */

	footer #meta {
		color: #fff;
		margin: 0 auto;
		overflow: hidden;
		/*float: left;*/
		width: 980px;
	}
		footer #meta li {
			float: left;
			list-style: none;
			font-size: 11px;
			padding-top: 30px;
			margin-right: 10px;
		}
			footer #meta li a {
				color: #fff;
			}
				footer #meta li a:hover {
					text-decoration: none;
				}

		footer #meta li.fantaLink {
			padding-top: 0;
		}
			footer #meta li.fantaLink a {
				display: block;
				width: 42px;
				height: 42px;
			}



			


/* Region Selector / Index */
.group:after {
	content: ".";
	display: block;
	height: 0px;
	clear: both;
	visibility: hidden;
}
	#regionWorldMap {
		margin: 0 auto;
		height: 370px;
		width: 980px;
		background-position: 0 -718px;
	}
	#regionPulldown {
		background-color: #f0f0f0;
		margin: 0 auto;
		/*padding-top: 26px;
		position: absolute;
		top: -740px;*/
		position: relative;
		height: 0;
		width: 100%;
		overflow: hidden;
	}
	#regionSelector {
		width: 980px;
		height: 339px;
		position: relative;
		margin: 0 auto;
	}
	#regionSelector h2 {
		color: #bbbbbb;
		font-size: 16px;
		margin-bottom: 10px;
	}
	#regionSelector .hr {
		margin: 0 0 15px 0;
	}
	#regionIndex {
		width: 245px;
		height: 290px;
		border-right: 1px solid #dcdcdc;
	}
	#regionIndex h5 {
		float: left;
	}
	#regionList {
		float: left;
	}
	#regionSelector li {
		list-style: none;	
	}
	#regionIndex li {
		border-bottom: 1px #e5e5e5 solid;
		padding: 0 0 0 2px;
		width: 172px;
		height: 41px;
	}
	#regionIndex li.last {
		border-bottom: 0;
	}
	#regionIndex a {
		font-size: 18px;
		display: block;
		line-height: 42px;
		position: relative;
		z-index: 2;
	}
	#regionIndex a.selected,
	#regionIndex a.selected:active	{
		color: #fff;
		outline: none;
	}
	#regionMarker {
		background-position: left -1180px;
		width: 211px;
		position: absolute;
		left: -12px;
		top: 47px;
		padding-left: 12px;
		height: 42px;
		z-index: 1;
	}
	#regionSelector ol {
		float: left;
		margin: 0;
	}
	#regionList li ol {
		padding-left: 30px;
		width: 213px;
		border-right: 1px solid #dcdcdc;
		border-left: 1px solid #FFFFFF;
		height: 290px;
		line-height:12px;
	}
	#regionList li ol.last {
		border-right: 0;
	}
	#regionList li ol li {
		display: list-item;
	}
	#regionList li {
		display: none;
	}
	#regionList li.selected {
		display: block;
	}
	#regionList ol li {
		padding-bottom: 9px;
	}
	#regionSelector a {
		color: #444;
		text-decoration: none;
	}






/* Share */

/*
Enhancement Fanta Global 0.5 Release - 
Word-wrap - 
	a. top property changed to bottom.
*/
#share {
    bottom: 25px;
    float: right;
    position: absolute;
    right: -2px;
    z-index: 999;
}
	.btnClose span {
		display: none;
	}
	#sharePopupFacebook,
	#sharePopupSites {
		background-position: -400px 0;
		width: 327px;
		height: 463px;
		display: none;
	}
	#sharePopupTitle,
	#sharePopupFBTitle {
		width: 130px;
		height: 40px;
		position: absolute;
		top: 20px;
		left: 90px;
	}
	#sharePopupSites ul {
		font-size: 14px;
		list-style: none;
		padding: 93px 0 0 24px;
	}
	#sharePopupSites li {
		padding: 5px 0;
	}
	#sharePopupSites a {
		color: #5D5D5D;
		text-decoration: none;
	}
	#shareFooter {
		display: none;
		height: 49px;
		width: 327px;
	}
	#shareFooter.share {
		background-position: -761px -135px;
	}
	#shareFooter {
		background-position: -400px -463px;
	}
	
	
	/*
	Enhancement Fanta Global 0.5 Release - 
	Word-wrap - 
		a. #shareLaunch :- background image set to none.
	*/
	#shareLaunch {
		background-image:none;
		height: 42px;
		display: block;
		float: right;
		margin: -40px 0px 20px 0;
		text-decoration: none;
		font-weight: bold;
		color: #424242;
		position: relative;
		padding: 23px 0 0 31px;
	}
		/*
		#shareLaunch span {
			display: block;
			height: 65px;
			width: 40px;
			position: absolute;
			right: -40px;
			top: 0;
			background-position: -975px -200px;
		}
		*/
		
	/*
	Enhancement Fanta Global 0.5 Release - 
	Word-wrap - new class 
		a. set background image, which is seperated from spriteMain.png
	*/
		#shareLaunch .share_left {
			background-image: url("http://www.coca-cola.com/content-store/en_ZA/Red/common/img/share_left.png");
			background-repeat: no-repeat;
			display: block;
			float: left;
			height: 74px;
			left: 1px;
			position: relative;
			top: 0;
			width: 70px;
		}
		
		/*
		Enhancement Fanta Global 0.5 Release - 
		Word-wrap - new class 
			a. set background image, which is seperated from spriteMain.png
		*/
		#shareLaunch .share_middle {
			background-image: url("http://www.coca-cola.com/content-store/en_ZA/Red/common/img/share_middle.png");
			background-repeat: repeat-x;
			display: block;
			float: left;
			height: 44px;
			padding-top: 30px;
			position: relative;
			text-align: right;
		}
		
		/*
		Enhancement Fanta Global 0.5 Release - 
		Word-wrap - new class 
			a. set background image, which is seperated from spriteMain.png
		*/
		#shareLaunch .share_right {
			background-image: url("http://www.coca-cola.com/content-store/en_ZA/Red/common/img/share_right.png");
			background-repeat: no-repeat;
			display: block;
			float: left;
			height: 74px;
			position: relative;
			top: 0;
			width: 40px;
		}
	
	#shareViewPosts,
	#shareMakeComment {
		padding-top: 93px;
	}
	#shareMakeComment {
		display: none;
	}

	#sharePopupFacebook .hr {
		margin: 0 2px 0 21px;
	}
	#facebookConnect {
		width: 264px;
		margin: 3px 0 16px 40px;
	}

	#facebookLike {
		width: 264px;
		height: 35px;
		margin: 16px 0 16px 40px;
	}
	#facebookHowToPost {
		width: 264px;
		margin: 16px 0 16px 40px;
		color: #5D5D5D;
	}
	#facebookComment {
		margin: 16px 0 0 40px;
		background-position: -732px -360px;
		height: 136px;
		width: 265px;
		padding: 
	}
	#facebookViewComments {
		margin: 16px 0 0 40px;
		background-position: -732px -360px;
		height: 136px;
		width: 265px;
		padding: 
	}
	#facebookComment .checkbox {
		clear: both;
		color: #5D5D5D;
		font-size: 11px;
		position: relative;
		top: 8px;
		width: 140px;

	}
	#facebookComment textarea {
		background: none;
		border: none;
		margin: 5px;
		width: 255px;
		height: 126px;
	}
	#facebookLoginLogout img {
		float: left;
		display: block;
		width: 50px;
		height: 50px;
		margin: 0 14px 16px 0;
	}
	#facebookLoginLogout div {
		color:#5d5d5d;
		float: left;
		margin-bottom: 12px;
	}
	#facebookPosts, #all_social_media {
		overflow: hidden;
		height: 300px;
		width: 289px;
		margin: 0 0 18px 42px;
		position: relative;
	}
	#all_social_media {
		height: 350px;
	}
	#facebookPosts ul, #all_social_media ul {
		margin: 0;
		padding: 0;
		position: relative;
	}
	#facebookPosts li, #all_social_media li {
		list-style: none;
		padding: 20px 0;
		border-top: 1px #fff solid;
		border-bottom: 1px #d7d7d7 solid;
		font-size: 14px;
		width: 230px;
		overflow: hidden;
		color: #777;
	}
	#all_social_media li {
		padding:6px 0;
		border:0px;
	}
	#facebookPosts li.first, #all_social_media li.first {
		border-top: 0;
		padding-top: 0;
	}
	#facebookPosts li.last, #all_social_media li.last {
		border-bottom: 0;
	}
	#facebookPosts .nameDate, #all_social_media .nameDate {
		font-style: italic;
		font-size: 12px;
		display: block;
		margin-top: 5px;
	}
	#facebookPosts .scrollbar, #all_social_media .scrollbar {
		background-position: -1060px -200px;
		width: 17px;
		height: 296px;
		position: absolute;
		top:3px;
		right: 26px;
		cursor: pointer;
	}
	#facebookPosts .scrubber, #all_social_media .scrubber {
		background-position: -1036px -201px;
		width: 17px;
		height: 90px;
		position: relative;
	}
	#all_social_media .scrollbar {
		background-position: -1090px -200px;
		height:348px;
	}
	#all_social_media .scrubber {
	}
	#facebookHowToPost .howToPostText {
		font-style: italic;
		font-size: 12px;
		display: block;
		margin-top: 5px;
	}
	.btnClose {
		 background-position: -736px -201px;
		 display: block;
		 height: 35px;
		 left: 276px;
		 position: absolute;
		 top: 18px;
		 width: 35px;
	}
	.btnClose:hover {
		background-position: -736px -241px;
	}
	.btnClose:active {
		background-position: -736px -281px;
	}
	.btnViewComments {
		background-position: right -1357px;
		color: #5D5D5D;
		float: right;
		font-size: 14px;
		margin-top: 37px;
		padding-right: 10px;
		text-decoration: underline;

	}
	div.hr {
		clear: both;
		border-top: 1px #cbcbcb solid;
		border-bottom: 1px #fff solid;
		height: 0;
	}
	
	.btnShout {
		background-position: -600px 0px;
		width: 88px;
		height: 31px;
		display: block;
		position: relative;
		top: 12px;
		left: 232px;
	}
	.btnShout:hover {
		background-position: -600px -40px;
	}
	.btnShoutOn, .btnShoutOn:hover, .btnShout:active {
		background-position: -600px -80px;
    color: #424242;
	}
	.btnShare {
		background-position: -600px -120px;
		width: 88px;
		height: 31px;
		display: block;
		position: relative;
		top: 12px;
		left: 134px;
		float: left;
	}
	.btnShare:hover {
		background-position: -600px -160px;
	}
	.btnShareOn, .btnShareOn:hover, .btnShare:active {
		background-position: -600px -200px;
	}
	.btnPostComment {
		background-position: -600px -240px;
		width: 150px;
		height: 31px;
		display: block;
		margin: 13px 0 0 32px;
	}
	.btnPostComment:hover {
		background-position: -600px -280px;
	}
	.btnPostComment:active {
		background-position: -600px -320px;
	}
	.btnPostToFacebook {
		margin-top: 10px;
		background-position: -600px -360px;
		width: 80px;
		height: 31px;
		display: block;
		float: left;
	}
	.btnPostToFacebook:hover {
		background-position: -600px -400px;
	}
	.btnPostToFacebook:active {
		background-position: -600px -440px;
	}
	
	/*
	Enhancement Fanta Global 0.5 Release - 
	Revert Shadow Enhancement - 
	1. The background image of spriteMain.png in the following classes
		a. #threeWideCallouts .threeDivMaxWidth
		b. #threeWideCallouts .threeDivMinWidth
		c. #twoWideCalloutsTop .twoDivMaxWidth 		
	*/
	
	.topbottomspacing{
		height:15px; /* The height of the shadow area should be 24px in both cases of shadow image contributes or not*/	
	}
	
	
	/*
		Enhancement Fanta Global 0.5 Release - 
		This change is made for RTL, 
		1. Changed float value to left from right
	*/
	.callout_img {
		display:block;	
	}
	
	/*privacy*/
	.privacy {background:#fff; background-image:none; padding:50px 100px 50px 100px;}
	.privacy h1 {font-size: 20px;}
	.privacy h2 {padding: 20px 0 0 0;}
	.privacy .footnote {font-size:10px; padding-bottom:20px;}
	.hide_this {
	display:none;
}
#loading_site {
    background: url("http://www.coca-cola.com/content-store/en_ZA/Red/common/img/fanta-loading.png") no-repeat scroll left top transparent;
    display: none;
    height: 126px;
    position: fixed;
    width: 392px;
	z-index:999999;
}
.background_div {
	background:no-repeat scroll 50% 0 #FF9D02;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99.99)";
	filter:alpha(opacity=99.99);
	-moz-opacity:0.99;
	-khtml-opacity:0.99;
	opacity:0.99;
	position:fixed;
	width:100%;
	height:100%;
	z-index:99999;
}
#loading_site .loading_content {
    float: left;
    height: auto;
    margin-left: 160px;
    margin-top: 45px;
    width: 220px;
}
#loading_site .loading_content span {
    display: block;
    float: left;
    height: auto;
    padding-left: 5px;
    width: auto;
}
noscript {
	width:auto;
	height:0px;
	overflow:hidden;
	float:left;
}
h1.jsdisable_message {
	width:100%;
	height:auto;
	text-align:center;
	padding:5px 0px;
}
.container {
	position: relative;
	width: 100%;
}

/*
 * Coke Styles
 * @Author: Adam Hey
 * @Author: Annemari Basson
*/

/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
[hidden] { display: none; }

/* =============================================================================
   Base
   ========================================================================== */
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

html, button, input, select, textarea { font-family:'Gotham Book',sans-serif; }

body { margin: 0; font-size: 0.79em; line-height: 1.11; background:url(../img/Coke_WebsiteBg1600x1200.jpg) no-repeat top #720000;}

/*#hero-module {height: 421px;}*/
#toolbar {background: url(../img/tool_background.jpg) repeat-y center;}
header {background:url(../img/tool_background.jpg) repeat-y center; position:relative; height:30px; z-index:1; margin:auto;}
.toolbar {background:url(../img/social_background.jpg) right no-repeat; width:975px; margin:auto; height:30px;}
.toolbar ul  { margin:0 0 0 0; padding:0; float:right; width:700px !important; }
.toolbar ul li  {list-style:none; float:left; font-family:Arial, sans-serif; font-size:10px; height:20px}
.toolbar ul li a {display:block; height:32px; vertical-align:middle; line-height:11px; padding-top:8px; text-decoration:none; color:#696969;}
.toolbar .fbLink {width:101px; background:url(../img/fbBG.png) no-repeat 67px 5px; }
.toolbar .twitterLink {width:100px; background:url(../img/twitterBG.png) no-repeat 55px 5px; margin-left:20px }
.toolbar .ytLink {width:100px; background:url(../img/ytBG.png) no-repeat 60px 5px; margin-left:20px }
.toolbar .flickrLink {width:91px; background:url(../img/flicrBG.png) no-repeat 45px 5px; margin:0 30px 0 20px }
.toolbar .regionLink {width:100px; background:url(../img/arrowBG.png) no-repeat 0 5px; padding-left:20px}

nav { width:982px; position:relative; margin:24px auto 7px auto; height:49px; z-index:0; clear:both}
nav ul  { width:982px; float:left; margin:0px; padding:0 }
nav ul li  {list-style:none;float:left;}
nav ul li a { display:block; height:49px;}
nav ul li a.logo { background:url(../img/navSprite.png) no-repeat; width:217px}
nav ul li a.videos { background:url(../img/navSprite.png) no-repeat 0 -49px; width:111px;}
nav ul li a.downloads { background:url(../img/navSprite.png) no-repeat 0 -98px; width:176px;}
nav ul li a.products { background:url(../img/navSprite.png) no-repeat 0 -147px; width:145px;}
nav ul li a.list { background:url(../img/navSprite.png) no-repeat 0 -196px; width:100px;}

#main {width:982px; margin:0 auto; clear:both}
#main div.btmLinks {padding:6px 0 64px 0}

footer {clear:both; background:url(../img/footer_background.jpg) repeat-x bottom; height:79px; color:#ffffff; font-size:10px;padding-top: 9px; position:relative; z-index:1;  font-family: 'Gotham Book',sans-serif}
#footerContent a{ color:#ffffff; text-decoration:underline}
#footerContent {width:982px; margin:0 auto}
#footerContent div{float:left}
#footerContent .shareBtn {float:right; padding-right:19px; position:relative; z-index:2; top:-20px;}
#footerContent .text {padding:32px 0  0 15px }

.footerLogo img { margin-top: -29px; }
/* =============================================================================
   Links
   ========================================================================== */

a { color: #fff; }
a:visited { color: #fff; }
a:hover { color: #ffde05; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }

/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }


/* =============================================================================
   Embedded content
   ========================================================================== */
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Buttons
   ========================================================================== */

a.btn-red { color:#1a1a1a; display: block; font-size:12px; font-family:'Gotham Book',sans-serif; height: 24px; text-decoration: none; padding:7px 0 0 10px}
a.btn-red:hover { background:url(../img/btn_a_red.png) no-repeat; color:#FFF; width:162px}
.activeRed { background:url(../img/btn_a_red.png) no-repeat; color:#FFF; width:162px}
.activeRed:visited { color:#FFF}
.activeRed:hover { color:#FFF}
.activeRed:active { color:#FFF}
.activeRed:focus { color:#FFF}



/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }


/* =============================================================================
   Chrome Frame Prompt
   ========================================================================== */

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }


/* =============================================================================
   Regional map
   ========================================================================== */

#panel { background:#fff; height:628px; padding: 0 0 50px 0; display: none; }
#panelContent {width:982px; margin:auto; font-family:'Gotham Book',sans-serif; font-size:19px; color:#1a1a1a;}
#panelContent .panelText {padding:38px 0 0 85px;}
#panelContent .panelText p {padding:0; margin:0 0 15px 45px; width: auto !important; height: auto !important;position: relative;background: url(../img/tool_background.jpg) repeat-y center;}
#panelContent .panelText .leftText {float:left; margin:9px 0 0 20px; width:162px; padding-right:20px; border-right:1px solid #d0d0d0; height:200px}
#panelContent .panelText .rightText {float:left; margin:9px 0 0 0; font-size:12px}
#panelContent .panelText .rightText a {font-size:12px; text-decoration:none; color:#1a1a1a;display: inline;}
#panelContent .panelText .rightText a:hover {font-size:12px; text-decoration:underline; color:#1a1a1a}
#panelContent .leftRegion {float:left; padding:0 20px; border-right:1px solid #d0d0d0}
#panelContent .rightRegion {float:right; padding:0 20px;}
.active {  }

/* =============================================================================
   Product page
   ========================================================================== */

.productBG {background:url(../img/bigFrame.png) no-repeat; width:982px; height:586px}
.productImg { position:absolute; top:20px; left:18px; z-index:0}
.productHeader { position:absolute; z-index:1; top:75px; left:120px; width:818px}
.productText {
	font-size:14px;
	line-height:16px;
	position:absolute;
	z-index:1;
	top:202px;
	left:265px;
	width:662px
}
.productText p {padding:0; margin:20px 0 0 0}

.edit_link {
display: none;
}
