/*

----- Lucozade Alert screen stylesheet -----
----- Fuse Digital 2008 -----

----- enjoy. -----

*/

*
{
	margin: 0; /* global reset of margin and padding */
	padding: 0;
	outline: none;
}

html
{
	height: 100%;
}

/* ----- tags ----- */
body
{
	height: 100%;
	background: #000 url(../images/bg/neon_tile.gif) 50% 0 repeat-y;
	text-align: center; /* centre in IE */
	font: small Arial, Helvetica, sans-serif;
	color: #fff;
}
body#home
{
	background-image: none;
}
ul
{
	list-style: none; /* no bullets on lists by default */
}
a
{
	color: #f7b600;
	text-decoration: none;
}
a:hover
{
	text-decoration: underline;
}
a img
{
	border: none;
}

/* ----- universal styles ----- */
.hide
{
	display: none;
}

/* ----- containers ----- */
#masthead
{
	width: 100%;
	height: 20px;
	background: #090909;
	position: relative;
	z-index: 20;
}
#container
{
	width: 100%;
	float: left;
	background: url(../images/bg/neon_bg.gif) 50% 100% no-repeat;
	padding-bottom: 60px;
}
#thanks #container
{
	padding-bottom: 120px;
}
#flashcontent, form
{
	width: 100%;
	height: 100%;
	min-height: 600px;
}

/* ------ global header ------ */
#global-header
{
	width: 940px;
	height: 20px;
	padding: 0 15px;
	margin: 0 auto;
}
#global-header .site
{
	float: left;
}
#global-header .account
{
	float: right;
}
#global-header .account li
{
	float: left;
	background: url(../images/breadcrumbs/sep.gif) 0 50% no-repeat;
	padding-left: 1px;
}
#global-header .account li.first
{
	background: none;
	padding-left: 0;
}
#global-header .site a, #global-header .account a
{
	display: block;
	height: 20px;
	text-indent: -1000em;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#global-header .site a:hover, #global-header .account a:hover
{
	background-position: 0 -400px;
}
#global-header .site .current a
{
	background-position: 0 -200px;
}
#global-header .account .my-profile
{
	width: 71px;
	background-image: url(../images/global_header/my_profile.gif);
}
#global-header .account .sign-in-register
{
	width: 99px;
	background-image: url(../images/global_header/sign_in_register.gif);
}
#global-header .account .sign-out
{
	width: 52px;
	background-image: url(../images/global_header/sign_out.gif);
}

/* ------ breadcrumbs ------ */
#global-header .site li
{
	float: left;
	background: url(../images/breadcrumbs/sep.gif) 100% 50% no-repeat;
	padding-right: 1px;
}
#global-header .site li.current
{
	background: none;
	padding-right: 0;
}
#global-header .site .com
{
	width: 82px;
	background-image: url(../images/breadcrumbs/lucozade_com.gif);
}
#global-header .site .lucozade-alert
{
	width: 97px;
	background-image: url(../images/breadcrumbs/lucozade_alert.gif);
}
#global-header .site .contact-us
{
	width: 73px;
	background-image: url(../images/breadcrumbs/contact_us.gif);
}
#global-header .site .my-profile
{
	width: 71px;
	background-image: url(../images/breadcrumbs/my_profile.gif);
}

/* ------ footer ------ */
#footer
{
	width: 780px;
	margin: 0 auto;
	font-size: 0.85em;
	color: #666;
}
#footer a
{
	color: #666;
	text-decoration: none;
}
#footer a:hover
{
	color: #fff;
}
#footer .copyright
{
	float: right;
	padding-bottom: 20px;
}
#footer ul
{
	float: left;
	padding-bottom: 20px;
}
#footer ul li
{
	float: left;
	background: url(../images/sep_footer.gif) 100% 50% no-repeat;
	padding-right: 8px;
	margin-right: 7px;
}
#footer ul li.final
{
	background: none;
}

/* ------ main content ------ */
#content
{
	margin: 0 auto;
	padding: 30px 0 0 0;
	width: 780px;
	text-align: left;
}
#thanks #content p
{
	margin-bottom: 10px;
}

/* ------ page headings ------ */
h1
{
	height: 16px;
	line-height: 0;
	margin-bottom: 10px;
	text-indent: -1000em;
	background-position: 0 0;
	background-repeat: no-repeat;
}
#contact h1
{
	width: 234px;
	height: 33px;
	margin-left: -5px;
	background-image: url(../images/headings/contact_us.gif);
}
#thanks h1
{
	width: 121px;
	background-image: url(../images/headings/thank_you.gif);
}
#my-profile h1
{
	width: 230px;
	height: 38px;
	background-image: url(../images/headings/my_profile.gif);
}

/* ------ buttons ------ */
.button
{
	float: left;
	margin: 20px 20px 10px -6px;
	display: inline;
}
.button a
{
	display: block;
	width: 158px;
	height: 44px;
	text-indent: -1000em;
	background-position: 0 0;
	background-repeat: no-repeat;
}
.button a:hover
{
	background-position: 0 -200px;
}
.button a.home
{
	background-image: url(../images/buttons/back_to_home.gif);
}
.button a.contact
{
	background-image: url(../images/buttons/new_message.gif);
}

/* ------ terms & conditions ------ */
#cover
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100% !important;
	height: 800px;
	background: #000;
	z-index: 2;
	opacity: .8;
	filter: alpha(opacity=80);
}
#terms, #privacy
{
	position: absolute;
	top: 80px;
	left: 0;
	width: 100%;
	z-index: 10;
}
#terms .frame, #privacy .frame
{
	width: 760px;
	height: 450px;
	margin: 0 auto;
}
#terms .panel, #privacy .panel
{
	width: 690px;
	height: 370px;
	padding: 40px 35px;
	float: left;
	background: url(../images/panel/panel.png) 0 0 no-repeat !important;
	background-image: url(../images/panel/panel.gif);
	text-align: left;
	position: relative;
}
#terms .panel .content, #privacy .panel .content
{
	width: 670px;
	height: 370px;
	padding-right: 20px;
	overflow-y: scroll;
}
#terms .panel h1
{
	width: 381px;
	height: 33px;
	margin-left: 0;
	background-image: url(../images/headings/terms_and_conditions.gif);
	margin-bottom: 20px;
}
#privacy .panel h1
{
	width: 292px;
	height: 33px;
	margin-left: 0;
	background-image: url(../images/headings/privacy_policy.gif);
	margin-bottom: 20px;
}
.panel .content h2
{
	font-size: 1em;
	font-weight: bold;
	margin-bottom: 10px;
	text-transform: uppercase;
}
.panel .content p
{
	margin-bottom: 10px;
	font-size: 0.9em;
}
.panel p.close
{
	margin: 0;
	position: absolute;
	top: -10px;
	right: -6px;
	width: 36px;
	height: 38px;
}
.panel p.close a
{
	display: block;
	width: 36px;
	height: 38px;
	text-indent: -1000em;
	background: url(../images/panel/close.png) 0 0 no-repeat !important;
	background-image: url(../images/panel/close.gif);
}
.panel p.close a:hover
{
	background-position: 0 -200px !important;
}

/* ------ global reg form ------ */
#gr-form
{
	clear: both;
	float: left;
}
#gr-form table
{
	width: 780px;
	margin: 0;
}
#gr-form table.opts
{
	width: 780px;
	margin: 0 0 20px 0;
}
#gr-form td
{
	width: 390px;
	padding: 7px 0 10px 0;
	vertical-align: top;
	color: #fff;
}
#gr-form .opts td
{
	padding: 7px 0 10px 0;
	vertical-align: top;
	color: #fff;
}
#gr-form td.info
{
	width: 385px;
	padding: 27px 0 0 5px;
	vertical-align: top;
	font-size: 0.85em;
}
#gr-form td.full
{
	width: 780px;
	padding-left: 19px;
	padding-right: 19px;
}
#gr-form td.opt
{
	width: 10px;
	padding-left: 0;
	padding-right: 0;
}
#gr-form td input, #gr-form td textarea
{
	width: 380px;
	font: 1em Arial, Helvetica, sans-serif;
	color: #d1d1d1;
	background: #404040;
	border: 2px solid #404040;
}
#gr-form td input.short
{
	width: 100px;
}
#gr-form td input.auto
{
	width: auto;
	background: none;
	border: none;
}
#gr-form td label
{
	font-weight: bold;
	font-style: italic;
	line-height: 1.6em;
}
#gr-form .opts td label
{
	font-weight: normal;
	font-style: normal;
	font-size: 0.85em;
}
#content .submit, #content .submit2
{
	float: left;
	width: 158px;
	height: 44px;
	line-height: 1em;
	margin: 0 0 0 -6px;
	position: relative;
	display: inline;
}
#content .submit input, #content .submit2 input
{
	width: 158px;
	height: 44px;
	border: none;
	margin: 0;
	padding: 0;
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	filter: alpha(opacity: 0);
	opacity: 0;
}
#content .submit span, #content .submit2 span
{
	display: block;
	width: 158px;
	height: 44px;
	background: url(../images/buttons/send_message.gif) 0 0 no-repeat;
	position: absolute;
	top: 0;
	left: 0;
}
#content .submit span.hover, #content .submit2 span.hover
{
	background-position: 0 -200px;
}

/* ------ form alerts ------ */
#gr-form td div
{
	padding-left: 10px;
}
#gr-form td span
{
	display: block;
	font-weight: bold;
	font-style: italic;
	text-transform: uppercase;
	padding: 4px 8px;
}
#gr-form div.contexthelp
{
	background: url(../images/alerts/arrow_help.gif) 0 50% no-repeat;
}
#gr-form .contexthelp span
{
	background: #a3a3a3;
	color: #000;
}
#gr-form div.contexterror
{
	background: url(../images/alerts/arrow_warning.gif) 0 50% no-repeat;
}
#gr-form .contexterror span
{
	background: #ffcc00;
	color: #000;
}
#gr-form p
{
	float: none;
	white-space: nowrap;
}
#content p#form-error
{
	color: #000;
	font-weight: bold;
	font-style: italic;
	font-size: 0.9em;
	text-transform: uppercase;
	padding: 7px 10px 7px 30px;
	background: #ffcc00 url(../images/icons/error.gif) 10px 8px no-repeat;
	margin: 5px 0 !important;
	margin-top: 0;
}

/* ------ my profile columns ------ */
#my-profile #col-left
{
	float: left;
	width: 460px;
}
#my-profile #col-right
{
	float: right;
	width: 280px;
	padding-top: 58px;
}

/* ------ my profile text styles ------ */
#my-profile #col-left h2.my-profile
{
	width: 230px;
	height: 38px;
	text-indent: -1000em;
	background: url(../images/headings/my_profile.gif) 0 0 no-repeat;
	margin-bottom: 20px;
}
#my-profile #col-right p
{
	margin-bottom: 10px;
}
#my-profile #col-right p.user
{
	font-size: 0.9em;
	line-height: 1.2em;
	margin-bottom: 15px;
}
#my-profile #col-right p.user strong
{
	color: #f7b600;
}
#my-profile #col-right p.minor
{
	font-size: 0.9em;
	line-height: 1.2em;
}
#my-profile #col-left h4
{
	font-size: 1.1em;
	margin: 10px 0;
}

/* ------ my profile sub nav ------ */
#my-profile #sub-nav
{
	float: right;
	width: 280px;
	border-top: 1px solid #2f2f2f;
	margin-bottom: 15px;
}
#my-profile #sub-nav li
{
	float: right;
	margin: 0;
	border-bottom: 1px solid #2f2f2f;
}
#my-profile #sub-nav li a
{
	display: block;
	width: 240px;
	height: auto;
	padding: 8px 20px;
	text-indent: 0;
	font-weight: bold;
	font-size: 0.9em;
	text-decoration: none;
}
#my-profile #sub-nav li a:hover
{
	color: #fff;
	background: #2f2f2f;
}

/* ------ my profile pr detail styles ------ */
.pr-detail, .pr-detail-end
{
	clear: both;
	float: left;
	width: 460px;
	border-bottom: 1px solid #2f2f2f;
	font-size: 0.9em;
	margin-bottom: 20px;
}
.pr-detail .plus-2, .pr-detail-end .plus-2
{
	display: none;
}
.pr-detail h3, .pr-detail-end h3
{
	color: #f7b600;
	font-size: 1.2em;
	margin-bottom: 10px;
}
.pr-detail p, .pr-detail-end p
{
	margin-bottom: 10px;
}
.pr-detail table, .pr-detail-end table
{
	width: 460px;
	margin-bottom: 10px;
}
.pr-detail table th, .pr-detail table td, .pr-detail-end table th, .pr-detail-end table td
{
	padding-bottom: 5px;
}
.pr-detail table th, .pr-detail-end table th
{
	width: 120px;
}
.pr-detail table.newsletter td, .pr-detail-end table.newsletter td
{
	color: #c00;
}

/* ------ your avatar styles ------ */
#your-avatar
{
	clear: both;
	float: left;
	width: 280px;
	margin: 10px 0;
}
#your-avatar h2
{
	text-align: center;
	margin-bottom: 10px;
}
#your-avatar p
{
	text-align: center;
}

/* ------ my profile global reg form ------ */
#my-profile #gr-form table
{
	width: 460px;
	margin: 0 0 10px 0;
	padding-bottom: 10px;
	border-bottom: 1px solid #2f2f2f;
}
#my-profile #gr-form table.opts
{
	width: 460px;
	margin: 0 0 20px 0;
}
#my-profile #gr-form td
{
	width: 230px;
	padding: 0 0 8px 0;
	vertical-align: top;
	color: #fff;
}
#my-profile #gr-form .opts td
{
	padding: 7px 0 10px 0;
	vertical-align: top;
	color: #fff;
}
#my-profile #gr-form td.info
{
	width: auto;
	padding: 25px 0 0 5px;
	vertical-align: top;
	font-size: 0.85em;
}
#my-profile #gr-form td.full
{
	width: 460px;
	padding-left: 19px;
	padding-right: 19px;
}
#my-profile #gr-form td.opt
{
	width: 10px;
	padding-left: 0;
	padding-right: 0;
}
#my-profile #gr-form td input, #my-profile #gr-form td textarea
{
	width: 220px;
	font: 1em Arial, Helvetica, sans-serif;
}
#my-profile #gr-form td input.short
{
	width: 100px;
}
#my-profile #gr-form td input.auto
{
	width: auto;
	background: none;
	border: none;
}
#my-profile #gr-form td label
{
	font-weight: bold;
	font-style: italic;
	line-height: 1.6em;
}
#my-profile #gr-form .opts td label
{
	font-weight: normal;
	font-style: normal;
	font-size: 0.85em;
}
#my-profile #gr-form .button-row
{
	clear: both;
	float: left;
	margin-bottom: 10px;
}
#my-profile #content #gr-form .submit, #my-profile #content #gr-form .submit2
{
	width: 143px;
	height: 46px;
}
#my-profile #content #gr-form .submit input, #my-profile #content #gr-form .submit2 input
{
	width: 143px;
	height: 46px;
}
#my-profile #content #gr-form .submit span, #my-profile #content #gr-form .submit2 span
{
	width: 143px;
	height: 46px;
	background-image: url(../images/buttons/save.gif);
}
#my-profile #content #gr-form .cancel
{
	float: left;
	margin: 18px 0 0 15px;
	display: inline;
}
#profile-banner
{
	clear: both;
	float: left;
	width: 280px;
	text-align: center;
}
#my-profile #gr-form h4
{
	clear: left;
}
#my-profile #gr-form p
{
	width: 460px;
	white-space: normal;
	font-size: 1em;
	margin-bottom: 10px;
}
#my-profile #gr-form .button-row p
{
	width: auto;
	margin-bottom: 0;
}

/* ------ Flash alternative content ------ */
#alt-content
{
	width: 600px;
	margin: 0 auto;
	text-align: center;
}
#alt-content h1
{
	color: #fff;
	width: 111px;
	height: 293px;
	line-height: 1em;
	margin: 40px auto 30px auto;
	text-indent: -1000em;
	background: url(../images/pack_shot.jpg) 0 0 no-repeat;
}
#alt-content p
{
	margin-bottom: 15px;
}

/* ----- Form Hints and Warnings ----- */
table.form
{
	width: 620px;
}
table.form th
{
	line-height: 1.4em;
	padding: 8px 12px 0 0;
	text-align: right;
	vertical-align: top;
	width: 100px;
}
table.form td input, table.form td textarea
{
	width: 190px;
}
table.form span.input
{
	display: block;
	float: left;
	width: 200px;
	margin: 0;
	padding: 2px 20px 2px 2px;
}
table.form span.state
{
	display: block;
	float: left;
	width: 118px;
	margin: 0;
	padding: 2px 20px 2px 2px;
}
table.form span.text
{
	display: block;
	float: left;
	margin: 0;
	padding: 2px 20px 2px 0;
}
table.form span.warning
{
	background: #f00 url(../../sport/images/icons/exclamation_warning_small.gif) 100% 50% no-repeat;
}
table.form .usage span.warning, table.form .terms span.warning, table.form .luc-comms span.warning, table.form .unsub-reason span.warning
{
	padding-left: 2px;
	color: #fff;
}
table.form span.ok
{
	display: block;
	float: left;
	width: 15px;
	height: 10px;
	margin: 7px 0 0 -15px;
	background: url(../../sport/images/icons/tick_success_small.gif) 100% 50% no-repeat;
}
table.form .usage span.ok
{
	margin-top: 4px;
}
table.form p.warning
{
	float: right;
	margin: 8px 0 0 0;
	padding: 0;
	font-size: 0.917em; /* 12*0.917=11 */
	font-weight: bold;
	line-height: 1em;
	color: #f00;
	background: none;
}
table.form p.warning
{
	width: 280px;
}
table.form .usage p.warning
{
	margin-top: 6px;
}
table.form .terms p.warning
{
	margin-top: 10px;
}
table.form .full p.warning
{
	float: left;
	width: 210px;
	margin-left: 8px;
	display: inline;
}
table.form .cnt
{
	position: relative;
	display: block;
	float: right;
}
table.form p.hint
{
	display: none;
	position: absolute;
	top: -4px;
	right: 0;
	z-index: 5;
	width: 205px;
	margin: 2px 0 0 -2px;
	padding: 10px;
	font-size: 0.917em; /* 12*0.917=11 */
	font-weight: bold;
	line-height: 1.2em;
	background: transparent url(../../sport/images/panels_layout/tile_blue_transparent_70.png) 0 0 repeat !important;
	background: #060f18;
}
table.form p.hint
{
	width: 289px;
}
table.form p.hint span
{
	display: block;
	width: 249px;
	padding-left: 10px;
	background: url(../../sport/images/icons/arrow_left_c8c8c8.gif) 0 2px no-repeat;
}
table.form p.hint span
{
	width: 279px;
}
table.form p.hint span img
{
	float: right;
	margin: 0 0 0 12px;
}
table.form p.field-opts
{
	clear: both;
	padding: 4px 0 0 2px;
}
table.form p.button span.loader
{
	float: left;
	display: none;
	width: 16px;
	height: 16px;
	margin-top: 10px;
	background: url(../../sport/images/icons/loader.gif) 0 0 no-repeat;
}
table.form p.note
{
	clear: left;
	margin-left: 2px;
	font-size: 0.917em; /* 12*0.917=11 */
}
.form-container em
{
	font-style: normal;
	font-weight: bold;
	color: #fff200;
}
table.form .agreement
{
	display: none;
}

p.warning.submit, p.success.submit
{
	clear: left;
	padding-left: 32px;
	font-weight: bold;
	display: block !important;
	width: 100% !important;
}
p.warning.submit strong
{
	color: #fff;
	font-size: 1.5em; /* 12*1.5=18 */
}
p.warning.submit
{
	background: url(../../sport/images/icons/cross_warning.gif) 0 0 no-repeat;
}

table.form p.button a.contact-us
{
	background-image: url(../images/buttons/orange_left.png) !important;
	background-repeat: no-repeat;
	cursor: pointer;
	display: block;
	height: 24px;
	text-indent: 0;
	width: auto;
	color: #FFFFFF;
	float: left;
	font-family: Arial,sans-serif;
	font-size: 1em;
	font-style: italic;
	font-variant: normal;
	font-weight: bold;
	letter-spacing: -0.03em;
	line-height: normal;
	padding-left: 12px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	margin: 4px 0 0 6px;
}
table.form p.button a.contact-us span
{
	background-image: url(../images/buttons/orange_bg.png) !important;
	background-repeat: no-repeat;
	display: block;
	height: 18px;
	padding: 5px 20px 0 8px;
	background-position: 100% 0;
}

table.form p.button a:hover span
{
	background-position: 100% -200px;
}
