/**********************************************************************************************************************/
/*BEGIN: the basic page layout*/

html, body {
	margin: 0;
	padding: 0;}

html {
	height: 100% !important;}
	
h1, h2, h3, h4, h5, h6 {
	margin: 0;}

dl, dd {
	margin: 0;}
	
body {
	background: url(/media/pz/static_black.gif) repeat scroll #C7C7C7;
	font-family: Merriweather, "Book Antiqua", Georgia, "Times New Roman", serif;
	color: white;
	font-size: 1em;
	height: 100%;
	width: 100%;
}

#wrapper {
	width: 1154px; /*change this value to circa 900px or 75% or something like that for mobile style sheet*/
	margin: 20px auto;
	padding: 0px;
	background-color: #FFF;
	border-width: 100px;
	-moz-border-image: url(../media/pz/border_dark.png) 100 repeat repeat; /*Firefox*/
	-webkit-border-image: url(../media/pz/border_dark.png) 100 repeat repeat; /* Safari and Chrome*/
	-o-border-image: url(../media/pz/border_dark.png) 100 repeat repeat; /*Opera*/
	background-image: inherit;/*This is necessary to force the transparency of the border_dark.png image, otherwise it wouldn't work.*/
	/*The following two lines are for browsers that do not support the border-image property; they will show two black borders instead.*/
	border-color: black;
	border-style: double;
	
}

#wrapperx { /*this is necessary for the white to show up properly within the above wrapper, otherwise the static would show up within the golden border.*/
width: 100%;
height: 100%;
padding: 0px;
margin: 0px; 
background-color: black;
	
}





#logo {
	display: block;
	width: 1100px;
	height: 572px;
	background: url(https://projectzeitgeist.com/media/pz/logo.png) top center no-repeat scroll;
	background-size: cover;
	background-position: center center;
	margin: 0px auto;
	
}


#nav { 
	width: 95%;
	height: 100%;
	/*min-height: 50px;*/
	padding: 5px 5px;
	margin: 0px auto;
	background-color: #b50051; /*red*/
	border: double 5px #ffa920; /*gold*/
	font-family: "Copperplate Gothic Light", serif;
}


#wrapper2 { 
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

#wrapper3 { /*This necessarily helps wrapper2 stay centered within wrapper*/
	display: table;
	margin: 0 auto;
}

#content { /*The main content region*/
	width: 95%;
	min-width: 1000px;
	min-height: 600px;
	padding: 20px;
	background-color: transparent;
}

#footer {
	width: 95%;
	height: 100%;
	background-color: #edf3ff;
	color: #171819;
	text-align: center;
	margin: 15px auto;
	padding: 10px 5px;
}

/*END: the basic page layout*/

/**********************************************************************************************************************/

/*BEGIN: the essential components of each blog entry*/


.title {
	text-transform: uppercase;
	font-family: "Copperplate Gothic Bold", Copperplate, "Times New Roman", serif;
	font-size: 2.3em;
	color: #b50051;
	
}



.date {
	font-family: "Courier New", Courier, monospace;
	font-size: 1.3em;
	font-weight: bold;
	
}


.story {
	font-family: Merriweather, "Book Antiqua", Georgia, "Times New Roman", serif;
	font-size: 1.1em;
}



.tags {
	font-family: "Courier New", Courier, monospace;
	font-size: 1.1em;
	font-weight: bold;
	
}

/*END: the essential components of each blog entry*/


/**********************************************************************************************************************/

/*BEGIN: navigation specifics*/
/*Note: also see the #nav rules up above*/

#nav div.nav_wrap { 
	display: table;
	margin: 0 auto;
}


#nav div.nav_wrap div.nav_link { 
	display: inline;
	padding: 0 15px;
}

#nav div.nav_wrap div.nav_link a, #nav div.nav_wrap div.nav_link a:visited { 
	color: white;
	font-size: 1.5em;
	text-decoration: none;
}

#nav div.nav_wrap div.nav_link a:hover {
	color: #ffa920;	
}

/*END: navigation specifics*/


/**********************************************************************************************************************/


/*BEGIN: content specifics*/


.sidenotes {
	text-align: right;
	font-style: italic;
}


img, iframe {
	max-width: 1100px;/*images and videos larger than this width will cause the layout to break.*/
	/*change this value for mobile style sheet*/
}

img.media, iframe.media {/*images and videos will have a border & be center-justify by default*/
	border: #b50051 solid;
	border-width: 1px 2px;
	padding: 4px 9px;
	background-color: #171819;
	display: table;
	margin: 0px auto;
	/*overflow: hidden;*/
}

img.no_border, iframe.no_border {/*for images and videos intended to have no border*/
	border: none;
	display: table;
	margin: 0px auto;
	
}


.caption {
	width: 600px;
	display: block;
	margin: 0px auto 25px;
	text-align: center;
	color: #309;
	font-family: "Lucida Console", "Courier New", Monaco, monospace;
	font-weight: bold;
}

blockquote { /*Quotes will be center justify, light blue background color, and italicized.*/
	width: 600px;
	background: #edf3ff;
	text-align: center;
	color: #666;
	margin: 20px auto;
	padding: 10px 30px;
}


blockquote p,
blockquote span,
p.italic,
span.italic,
div.italic{/*anything you want to be italicized*/
	font-style: italic;
}


.centered {
	margin: 0px auto;
	text-align: center;
}



a {text-decoration: none;}






.story a, .sidenotes a {
	font-weight: bold;
}



.tags a, .tags a:visited,
.story a, .story a:visited,
.title a, .title a:visited,
.sidenotes a, .sidenotes a:visited{
	color: #b50051;	/*links are red*/
}

.collapsible legend{
	font-family: "Copperplate Gothic Bold", Copperplate, "Times New Roman", serif;
	color: #b50051 !important;
}


.tags a:hover, .story a:hover, .title a:hover, .sidenotes a:hover {
	color: #faa920;	/*links are gold when hovered over*/
}



.def_normal { /*def_normal indicates default styling for Definition lists*/
	line-height: 20px;
	margin: 10px 0 10px 0;}
	
dl.def_normal dt {
	font-weight: bold;}
		
dl.def_normal dd {
	font-size: .9em;
	margin-left: 20px;}
	
	
ul.sphere { /*Unordered list used for bullet points, uses a small grey glass sphere as the list item marker*/
	list-style-type: none;
	padding: 0;
	margin: 0;
}

ul.sphere li {
	background-image: url(/media/pz/glass_grey_small.gif);
	background-repeat: no-repeat;
	background-position: 0 5px;
	padding-left: 15px;
	margin: 25px 0;
	
	
}

ul.sphere li a {
	text-decoration: none;
	text-transform: none;
	/*font: normal Georgia, "Times New Roman", Times, serif;*/
}	
	
	

/*END: content specifics*/



/**********************************************************************************************************************/

/*BEGIN: footer specifics*/
/*Note: also see the #footer rules up above*/

#footer div.footer_wrap { 
	display: table;
	margin: 0 auto;
}

#footer a, #footer a:visited {
	color: #b50051;	/*links are red*/
	font-weight: bold;
}

#footer a:hover {
	color: #ffa923;	/*links are gold when hovered over*/
}



/*END: footer specifics*/