/*
====================================================================================================================================
=STRUCTURE AND DEFAULTS
====================================================================================================================================
*/

body {
	margin:0;
	padding:0;
	height:100%;	/*this is needed to apply 100% height other divs in IE*/ 
	background-color: #000;
	font-family:"Helvetica", Arial, sans-serif;
	color: #CCC;
	font-size:62.5%;
	width:100%;
}

/* force scroll bar in Firefox to fix jogging bug */
html {overflow: -moz-scrollbars-vertical !important; }


#wrapper {
	/*border: 1px solid red;*/
	margin: 0 auto;
	text-align:center; /* centre in IE */
	width:99.8%;
	background: transparent url(../artwork/bg-clips.jpg) top center no-repeat;
	margin-top:15px;
}

h1.pageH1 {position:absolute;margin-left:-1000px}/*push h1 of the page for accessibility*/


#wrapperImages {background: transparent url(../artwork/bg-galleries.jpg) no-repeat top center; margin-top:15px;}
#wrapperVidDownloads {background: transparent url(../artwork/bg-downloads.jpg) no-repeat top center; margin-top:15px;}
#wrapperGames {background: transparent url(../artwork/bg-games.jpg) no-repeat top center; margin-top:15px;}
#wrapperAudio {background: transparent url(../artwork/bg-audio.jpg) no-repeat top center; margin-top:15px;}
#wrapperKids{background: transparent url(../artwork/bg-kids.jpg) no-repeat top center; margin-top:15px;}
#wrapperPrizeForm {background: transparent url(../artwork/bg-form.jpg) no-repeat top center; margin-top:15px;}

a {color:#fff;}
a:hover{color:#41525c}

img.left {float:left; margin-right: 10px; border: 1px solid #666; padding:4px;}
img.right{float:right; margin-left: 10px; border: 1px solid #666; padding:4px;}

img.icon {padding-right:5px; vertical-align:middle;}



/*
====================================================================================================================================
=TOP NAVIGATION
====================================================================================================================================
*/

ul#accessibilityOptions {
	/*border: 1px solid green;*/
	margin-top:-17px;/*set to the top for margin on wrapper*/
	_margin-top:-15px;/*IE6 HACK*/
	margin-left: 25px;
	text-align:left;
	padding:0;
	width: 300px;
	float:left;
	z-index:900;
	/*visibility:hidden; hide this - only for screen-readers */
	}

/*IE6 Hack*/	
* html ul#accessibilityOptions {position:absolute; left:5px;/*border: 1px solid green;*/}
	
ul#accessibilityOptions li {list-style-type:none;display:inline;}
#accessibilityOptions a, a:visited {font-size: .9em;text-decoration:underline;color:#ccc;}
#accessibilityOptions a:hover {color:#41525c;}


ul#nav {
	border: 1px solid #333;
	background-color:#000;
	list-style:none;
	margin-top:2px;/*push down the navigation images.*/
	*margin-top: 13px;/*IE7 HACK*/
	margin-left: 25px;
	text-align:left;
	padding:0;
	width: 542px;
	float:left;
}

ul#nav li {float:left; /* Need this to create inline nav */}


ul#nav a{
	font-size: 1.2em;
	display:block; /* Makes links behave like buttons */
	background:url(../artwork/nav-seperator.gif) repeat-y top left;
	padding: 7px;
	line-height: 1em;
	text-decoration:none;
	color:#ccc;
}
ul#nav a:hover {background-color:#41525c;color:#fff;}

ul#nav li.first a {background:none;}
ul#nav li.first a:hover {background-color:#41525c;color:#fff;}

/*IE6 Hack*/
* html ul#nav {margin-left: 14px;/*sets position on clip page */}
* html #wrapper.downloadsPage ul#nav {margin-left: 12px; /*sets downloads page back to 25px */}

/* 
====================================================================================================================================
DEPARTMENT LINKS
====================================================================================================================================
*/

ul#departmentLinks{
	/*border: 1px solid white;*/
	margin:-15px 0 0 500px;
	*margin-top: -57px;/*IE7 Hack */
	text-align:right;
	height: 40px;
	width: 250px;
}
/*IE6 Hack*/
* html ul#departmentLinks {position:relative;/*border:1px solid green;*/}

ul#departmentLinks li  {/*border:1px solid blue;*/list-style-type:none;display:inline;}
ul#departmentLinks a {font-size: .9em; color:#ccc;}
ul#departmentLinks a:hover {color:#41525c;}

/*For font options */
ul#fontOptions {/*border:1px solid red;*/ width:120px; float:right; }
ul#fontOptions li {list-style:none; display:inline;}
ul#fontOptions li img{border:0;}

/*====================================================================================================================================
=ACCORDION
====================================================================================================================================*/

#accordion{position:relative;margin:20px 0px;width:auto;}

h3.toggler {
	cursor: pointer;
	border: 1px solid #41525c;
	color: #666;
	margin: 0 25px 4px 35px;
	*margin-left: 43px;
	clear:both;
	background: #000 url(../artwork/down-arrow.gif) right no-repeat;
	padding:5px 0 5px 20px;
	text-align:left;
	font-size:1.5em;
	text-transform:uppercase;
	
}

h3.toggler span{color:#666;}

div.element p {margin:0px;padding:1px;}
.element p.accordionPara {margin:10px 40px 10px 40px; height:auto;font-weight:lighter;}

.element ul {list-style:none; }
.element ul li a{list-style:none;}

div.accordionTopElement {margin-left:110px;}

.element h4{margin:10px 30px 10px 40px; font-size:1.5em; color:#41525c; clear:both; border-bottom:1px solid #41525c; padding:10px 0 4px 0;}

.element h5 {margin:10px 35px 10px 40px; font-size:1.3em; color:#666;  font-weight:bold; clear:both;}

/* 
====================================================================================================================================
=CLIP PLAYER PAGE / HOME PAGE
====================================================================================================================================
*/


#playerWrap {
	/*border: 1px solid white;*/
	position:relative;
	font-size: 1.3em;
	width: 790px;
	margin: 0 auto;
	text-align:center;
	padding:2px;
}


#playerInner {
	border: 1px solid #333;
	background-color:transparent;
	width: 93%;
	height:550px;
	margin: 170px 20px 20px 32px;
}

#flashPlayer {
/*    border: 1px solid #333;
	background-color:#000;*/
   	margin-top: 7px;
    width:490px;
    height:420px;
    margin-left:230px;
	cursor:pointer;
}

ul#leftNav {
    border: 1px solid #333;
	background-color:#000;
    width:auto;
    text-align:left;
    list-style-type:none;
	float:left;
	margin:7px 0 0 10px;
	padding:10px;
}
ul#leftNav li {padding:2px 0 2px 10px; }
ul#leftNav li img {vertical-align:middle;}
ul#leftNav li a {text-decoration:underline;cursor:pointer;color:#666; font-size:1.1em; }
ul#leftNav li a:hover {color:#41525c;cursor:pointer;}

ul#leftNav li.liHeader {font-size:1.3em;}

#noFlash {
	/*border: 1px solid green;*/
	position:absolute; /*position no flash message behind player*/
	left: 25%;
	top: 20%;
	text-align:center;
	z-index: 1;
}
	


/*
====================================================================================================================================
VIDEO DOWNLOADS
====================================================================================================================================
*/

#downloadContent span.topColumns {
   	border: 1px solid #333;
   	background-color: #000;
    width: 143px;
    margin:  15px 0px 10px 35px; 
    *margin-left: 36px;/* HACK IE 6&7 */
	*margin-bottom: -150px;/* HACK IE 6&7 */
    height: 155px;
    padding:6px;
    float:left;
}

#downloadContent a {text-decoration:underline;cursor:pointer;color: #666;}
#downloadContent a:hover {color:#41525c;cursor:pointer;}
#downloadContent img.Icon {vertical-align:top;}
#downloadContent img.accordIcon {vertical-align:middle;}



/*push down div from top of page */
#downloadContent { text-align:left;margin-top:170px;}

h1 {
	font-size: 1.4em;
	color:#FFF;
	background-color:#333;
	border-bottom: 1px solid #fff;
	width: 500px;
	margin-left: 50px;
}

h2.sectionHeader {
    margin-left:70px;
    margin-right:70px;
    margin-top: 10px;
	font-size: 1.4em;
	color: #41525c;
	border-bottom:1px solid #333;

}



#downloadContent ul li.col1{ /*clip titles*/
	list-style-type:none;
	font-weight:bold;
	font-size:.9em;
	line-height:1em;
	float:left;
	width: 300px;
	padding:0;
	margin:-10px 0px -8px 70px;/*Set margins in FX to rectify header loop isue */ 
	*margin:-15px 0px -10px 70px;/*Set margins in IE7 to rectify header loop isue */ 
	_margin:-15px 0px -10px 40px;/*Set margins in IE6 to rectify header loop isue */
}



#downloadContent ul li.col2{ /*clip download line*/
	list-style-type:none;
	font-size:.9em;
	line-height:1em;
	line-height:10px;
	padding:0;
	margin:-10px 0px -8px 70px;/*Set margins in FX to rectify header loop isue */ 
	*margin:-15px 0px -10px 70px;/*Set margins in IE7 to rectify header loop isue */
	_margin:-15px 0px -10px 40px;/*Set margins in IE6 to rectify header loop isue */ 
	padding-left:350px;	
}


img.clipHeader {margin-left: 0px;}
span.topColumns ul {list-style-type:none;margin:0;padding:0; }
span.topColumns ul li {display:block;line-height:1.4em; font-size:.9em;}
a.newWindow {background:transparent url(../artwork/externalLinkWhite.gif) no-repeat right; padding-right: 14px; border:none; font-size:1.1em; vertical-align:middle;}
p.top {text-align:right;}


/*
====================================================================================================================================
=IMAGE GAL PAGE
====================================================================================================================================
*/

#galleryWrap {
    border: 1px solid #333;
	background-color:#000;
	width: 740px;
	height:820px;
	margin: 170px 20px 20px 32px;
	background-color:transparent;
}


#imageViewer {/*border:1px solid red;*/margin: 0 0 0 215px;  padding: 0 10px 0 10px;}

/* begin gallery styling */
ul#jgal {
	/*border:1px solid orange;*/
	list-style: none; 
	width: 500px; 
	margin-top:460px;  
	*margin-top:490px; 
	margin-left:-50px; 
	*margin-left:-9px;}

#jgal li {
	opacity:.5; 
	float: left; 
	display: inline; 
	width: 60px; 
	height: 60px; 
	background-position: 50% 50%; 
	cursor:pointer; 
	border:3px solid #fff; 
	outline:1px solid #ddd;
	margin-right: 14px; 
	margin-bottom: 14px; 
}

/*Position the display image */
#jgal li img {
	position: absolute; 
	top: 240px;
	left: 250px; 
	display:none; 
	border:4px solid #fff; 
	cursor:default;}
	
/* Turtn on image */
#jgal li.active img {display:block;}

/*Download options bar */
#jgal li span.downloadOptions {
	position: absolute;
	background-color:#000; 
	top:205px;
	*top: 205px; 
	left: 250px; 
	display:none; 
	border:1px solid #333; 
	text-align:left;
	padding:5px;
	_width:350px;/*IE6 HACK */
	
	}
	
	
	
#jgal li.active span.downloadOptions {display:block;}

#jgal li span.downloadOptions a img.downloadIcon1{float:left; top:0; left:0; padding:2px; border:0; }
#jgal li span.downloadOptions a img.downloadIcon2{float:left; top:0; left:105px; padding:2px; border:0;  }
#jgal li span.downloadOptions a img.emailIcon{float:left; top:0; left:217px; padding:2px; border:0; }

#jgal li span.downloadOptions a.medium {margin-left:32px;}
#jgal li span.downloadOptions a.large {margin-left:42px;}
#jgal li span.downloadOptions a.email {margin-left:25px;}

#jgal li span.downloadOptions a:hover {color:#41525c;text-decoration:underline;}

#jgal li.active, #jgal li:hover {outline-color:#bbb; opacity: .99 /* safari bug */ }


#downloadOptions {
    border:1px solid #333;
    width:500px;
    height:20px;
    margin-top:15px;
    margin-left:-6px;

}

/*
====================================================================================================================================
=GAMES PAGE
====================================================================================================================================
*/

#innerWrap{
	background-color:transparent; 
	border: 1px solid #333; 
	margin:170px 0 0 35px;
	width:735px; 
	text-align:left;
 }
 
#innerWrap a{color:#fff; font-weight:lighter;}
#innerWrap a:hover{color:#41525c;}


/*
====================================================================================================================================
=KIDS ZONE PAGE
====================================================================================================================================
*/
ul#leftCol { float:left; width:300px;margin:7px 0 0 20px;}
ul#rightCol {margin-left:350px;}

/*
====================================================================================================================================
=FORM PAGE
====================================================================================================================================
*/
fieldset{border:1px solid #41525c;}
legend{font-size:1.4em; font-weight:bold;color:#41525c}
label {float:left;width:10em;}
.fields {border:1px solid #41525c;}
.btnSubmit {border:1px solid #41525c;background-color:#000000;color:#fff;padding:3px;cursor:pointer;}


/*
====================================================================================================================================
=FOOTER
====================================================================================================================================
*/

#footer {
	margin: 20px 25px 4px 31px;
	*margin-left: 43px;
	color:#fff;
	border: 1px solid #333;
	font-size:1em;
	padding:7px;
	vertical-align:middle;	
	clear:both;
}


#footer.clips {margin: 0px 65px 4px 15px;}
#footer a {text-decoration:underline;color:#666;}
#footer a:hover {color:#41525c;}

#footer a.addThis {text-decoration:none;}



/* 
====================================================================================================================================
=PROTO TIP
==================================================================================================================================== 
*/
.prototip {
	font: 11px Arial, Helvetica, sans-serif;
	color: #000;
}

/* the default style */
.prototip .default {
	width: 250px;
	color: #808080;
}
.prototip .default .toolbar {
	background: #f1f1f1;
	font-weight: bold;
}
.prototip .default .title { padding: 5px; }
.prototip .default .content {
	padding: 5px;
	background: #fff;
}

/* basic */
.prototip .basic {
	width: 250px;
	color: #808080;
}
.prototip .basic .toolbar {
	background: #f1f1f1;
	font-weight: bold;
}
.prototip .basic .title { padding: 5px; }
.prototip .basic .content {
	padding: 5px;
	background: #fff;
}

/* basic */
.prototip .hint {
	width: 250px;
	color: #313120;
	background: #fff6aa;
}
.prototip .hint .toolbar {
	background: #fdf1a0;
	font-weight: bold;
}
.prototip .hint .title,
.prototip .hint .content { padding: 5px; }

/* protoblue */
.prototip .protoblue {
	width: 250px;
	color: #fff;
}
.prototip .protoblue .toolbar {
	background: #0d7cd0;
	font-weight: bold;
}
.prototip .protoblue .title { padding: 5px; }
.prototip .protoblue .content {
	background: #1e90ff;
	padding: 5px;
}

/* creamy */
.prototip .creamy {
	width: 250px;
	color: #bb9c61;
}
.prototip .creamy .toolbar {
	background: #f3edc2;
	font-weight: bold;
}
.prototip .creamy .title { padding: 5px; }
.prototip .creamy .content {
	background: #f8f4ca;
	padding: 5px;
}

/* darkgrey */
.prototip .darkgrey {
	width: 250px;
	color: #fff;
	opacity:0.5;filter:alpha(opacity=50);
}

.prototip .darkgrey.active, .prototip .darkgrey:hover {opacity:1;filter:alpha(opacity=100);}

.prototip .darkgrey .toolbar {
	background: #5f5f5f;
	font-weight: bold;
}
.prototip .darkgrey .title { padding: 5px; }
.prototip .darkgrey .content {
	background: #808080;
	padding: 5px;
}

/* protogrey */
.prototip .protogrey {
	width: 250px;
	color: #fff;
	background: #fff;
}
.prototip .protogrey .toolbar {
	background: #969c92;
	font-weight: bold;
}
.prototip .protogrey .title { padding: 5px; }
.prototip .protogrey .content {
	color: #808080;
	padding: 5px;
}
/* This is how to resize the close button for a style */
.prototip .protogrey .toolbar .close {
	width: 14px;
	height: 14px;
}


/* loader gif */
.prototipLoader {
	position: absolute;
	top: -1000px;
	left: -1000px;
	height: 14px;
	width: 14px;
	border: 1px solid #dddddd;
	overflow: hidden;
}


/* Required for all tooltips, do not modify */
.prototip{position:absolute;overflow:hidden;}.prototip .tooltip,.prototip .toolbar,.prototip .toolbar .title{position:relative;}.prototip .content{clear:both;}.prototip .toolbar .close{position:relative;text-decoration:none;float:right;width:19px;height:15px;display:block;line-height:0;font-size:0;border:0;cursor:pointer;}.prototip .tooltip{clear:both;float:left;}.prototip .borderLeftWrapper,.prototip .borderRightWrapper{position:absolute;top:0;left:0;width:300px;height:20px;}.prototip .borderFrame{height:100%;width:100%;float:left;margin:0;padding:0;position:relative;}.prototip .borderTop,.prototip .borderBottom{overflow:hidden;}.prototip .borderRow{list-style-type:none;float:left;width:100%;position:relative;clear:both;margin:0;padding:0;}.prototip_CornerWrapper{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;clear:both;}.prototip_Corner{float:left;position:relative;}.prototip canvas{position:relative;float:left;}.prototip_CornerTr,.prototip_CornerBr{float:right;}.prototip_BetweenCorners{position:absolute;top:0;left:0;width:100%;overflow:hidden;clear:both;}.prototip .borderMiddle{position:relative;float:left;}.prototip .borderCenter{position:relative;float:left;height:100%;}.prototip_StemWrapper{position:relative;width:100%;height:auto;clear:both;}.prototip_StemBox{float:left;position:relative;}.prototip_Stem{width:100%;position:absolute;overflow:hidden;}.iframeShim{position:absolute;border:0;margin:0;padding:0;background:none;overflow:hidden;}.prototip .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.prototip .clearfix{display:inline-block;}/* IE Mac Hide \*/ .prototip .clearfix{display:block;}/* IE Mac Hide End */