@charset "UTF-8";
/* CSS Document */

/* List Styles */
li{
list-style-type:;
list-style-image:;
list-style-position:;
float:;
margin:;
padding:;
}
li p{
}
ol{
width:;
margin:;
padding:;
}
ul{
width:;
margin:;
padding:;
}
ol li{
}
ul li{
}

/* End List Styles */

/* Link Styles */

a{
color: #000000;
text-decoration: none;
border:0px;
}
a:hover{
color:#999999;
background-color:;
border:0px;
}
a:visited, a:active, a:focus{
color:;
background-color:;
border:0px;
}
a:visited{
color:;
background-color:;
border:0px;
}
a:active{
color:;
background-color:;
border:0px;
}
a:focus{
color:;
background-color:;
border:0px;
}

/* End Link Styles */


/***********************
STORY SCROLLER ELEMENTS
**********************/

		* { margin: 0; padding: 0 }
		/* I've used a hard CSS reset above, but you should consider a more sophisticated reset, such as this one: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
		
		p { text-align: left; margin: 15px 0 }
		
		p, ul { font-family: Arial, sans-serif; font-size: 11px; line-height: 1.4em; color: #3e3e3e } 
		
		p a, li a { color: #125395; text-decoration: none; }
		p a:hover { color: #e49131; text-decoration: none; }
		
		
		p#cross-links { text-align: center }
		p#cross-links a{ color: #125395;}
		p#cross-links a:hover, .current{ color: #e49131; }
		
			
		noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left }
		noscript a { color: #a00; text-decoration: underline }
		noscript ol { margin-left: 25px; }
		
		a:focus { outline:none }
		
		img { border: 0 }
		
		h3 { font-size: 18px; line-height: 24px; margin-bottom: 5px; padding-bottom: 3px; text-align: left; color: #004B8D }
		
		h4 { font-family: Arial, sans-serif; font-size: 11px; line-height: 13px; color: #3e3e3e; font-weight: normal; }

		
		.left-image{
		float: left;
		margin-top: -10px;
		margin-right: 30px;
		margin-bottom: 0px;
		}
		
		
		.stoked-image{
		float: left;
		margin-top: -10px;
		margin-right: 5px;
		margin-bottom: 0px;
		}
		
				
		.right-image{
		float: right;
		margin-top: -5px;
		margin-right: -8px;
		}
		
		.stripViewer .panelContainer .panel ul {
			text-align: left;
			margin: 0 15px 0 30px;
		}
		
		.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
			margin: 0px 0;
			position: relative;
			width: 100%;
		}

		/* These 2 lines specify style applied while slider is loading */
		.csw {width: 100%; height: 100%; background: #fff; overflow: hidden;}
		.csw .loading {margin: 100px 0 200px 0; text-align: center;}

		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			/*border: 1px solid #000;*/ /* this is the border. should have the same value for the links */
			margin: auto;
			width: 506px; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height: 190px;
			padding-bottom: 5px;
			clear: both;
			background: url(images/scroller-bg.jpg) no-repeat top;
			background-position: 0px -35px;
		}
		
		.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			left: 0; top: 0;
			width: 100%;
			list-style-type: none;
			/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
		}
		
		.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 506px; /* Also specified in  .stripViewer  above */
		}
		
		.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
			padding-left: 10px;
			padding-right: 10px;
		}
		
		.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
			margin: auto;
			padding-left:2px;
		}
		
		.stripNav ul { /* The auto-generated set of links */
			list-style: none;
		}
		
		.stripNav ul li {
			float: left;
			margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
		}
		
		.stripNav a { /* The nav links */
			font-size: 12px;
			font-weight: bold;
			text-align: center;
			line-height: 32px;
			background: url(images/test-tab.jpg) no-repeat top;
			color: #fff;
			text-decoration: none;
			display: block;
			width: 167.5px;
		}
		
		.stripNav li.tab1 a { background: url(images/scroll-head-blue.jpg) no-repeat top; }
		.stripNav li.tab2 a { background: url(images/scroll-head-blue.jpg) no-repeat top; }
		.stripNav li.tab3 a { background: url(images/scroll-head-blue.jpg) no-repeat top; }
		.stripNav li.tab4 a { background: #63c }
		.stripNav li.tab5 a { background: #63c }
		
		.stripNav li a:hover {
			background: url(images/scroll-head-orange.jpg) no-repeat top;
			color: #125395;
		}
		
		.stripNav li a.current {
			background: url(images/scroll-head-orange.jpg) no-repeat top;;
			color: #000;
		}
		
		.stripNavL, .stripNavR { /* The left and right arrows */
			position: absolute;
			top: 30px;
			text-indent: -9000em;
		}
		
		.stripNavL a{
			display: block;
			height: 195px;
			width: 20px;
		}
		
		.stripNavL a:hover{
			background: url("images/left-arrow.jpg") no-repeat center;

		}
		
		.stripNavR a{
			display: block;
			height: 195px;
			width: 20px;
		}
		
		.stripNavR a:hover{
			background: url("images/right-arrow.jpg") no-repeat center;
		}
		
		.stripNavL {
			margin-left: -99999999px;
			left: 0;
		}
		
		.stripNavR {
			margin-right: 99999999px;
			right: 0;
		}
		
		.stripNavL {
			background: url("images/left-arrow-hover.jpg") no-repeat center;
		}
		
		.stripNavR {
			background: url("images/right-arrow-hover.jpg") no-repeat center;
		}


/***********************
END STORY SCROLLER ELEMENTS
**********************/



* {
        margin: 0;
        padding: 0;
                
}

.scroll-pane 		{ width: 100%; overflow: auto; padding-right: 0px; height: 100%; }

.jScrollPaneContainer 	{ position: relative; overflow: hidden; z-index: 1; }

.jScrollPaneTrack 		{ position: absolute; cursor: pointer; right: 0; top: 0; height: 100%;
						  background: url(images/atom-bar.jpg) top center repeat-y; padding: 3px;}

.jScrollPaneDrag	{ position: absolute; background: url(images/atom-ball.jpg) top center repeat-y;
					  cursor: pointer;  height: 100%; overflow: hidden;}

.datetext {
font: .9em Verdana;
line-height: 1.8em;
color: #666666;
}

.boxdatetext {
font: .5em Verdana;
line-height: 1.8em;
color: #666666;
}

.smalldatetext {
font-size: .8em;
font-family: Verdana;
line-height: 2em;
color: #999999;
}


.smalldatetext a:hover {
color: #fff;
}

/* Top Tab Submenu */

body {
font-size: 62.5%;
font-family: Arial, sans-serif;
background: url(images/main-bg.png) repeat-y top;
}

#body_story1 {
	background-image: url(images/story2-skin.jpg);
	
}

#main-col {
position: center;
width: 800px;
margin: 0 auto;
}

#tab-menu {
position: relative;
height: 40px; 
width: 801px;
padding: 9px 0px 0px 1px;
background: url(images/tabmenu-bg.png) repeat-x top;
}

ul#tabbuttons {
}

.tabbuttons{
text-transform: uppercase;
margin-left: 25px;
float: left;
font: 9px Arial;
width: 800px;
}

.tabbuttons li{
display: inline;
}

.tabbuttons li a{
float: left;
color: white;
padding: 10px 10px 0px 0px;
text-decoration: none;
}

.tabbuttons li a:hover, .tabbuttons li .current{
color: #d3a31d;
}

/****************************
 END Top Tab SubMenu 
******************************/

/*****************************
 Start Main Navigation 
******************************/


#main-nav {
position: relative;
float: left;
width: 820px;
height: 100px;
margin: 9px 0px 0px -5px;
background: url(images/mainmenu.png) no-repeat -3px -5px;
}

#mainnav li {
float: left;
list-style: none;
z-index: 99999;
}

#mainnav li.core {
display: block;
z-index: 99999;
}

#mainnav li.core a {
display: block;
background-position: 0px -98px;
background-repeat: no-repeat;
z-index: 99999;
}

#mainnav li.core a:hover {
background-position: 0px -1px;
z-index: 99999;
}


#mainnav li.home a {
width: 193px;
height: 95px;
background-image: url(images/destineer-btn.png);
z-index: 99999;
}

#mainnav li.news a {
width: 125px;
height: 60px;
background-image: url(images/news-btn.png);
z-index: 99999;
}

#mainnav li.games a {
width: 127px;
height: 60px;
background-image: url(images/games-btn.png);
z-index: 99999;

}

#mainnav li.media a {
width: 128px;
height: 60px;
background-image: url(images/media-btn.png);
z-index: 99999;
}

#mainnav li.retailers a {
width: 127px;
height: 60px;
background-image: url(images/retailers-btn.png);
z-index: 99999;
}

#mainnav li.support a {
width: 110px;
height: 60px;
background-image: url(images/support-btn.png);
z-index: 99999;
}

/************************ 
End Main Navigation 
************************/

/************************
 Start Main Window 
************************/

#main-window {
display: inline;
float: left;
width: 800px;
height: 375px;
margin: -75px 0px 0px -1px;
padding-bottom: 10px;
overflow: hidden;
z-index: 1;
}

.mainpics {
}


/************************** 
 CSS for Indented CSS Tabs. 
 ****************************/

.indentmenu{
font: 600 1.2em 'Trebuchet MS' 'Arial';
text-transform: uppercase;
margin: 160px 11px 0px 0px;
float: right;
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
border-top: 1px solid #ffc425; /*navy border*/
border-bottom: 1px solid #ffc425;
border-left: 1px solid #ffc425;
background: black url(images/indentbg.gif) top repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: #000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #ffc425; /*navy divider between menu items*/
}


.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
background: black url(images/indentbg2.gif) center repeat-x;
}


.tabcontentstyle{ /*style of tab content oontainer*/
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
font: 1.2em 'Arial' 'San-Serif';
color: #000;
line-height: 1.3em;
padding: 15px 22px 0px 35px;
display:none;
}


/**************************
 Start Bread Crumb Window
 ****************************/
 
 
#breadcrumb {
float: left;
width: 800px;
height:25px;
background: url(images/breadcrumb-bg.png) no-repeat bottom;
overflow: hidden;
}

.crumb {
padding: 0px 0px 0px 20px;
text-align: left;
font: 1.1em 'Arial' 'Sans-Serif';
}

.crumb a {
color: #0469b3;
}

.crumb a:hover {
color: #000000;
}

#about-breadcrumb {
float: left;
width: 800px;
height:100px;
margin-top: -75px;
background: url(images/breadcrumb-about-bg.jpg) no-repeat bottom;
overflow: visible;
}

.aboutcrumb {
display: block;
margin: 75px 0px 0px 20px;
text-align: left;
font: 1.1em 'Arial' 'Sans-Serif';
}

.aboutcrumb a {
color: #0469b3;
}

.aboutcrumb a:hover {
color: #000000;
}


/**************************
 END Bread Crumb Window
 ****************************/


/**************************
 START Left Column
 ****************************/
 
 #left-column-wide {
position: inherit;
float: left;
width: 532px;
height: 720px;
background: url(images/left-column-wide.jpg) no-repeat top;
}

.lc-content{
height: 643px;
font: 1.1em 'Arial' 'San-Serif';
color: #000;
line-height: 1.6em;
margin: 45px 15px 0px 25px;
padding: 20px 10px 0px 0px;
list-style: none;
overflow: scroll;
overflow-y: scroll;
overflow-x: hidden;
overflow:-moz-scrollbars-vertical;
}

.lc-header {
display: inline;
font-size: 1.2em;
text-transform: capitalize;
font-weight: 600;
color: #004b8d;
line-height: 1.6em
}

.lc-text {
display: inline;
font-size: 1.1em;
font-style: oblique;
font-weight: 600;
color: #333;
line-height: 1.6em;
}
 
 /**************************
 END Left Column
 ****************************/

/**************************
 START right Column
 ****************************/
 
 #right-column-narrow {
position: inherit;
float: right;
width: 267px;
height: 720px;
margin-right: 2px;
background: url(images/contact-bg.jpg) no-repeat -5px 0px;
}

.rc-content{
height: 643px;
font: 1.1em 'Arial' 'San-Serif';
color: #000;
line-height: 1.6em;
margin: 45px 15px 0px 20px;
padding: 20px 10px 0px 0px;
list-style: none;
}

.rc-content a{
color: #004b8d;
}

.rc-content a:hover{
color: #333;
}

.rc-header {
display: inline;
font-size: 1.2em;
text-transform: capitalize;
font-weight: 600;
color: #004b8d;
line-height: 1.6em
}

.rc-text {
display: inline;
font-size: 1.1em;
font-style: oblique;
font-weight: 600;
color: #333;
line-height: 1.6em;
}

 /**************************
 END Right Column
 ****************************/


/* Start Left Sidebar */

#left-sidebar {
float: left;
width: 256px;
height: 445px;
margin-left: 2px;
padding-top: 30px;
margin-bottom: 20px;
padding-bottom: 15px;
padding-left: 5px;
background: url(images/news-header-bg2.jpg) no-repeat 5px 0px;
/* background: url(images/window-news.jpg) no-repeat;*/
overflow: hidden;
}

#leftheadlines {
width: 243px;
height: 425px;
margin-left: 6px;
background-color: none;
}

.box-heads {
height: 60px;
float: left;
margin-top: -2px; 
}

.heads {
display: block;
border-bottom: 1px #999999 solid;
}
.heads a {
display: block;
height: 60px;
width: 228px;
font-size: 12px;
line-height: 1.4em;
color: #125395;
padding: 5px 5px 5px 5px;
text-align: left;
}

.heads a:hover {
color: #000;
height: 60px;
background: url(images/heads-hover-bg2.jpg) no-repeat;
overflow: visible;
}

#category-label{
height: 40px;
font: 1.4em 'Arial', 'sans-serif';
font-weight: bold;
text-transform: uppercase;
padding-left: 11px;
margin-top: -20px;
color: white;
}

#quicknav {
display: block;
float: left;
width: 264px;
height: 120px;
margin-left: 2px;
background: url(images/quicknav-bg.png) no-repeat top;
}

/* End Left Sidebar */

/* Start Right Storyscroll */

/*#backup-right-storyscroll {
float: right;
width: 530px;
height: 230px;
margin-right: 2px;
background-color: white;
overflow: hidden;
}*/

#right-storyscroll {
float: right;
width: 510px;
height: 230px;
margin-right: 17px;
margin-bottom: 10px;
overflow: visible;
}

/* End Right Storyscroll */

/* Start Right Games Window */

#right-gameswindow{
float:right;
width: 532px;
height: 245px;
margin-left: -1px;
margin-right: 5px;
background: url(images/new-window-games-short.png) no-repeat 3px 0px;

}
ul#games{
position: absolute;
display: block;
height: 190px;
width: 519px;
margin: 0px 0px 0px 9px;
text-align: left;
background-color: none;
}

#games li.all {
display: inline;
float: left;
height: 190px;
width: 127px;
overflow: visible;
}

#games li.all a {
display: inline;
float: left;
height: 190px;
width: 127px;
font-size: 1em;
color: #125395;
line-height: 1em
background-color: none;
}

#games li.all a:hover {
display: inline;
float: left;
height: 191px;
width: 127px;
font-size: 1em;
color: #ffffff;
background: url(images/new-games-hover.png) no-repeat 2px 5px;
}

#games li.header3 a {
color: #707070;
}

#games li.header3 a:hover {
color: #0469b3;
}

#games li.header2 {
position: absolute;
display: block;
text-align: left;
height:  45px;
width: 300px;
font: 1.4em 'Arial', 'sans-serif';
font-weight: bold;
text-transform: uppercase;
color: #ffffff;
line-height: 55px;
margin-left: 15px;
}

#games li.header2 a {
color: #ececec;
}

#games li.header3 {
display: block;
text-align: right;
height:  45px;
width: 232px;
float:right
font: 1em 'Trebuchet MS', 'sans-serif';
text-transform: uppercase;
line-height: 55px;
margin-right: 20px;
padding-left: 272px;
}

.boxshot {
display: block;
padding: 10px 5px 0px 18px;
margin-bottom: -5px;
text-align: left;
}

.pspbox {
display: block;
padding: 10px 5px 0px 27px;
margin-bottom: -5px;
text-align: left;
}

.storytext {
display: block;
padding: 0px 5px 0px 18px;
text-align: left;
line-height: 1.5em;
}

.storytext2 {
display: block;
padding: 0px 10px 0px 18px;
text-align: left;
line-height: 1.5em;
color: #666;
}

.storypic {
display: inline;
float: left;
padding-top: 1px;
padding-left: 10px;
margin-right: -8px;
margin-bottom: -10px;
}

/* End Right Games Window */

/* All Bottom Story Windows 3 */

ul#storywindow {
position: absolute;
display: block;
width: 250px;
height: 191px;
padding: 17px 0px 0px 8px;
text-align: left;
background: none;
}

#storywindow li.story {
display: inline;
float: left;
width: 250px;
height: 191px;
margin-top: 10px;
}

#storywindow li.story a {
display: inline;
float: left;
height: 191px;
font-size: 1em;
color: #0469b3;
line-height: 1.8em
padding-top: 10px;
padding-right: 10px;
background-color: none;
}

#storywindow li.story a:hover {
display: inline;
float: left;
height: 197px;
color: #fff;
background: url(images/new-story-window-blue-hover.png) no-repeat 0px 0px;
overflow: visible;
}

#storywindow li.storyheader1 {
display: inline;
font: 1.5em 'Trebuchet MS', 'sans-serif';
margin-left: 18px;
color: #ffffff;
text-transform: uppercase;
}

#storywindow li.storyheader1 a {
display: inline;
color: #ffffff;
}

#storywindow li.storyheader1 a:hover {
display: inline;
color: #ffffff;
}

#storywindow li.header2 {
display: inline;
font: 1.5em 'Trebuchet MS', 'sans-serif';
margin-left: 18px;
text-transform: uppercase;
}

#storywindow li.header2 a {
display: inline;
color: #ececec;
}

/* Start Story Window 1 */

#window-one{
display: block;
float: left;
width: 266px;
height: 245px;
margin-top: 10px;
background: url(images/new-story-window.png) no-repeat 5px 8px;
overflow: hidden;
}


/* End Story Window 1 */

/* Start Story Window 2 */

#window-two{
display: block;
float: left;
width: 266px;
height: 245px;
margin-top: 10px;
background: url(images/new-story-window.png) no-repeat 5px 8px;
}

/* End Story Window 2 */

/* Start Story Window 3 */

#window-three{
display: block;
float: left;
width: 266px;
height: 245px;
margin-top: 10px;
margin-left: -1px;
background: url(images/new-story-window.png) no-repeat 5px 8px;

}

/* End Story Window 3 */

/* Start Latest Headlines */

#headlines {
width: 505px;
height: 68px;
float:left;
margin-left: 2px;
padding: 12px 0px 0px 290px;
background: url(images/headlines-bg.png) no-repeat;
}

.headlinetext {
display: block;
text-align: left;
font-size: 1em;
font-weight: 600;
color: #0469b3;
line-height: 2.2em
}

.headlinetext a {
color: #000;
}

.headlinetext a:hover {
color: #999;
}

/* End Latest Headlines */


/* Start Bottom Navigation */

#footer {
position: relative;
width: 798px;
height: 100px;
background: url(images/bottom-nav-bg.png) no-repeat;
text-align: center;
clear: both;
margin-left: 1px;
}

/* Target Firefox 3 */
#footer, x:-moz-any-link, x:default {
margin-left: -1px;
}


#footer ul{
}


#footer ul li{
display: block;
float: left;
padding: 23px 0px 0px 0px;
margin-top: 40px;
font: 9px Arial;
color: #707070;
line-height: 16px;
width: 100%;
}

#footer ul li a{
color: #707070;
}

#footer ul li a:hover{
color: #125395;
}

#bottom-nav {
margin: 0 auto;
height: 100px; 
width: 798px;
padding: 600px 0px 0px 0px;
background: url(images/bottom-nav-bg.png) no-repeat bottom;
}

ul#bottom-text {
}

.bottomtext{
float: left;
padding: 35px 0px 0px 50px;
margin-top: 40px;
font: 9px Arial;
color: #707070;
width: 100%;
}

.bottomtext li{
display: block;
}