/* ------------------------------------------------------------------
    @filename		ucl-common.css
	@author:        Mark Howard mark.howard@akqa.com
	@description:   UCL specific styles
	@version:		1.0.0	

	
	Contents:
        - Text sizes
        - Cufon font styles 
        - Navigation tout images 
        - UCL-specific content navigation tout images
        - Structural elements 
        - Default category page layout
        - Common page elements
        
	LOCAL SITE colour palette:
		- Black - #000000
		- White - #FFFFFF
		
------------------------------------------------------------------- */

#hdp-viewport {
	overflow: auto;
}

.ucl-tcolor01 { color:#ade569; }
.ucl-tcolor02 { color:#ffffff; }
.error { color:#45B34F; }


/* ------------------------------------------------------------------- 
    Text sizes
*/

.cufon-active h1 span.ucl-header-gradient { letter-spacing: -0.044em; }
.cufon-active h2 { font-size: 2.5em; }
.cufon-active h3 { font-size: 1.5em; }
.cufon-active p { font-size: 1.5em; }

h1,
h2,
h3 { text-transform: uppercase; }

/* ------------------------------------------------------------------- 
    Structural elements 
*/

.hdp-content {
    background: #013109 url(/assets/shared/ucl/images/backgrounds/ucl-t3-bg.jpg) no-repeat left 400px;
    min-height: 512px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 80px;
    position: relative;
}

.ucl-content-panel {
    margin-top: 22px;
    padding: 0px 50px 0px 60px;
}

#ucl-previous-winners .ucl-content-panel {
    margin-top: 0px;
}

.ucl-previous-winners #media-player,
.ucl-trophy-tour #media-player {
	top: 18px; 
}

.ucl-trophy-tour #media-overlay { top: 0; }

.ucl-previous-winners #media-overlay { 
    top: 0;
    height: 470px; 
}

.hdp-content .ucl-content-header {
    height:auto!important;
    height:428px;
    min-height: 428px;
    position:relative;
    background-position: top left;
    background-repeat: no-repeat
}

#ucl-star-final-previous .ucl-content-header,
#ucl-star-final .ucl-content-header {
    height: 514px;
    position: relative;
}

.ucl-page-section {
    background: url(/assets/shared/ucl/images/backgrounds/ucl-page-section-divider.png) no-repeat left bottom;
    clear: both;
    margin: 18px 0px 20px;
    overflow: visible;
    padding-bottom: 20px;
    width: 100%;
}

.ucl-page-section .ucl-ie6-divider {
    display: none;
}

.ucl-text-panel {
	clear: both;
}

/* ------------------------------------------------------------------- 
    Common page elements
*/


/* sign-up */
.hdp-js-enabled .ucl-signup-div { display:none; }

.ucl-signup-div {
	background: url(/assets/shared/ucl/images/buttons/ucl-signup-btn.png) no-repeat left top;
	bottom: 54px;
	height: 27px;
	left: 20px;
	overflow: hidden;
	position: absolute;
	width: 192px;
	z-index: 1000;
}

.ucl-signup-div p {
    margin-top: 1em;
}

.cufon-active .ucl-signup-div p {
    margin-top: 0.5em;
}

.ucl-signup-div-open {
    background: url(/assets/shared/ucl/images/backgrounds/ucl-sign-up-panel-bg.png) no-repeat left top;
    height: auto;
}

.ucl-signup-div .ucl-ie6-wrapper {
    padding: 6px 13px 10px 13px;
}

.ucl-signup-div a {
	display: block;
	font-size: 1.0em !important;
	margin-right: 4px;
	text-decoration: none;
	text-transform: uppercase;
}

.ucl-signup-div a,
.ucl-signup-div input,
.ucl-signup-div p {
    color: #d3ded6;
}

.ucl-signup-div a:hover {
    color: #ffffff;
}

.ucl-signup-div a.ucl-open-close-link {
    background: url(/assets/shared/ucl/images/buttons/ucl-plus-sign.gif) no-repeat right 4px;
}

.ucl-signup-div-open a.ucl-open-close-link {
    background: url(/assets/shared/ucl/images/buttons/ucl-minus-sign.gif) no-repeat right 4px;
}

.ucl-signup-div label {
    display: block;
    float: none;
    font-size: 1em;
    line-height: 1;
    margin: 16px 0px 6px;
    text-transform: uppercase;
}

.ucl-signup-div span label {
    display: block;
    margin: 5px 0px 6px;
    position: relative !important;
    text-transform: uppercase;
    font-size: 1em;
    color:#45B34F;
}

.ucl-signup-div input.ucl-text-input {
	background: url(/assets/shared/ucl/images/backgrounds/ucl-text-input-bg.png) transparent no-repeat right top;
	_background: none;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/assets/shared/ucl/images/backgrounds/ucl-text-input-bg.png', sizingMethod='scale');
	border: none;
	color: #ffffff;
	height: 20px;
	position: relative;
	width: 150px;
	padding: 1px 4px;
}

.ucl-signup-div .ucl-button-div {
    margin-top: 6px;
    text-align: right;
}

.ucl-signup-div a.ucl-submit-a {
    display: none;
}

.ucl-signup-div input.ucl-submit-button {
    background: none;
    border: none;
    cursor: pointer;
    margin-top: 6px;
    text-align: right;
    text-transform: uppercase;
}

#hdp-signup-non-js .ucl-signup-div {
    background:none repeat scroll 0 0 transparent;
    height:auto;
    position:relative;
    padding: 180px 0 0 50px;
    width:400px;
}

#hdp-signup-non-js .ucl-open-close-link {
    background:none repeat scroll 0 0 transparent;
    color:#FFFFFF;
    cursor:default;
    font-size:2em !important;
    font-weight:bold;
    text-transform:uppercase;
}

#hdp-signup-non-js .hdp-error-touts-div {
    padding-top: 160px;
}
/* --------------------------------
 * Banner tout layout
 */

.ucl-banner-tout {
    background: url(/assets/shared/ucl/images/backgrounds/ucl-star-final-tout-bg.png) no-repeat top left;
    border: 1px solid #1e5e12;
    clear: both;
    height: 149px;
    margin: 0px 0px 20px;
    overflow: hidden;
    position: relative;
    width: 873px;
}

.ucl-banner-tout a {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
}
   
.ucl-banner-tout a span.title {
    display: block;
    font-size: 1.8em;
    margin: 30px 0 0px 275px;
    text-transform: uppercase;
}

.cufon-active .ucl-banner-tout a span.title {
    font-size: 3.3em;
}

.ucl-banner-tout span.title .ucl-green-caret {
    background: url(/assets/shared/ucl/images/links/ucl-green-arrow.png) no-repeat top left;
    display: inline-block;
    height: 18px;
    width: 12px;
}

.ucl-banner-tout a span.description {
    display: block;
    font-size: 1.5em;
    margin: 4px 280px 0px 275px;
}

/* Category page flash touts */

.ucl-category-page-flash-tout {
	height: 100px;
	position: absolute;
	right: 0;
	top: 50px;
	width: 320px;
	z-index: 1010;
}

.ucl-category-page-flash-tout a {
    font-size: 3em;
    text-transform: uppercase;
}

.ucl-category-page-flash-tout a img {
    position: absolute;
    top: 0;
    left: 0;
}

.ucl-category-page-flash-tout .ucl-no-flash a { position: static; }

.ucl-category-page-flash-tout span.title {
    line-height: 18px;
    margin-left: 5px;
    position: absolute;
    right: 0px;
    top: 0;
    width: 240px;
}

.ucl-category-page-flash-tout .title span {
    display: block;
    line-height: 1em;
}


.cufon-active .ucl-category-page-flash-tout .title span {
    line-height: 1em;
    margin-top: -10px;
}

.ucl-category-page-flash-tout .link-text {
    line-height: 0.9em;
    margin-left: 5px;
    position: absolute;
    right: 0px;
    width: 240px;
    top: 0;
}

.ucl-category-page-flash-tout .link-text span {
	display: inline-block;
	font-size: 0.8em;
	float: left;
	width: 220px;
}

.cufon-active .ucl-category-page-flash-tout .link-text span {
	font-size: 0.9em;
	margin-top: -3px;
}

.ucl-category-page-flash-tout .ucl-tcolor01 {
	clear: left;
}

.ucl-category-page-flash-tout .icon {
	font-size: 0.8em;
	margin-left: 10px;
}

.ucl-star-experience .ucl-category-page-flash-tout { 
    top: 35px;
}


.ucl-star-experience .ucl-category-page-flash-tout img,  
.ucl-star-experience .ucl-category-page-flash-tout span.title { 
    top: 40px;
}


.ucl--match a span.para {
    margin: 4px 280px 0px 276px;
}

.full-carousel .next,
.full-carousel .prev {
    margin-top: -18px;
    position: absolute;
    top:50%;
}

.full-carousel .next {
	right: 0px;
}

.full-carousel .gallery-title h1 {
	font-size:1.3em;
}

.bar-carousel {
	top: 0px;
}

.bar-carousel .more-tab {
	top:0px;
}

.bar-carousel .carousel-window {
	left: 30px;
}

.ucl-content-tout-icon {
    display: block;
    float: left;
    height: 70px;
    overflow: hidden;
    width: 75px;
}

.ucl-content-tout-icon-inner {
    background-position: top left;
    background-repeat: no-repeat;
    display: block;
    height: 280px;
    width: 300px;
}

.ucl-content-tout h3 {
    float: left;
    margin-top: 8px;
}

.ucl-registration {
    display: none;
}


/* ------------------------------------------------------------------- 
    Begin old T1/T2 stylesheet
*/

/* ------------------------------------------------------------------- 
    Page structure 
*/

#hdp-viewport { 
    height: 514px; 
}

#hdp-viewport .hdp-slides,
#hdp-viewport .hdp-slide { height: 514px; }

.ucl-content-header {
    height: auto !important;
    height: 498px;
    min-height: 498px;
}

.ucl-header-div h1 {
	color: #fff;
}

.ucl-content-div {
    position: absolute;
    z-index: 9;
}

#ucl-ucl .ucl-content-div {
    height: 300px;
    left: 288px;
    top: 150px;
    width: 660px;
}

.hdp-js-enabled #ucl-ucl .ucl-content-div {
    cursor: pointer;
}

/* ----------------------------------------
   Default category page layout
 */

#hdp-wrapper { position: relative; }

.hdp-category .ucl-content-div { 
    top: 64px; 
    left: 286px; 
}

.ucl-trophy-tour .ucl-content-div { 
    top: 150px; 
    left: 270px; 
}

.ucl-trophy-tour .ucl-content-div p { 
    margin-top: 8px; 
    width:400px; 
}

.ucl-sponsorship-history .ucl-content-div { 
    left: 286px;
    top: 80px; 
}

.ucl-content-div p { 
    margin-left:7px; 
    width: 295px; 
}

.hdp-category .ucl-content-div p { 
    margin-bottom:15px; 
    width: 350px;
    font-size: 1.5em;
}






/* ------------------------------------------------------------------- 
    Touts 
*/

.hdp-touts-div { 
    top: 105px; 
    left: 0;
    background:url("/assets/shared/ucl/images/touts/ucl-t1-touts-bg.png") no-repeat scroll left top transparent;
    width: 233px;
}

.hdp-touts-div .hdp-touts {
    background: none; 
    margin-left: 17px;
}

.hdp-touts-div .touts-one,
.hdp-touts-div .touts-two {
    margin-top: 30px;
}

.hdp-touts-div .touts-three {
    margin-top: 23px;
}

.hdp-touts-div .touts-four {
    margin-top: 0;
}

.ucl-home .hdp-touts-div {
    top: 75px;
    padding-top: 23px;
    height: 385px;
}

.hdp-touts li {
    padding: 6px 0 7px 0;
    width: 216px;
}

.hdp-touts li a {
    width: 137px;
    padding: 6px 0 0 79px;
}

.hdp-touts .tout-copy { 
    width: 114px;
}

.ucl-home .hdp-touts li a .hdp-tout-arrow {
    background-position: -6px 0;
    right: 11px;
}

.hdp-touts li a .hdp-tout-arrow {
    background-position: 0 0;
    right: 11px;
}

.hdp-touts li a:hover .hdp-tout-arrow { background-position: 0 -12px; }

/* UCL requires smaller font size for left hand nav touts */
.cufon-active .hdp-touts li span.title { 
    font-size: 18px; 
    letter-spacing: 0 !important;
    margin-top: -2px;
}

.ucl-tout-para {
    font-size: 1.2em;
    margin-top: -2px;
}

.hdp-tout-icon .inner {
    display: block;
    width: 75px; 
    height: 70px;  
}

/* ------------------------------------------------------------------- 
    Cufon font styles 
*/

.ucl-green-header { color: #b0e769; }

.cufon-active .hdp-category .ucl-header-div { 
    margin-bottom: 1em;
}

.cufon-active .ucl-star-experience .ucl-header-div { 
    margin-bottom: 0;
 }

/* ------------------------------------------------------------------- 
    UCL Home page layout 
*/

.ucl-home .ucl-content-div {
    height:340px;
    left:283px;
    top:137px;;
    width:660px;
}

/* champions league logo */
.ucl-logo {
    left: 20px;
    position: absolute;
    top: 18px;
}

/* star experience logo */
.star-exp-logo {
    bottom: 19px;
    position: absolute;
    right: 21px;
}

.ucl-home .ucl-main-link {
    text-transform:uppercase;
    color:#E6E6E6;
    font-size:2em;
    font-weight: bold;
}

.ucl-home .ucl-highlights-link {
    font-size:1.2em;
    text-align: center;
    position: absolute; 
    right: 0;
    bottom: 0;
    width: 680px;
}


.ucl-home .ucl-highlights-link a {
    color: #a3a3a3;
}


.ucl-home .ucl-highlights-link a:hover { color: #fff; }

/*
 * Star Match Layout
 *
 */

div.ucl-star-match-no-flash {
    background:url(../images/backgrounds/ucl-get-flash-bg.jpg) no-repeat top left;
}

.ucl-star-match-no-flash,
#ucl-star-final-no-flash {
    height: 514px !important;
    height: auto !important;
    min-height: 514px;
    position: relative;
    width: 996px;
}

.hdp-js-enabled div.ucl-star-match-no-flash {
/*	display: none;	/* If we have JS enabled, only show the DIV after trying to load the game, otherwise it displays momemtarily (HUCLPW-305) */
}

.ucl-making-of-no-flash {
    background: url(../images/backgrounds/ucl-get-flash-bg.jpg) no-repeat top left;
    height: 514px;
    height: auto !important;
    min-height: 514px;
    position: relative;
}

.clear {
    clear: both;
    margin: 0;
    padding: 0;
}

.cufon-active .ucl-no-flash-div p {
    color: #fff;
	font-size: 1.3em;
	letter-spacing: 0.04em;
	line-height: 1.1em;
	padding-top: 7px;
	text-align: center;
}

.ucl-no-flash-title h1 {
    font-size: 85px;
	color: #fff;
	left: 220px;
	position: absolute;
	text-transform: uppercase;
	top: 150px;
}

.cufon-active .ucl-no-flash-title h1 {
    font-size: 130px;
	top: 105px;
	left: 220px;
    letter-spacing: -0.045em;
}

.ucl-no-flash-div {
    position: absolute;
    width: 292px;
	top: 20px;
	left: 350px;
}

.ucl-no-flash-link {
    background-position: left bottom;
    background-repeat: no-repeat;
    height: 60px;
    text-align: right;
    width: 270px;
}

.ucl-no-flash-link a span {
    display: block; 
    font-size: 16px; 
    margin-bottom: 2px;
    padding-left: 40px;
    line-height: 1em;
}

.cufon-active .ucl-no-flash-link a span {
    font-size: 30px; 
    height: 26px; 
    line-height: 20px; 
}

/* Trophy tour pages - Flash alternate content */

.ucl-trophy-tour-no-flash {
    background: no-repeat top left;
    height: 513px;
    height:auto !important;
    min-height: 513px;
    position: relative;
}

.ucl-trophy-tour-no-flash {
    padding:40px 0 0 42px;
}

object.ucl-trophy-tour-no-flash {
    background: none;
    height: 515px !important;
    width: 996px;
}

.ucl-trophy-tour-no-flash-hdr { padding: 40px 0 0 42px; }

.ucl-trophy-tour-no-flash .ucl-no-flash-div {
    left: auto;
    right: 35px;
    text-align: right;
    top: 365px;
}

.ucl-trophy-tour-no-flash .ucl-no-flash-link a {
    background-image: url(/assets/shared/ucl/images/links/ucl-white-arrow.gif);
    background-position: right top;
    background-repeat: no-repeat;
    display: block;
    min-height: 60px;
    padding-right: 18px;
    text-decoration: none;
    text-transform: uppercase;
}

.cufon-active .ucl-trophy-tour-no-flash .ucl-no-flash-link a {
    background-position: right 29px;
}

#ucl-trophy-tour-no-flash .cufon-canvas { text-indent: 0 !important; }

/* ------------------------------------------------------------------- 
    Touts 
*/

.ucl-trophy-tour-no-flash .hdp-touts-div {
    left:20px;
    position:absolute;
    top:152px;
    width:196px;
}

.ucl-trophy-tour-no-flash .hdp-touts { 
    background:transparent url(/assets/shared/ucl/images/touts/ucl-t7-tout-bg.png) no-repeat scroll left top; 
    position: absolute;
    top: 152px;
    left: 37px;

}

.ucl-trophy-tour-no-flash .hdp-touts li {
    background:transparent url(/assets/shared/ucl/images/touts/ucl-t7-tout-bg.png) no-repeat scroll left bottom;
    list-style-type:none;
    padding:6px 0;
    position:relative;
}

.ucl-trophy-tour-no-flash .hdp-touts li a {
    display:block;
    height:auto !important;
    min-height:50px;
    padding:13px 0 0 22px;
    text-decoration:none;
    width:120px;
}

.ucl-trophy-tour-no-flash .ucl-tout-title { opacity: 0.7; }
.ucl-trophy-tour-no-flash a:hover .ucl-tout-title { opacity: 1; }

.ucl-no-flash-bot-copy p,
.cufon-active .ucl-no-flash-top-copy p {
	color: #FFFFFF;
	font-size: 1.3em;
	letter-spacing: 0.04em;
	line-height: 1.1em;
	margin-left: 0px;
	padding-top: 7px;
	text-align: center;
}

.ucl-no-flash-bot-copy {
	left: 320px;
	position: absolute;
	top: 270px;
}

.cufon-active .ucl-no-flash-bot-copy {
	left: 350px;
}

.ucl-no-flash-bot-copy,
.ucl-no-flash-bot-copy p {
	width: 350px;
}

.cufon-active .ucl-no-flash-bot-copy,
.cufon-active .ucl-no-flash-bot-copy p {
	width: 300px;
}

.ucl-no-flash-link a {
	background: transparent url(../images/links/ucl-white-arrow.gif) no-repeat scroll right center;
	display: block;
	min-height: 24px;
	padding-right: 18px;
	text-decoration: none;
	text-transform: uppercase;
}


/* -------------------------------
 * Media player pages
 */

.cufon-active #hdp-media-gallery h2 { margin-left: 0; }
#hdp-media-gallery .bar-carousel { top: 90px; }
#hdp-media-gallery .hdp-content-div { top: 326px; }


