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

/* screen width = greater than 1360px PLUS 20 scroll width */


/* force a vertical scroll bar */
/* prevents "centering jumps" when navigating back and forth between pages  */
/* with enough content to have a vertical scroll bar and pages that do not. */
/* http://css-tricks.com/snippets/css/force-vertical-scrollbar/ */
html {
	overflow-y: scroll;	
	/* height: 100%; margin-bottom: 1px; */
	/*  min-height: 100%; padding-bottom: 1px;  */
}


body {
	background:#000;
	border: 10;
	margin: 0;
	padding: 0;
	color: #FFF;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 100%;
	line-height: 1.125em; /* 1em = 16px ... 1.125*16=18px */
}



/* main title */
/* NOTE: SEE ALTERNATE CSS FILES FOR MODIFICATIONS FOR SMALLER SCREEN SIZES */
#title {
	height: 270px;
	width: 1000px; /*  auto */
	overflow: visible;
	background: url(../_images/title_1000x270-g3.png) top center no-repeat; /* fixed */
	/* [disabled]opacity:0.6; */
	display: block;
	margin: auto;
}



/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, /*section,*/ footer, aside, article, figure {
	display: block;
}

.clearfloat { /* this class can be placed on a <br /> or empty block element as the final element following the last floated block (within the .container) if the footer is removed or taken out of the .container */
	clear: both;
	height: 0;
	/* [disabled]font-size: 1px; */
	/* [disabled]line-height: 0px; */
}

/* div class */
/* footnote */
p.footnote {
	font-size: 0.75em; /* 1em = 16px ... 0.75*16=12px */
	line-height: 1.25em; /* 1em = 16px ... 1.25*16=20px */
	font-style: italic;
	/* [disabled]padding: 40px; */
	/* [disabled]width: 1024px; */
	/* [disabled]margin: 15px; */
	/* [disabled]padding-bottom: 20px; */
}

.superscript {
	font-size: 0.75em; /* 1em = 16px ... 0.75*16=12px */
	line-height: 1.25em; /* 1em = 16px ... 1.25*16=20px */
	/* [disabled]font-style: italic; */
	vertical-align: text-top;  /*top*/ /*super*/
}



/* ~~ Styling for links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color: #0CF;
	text-decoration: none; 
}

a:visited {
	color: #0CF;
	text-decoration: none;
}

a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color: #0FF;
	text-decoration: underline;
}

/* STRUCTURE USE CASE:                */

/* <div class="container">            */

/* <article class="content">          */
/* <h1>HEADER TEXT</h1>               */

/* <section>                          */
/* <P>xxx</P>                         */
/* </section>                         */

/* </article>                         */

/* other stuff                        */

/* </div><!-- end .container -->      */




/* USE CASE: <div class="container"> */
/* ~~ This fixed width container surrounds all other blocks ~~ */
.container {
	width: 80%;	 /* 1024px; */
	background: #000;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}


/* USE CASE: <article class="content"> */
/*.content {*/
/*	padding: 10px 0;*/
	/* [disabled]width: 1024px; */
/*	margin: auto;*//*	float: left;*/
/*}*/

/* USE CASE: <article class="content"> */
article.content {
	/* [disabled]font-family: Arial, Helvetica, Verdana, sans-serif; */
	/* [disabled]font-size:100%; */
	line-height: 1.5em; /* 1em = 16px ... 1.5*16=24px */
	background: #000;
	border: 0;
	color: #FFF;
	padding: 10px 0;
	padding-top: 15px;
	margin: auto;
	/*width: 1024px;*/
}

/* USE CASE:                     */
/*   <article class="content">   */
/*    <h1>ABOUT THE ARTIST</h1>  */
article.content h1 {
	font-size: 1.5em; /* 1em = 16px ... 1.5*16=24px */
	padding-top: 25px;
	padding-bottom: 15px;
	color: #0CF;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}



/* ADD PADDING AT THE BOTTOM OF EACH SECTION FOR READABILITY */
section {
	display: block;
	padding-bottom: 20px;
}

/* USE CASE:                     */
/* <section>                     */
/*    <h2>Artist</h2>            */
section h1 {
	/* [disabled]font-size: 1.5em; */ /* 1em = 16px ... 1.5*16=24px */
	padding-top: 5px;
	color: #0CF;
}

/* Used as a secondary header.   */
section h2 {
	font-size: 1.25em; /* 1em = 16px ... 1.25*16=20px */
	padding-top: 5px;
	color: #0CF;
}


.tagline {
	font-style: italic;
	/* [disabled]font-size: 1em; */
	color: #FFF;
	display: inline;
}


/* spacer - vertical separation */
div.spacer_blank {
	height: 15px;	
}


a img {
	border: none;
	background: #000; 
	display:block
}







/* main navigation menu */
/* NOTE: SEE ALTERNATE CSS FILES FOR MODIFICATIONS FOR SMALLER SCREEN SIZES */
nav {
	margin: 0 auto;
	/* SET WIDTH TO CONTROL NUMBER OF ITEMS IN EACH ROW */
	/* COORDINATE WITH CSS SHEETS FOR EACH DEVICE WIDTH */
	width: 1360px;  /* 4 ITEMS IN ROW: 4x300px + 8*20px margin = 1360px */
	/* [disabled]height: 84; */
	text-align: center;
}

ul {
	margin: 0;
	padding: 0;
}

/* display the navigation menu list horizontally */
ul li {
	display: inline;
	margin-left: auto;
	margin-right: auto;
	/*padding: 0;*/
	list-style: none;
}




/* main navigation menu rollover effects */
#nav_main_pixel-planet-pictures {
	height: 360px;
	width: 300px;
	overflow: hidden;
	margin: 20px;
	background: url(../_images/section-image_pixel-planet-pictures.jpg) top left no-repeat;
	display: inline-block;
}

#nav_main_pixel-planet-pictures:hover {
background-position: bottom left;	
}

#nav_main_spaceship-earth {
	height: 360px;
	width: 300px;
	overflow: hidden;
	margin: 20px;
	background: url(../_images/section-image_spaceship-earth.jpg) top left no-repeat;
	display: inline-block;
}

#nav_main_spaceship-earth:hover {
background-position: bottom left;	
}

#nav_main_solar-system-mural {
	height: 360px;
	width: 300px;
	overflow: hidden;
	margin: 20px;
	background: url(../_images/section-image_solar-system-mural.jpg) top left no-repeat;
	display: inline-block;
}

#nav_main_solar-system-mural:hover {
background-position: bottom left;	
}

#nav_main_teaching {
	height: 360px;
	width: 300px;
	overflow: hidden;
	margin: 20px;
	background: url(../_images/section-image_teaching.jpg) top left no-repeat;
	display: inline-block;
}

#nav_main_teaching:hover {
background-position: bottom left;	
}





/* images -------------------------------- */

/* div class */
/* vertical column containing image and two caption blocks */
.image_block {
	display: inline-block;
	/* [disabled]width: 250px; */ /* add 30px for hover background image */
	padding: 25px;
	/* [disabled]margin: auto; */
	/* [disabled]margin: 25; */
}

/* div class */
/* vertical column containing image and two caption blocks */
.image_block_right {
	float: right;
}

/* div class */
/* vertical column containing image and two caption blocks */
.image_block_left {
	float: left;
}

/* figure class */
/* image box */
.image_box {
	display: block;
	/* [disabled]width: 250px; */ /* add 30px for hover background image */
	/* [disabled]height: 250px; */ /* add 30px for hover background image */
	background-color: #000;
	margin: 0px;
	padding: 0px; /* add 8px for hover background image */
}

/* figure img class */
/* image */
figure img.image {
	/* [disabled]width: 220px; */
	/* [disabled]height: 220px; */
	/* [disabled]padding: 15px; */ /* inset 15px for hover background image */
}


/* figcaption class */
/* caption - image title */
.image_caption_title {
	display: block;
	padding-top: 2px;  /* adds space between title and image */
	/* [disabled]margin-top: 8px; */
	/* [disabled]margin-left: 8px; */
	/* [disabled]margin-right: 8px; */
	/* [disabled]font-weight: bold; */
	font-size: 1.125em; /* 1em = 16px ... 1.125*16=18px */
	color: #0CF;
}

/* div class */
/* caption - image title */
.image_caption_title_right {
	text-align: right;
}

/* div class */
/* caption - image title */
.image_caption_title_left {
	text-align: left;
}

/* figcaption class */
/* caption - image notes */
.image_caption_notes {
	display: block;
	padding-top: 2px;
	/* [disabled]margin-left: 8px; */
	/* [disabled]margin-right: 8px; */
	/*	font-size: 0.875em; */ /* 1em = 16px ... 0.875*16=14px */
	font-size: 0.75em; /* 1em = 16px ... 0.75*16=12px */
	line-height:1.25em; /* 1em = 16px ... 1.25*16=20px */
	font-style: italic;
	/* [disabled]text-align: center; */
}

/* div class */
/* caption - image notes */
.image_caption_notes_right {
	text-align: right;
}

/* div class */
/* caption - image notes */
.image_caption_notes_left {
	text-align: left;
}


/* Hidden text used for obfuscation */
.hide span { display: none; }


/* END MAIN.CSS -------------------------------- */