/*
Document   : main css
Created on : 01.03.2014, 09.00
Description: Main Stylesheet for Fireman Sam


======================== CONTENTS

--SWATCH COLORS - ##000

--CONTAINER STYLES - ##001

--INCLUDES - ##002

----HEADER - ##002 a

----FOOTER - ##002 b

--TEXT STYLES ##003

--GLOBAL STUCTURES ##004

-- INDIVIDUAL STYLES ##005

--SKIN STYLES ##006

--MISC ##007

----END OF CONTENTS----

======================== NOTES

	Created using object orientated method with classes for separate rules that can be brought in as needed into the html markup
	this means that there are less unnecessarily duplicating styles for global elements
	an example of this would be separating skins with structure
	one button skin can be applied but different sizes added using col width classes and alignment with col alignment classes.      child a tag = primary-btn-skin, primary-btn   parent div = col-1-3, col-center
	The includes header and footer are custom and designs did not fall in to the grid system - therefore these have custom styles that fall out of the OOCSS method however OOCSS remains for the rest of the site where it can be applied
	see contents for header, footer, global, skins and individual styles.
	currently still in the process of building the front end therefore classes and markup may change as pages are built however it will be along the same lines of this structure.

*/

/* ==========================================================================
   SWATCH COLORS ##000
   ========================================================================== */

/* =============== CORE COLORS
	red 			- #c0001f
	highlight red   - #da6679
	dark red    	- #870016
	darker red      - #52000d

	yellow          - #ffcc00
	orange medium   - #f67b14      pagination gradient
	orange dark     - #ec3a28
	blue            - #034ea2
	sites white     - #fff
	off white       - #f2f2f2
	lighter-grey    - #a9a9a9
	light grey      - #ddd
	medium grey     - #666
	black           - #000
	pontypandy circles
	dark blue       - #003f5f
	dark red        - #b1001d
*/

/* ========================================================================== */

/* ==========================================================================

   MAIN CONTAINER STYLES - ##001

   ========================================================================== */

#preloader { 
	position: absolute; 
	left: 0; 
	bottom: 0;
	right: 0;
	top: 0;
	height: 100%;
	min-height: 100%;
	max-height: 100%;
	z-index: 99999; 
	overflow: visible; 
	background: #fff url('../imgs/content/global/ajax-loader.gif') no-repeat center 200px; /* Not editable in cms - part of design not user generated or localised*/
}

* {
	margin: 0;
}

html, body {
	height: 100%;
}


.wrapper {
	z-index: 999;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -230px; /* the bottom margin is the negative value of the footer's height */
}


#footer {
	min-height: 230px; /* .push may have to be the same height as .footer */
}

.push{
	min-height: 200px;
}

html, body{
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 100%; /* Sets font to default - controls ems - reduce percentage to reduce font sizes globally */
}

body{
	background-color: #ffc222;
	position: relative;
}

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

.wrapper {
	position: relative;
}

.global-width{
	max-width: 960px;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
	margin: 0 auto;
	position: relative;
}

/* ========================================================================== */

/* ==========================================================================
   INCLUDES - ##002
   ========================================================================== */

/* ================================== HEADER - ##002a ========*/

header{
	position: relative;
	background-color: #fff;
	z-index: 998;
}

#print_header_logo{
	display: none;
}

#header_logo{
	height: 154px;
	width: 150px;
	display: block;
	position: absolute;
	top: -12px;
	left: 0;
	bottom: -12px;
	z-index: 999;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}

#header_logo_large{
	height: 283px;
	
	width: 283px;
	padding-top: 10px;
}

#header_logo:hover{
	top: -8px;
	z-index: 999;
}

#header_top{
	min-height: 50px;
}

#header_bottom{
	min-height: 100px;
	position: relative;
	float: left;
	display: block;
	overflow: visible;
	width: 100%;
}

.main-nav a{
	float: right;
	margin-left: 70px;  /* ======= This will need to be dynamic or overwritten using inline css within the markup 
							       as localised text images will be different sizes thus changing the anchor's width.
							       The margin will need to be adjusted to fit all nav anchors within the window
								   - keep in mind responsive layouts */
	margin-top: 4px;
	height: 84px;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}

.main-nav a:hover{
	margin-top: 8px;
}

#nav_01, #nav_02, #nav_03, #nav_04{
	display: block;
}

#nav_image_01, #nav_image_02, #nav_image_03, #nav_image_04{
	display: block;
	height: 55px;
	margin: 0 auto;
	width: 108px;
}

#nav_text_01, #nav_text_02, #nav_text_03, #nav_text_04_desktop, #nav_text_04_mobile{
	height: 30px;
	display: block;
	margin: 0 auto;
}

#nav_text_04_mobile{
	display: none;
}

.external-nav{
	float: left;
	height: 50px;
	overflow: hidden;
	margin-left: 14px;
}

.external-nav a{
	width: 60px;
	height: 50px;
	overflow: hidden;
	display: block;
	float: left;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}

.external-nav a:hover{
	width: 66px;
	height: 55px;
}

.external-nav #hit_logo:hover{
	width: 60px;
}

.secondary-nav ul{
	float: right;
	width: 400px;
}

.secondary-nav li{
	float: right;
	font-size: 13px;
	margin-left: 14px;
	margin-top: 20px;
}

.secondary-nav a{
	color: #666;
}

.secondary-nav a:hover {
	color: #222;
}

.parents-nav-holder{
	width: 100%;
	float: left;
	min-height: 50px;
	position: relative;
}

.parents-nav{
	position: relative;
}

.parents-nav ul.slimmenu li {
	display: block;
	float: right;
	padding-top: 14px;
	margin-top: 0;
}

.parents-nav ul{
	width: 100%;
}

/* ===== Slim-menu plugin adjustments specific to main css .parents-nav class ========*/

.parents-nav .slimmenu li a, .parents-nav .slimmenu li.list-break{
	color: #444;
}

.parents-nav .slimmenu li a:hover{
	color: #999;
}

.parents-nav .slimmenu.collapsed li.list-break{
	display: none;
}

.parents-nav .slimmenu.collapsed li:first-child{
	margin-top: 3px;
}

.parents-nav .slimmenu.collapsed li:last-child{
	margin-bottom: 0;
}

.parents-nav .slimmenu.collapsed li {
	padding-top: 0;
}

.parents-nav .slimmenu.collapsed li a {
	background-color: #DDD;
	border-bottom: 1px solid #C2C2C2;
	border-top: 1px solid #FFF;
}

.parents-nav .collapse-button .icon-bar{
	background-color: #a9a9a9;
}

.parents-nav .collapse-button{
	padding-left: 60px;
	background-image: url('../imgs/content/includes/nav/parents-btn-icons.png'); /* Not editable in cms - part of design not user generated or localised - also js alters the dom to bring these classes and divs in*/
	background-repeat: no-repeat;
	background-position: 0 9px;	
}

/* ================================== FOOTER - ##002b ========*/

footer {
	background-color: #f2f2f2;
	color: #a9a9a9;
	font-size: 1.000em;
	line-height: 18px;
	min-height: 190px;
	z-index: 999;
	position: relative;
}

footer a{
	color: #a9a9a9;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}

footer a:hover{
	color: #797979;
}

footer li{
  list-style: none;
}

.footer-content{
	min-height: 30px;
	margin-top: 10px;
	border-top: 1px solid #fff;
	-webkit-box-shadow: 0 -1px 0px 0px #e2e2e2;
	-moz-box-shadow: 0 -1px 0px 0px #e2e2e2;
	box-shadow: 0 -1px 0px 0px #e2e2e2;
}

.footer-content:first-child {
	margin-top: 0;
}

#footer_middle {
	min-height: 45px;
}

#footer_bottom {
	min-height: 40px;
}

.footer-links, .footer-social, .footer-legal, .footer-legal-links, .footer-logos{
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-links{
	margin-top: 0;
	display: block;
	float: left;
	min-height: 60px;
}

.footer-links a{
	font-size: 1.000em;
}

.footer-social {
	float: right;
	margin-top: 10px;
}

.social-icon{
    opacity: 0.70; /* Standards Compliant Browsers */
    filter: alpha(opacity=70); /* IE 7 and Earlier */
    /* Next 2 lines IE8 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
}

.social-icon:hover{
    opacity: 1; /* Standards Compliant Browsers */
    filter: alpha(opacity=100); /* IE 7 and Earlier */
    /* Next 2 lines IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

.footer-links li, .footer-legal-links li{
	float: left;
	margin-right: 12px;
}

.footer-links > li > a{
	padding: 0;
}

.footer-social li{
	display: inline-block;
	margin-left: 24px;
}

.footer-legal{
	float: left;
	margin-top: 10px;
	text-align: left;
}

.footer-legal-links{
	float: left;
	margin-top: 10px;
}

.footer-logos{
	float: left;
	margin-top: 10px;
}

.footer-logos li{
	float: left;
	margin-right: 24px;
}

.lang-select{
	margin-top: 26px;
}

/* ========================================================================== */

/* ==========================================================================
   TEXT STYLES - ##003
   ========================================================================== */

p, h1, h2, h3, h4, h5, li{
	line-height:  1.250em;
	font-weight: 400;
}

a{
	text-decoration: none;
}

a.primary-btn{
	font-size: 1.250em;
}

p{
	font-size: 0.875em;
	line-height: 1.500em;
	margin-top: 20px;
}

h1{
	font-size: 2.250em;
	font-weight: 300;
	color: #034ea2;
}

h2{
	font-size: 2em;
}

h3{
	font-size: 1.5em;
	font-weight: 600;
}

h4{
	font-size: 1.250em;
	font-weight: 600;
}

h4.alt{
	color: #024da1;
}

h5{
	font-size: 1em;
	font-weight: 300;
	color: #ccc;
}

strong{
	
}

.col h1, .col h2, .col h3, .col h4, .col h5, .col p, .col a{
	margin: 10px 14px;
	display: block;
}

.col h1 a, .col h2 a, .col h3 a, .col h4 a, .col h5 a, .col p a{
	margin: 0;
	display: inline;
}

.col a{
	color: #024da1;
	text-decoration: underline;
}

.col a.primary-btn {
	text-decoration: none;
	color: white;
}

.light-text p{
	color: #ababab;
}

.interact-skin h4 {
	color: white;
	font-size: 20px;
	text-align: center;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
	opacity: 0;
    /* Next 2 lines IE8 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

.interact-skin:hover h4 {
	opacity: 1;
    /* Next 2 lines IE8 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}


.interact-skin.taphover:hover h4, .interact-skin.taphover.hover h4{
   	opacity: 1;
    /* Next 2 lines IE8 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}


a.badge, a.badge-blank{
	margin: 0;
	text-decoration: none;
}

.character-info h1, .character-info p{
	color: #be001e;
	margin-left: 14px;
	margin-right: 14px;
}

.character-info p{
	color: #003f5f;
}

.push-base h2{
	color: #034ea2;
}

#flash_msg h4{
	color: #0168b2;
	padding-top: 0;
}

#rotate_msg {
	display: none;
}

#rotate_msg h4.text-center{
	color: white;
	padding-top: 0;
}

.col h1.center-vertical {
	margin-top: 50px;
}

h1#staysafe_text {
	margin: 0em 0px;
}

p.text-tv-center {
	position: absolute;
	margin-left: 8px!important;
	padding: 0;
	top: -30px;
	text-align: center;
	width: 100%;
}

/* ========================================================================== */
/* ==========================================================================
   GLOBAL STRUCTURES - ##004
   ========================================================================== */

.content-filter{
	width: 100%;
}

.content-filter a{
	color: #666;
	font-weight: 600;
}

.content-filter ul{
	padding: 0;
	margin: 0;
	list-style: none;
	margin-left: 20px;
}

.content-filter.video-filter ul{
	margin-left: 4px;
}

.content-filter li.active a{
	text-decoration: underline;
	color: #000;
}

.content-filter li{
	float: left;
	margin-right: 10px;
	color: #666;
	font-weight: 600;
	padding: 10px 0;
}

.content {
	width: 100%;
	margin: 0 auto;
}

.content-inside, .content-inside-full, .content-inside-both, .content-inside-both-video{
	-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.6);
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.6);
	background-color: #F5F5F5; /* altered colour to off white */
	padding: 10px;
	min-height: 520px;
	padding-bottom: 40px;
}

.content-inside-full{
	padding-top: 50px;
}

.short{
	min-height: 280px;
}

.text-center{
	text-align: center;
	padding-top: 20px;
	
}

.col-left{
	float: left;
}

.col-right{
	float: right;
}

.col-center{
	float: none;
	margin: 0 auto;
}

.col{
	width: 100%;
	min-width: 100%;
	max-width: 100%;
}

.col-9-10{
	width: 90%;
	min-width: 90%;
	max-width: 90%;
}

.col-4-5{
	width: 80%;
	min-width: 80%;
	max-width: 80%;
}

.col-3-4{
	width: 75%;
	min-width: 75%;
	max-width: 75%;
}

.col-2-3{
	width: 66.666666%;
	min-width: 66.6666666%;
	max-width: 66.6666666%;
}

.col-3-5{
	width: 60%;
	min-width: 60%;
	max-width: 60%;
}

.col-1-2{
	width: 50%;
	min-width: 50%;
	max-width: 50%;
}

.col-2-5{
	width: 40%;
	min-width: 40%;
	max-width: 40%;
}

.col-1-3{
	width: 33.333333%;
	min-width: 33.3333333%;
	max-width: 33.3333333%;
}

.col-1-4{
	width: 25%;
	min-width: 25%;
	max-width: 25%;
}

.col-1-5{
	width: 20%;
	min-width: 20%;
	max-width: 20%;
}

.tiled-box, .tiled-min-box{
	margin: 5px;
	padding: 10px;
	padding-bottom: 18px;
	min-width: 100px;
	min-height: 100px;
	height: 100%;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
	position: relative;
}

.tiled-img-holder{
	border: 2px solid white;
	margin-bottom: -1px;
}

.tiled-min-box{
	padding: 0;
	margin: 2px;
	overflow: hidden;
}

.tiled-min-box .tiled-img-holder{
	border: none;
	margin-bottom: -5px;
}

.text-box-centered{
	padding: 40px;
	margin: 0 auto;
	width: 70%;
	text-align: center;
}

.primary-btn{
	padding: 12px;
	margin: 20px 4px 0;
	display: block;
	text-align: center;
	color: #fff;
	font-weight: 600;
}

.offset{
	position: absolute;
	width: 30%;
	top: 50%;
	margin-top: -34px;
	clear: both;
}

.top-image{
	max-height: 450px;
}

.left-image-holder{
	margin-bottom: -10px;
}

.img-push-holder{
	width: 110%;
	margin-left: -7%;
	margin-top: 20px;
}

.push-base{
	margin: 0 -10px;
	padding: 0 10px;
	position: relative;
}

.fs-overlay{
	background-color: rgba(0,0,0,0.7);
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	padding-bottom: 190px;
	z-index: 9999;
}

.fs-overlay-close{
	background-image: url('../imgs/content/global/close.png');  /* Not editable in cms - part of design not user generated or localised*/
	height: 32px;
	width: 32px;
	position: absolute;
	right: 0;
	top: -45px;
	cursor: pointer;
}

.video-holder{
	margin: 0 auto;
	display: block;
	max-width: 1024px;
	width: 80%;
	height: auto;
	padding: 10px;
	padding-bottom: 14px;
	margin-bottom: 20px;
	top: 15%;
	left: 5%;
	right: 5%;
	position: fixed;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}

.ooyala-video-player{
	height: 100%;
	width: 100%;
	min-height: 100px;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
	display:inline-block;
}

.game-base-holder, .video-inpage-base-holder{
	max-width: 1500px;
	width: 100%;
	margin: 0 auto;
	position: relative;
}

.game-wrap, .video-inpage-wrap, .promo-wrap{
	width: 65.33333333333333%;
	height: auto;
	margin: 60px auto 20px;
}

.promo-wrap{
	width: 100%;
}

.game-holder, .player-wrapper{
	border: 10px solid #fff;
	background-color: #f0f0f0;
	-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.6);
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.6);
	position: relative;
	background-image: url('../imgs/content/games/game-bg.jpg');      /* Not editable in cms - part of design not user generated or localised*/
	background-position: center center;
}

#game{
	width: 100%;
	height: auto;
}

#flash_holder, #video_inpage{
	margin: 0 auto;
}

#flash_game{
	margin: 0 auto;
}

#canvas_holder{
	margin: 0 auto;
	height: 600px;
	width: 100%;
}

.canvas_game{
	background: #fff;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
	display: block;
}

#html5-iframe{
		border-left: 2px solid white;
		border-right: 2px solid white;
		background-color: white;
}

.fs-game-overlay{
	width: 100%;
	max-height: 100%;
	overflow: hidden;
	display: block;
	z-index: 9998;
}

.fs-game-overlay .fs-overlay-close{
	top: 10px;
	right: 10px;
	z-index: 9999;
}

.overlay-game-holder{
	height: 100%;
	display: block;
	width: 100%;
}

.featured-holder{
	padding-bottom: 0px;
}

.featured {
	z-index: 2;
}

.news-post, .products-post{
	margin-bottom: 20px;
}

.split-bottom {
	border-bottom: 1px solid #ccc;
	padding-bottom: 5px;
}

.back-to-top a{
	text-align: right;
	width: 100%;
	min-width: 100%;
	float: right;
	margin: 0;
}

/* ========================================================================== */
/* ==========================================================================
   INDIVIDUAL STYLES ##005
   ========================================================================== */

#home_slider{
	max-width: 1100px;
	width: 100%;
}

#parents_slider{
	width: 100%;
	background-color: #fff;
	max-width: 980px;
	margin: 0 auto;
	-webkit-box-shadow: 0px -5px 15px 0px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0px -5px 15px 0px rgba(0, 0, 0, 0.6);
	box-shadow: 0px -5px 15px 0px rgba(0, 0, 0, 0.6);
}

#parents_slider img{
	max-width: 120.985915492957744%; /*==== This is to offset the bxslider images inside of this container as they are 
											larger images to fit on a larger screen - otherwise there would be lots of 
											white space in the image and main content would be rather small ==== */
	margin-left: -10.4929577465%;
}

.update {
	margin: 60px auto;
	background-image: url('../imgs/content/misc/update-bg.jpg'); /* Not editable in cms - part of design not user generated or localised*/
	background-repeat: no-repeat;
	background-color: #fff;
	position: relative;
	min-height: 380px;
	width: 740px;
	padding: 20px;
	padding-top: 150px;
	border: 1px solid #52000d;
	-moz-box-shadow:    0 0 6px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
	box-shadow:         0 0 6px rgba(0, 0, 0, 0.4);
}

.update p a, .not-found p a{
	color: #bd001e;
}


.update ul, .not-found ul{
	width: 50%;
	margin: 0 auto;
	margin-top: 20px;
}


.update p a:hover{
	text-decoration: underline;
}

.parent-btn-holder{
	width: 100%;
}

#parents_button{
	width: 200px;
	height: 20px;
	display: block;
	padding: 10px;
	text-align: right;
	position: relative;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
	position: absolute;
	right: 4px;
	z-index: 999;
}

.badge, .badge-blank{ 
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.info-loader { 
	position: absolute; 
	left: 0; 
	top: 0; 
	z-index: 99999; 
	width: 100%; 
	height: 100%; 
	overflow: visible; 
	background: #ffcc00 url('../imgs/content/global/ajax-loader-02.gif') no-repeat center center; /* Not editable in cms - part of design not user generated or localised*/
	display: none; /* display: block using javascript */
}

.character-info {
	min-height: 570px;
	padding: 10px;
	position: relative;
	border: 10px black solid;
}

.character-info .profile-polaroid, .character-info .polaroids{
	width: 100%;
	float: left;
}

.character-info .polaroids{
	padding-top: 20px;
}

.events{
	padding: 20px;
}

.about{
	padding-bottom: 50px;
}

section.tv {
	margin-top: 40px;
}

.info-btn{
	display: block;
	height: inherit;
	clear: both;
}

.info-btn a.primary-btn{
	margin: 10px 0;
	width: 100%;
}

.tv-network-image{
	margin: 0 auto;
	display: block;
	width: 80%;
	padding: 40px 10%;
	position: relative;
}

.content-inside.flash{
	height: 100%;
	margin-top: 20px;
}

/* ========================================================================== */
/* ==========================================================================
   SKIN STYLES ##006
   ========================================================================== */

.rounded{
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

.rounded-bottom{
	-webkit-border-bottom-right-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-bottomright: 8px;
	-moz-border-radius-bottomleft: 8px;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
}

.rounded-top{
	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-topright: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.rounded-large{
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.rounded-circle{
	-webkit-border-radius: 80px;
	-moz-border-radius: 80px;
	border-radius: 80px;
}

.panel-skin{
	background: #c0001f; /* Old browsers */
	background: -moz-linear-gradient(top, #c0001f 0%, #870016 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c0001f), color-stop(100%,#870016)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #c0001f 0%,#870016 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #c0001f 0%,#870016 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #c0001f 0%,#870016 100%); /* IE10+ */
	background: linear-gradient(to bottom, #c0001f 0%,#870016 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c0001f', endColorstr='#870016',GradientType=0 ); /* IE6-9 */
	border-bottom: 1px solid #52000d;
	border-top: 1px solid #da6679;
	-webkit-box-shadow: 0 -1px 0px 0px #52000d;
	-moz-box-shadow: 0 -1px 0px 0px #52000d;
	box-shadow: 0 -1px 0px 0px #52000d;
}

.panel-skin-02{
	background: #fafafa; /* Old browsers */
	background: -moz-linear-gradient(top, #fafafa 0%, #e6e6e6 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fafafa 0%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #fafafa 0%,#e6e6e6 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #fafafa 0%,#e6e6e6 100%); /* IE10+ */
	background: linear-gradient(to bottom, #fafafa 0%,#e6e6e6 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.8);
	-moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.8);
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.8);
}

.box-skin{
	background: #bd001e;
	-moz-box-shadow:    inset 0 -10px 0 #910017, 0 3px 4px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: inset 0 -10px 0 #910017, 0 3px 4px rgba(0, 0, 0, 0.4);
	box-shadow:         inset 0 -10px 0 #910017, 0 3px 4px rgba(0, 0, 0, 0.4);
}

.box-skin-02{
	background: #fff;
	-moz-box-shadow:    inset 0 -10px 0 #C9C9C9, 0 3px 4px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: inset 0 -10px 0 #C9C9C9, 0 3px 4px rgba(0, 0, 0, 0.4);
	box-shadow:         inset 0 -10px 0 #C9C9C9, 0 3px 4px rgba(0, 0, 0, 0.4);
}

.box-skin-03{
	background: #0b6c98;
	-moz-box-shadow:    inset 0 -10px 0 #003f5f, 0 3px 4px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: inset 0 -10px 0 #003f5f, 0 3px 4px rgba(0, 0, 0, 0.4);
	box-shadow:         inset 0 -10px 0 #003f5f, 0 3px 4px rgba(0, 0, 0, 0.4);
}

.admin-btn-skin{
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
	border-left: 1px solid #999;
	-moz-box-shadow:    inset 0 -1px 2px #fff;
	-webkit-box-shadow: inset 0 -1px 2px #fff;
	box-shadow:         inset 0 -1px 2px #fff;
	color: #a9a9a9;
	background: #fff; /* Old browsers */
	background: -moz-linear-gradient(top, #969696 0%, #f2f2f2 23%, #ffffff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#969696), color-stop(23%,#f2f2f2), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #969696 0%,#f2f2f2 23%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #969696 0%,#f2f2f2 23%,#ffffff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #969696 0%,#f2f2f2 23%,#ffffff 100%); /* IE10+ */
	background: linear-gradient(to bottom, #969696 0%,#f2f2f2 23%,#ffffff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#969696', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

.primary-btn-skin{
	text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
	border: 1px solid #024f9f;
	-moz-box-shadow:    inset 0 1px 3px #7ab4fe, 0 3px 4px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: inset 0 1px 3px #7ab4fe, 0 3px 4px rgba(0, 0, 0, 0.4);
	box-shadow:         inset 0 1px 3px #7ab4fe, 0 3px 4px rgba(0, 0, 0, 0.4);
	background: #277dd4; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiMyNzdkZDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5MCUiIHN0b3AtY29sb3I9IiMwNDRlYTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #277dd4 10%, #044ea3 90%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,#277dd4), color-stop(90%,#044ea3)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #277dd4 10%,#044ea3 90%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #277dd4 10%,#044ea3 90%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #277dd4 10%,#044ea3 90%); /* IE10+ */
	background: linear-gradient(to bottom,  #277dd4 10%,#044ea3 90%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#277dd4', endColorstr='#044ea3',GradientType=0 ); /* IE6-8 */
}

.primary-btn-skin:hover{
	-moz-box-shadow:    inset 0 1px 3px #4999FF, 0 3px 4px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: inset 0 1px 3px #4999FF, 0 3px 4px rgba(0, 0, 0, 0.4);
	box-shadow:         inset 0 1px 3px #4999FF, 0 3px 4px rgba(0, 0, 0, 0.4);
	background: #0069d3; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiMwMDY5ZDMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5MCUiIHN0b3AtY29sb3I9IiMwNDRlYTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, #0069d3 10%, #044ea3 90%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,#0069d3), color-stop(90%,#044ea3)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #0069d3 10%,#044ea3 90%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #0069d3 10%,#044ea3 90%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #0069d3 10%,#044ea3 90%); /* IE10+ */
	background: linear-gradient(to bottom, #0069d3 10%,#044ea3 90%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0069d3', endColorstr='#044ea3',GradientType=0 ); /* IE6-8 */
}

.slider-skin{
	background: #f5f4f0; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover, #f5f4f0 0%, #d9d6d0 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f5f4f0), color-stop(100%,#d9d6d0)); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover, #f5f4f0 0%,#d9d6d0 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover, #f5f4f0 0%,#d9d6d0 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover, #f5f4f0 0%,#d9d6d0 100%); /* IE10+ */
	background: radial-gradient(ellipse at center, #f5f4f0 0%,#d9d6d0 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f4f0', endColorstr='#d9d6d0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.dark-base-skin{
	background-color: #f7f7f7;
}

.bright-base-skin{
	background-color: #ffcc00;
}

.interact-skin{
	overflow: hidden;
	width: 100%;
	height: 100%;
	position: relative;
	text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
}


.interact-skin:hover, .tiled-min-box .interact-skin:hover{
	background-color: rgba(3, 78, 162, 0.6);
}

.interact-skin.taphover:hover, .interact-skin.taphover.hover, .tiled-min-box .interact-skin.taphover:hover, .tiled-min-box .interact-skin.taphover.hover{
	background-color: rgba(3, 78, 162, 0.6);
}

.interact-play-icon, .interact-download-icon{
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
	background-image: url('../imgs/content/global/roll-icon-play.png'); /* Not editable in cms - part of design not user generated or localised*/
	background-repeat: no-repeat;
	background-position: 58% 50%;
	width: 70px;
	height: 70px;
	margin: 0 auto;
	margin-top: 10px;
	border: 3px solid white;
	opacity: 0;
    /* Next 2 lines IE8 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}
.interact-download-icon{
	background-image: url('../imgs/content/global/roll-icon-download.png'); /* Not editable in cms - part of design not user generated or localised*/
	background-position: 50% 50%;
}

.interact-skin:hover .interact-play-icon, .interact-skin:hover .interact-download-icon {
	opacity: 1;
    /* Next 2 lines IE8 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	margin-top: 20px;
	border: 8px solid white;
}

.interact-skin.taphover:hover .interact-play-icon, .interact-skin.taphover.hover .interact-play-icon, .interact-skin.taphover:hover .interact-download-icon, .interact-skin.taphover.hover .interact-download-icon{
	opacity: 1;
    /* Next 2 lines IE8 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	margin-top: 30px;
	border: 8px solid white;
}


.col-1-3 .interact-skin.taphover:hover .interact-play-icon, .col-1-3  .interact-skin.taphover.hover .interact-play-icon, .col-1-3  .interact-skin.taphover:hover .interact-download-icon, .col-1-3  .interact-skin.taphover.hover .interact-download-icon{
	margin-top: 30px;
}

.info-skin{
	background-color: #ffcc00;
}

/* ========================================================================== */
/* ==========================================================================


   MISC ##007


   ========================================================================== */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

input:focus {outline: none; }

a:focus {outline: none; }

.text-field {
	width: 90%;
	height: 20px;
	padding: 5px 5%;
	margin-top: 20px;
	border: 1px solid #666;
}

::selection {
	background: #fff; /* Safari */
}


::-moz-selection {
	background: #fff; /* Firefox */
}

p::selection, h1::selection, h2::selection, h3::selection, h4::selection , li::selection {
	color: #000;
}


p::-moz-selection, h1::-moz-selection, h2::selection  h3::-moz-selection, h4::-moz-selection, li::-moz-selection{
	color: #000;
}

a.blank-link{
	margin: 0;
	padding: 0;
}
a.char{
margin: 0;
display:block;
}

/* ========================================================================== */


#videoFrame { /* video iframe settings */
    overflow-y:hidden;
    border:0;
}

/* ooyala player styles starts */
.player-wrapper{
    width: 63.9%;
    height: 474px;
    margin: 60px auto 20px;
	-webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

	/*tab content styles ends here*/
body .oo-player-container .oo-player {
    padding-top: 49.5% !important;
}

@media screen and (max-width: 1500px){
	.player-wrapper {
	    height: 515px;
	    width: 955px;
	    overflow: hidden;
	}
	body .oo-player-container .oo-player {
	    padding-top: 55% !important;
	    top: -8px;
	}
}
@media screen and (max-width: 1450px){
	.player-wrapper {
	    width: 925px;
	    height: 500px;
	}
}
@media screen and (max-width: 1275px){
	.player-wrapper {
	    width: 800px;
	    height: 430px;
	}
}
@media screen and (max-width: 1024px){
	.player-wrapper {
	    height: 322px;
	    width: 600px;
	    overflow: hidden;
	}
	body .oo-player-container .oo-player {
	    padding-top: 55% !important;
	    top: -8px;
	}
}
@media screen and (min-width: 768px)  and (max-width: 1024px) and (orientation:landscape){
	.player-wrapper {
	    height: 322px;
	    width: 600px;
	    overflow: hidden;
	}
	body .oo-player-container .oo-player {
	    padding-top: 55% !important;
	}
	body .oo-player-container .oo-player video{
		top : -64px;
	}

}
/*tab content styles ends here*/

@media screen and (max-width: 767px){
	.player-wrapper {
		height: 175px;
		width: 320px;
	}
	body .oo-player-container .oo-player {
	    padding-top: 57% !important;
	}
}
@media screen and (max-width: 320px){
	.player-wrapper {
	    height: 183px;
	    width: 272px;
	    overflow: hidden;
	}
	body .oo-player-container .oo-player {
		width : 271px;
	}
}
/* ooyala player styles ends */