/*site style*/  

body {  
	margin: 0;
	padding: 0;
	border: 0;
	font-family: times, georgia, utopia std, bookman old style, serif;
	background-color: #000;
	background-image:url('../images/layout/stars_tile2.jpg');
}

.maskbox {
    position: absolute;
    z-index: 8000;
    top: 183px;
    left: 0;                            
    width: 900px;
    height: 358px;
    background-image: url('../images/layout/900_mask.png');
    background-repeat: no-repeat;
}
.maskbox-movie {
	position: absolute;
	top: 183px;
	left: 0;
	width: 900px;
	height: 1358px;
	background-image: url('../images/layout/mask-nocircle.jpg');
	background-repeat: no-repeat;
}

h1, h2, h3, h4, p{letter-spacing: 1px;}
h1, h2, h3{color: #a0cce6;}
p{font-weight: bolder;color:#6699cc;letter-spacing: 1px;}

a {
	cursor: pointer;
	text-decoration: none;
	color: #a0cce6;
	border: none;
	font-weight: bolder;
}

a:hover {
	text-decoration: none;
	color:#6699cc;
	border: none;
}

img {border: none;}

/*IE Transparency fix*/
img, div {
behavior: url(iepngfix.htc) }

/*template*/

#header {
	width: 900px;
	height: 183px;
	position: absolute;
	z-index: 200000;
	background-image: url('../images/layout/900_header.jpg');
	background-repeat: no-repeat;
	text-align: center;
}
#header h1, h2{
	float: left;
	width: 100%;
}
#header h1{
	margin: 30px 0 0 20px;
	font-size:18px;
}
#header h2{
	position: absolute;
	top: 140px;
	left:370px;
	width: 180px;
	font-size:13px; 
	letter-spacing: 0;
}
#header h4{
	text-align: justify;
	position: absolute;
	font-size: 14px; 
	top: 140px;
	left: 400px;
	color:#6699cc;
	width:220px;
}

#rotatescroll{
	width: 150px;
	height: 145px;
	position: relative;
	left: 760px;
	top: 0;
	
}
.viewport{ 
	width: 150px;
	height: 145px;
	position: relative; 
	margin:0; 
	overflow:hidden;
	
}
.viewport_mask{
	position:relative;
	width: 150px;
	height: 145px;
	left:0px;
	top:0;
}

.overview {
	position: absolute;
	left: 0;
	width: 150px;
	height: 145px;
	list-style: none;
	margin: 0;
	padding: 0; 
	top: 0; 
	background: url('../images/layout/news_slider_mask.png');
	background-repeat: no-repeat;
}


.overview a {
	position: absolute;
	top: 8px;
	left:15px;
	font-size: 18px;
	width: 92px;
	height: 91px;
	color: #0b2241;
	line-height: 17px;
	padding: 30px 50px 0 5px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: -1px;
}

.overview a:hover{ 
	background: url('../images/layout/news_slider_mask_bkg.png');
	background-repeat: no-repeat; 
	color:#fff7d5;
}
#logo {
	position: absolute;
	display: block;
	width: 350px;
	height: 240px;
	z-index: 200000;
	top: 40px;
	left: 445px;
	text-align: center;
	
}

.logo_categories {
	position: absolute;
	display: block;
	left: 10em;
	text-align: center;
	z-index: 300000;
}


#yr_guardians_logo {
	position: absolute;
	display: block;
	z-index: 100000000;
	top: 40px;
	left: 300px;}

#wrapper {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 900px;
	height:1363px;
	text-align: center;
	background-color: #0f100e;
}
.wrapper-bg {
	height: 1500px;
}
#content {
	width:900px;
	position: relative;
	z-index: 900;
	top: 0;
	left:0;
	
}

.maskbox h3{
	margin: 500px 0 0 250px; 
	float: left;
	width: 100%;
	text-align: justify; 
	color: #548bb3; 
	font-size: 20px;
	font-style: italic;
	letter-spacing: 0;
}

.mid {
	width:1280px;
	height: 800px;
	z-index: 9000;
	font-weight: bold;
	position:relative;
	z-index: 200000001;
	color: #c9f2fc;
}
#mid_nav {
	float: left;
	width: 900px;

}
.body_text{
	float: left;
	width:650px;
	margin-left: 150px;
	
}

.body_text p{text-align: justify;}

.spacer{
	width: 900px;
	height: 100px;
	float: left;
}
.masked_image {
	position: absolute;
	top: 210px;
	left: 90px;
	z-index: 100;
	width: 100%;
	display:none;
}

#moonface {
	background: url('../images/layout/moonface.jpg');
	background-repeat: no-repeat;
	position: absolute;
	top: 170px;
	left: 250px;
	width: 500px;
	height: 600px;
	z-index: 0;	
}

#moonface_videos {
	background: url('../images/layout/moonface.jpg');
	background-repeat: no-repeat;
	position: absolute;
	top: 180px;
	left: 245px;
	width:600px;
	height: 470px;
	z-index: 2001;	
}
.hidden_moonface{z-index: 10000000000; display: none;}

.moon_gallery_image {
	float: left;
	margin-top:0;
	margin-left: 180px;
	margin-bottom: 50px;
}


.moon_gallery_text {
	width: 900px;
	float: left;	
}

.moon_gallery_text h2 {
	letter-spacing: 2px;
	text-align: center;
	float: left;
	width: 720px;
	font-size: 2em;
	margin: 20px 0 0 0;

}
.moon_gallery_text p {
	float: left;
	text-align: justify; 
	font-weight: bolder; 
	line-height: 1.5em;
	font-size: 12px;
	width: 700px;
	margin-left: 80px;
}

/*Page Headers*/
#mim_logo {
	margin-top: 70px;
	margin-left: 210px;
}

#north_logo {
	margin-top: 100px;
	margin-left: 150px;
}
#easter_logo {
	margin-top: 90px;
	margin-left: 145px;
}

#author_logo {
	margin-top: 100px;
	margin-left: 60px;
}

#extras_logo {
	margin-top: 80px;
	margin-left: 166px;
}

#yrbooks_logo {
	margin-top: 120px;
	margin-left: 220px;
}
#mtheg_logo{
	position: absolute; 
	z-index: 100000;
	left: 335px; 
	top: 80px;
}
#books_logo{
	position: absolute; 
	z-index: 100000;
	left: 325px; 
	top: 115px;
}
#antheneum_logo{
	font-weight: lighter;
	font-size: 13px;
	color: #a0cce6;
}

#videos_logo{
	margin-top: 60px;
	margin-left: 150px;
}
#legal{
	float: left;
	width: 800px;
	text-align: justify; 
	font-size: 10px;  
	letter-spacing: 0; 
	color: #224564; 
	margin: 0px 50px 0 0px;
}
.category_footer_links{
	float: left; 
	margin-top: 80px; 
	margin-left: 30px; 
	width: 900px;
	height: 100px;
}
.category_footer_links_author{
	float: left; 
	margin-top: 50px; 
	margin-left: 30px; 
	width: 900px;
	height: 100px;
}
.addthis{
	float: left;
	margin-top: 1em;
	height:50px;	
}

.addthis a{	
	display: block;
	width:30px;
	height:30px;
	cursor: pointer;
}


	
/*footer*/
.bottom {
	width: 700px;
	height: 10px;
	color: #fbf6eb;
	font-weight: bold;
	position: absolute;
	top: 926px;
	left: 315px;
	z-index: 5000;
	font-size: 12px;
	letter-spacing: 1px;
}

.bottom-ie {
	width: 740px;
	height: 10px;
	color: #fbf6eb;
	font-weight: bold;
	position: absolute;
	top: 926px;
	left: 300px;
	z-index: 5000;
	font-size: 12px;
	letter-spacing: 1px;
}
.tag {
	float: left;
	width: 900px;
	margin: 100px 0 0 0;
}

.tag p, a{
	float: left;
	width: 300px;
	font-size: 20px;
}

.tag h4{
	color:#6699cc;
}
#email{
	color:#6699cc;
	text-align: justify;
	float: left; 
	width: 300px; 
	margin: 30px 0 0 450px;
	font-size: 14px;
}
#email:hover{
	color: #224564;
}

.long_footer, .long_footer_blue {
	width: 900px;	
	height: 102px;
	position: absolute;
	top: 541px;
	left: 0;

	background-repeat: no-repeat;	
}
.long_footer { 	background-image: url('../images/layout/long_footer_2.jpg'); }
.long_footer_blue {	background-image: url('../images/layout/long_footer_3.jpg');}
.long_footer p{	
	width: 100%;
	margin-bottom: 10px;
}


.footer_text{
	width: 600px;
	height: 200px;
	float: left;
}

.footer_text h3{
	text-align: center;
}

.footer_links a{
	
	text-align: center;
	font-size: 12px;
}

#frame1{
	background: url('../images/layout/long_footer_frame.jpg');
	width: 20px;
	height:720px;
	background-repeat: repeat-y;
	position: absolute; 
	top: 102px;
	left: 0;
}

#frame2{
	background: url('../images/layout/long_footer_frame2.jpg');
	width: 20px;
	height:720px;
	background-repeat: repeat-y;
	position: absolute; 
	top: 102px;
	left: 880px;
}



/*Homepage Layout*/
                                            
/*Homepage Navigation Buttons*/
#home_nav {width: 1280px;height: auto;float: left;margin: 0;padding: 0;}

.home_navigation_left, .home_navigation_right, #mgm_bkg {display: block;position: absolute;width: 170px;height: 191px;background-repeat: no-repeat;}
#yrm {top: 0px;left: 50px;}
#aam {top: 190px;left: 100px;}
#mgm, #mgm_bkg{top: 0px; left: 680px;}
#mgm_bkg:hover {background: url('../buttons/170_r.png');}
#mgm:hover{background: url('../buttons/mtg-b.png');}
#mgm img{position: absolute;top: 49px;left: 51px;}
#mgm img{position: absolute;top: 49px;left: 51px;}
#extm {top: 190px;left: 620px;}
#pbm{background: url('../');display: block;position: absolute;top: 425px;left: 20px;width: 120px;height: 117px;background-repeat: no-repeat;}
#picture_books_footer_link {position: absolute;display: block;width: 100%;height: 100px;}

a.home_navigation_left:hover{background: url('../buttons/170_l.png');}
a.home_navigation_right:hover{background: url('../buttons/170_r.png');}

/*Category Page Navigation Buttons*/
.fixed_ie{
float: left;
text-align: center;}

#category_nav {
	position: fixed;
	display: block;
	z-index: 500000;
	height: 200px;
	margin-left: 40px;
	margin-right: auto;
}

#home, #yr,  #yr_active,#aa,  #aa_active, #mg,  #mg_active, #ext, #ext_active {
	display: block;
	position: absolute;
	width: 150px;
	height:90px;
	top: 0;
	background-repeat: no-repeat;
}
#home {left:20px;}
#home:hover{background: url('../buttons/half_nav_roll.png');}
#aa, #aa_active {left: 184px;}
#aa:hover{background: url('../buttons/half_nav_roll.png');}
#yr, #yr_active {left:345px;}
#yr:hover{background: url('../buttons/half_nav_roll.png');}
#mg, #mg_active {left: 508px;}
#mg:hover{background: url('../buttons/half_nav_roll.png');}
#ext, #ext_active {left: 673px;}
#ext:hover{background: url('../buttons/half_nav_roll.png');}

.category_rollover_left, .category_rollover_right, .books_right{display: block;position: absolute;width: 160px;height: 180px;background-repeat: no-repeat;}
a.category_rollover_left:hover {background: url('../buttons/160_l.png');}
a.category_rollover_right:hover {background: url('../buttons/160_r.png');}
a.books_right:hover{background: url('../buttons/170_l.png');}
.mtg_north_btn_l, .mtg_north_btn_r{display: block;position: absolute;width: 130px;height: 140px;background-repeat: no-repeat;}
a.mtg_north_btn_l:hover {background: url('../buttons/130_l.png');}
a.mtg_north_btn_r:hover {background: url('../buttons/130_r.png');}
a.round_button:hover{background: url('../buttons/round_roll.png');}

/*Shadowbox Style-Used for book excerpts*/
#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message {
	font-family: times, georgia, utopia std, bookman old style, serif;
	font-weight: bold; 
	font-size: 3em; 
	color:#fff;}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:absolute;height:100%;width:100%;z-index:0;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border:1px solid #303030;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;z-index: 90000000; height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none; z-index:3000000000;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#060606;}
#sb-title,#sb-info{position:relative;padding:5em 0 0 0;margin:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:26px;line-height:26px;}
#sb-title-inner{font-size:16px;}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(close.png);}
#sb-nav-next{background-image:url(next.png);}
#sb-nav-previous{background-image:url(previous.png);}
#sb-nav-play{background-image:url(play.png);}
#sb-nav-pause{background-image:url(pause.png);}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}
   
/*Video Display*/
/*video controllers and styling*/
#moons {
    position: absolute;
    left: 300px;
    top: 10px;
	
}
#moons_long {
	position: absolute;
	left: 330px;}
#pauseButton {
	opacity: 0;
	position: absolute;
	left: 430px;
	top: 35px;
	cursor: pointer;
	width: 40px;
	height: 40px;
}
#playButton {
	opacity: 1;
	display: block;
	position: absolute;
	left: 430px;
	top: 35px;
	cursor: pointer;
	width: 40px;
	height: 40px;
	z-index: 10;
}
#ppGlow {
    position: absolute;
    left: 420px;
    top: 25px;
    width: 60px;
    height:60px;
}

/*video mask*/

.index-video-ie{
	position: absolute;
	top: 186px;
	left: 0;
	
}

.video-ie {
	position: absolute;
	display: block;
	top: 185px;
	left: 0px;
	z-index: 100000;
	text-align: left;
	line-height: 0 !important;  
	margin: 0; 
	padding: 0 !important; border: none !important;  
}

.video-ie-author {
	
	position: absolute;
	display: block;
	top: 0px;
	left: 0px;
	z-index: 10000000000000000;
	text-align: left;
	line-height: 0 !important;  
	margin: 0; 
	padding: 0 !important; border: none !important;  
}

.video-js-box { 
	position: relative;
	display: block;
	top: 170px;
	left: 200px;
	z-index: 2000;
	text-align: left;
	line-height: 0 !important;  
	margin: 0; 
	padding: 0 !important; border: none !important;  
}


/*Meet The Author Video Styling*/
.author_page_wrapper{
	width: 600px;
	height: 446px;
	position:relative;
	top: 0px;
	margin-left: auto;
	margin-right: auto;
	background: url('../images/layout/author_vid_bkg.jpg');
	background-repeat: no-repeat;
	padding:0;	
}

#author_wrapper {
	position: relative;
	display: block;	
	top: 0;
	line-height: 0 !important;  
	margin: 0; 
	padding: 0 !important; border: none !important;  	
}

#authorVid{
	position:relative;
	width:462px; 
	height:270px;
	left:20px; 
	top:55px; 
	margin-bottom:55px;
}

.author_video_control{	
	position: absolute;
	width:200px;
	height:100px;
	top:50px;
	left:-200px;
}
.author_video_control img{
	margin-top: 300px;
}

#guardiansVid{
	width:600px;
	height: 337px;
	top: 25px;
	left:-50px;
	
}
/* Video Element */

video.video-js {
	width:500px;
	height:281px;
	position: absolute;
	top: 50px;
	left: 0px;
	z-index: 1; 
}

.vjs-flash-fallback { 
    position:relative; 
    z-index: 50000 ;
    width: 600px; 
    height: 538px; 
    top:-5px; 
    left:-190px;
}



/* Fullscreen styles for main elements */
.video-js-box.vjs-fullscreen { 
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    overflow: hidden; 
    z-index: 1; 
}



/* Styles Loaded Check */
.vjs-styles-check { 
    height: 5px; 
    position: absolute; 
}

/* Controls Below Video */
.video-js-box.vjs-controls-below .vjs-controls { 
  
    position: relative; 
    opacity: 1; 
    background-color: #000; 
}

.video-js-box.vjs-controls-below .vjs-subtitles { 
    bottom: 75px; 
} /* Account for height of controls below video */

/* DEFAULT SKIN (override in another file)
================================================================================
Using all CSS to draw the controls. Images could be used if desired. */

/* Controls Layout 
  Using absolute positioning to position controls */
.video-js-box .vjs-controls {
 position: relative; margin: 0px; opacity: 0.5; color: #fff;
  display: none; 
  top: 300px;
  left: 0em;
  width: 80%;
  bottom: 0; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
  height: 0px; /* Including any margin you want above or below control items */
  padding: 0; /* Controls are absolutely position, so no padding necessary */
}

.video-js-box .vjs-controls > div { /* Direct div children of control bar */
  position: absolute; /* Use top, bottom, left, and right to specifically position the control. */
  text-align: center; margin: 0; padding: 0;
  height: 25px; /* Default height of individual controls */
  top: 3em; /* Top margin to put space between video and controls when controls are below */
  /* CSS Background Gradients 
     Using to give the aqua-ish look. */
  /* Default */ background-color: transparent;
  /* CSS Curved Corners */
  border-radius: 5px; 
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px;
  /* CSS Shadows */
  box-shadow: 1px 1px 2px #000; 
  -webkit-box-shadow: 1px 1px 2px #000; 
  -moz-box-shadow: 1px 1px 2px #000;
}

/* Placement of Control Items 
   - Left side of pogress bar, use left & width
   - Rigth side of progress bar, use right & width
   - Expand with the video (like progress bar) use left & right */
.vjs-controls > div.vjs-play-control       { 
    display: none;
   
}
.vjs-controls > div.vjs-progress-control   { 
	  position: absolute; 
	margin-top: 20px;
	margin-left: 150px;
	width: 12em; 
	height: 10px;  
  
}
.vjs-progress-holder { /* Box containing play and load progresses */
    background:#393630;
    position: relative; 
    padding: 0; 
    cursor: pointer !important;
    height: 10px;
    margin: 7px 1px 0 5px; /* Placement within the progress control item */
}

.vjs-progress-holder div { /* Progress Bars */
    position: absolute; 
    display: block;
    width: 30em; 
    height: 10px; 
    margin: 0; 
    padding: 0;
}
.vjs-controls > div.vjs-time-control       { 
 display:none;
 
} /* Time control and progress bar are combined to look like one */

.vjs-controls > div.vjs-volume-control     { 
    display: none;
    width: 50px; 
    right: 35px;  
}

.vjs-controls > div.vjs-fullscreen-control { 
    display: none;
    width: 25px; 
    right: 5px;   
}

/* Removing curved corners on progress control and time control to join them. */
.vjs-controls > div.vjs-progress-control {
    border-top-right-radius: 0; 
    -webkit-border-top-right-radius: 0; 
    -moz-border-radius-topright: 0;
    border-bottom-right-radius: 0; 
    -webkit-border-bottom-right-radius: 0; 
    -moz-border-radius-bottomright: 0;
}
.vjs-controls > div.vjs-time-control { 
    border-top-left-radius: 0; 
    -webkit-border-top-left-radius: 0; 
    -moz-border-radius-topleft: 0;
    border-bottom-left-radius: 0; 
    -webkit-border-bottom-left-radius: 0; 
    -moz-border-radius-bottomleft: 0;
}

/* Play/Pause
-------------------------------------------------------------------------------- */
.vjs-play-control { 
    cursor: pointer !important;
    display: none;
}

/* Play Icon */
.vjs-play-control span {
    display: none;
    display: block; 
    line-height: 0; 
}

.vjs-paused .vjs-play-control span {
    display: none; 
    background-repeat: no-repeat;
    width: 70px; 
    height: 70px; 
    margin: 5px;
    /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
    /* Height of play icon is total top & bottom border widths. Color is transparent. */
    border-top: 0px solid rgba(0,0,0,0); 
    border-bottom:0px solid rgba(0,0,0,0);
}

.vjs-playing .vjs-play-control span {
    display: none; 

}


.vjs-play-progress {
    /* CSS Gradient */
    /* Default */ background: #151411;
    /* Webkit  */ background: -webkit-gradient(linear, left top, left bottom, from(#151411), to(#403e33));
    /* Firefox */ background: -moz-linear-gradient(top,  #151411,  #403e33);
}
.vjs-load-progress {
    opacity: 0.8;
    /* CSS Gradient */
    /* Default */ background-color: #403e33;
    /* Webkit  */ background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#403e33));
    /* Firefox */ background: -moz-linear-gradient(top,  #555,  #403e33);
}

/* Time Display
-------------------------------------------------------------------------------- */
.vjs-controls .vjs-time-control { 
    font-size: 10px; 
    line-height: 1; 
    font-weight: normal; 
    font-family: Helvetica, Arial, sans-serif; 
}

.vjs-controls .vjs-time-control span {
    line-height: 25px; /* Centering vertically */ 
}

/* Volume
-------------------------------------------------------------------------------- */
.vjs-volume-control { cursor: pointer !important; }
.vjs-volume-control div { display: block; margin: 0 5px 0 5px; padding: 4px 0 0 0; }
/* Drawing the volume icon using 6 span elements */
.vjs-volume-control div span { /* Individual volume bars */
    float: left; 
    padding: 0;
    margin: 0 2px 0 0; /* Space between */
    width: 5px; 
    height: 0px; /* Total height is height + bottom border */
    border-bottom: 18px solid #555; /* Default (off) color and height of visible portion */
}
.vjs-volume-control div span.vjs-volume-level-on { border-color: #fff; /* Volume on bar color */ }
/* Creating differnt bar heights through height (transparent) and bottom border (visible). */
.vjs-volume-control div span:nth-child(1) { border-bottom-width: 2px; height: 16px; }
.vjs-volume-control div span:nth-child(2) { border-bottom-width: 4px; height: 14px; }
.vjs-volume-control div span:nth-child(3) { border-bottom-width: 7px; height: 11px; }
.vjs-volume-control div span:nth-child(4) { border-bottom-width: 10px; height: 8px; }
.vjs-volume-control div span:nth-child(5) { border-bottom-width: 14px; height: 4px; }
.vjs-volume-control div span:nth-child(6) { margin-right: 0; }

/* Fullscreen
-------------------------------------------------------------------------------- */
.vjs-fullscreen-control { cursor: pointer !important; }
.vjs-fullscreen-control div {
  padding: 0; text-align: left; vertical-align: top; cursor: pointer !important; 
  margin: 5px 0 0 5px; /* Placement within the fullscreen control item */
  width: 20px; height: 20px;
}
/* Drawing the fullscreen icon using 4 span elements */
.vjs-fullscreen-control div span { float: left; margin: 0; padding: 0; font-size: 0; line-height: 0; width: 0; text-align: left; vertical-align: top; }
.vjs-fullscreen-control div span:nth-child(1) { /* Top-left triangle */
  margin-right: 3px; /* Space between top-left and top-right */
  margin-bottom: 3px; /* Space between top-left and bottom-left */
  border-top: 6px solid #fff; /* Height and color */
  border-right: 6px solid rgba(0,0,0,0);  /* Width */
}
.vjs-fullscreen-control div span:nth-child(2) { border-top: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
.vjs-fullscreen-control div span:nth-child(3) { clear: both; margin: 0 3px 0 0; border-bottom: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }
.vjs-fullscreen-control div span:nth-child(4) { border-bottom: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
/* Icon when video is in fullscreen mode */
.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(1) { border: none; border-bottom: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(2) { border: none; border-bottom: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }
.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(3) { border: none; border-top: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(4) { border: none; border-top: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }

/* Download Links - Used for browsers that don't support any video.
---------------------------------------------------------*/
.vjs-no-video { font-size: small; line-height: 1.5; }

/* Big Play Button (at start)
---------------------------------------------------------*/
div.vjs-big-play-button {

}
div.vjs-big-play-button:hover {
  box-shadow: 0px 0px 80px #fff; -webkit-box-shadow: 0px 0px 80px #fff; -moz-box-shadow: 0px 0px 80px #fff;
}

div.vjs-big-play-button span {
 
}

/* Spinner Styles
---------------------------------------------------------*/
/* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
.vjs-spinner { display: none; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; z-index: 1; margin: -50px 0 0 -50px;
  /* Scaling makes the circles look smoother. */
  transform: scale(0.5); -webkit-transform:scale(0.5); -moz-transform:scale(0.5);
}
/* Spinner circles */
.vjs-spinner div { display: none; position:absolute; left: 40px; top: 40px; width: 20px; height: 20px; background: #fff;
  border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;
  border: 1px solid #ccc; /* Added border so can be visible on white backgrounds */
}
/* Each circle */
.vjs-spinner div:nth-child(1) { opacity: 0.12; transform: rotate(000deg) translate(0, -40px) scale(0.1); -webkit-transform: rotate(000deg) translate(0, -40px) scale(0.1); -moz-transform: rotate(000deg) translate(0, -40px) scale(0.1); }
.vjs-spinner div:nth-child(2) { opacity: 0.25; transform: rotate(045deg) translate(0, -40px) scale(0.2); -webkit-transform: rotate(045deg) translate(0, -40px) scale(0.2); -moz-transform: rotate(045deg) translate(0, -40px) scale(0.2); }
.vjs-spinner div:nth-child(3) { opacity: 0.37; transform: rotate(090deg) translate(0, -40px) scale(0.4); -webkit-transform: rotate(090deg) translate(0, -40px) scale(0.4); -moz-transform: rotate(090deg) translate(0, -40px) scale(0.4); }
.vjs-spinner div:nth-child(4) { opacity: 0.50; transform: rotate(135deg) translate(0, -40px) scale(0.6); -webkit-transform: rotate(135deg) translate(0, -40px) scale(0.6); -moz-transform: rotate(135deg) translate(0, -40px) scale(0.6); }
.vjs-spinner div:nth-child(5) { opacity: 0.62; transform: rotate(180deg) translate(0, -40px) scale(0.8); -webkit-transform: rotate(180deg) translate(0, -40px) scale(0.8); -moz-transform: rotate(180deg) translate(0, -40px) scale(0.8); }
.vjs-spinner div:nth-child(6) { opacity: 0.75; transform: rotate(225deg) translate(0, -40px) scale(1.0); -webkit-transform: rotate(225deg) translate(0, -40px) scale(1.0); -moz-transform: rotate(225deg) translate(0, -40px) scale(1.0); }
.vjs-spinner div:nth-child(7) { opacity: 0.87; transform: rotate(270deg) translate(0, -40px) scale(1.1); -webkit-transform: rotate(270deg) translate(0, -40px) scale(1.1); -moz-transform: rotate(270deg) translate(0, -40px) scale(1.1); }
.vjs-spinner div:nth-child(8) { opacity: 1.00; transform: rotate(315deg) translate(0, -40px) scale(1.3); -webkit-transform: rotate(315deg) translate(0, -40px) scale(1.3); -moz-transform: rotate(315deg) translate(0, -40px) scale(1.3); }

/*Author Page*/

#mid_author_nav {
	float: left;
	width: 1280px;
	height: 230px;
	text-align: left;
}

#news_btn, #vid_btn {
	display: block;
	position: absolute;
	top: 12em;
	width: 230px;
	height: 230px;
	background-repeat: no-repeat;
}

#news_btn {
	background: url('../buttons/news_a.png');
	left: 3em;
	
}

#vid_btn {
	background: url('../buttons/v_htd-a.png');
	left: 55em;
}
#video_inst{
	height: 20px;
	margin: 80px 0 0 0;
	float: left;
}
.author_text {
	float: left;
	width: 800px;
	z-index: 1000000;
	margin-top: 50px;
	margin-left: 50px;
	text-align: justify;
	font-size: 14px;
	line-height:16px;	
}

.author_text p{
	width: 800px;
	text-align: justify;	
}

.author_links{
	float: left;
	margin-top:10px;
	margin-left:130px;
	z-index: 1000000;
	width: 900px;	
}
.author_links a{
	width: 150px;
	float: left;
	display: block;
	font-size: 16px;	
	color: #a0cce6; 
	letter-spacing: 1px; 	
}
.author_links a:hover{color:#6699cc;}

#news, #meet_author{
	display: block;
	position: absolute;
	background-repeat: no-repeat;
	width: 160px;
	height: 180px;
	z-index: 5000000000000;
	
}

#draw,#tour, #meet_author, #draw_pdf_link, #draw_pdf_link_instructions {
	display: block;
	position: absolute;
	background-repeat: no-repeat;	
}
#draw,#tour, #meet_author{
	width: 160px;
	height: 180px;
}
#draw, #tour, #draw_pdf_link, #draw_pdf_link_instructions{
	z-index:100000000000000000;
}

#draw {top: 12em; left:35em; background: url('../buttons/a_draw-a.png');}
#draw:hover {background: url('../buttons/a_draw-b.png');}
#news{top:12em; left: 2em; background: url('../buttons/a_news_a.png');}
#news:hover{background: url('../buttons/a_news_b.png');}
#meet_author {top:21em; left:2em; background: url('../buttons/a_meettheauthor-a.png');}
#meet_author:hover {background: url('../buttons/a_meettheauthor-b.png');}
#tour{top: 2em; left: 35em; background: url('../buttons/a_tour-a.png');}
#tour:hover{background: url('../buttons/a_tour-b.png');}

#draw_pdf_link{width: 60px; height: 60px; top:30em; left:35em; background: url('../buttons/pdf-a.png');}	
#draw_pdf_link:hover{background: url('../buttons/pdf-b.png');}
#draw_pdf_link_instructions{ width:70px; top: 54em; left:70em; font-size: 11px;  letter-spacing: 0; }
#bill_moon {
	background: url('../images/author/wj_photo.jpg');
	background-repeat: no-repeat;
	position: absolute;
	top: 180px;
	left: 245px;
	width:600px;
	height: 470px;
	z-index: 2001;	
}
#empty_moon {
	background: url('../images/layout/empty.png');
	background-repeat: no-repeat;
	position: absolute;
	top: 180px;
	left: 245px;
	width:600px;
	height: 470px;
	z-index: 2001;	
}
#default_moon_image {
	position: absolute;
	top: 265px;
	left: 370px;
	z-index: 1;
}

/*Root young readers Books page-to be added later*/
#north_bookcover {position:absolute;}
#north {
	display: none;
	position:absolute;
	top: 300px;
	left: 390px;
	width: 500px;
	height: 600px;	
}
#north_text{margin:100px 0 0 0px; padding-right: 50px; width: 600px;}
#north_text p{ width:600px; float: left;}
#north_text h2{text-align: center; font-size: 2em;}

#b1, #b2, #b3, #b4, #b5, #b6 {
	display: block;
	position: absolute;
	top: 12em;
	width: 115px;
	height: 115px;
	background-repeat: no-repeat;
}

#b1 {background: url('../buttons/b1-a.png');left: 2.5em;}
#b1:hover {background: url('../buttons/b1-b.png');}
#b2, #pb2 {background: url('../buttons/b2-ana.png');left: 9.5em;}
#b3, #pb3 {background: url('../buttons/b3-ana.png');left: 16.5em;}
#b4, #pb4 {background: url('../buttons/b4-ana.png');left: 56.5em; }
#b5, #pb5 {background: url('../buttons/b5-ana.png');left: 63.5em;}
#b6, #pb6 {background: url('../buttons/b6-ana.png');left: 70.5em;}

#content {
	width: 900px;
	position: relative;
	z-index: 900;
	top: 0;
	left:0;	
}
/*Root Picture Books page-to be added later*/
#mim_bookcover {position:absolute;	}
#mid_picturebooks_nav {
	float: left;
	width: 1280px;
	height: 500px;
}
#pb1,#pb2, #pb3, #pb4, #pb5, #pb6, #pb7 {
	display: block;
	position: absolute;
	top: 12em;
	width: 115px;
	height: 115px;
	background-repeat: no-repeat;
	z-index: 200000;
}
#pb1 {top: 15em;left: 7em;background: url('../buttons/b1-a.png');}
#pb1:hover {background: url('../buttons/b1-b.png');}
#pb2 {left: 12em; top: 4em;}
#pb3 {left: 22em; top: 10em;}
#pb4 {left: 36.5em; top:7em;}
#pb5 {left: 52em; top: 10em;}
#pb6 {left: 60.5em; top: 4em;}
#pb7 {background: url('../buttons/b7-ana.png');left: 65.5em; top: 15em;}

/*Book Detail Pages*/
.retailers {
	display: none;
	text-align: center;
	background-repeat: no-repeat;
	left: 310px;
	top: 40px;
	width: 285px;
	height: 280px;
	position: absolute;	
	padding: 30px 10px 0 30px;	
}

.retailers a{
	float: left;
	width: 100px;
	height: 30px;
	padding: 0;
	margin: 0;
	background: none;
}
.retailers a:hover{background:url('../images/layout/reroll.png'); background-position: center;}

#retailers_north{background-image: url('../images/layout/retail_moon_north.png');}
#retailers_mim{background-image: url('../images/layout/retail_moon_mim.png');}
#retailers_easter{background-image: url('../images/layout/retail_moon_easter.png');}
#retailers_tooth{background-image: url('../images/layout/retail_moon_tooth.png');}
#retailers_sand{background-image: url('../images/layout/retail_moon_sandman.png');}

.desc_text {
	float: left;
	text-align: justify;
	margin-left: 100px;
	margin-bottom: 0;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 1.5em;
}

#description {width: 650px;font-size: 1.25em;}

/*Mim Detail page*/
#books_back_button{
	position: absolute;
	top: 22.5em;
	left: 1em;
	width: 120px;
	height: 117px;
	background-image: url('../buttons/back_to_main_b.png');
	background-repeat: no-repeat;
}

#books_back_button:hover{
	background-image: url('../buttons/back_to_main_b-b.png');
}
.quotes {
	letter-spacing: 1px;
	float: left;
	margin: 0em 2em 0 50px;	
}
.quotes h2 {
	color: #a0cce6;
	text-align:left;
	width: 100%;
	
}
#quote_source, #quote{width: 500px;}
	
#quote{
	color: #99ccff;
	font-size: 1em;
	line-height: 1.25em;
	margin-bottom: .25em;
	font-weight: bolder;
}

#quote_source{
	font-size: .8em;
	margin: 0;
	font-weight: lighter;	
}
#mim_text{margin:50px 0 0 0px; padding-right: 50px; width: 700px;}
#mim_text p{width: 600px;}
/*North Book Detail Page*/
#moon5{float: left;width:500px; height:700px; margin-top:0px;}
#excerptn, #excerpteab, #excerptmim, #preorder, #eabpreorder {
	display: block;
	position: absolute;
	background-repeat: no-repeat;
	width: 160px;
	height: 180px;
	
}
#books-movie {
	display: block;
	position: absolute;
	background-repeat: no-repeat;
	width: 170px;
	height: 190px;
	margin-left: 30px;
	
}
#excerptn {background: url('../buttons/pb_excerpt-a.png'); top: 150px;left: 80px;}
#excerptn:hover {background: url('../buttons/pb_excerpt-b.png');}
#excerpteab {background: url('../buttons/pb_excerpt-a.png'); top: 150px;left: 80px;}
#excerpteab:hover {background: url('../buttons/pb_excerpt-b.png');}
#preorder{background: url('../buttons/pb_buythebook-a.png'); top: 150px;left: 650px;}
#preorder:hover {background: url('../buttons/pb_buythebook-b.png');}
#eabpreorder{background: url('../buttons/eab_buythebook-a.png'); top: 150px;left: 650px;}
#eabpreorder:hover {background: url('../buttons/eab_buythebook-b.png');}
#excerptmim {background: url('../buttons/mim_excerpt-a.png');}
#excerptmim:hover {background: url('../buttons/mim_excerpt-a.png');}
#books-movie{background: url('../buttons/tb_a.png'); top: 150px;left: 650px;}
#books-movie:hover {background: url('../buttons/170_l.png');}

/*Meet The Guardians page*/

#mtg_text{margin: 0;}

#mid_nav_meettheguardians {
	width: 900px;
	height: 500px;
	float: left;
}
#mid_nav_meettheguardians h3 {float: left;margin:360px 0 0 0; text-align: center;}
#north_mtg, #mim_mtg, #cs_mtg, #north_mtg_shift, #easter_mtg, #tooth_mtg, #sand_mtg {
	display: block;
	position: absolute;
	width: 160px;
	height: 180px;
	background-repeat: no-repeat;		
	
}
#north_books, #easter_books, #tooth_books, #moon_books, #sand_books {display: block;
	position: absolute;
	width: 220px;
	height: 247px;
	background-repeat: no-repeat;}
#north_mtg {background: url('../buttons/mtg_meet_north-a.png');top: 1em; left: 5em;}
#north_mtg:hover {background: url('../buttons/mtg_meet_north-b.png');}
#north_mtg_shift {background: url('../buttons/mtg_meet_north-a.png');top: 0em; left: 5em;}
#north_mtg_shift:hover {background: url('../buttons/mtg_meet_north-b.png');}
#easter_mtg {background: url('../buttons/mtg_easter-a.png');top: 9em; left: 7em;}
#easter_mtg:hover {background: url('../buttons/mtg_easter-b.png');}
#north_books {background: url('../buttons/books_north-a.png');top: -1em; left: 3em;}
#north_books:hover {background: url('../buttons/books_north-b.png');}
#easter_books {background: url('../buttons/books_easter-a.png');top: 9em; left: 5em;}
#easter_books:hover {background: url('../buttons/books_easter-b.png');}
#tooth_books {background: url('../buttons/books_tooth-a.png');top: 1em; left: 32em;}
#tooth_books:hover {background: url('../buttons/books_tooth-b.png');}
#moon_books {background: url('../buttons/books_moon-a.png');top: 1em; left: 3em;}
#moon_books:hover {background: url('../buttons/books_moon-b.png');}
#sand_books {background: url('../buttons/books_sand-a.png');top: 1em; left: 32em;}
#sand_books:hover {background: url('../buttons/books_sand-b.png');}
#mim_mtg {background: url('../buttons/mtg_meet_mim-a.png');top: 0em; left: 30.5em;}
#mim_mtg:hover {background: url('../buttons/mtg_meet_mim-b.png');}
#tooth_mtg {background: url('../buttons/mtg_meet_tooth-a.png');top: 7.6em; left: 31em;}
#tooth_mtg:hover {background: url('../buttons/mtg_meet_mim-b.png');}
#sand_mtg {background: url('../buttons/mtg_meet_sand-a.png');top: 14.5em; left: 26em;}
#sand_mtg:hover {background: url('../buttons/mtg_meet_mim-b.png');}
#mtg1, #mtg2 {
	display: none;
	position: absolute;
	top: 200px;
	left: 80px;	
}

#mtg_back_button, #mtgn_back_button{
	position: absolute;
	width: 120px;
	height: 117px;
	background-image: url('../buttons/back_to_main_g.png');
	background-repeat: no-repeat;
}
#mtg_back_button{
	top: 33em;
	left: 1em;
}
#mtgn_back_button{
	top: 28em;
	left: 2em;
}
#mtg_back_button:hover{
	background-image: url('../buttons/back_to_main_g-b.png');
}

#mtgn_back_button{}
#mtgn_back_button:hover{
	background-image: url('../buttons/back_to_main_g-b.png');
}
/*Meet The Guardians: North Character page*/
#mid_nav a {
	display: block;
	position: absolute;
	background-repeat: no-repeat;	
	z-index: 10000000;
}
#dj, #petrov, #bear, #ombric, #fearlings, #ab, #rd, #k, #pi, #qwerty, #kailash, #lamas{width: 130px;height: 146px;}
#dj{background: url('../buttons/mtgn_dr-a.png');left: 19.5em; top: 17em;}
#dj:hover {background: url('../buttons/mtgn_dr-b.png');}
#petrov {background: url('../buttons/mtgn_p-a.png');display: block;position: absolute;
width: 130px;height: 140px;background-repeat: no-repeat;left:9em; top: 6em;}
#petrov:hover {background: url('../buttons/mtgn_p-b.png');}
#bear{background: url('../buttons/mtgn_b-a.png');display: block;position: absolute;width: 130px;height: 146px;
background-repeat: no-repeat;left: 14em; top: 6em; left: 31em;}
#bear:hover {background: url('../buttons/mtgn_b-b.png');}
#ombric{background: url('../buttons/mtgn_o-a.png');left: 5em; top: 3em;}
#ombric:hover {background: url('../buttons/mtgn_o-b.png');}
#kailash{background: url('../buttons/mtgeab_k-a.png');left: 12em; top: 16em;}
#kailash:hover{background: url('../buttons/mtgeab_k-b.png');}
#fearlings{background: url('../buttons/mtgn_f-a.png');left: 7em; top:10em;}
#fearlings:hover{background: url('../buttons/mtgn_f-b.png');}
#qwerty{background: url('../buttons/mtgeab_q-a.png');left: 7em; top:10em;}
#qwerty:hover{background: url('../buttons/mtgeab_q-b.png');}
#ab{background: url('../buttons/mtgn_asm-a.png');left: 32em; top: 10em;}
#ab:hover {background: url('../buttons/mtgn_asm-b.png');}
#lamas{background: url('../buttons/mtgeab_ll-a.png');left: 32em; top: 10em;}
#lamas:hover {background: url('../buttons/mtgeab_ll-b.png');}
#rd{background: url('../buttons/mtgn_r-a.png');left: 12em; top: 16em;}
#rd:hover {background: url('../buttons/mtgn_r-b.png');}
#k{background: url('../buttons/mtgn_k-a.png'); left: 27em; top: 16em;}
#k:hover {background: url('../buttons/mtgn_k-b.png');}
#pi{background: url('../buttons/mtgn_pi-a.png');left: 34em; top: 3em;}
#pi:hover {background: url('../buttons/mtgn_pi-b.png');}

/*Meet The Guardians: Man in the Moon Character page*/
#mim1, #mim2, #mim3, #mim4{
	display: none;
}
#lm,#gw, #mb, #mm{
	display: block;
	position: absolute;
	width: 160px;
	height: 180px;
	background-repeat: no-repeat;	
}
#lm {background: url('../buttons/mtgm_lm-a.png'); left: 3em; top: 2em;}
#lm:hover {background: url('../buttons/mtgm_lm-b.png');}
#gw{background: url('../buttons/mtgm_gw-a.png');left: 6em; top: 12em;}
#gw:hover {background: url('../buttons/mtgm_gw-b.png');}
#mb {background: url('../buttons/mtgm_mb-a.png');left: 31em; top: 12em;}
#mb:hover {background: url('../buttons/mtgm_mb-b.png');}
#mm {background: url('../buttons/mtgm_mm-a.png');left: 34em; top: 2em;}
#mm:hover{background: url('../buttons/mtgm_mm-b.png');}

/*Extras page*/
.overmoon {
	position: absolute;
	width:300px;
	height:300px;
	top:80px;
	left:300px;
}
.overmoon h4 {
	text-align:center;
	margin: 0 0 5px 0px;
	font-size:20px;
}
.overmoon p, h4 {
	font-weight: bolder;
	color: #003366;	
	letter-spacing: 0;
}
.overmoon p{clear:both;}
.overmoon a{text-align:left; margin:0 0 0 20px; ;color: #003366;}
.overmoon a:hover{color: #a0cce6;}
.overmoon img {margin:5px;}

#moon1, #moon2, #moon3, #moon4{display: none;}
#moon1{width: 250px;}
#moon1 {margin-left: 30px;}

#moon3, #moon2{float: left;width:500px; height:700px; margin-top:30px;}
#moon3 p{width: 900px; height:50px; float: left; margin-left: 50px; padding-top: 20px;}
#moon2 p{width: 900px; height:50px; float: left; margin-left: 120px; padding-top: 40px;}
#moon3 a{float: left; display: block; width:140px; height:30px;  color: #6699cc; text-align: center; cursor: pointer;}
#moon2 a{float: left; display: block; margin-top: 10px; width:300px; height:30px;  color: #6699cc; text-align: center; cursor: pointer;}
#moon3 a:hover{color: #a0cce6;}
#moon2 a:hover{color: #a0cce6;}
#moon4 img{margin-left: 0px;}
#moon4 a{margin-left:100px;cursor: pointer;font-size: 12px;}
#moon1 a{margin-left:70px;cursor: pointer;font-size: 12px; float: left; width: 300px;}
.moon1_rows{float:left;width:60px; margin:0;}
.moon_links{width:250px;height:60px;float:left; margin-left:30px; }
.moon_links a{width:50px; height:60px; margin:0 10px 0 0;}

#download_img{
	margin-top: 20px;
}

.simpleSlide-window{	
	width: 500px; 
	height:700px;
	position:absolute; 
	top: 190px; 
	left:180px;
	z-index: 1000;
}
.simpleSlide-tray{
	position: absolute;
	width: 500px; 
	height:700px;
	left: 0;
	top: 0;
}
.simpleSlide-slide{
	width: 533px;
	height: 700px;
	
}
.left-button, .right-button{width: 49px; height: 60px; position: absolute; cursor: pointer;}
.left-button{background: url('../buttons/back.png');top: 150px; left:225px;}
.right-button{background: url('../buttons/forward.png');top: 150px; left: 620px;}


#extras_left_button, #extras_left_button_downloads, #extras_right_button, #extras_right_button_downloads{display: none;}
#mid_extras_nav {float: left;width: 900px;}
#av, #video, #downloads, #trading, #wallpapers {display: block;position: absolute;width: 160px;height:180px;background-repeat: no-repeat;}
#av {background: url('../buttons/e_av-a.png');left:3em; top: 6em;}
#av:hover {background: url('../buttons/e_av-b.png');}
#video {background: url('../buttons/e_v-a.png');left:6em; top: 15em;}
#video:hover {background: url('../buttons/e_v-b.png');}	
#downloads {background: url('../buttons/e_d-a.png');top: 20em;left: 370px;}
#downloads:hover {background: url('../buttons/e_d-b.png');}
#trading {background: url('../buttons/e_tc-a.png');left: 31em; top: 15em;}
#trading:hover {background: url('../buttons/e_tc-b.png');}
#wallpapers {background: url('../buttons/e_w-a.png');left: 34em; top:6em;}
#wallpapers:hover {background: url('../buttons/e_w-b.png');}

/*Excerpt Page*/
.excerpts{
	float: left;
}

.excerpts img{
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5%;
}