/**
* CSS
* 
* @version 2.0
* @author Vaska 
*
* There are also some obscure rules in base.css
*/

body {
	font-size: 16px;
	font-family: "arial", sans-serif;
	line-height: 1.45em;
	/* font-weight: 300; */
}

::selection {
	background: #FFD300; opacity: 100; /* Safari */
	}
::-moz-selection {
	background: #FFD300; opacity: 100; /* Firefox */
}

#column1 { width: 65%; margin: 30px 0px 0 0; display: inline-block; vertical-align: top; padding-left: 1%;

}

#column2 { width: 25%; margin: 30px 0px 0 0; display: inline-block; vertical-align: top; padding-left: 30px; padding-right: 1%;

}

#column1b { width: 50%; margin: 30px 0px 0 0; float:left; vertical-align: top; padding-left: 30px;

}

#column2b { width: 310px; margin: 30px 0px 0 30px; float:left; vertical-align: top; padding-left: 10px;

}

#column2c { width: 10%; margin: 30px 0px 0 0; float:left; vertical-align: top; padding-left: 30px;

}

#titlelogo {position: relative; width: 53px; height: 53px; top:-101px; left: 97px; margin-bottom: -75px;
}


.topmediawrap {width: 100%; margin: 50px auto; display: block;

}


/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;

}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 1% 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
	width: 100%;
}
.span_2_of_3 {
	width: 66.1%;
}
.span_1_of_3 {
	width: 32.2%;
}


/* GRID OF SIX */

.span_6_of_6 {
	width: 100%;
}

.span_5_of_6 {
  	width: 83.06%;
}

.span_4_of_6 {
  	width: 66.13%;
}

.span_3_of_6 {
  	width: 49.2%;
}

.span_2_of_6 {
  	width: 32.26%;
}

.span_1_of_6 {
  	width: 15.33%;
}


/* GRID OF NINE */


.span_9_of_9 {
	width: 100%;
}

.span_8_of_9 {
	width: 88.71%;
}

.span_7_of_9 {
	width: 77.42%; 
}

.span_6_of_9 {
	width: 66.13%; 
}

.span_5_of_9 {
	width: 54.84%; 
}

.span_4_of_9 {
	width: 43.55%; 
}

.span_3_of_9 {
	width: 32.26%;
}

.span_2_of_9 {
	width: 20.97%; 
}

.span_1_of_9 {
	width: 9.68%; 
}


/*  GRID OF TWELVE   ============================================================================= */

.span_12_of_12 {
	width: 100%;
}

.span_11_of_12 {
	width: 91.53%;
}

.span_10_of_12 {
	width: 83.06%;
}

.span_9_of_12 {
	width: 74.6%;
}

.span_8_of_12 {
	width: 65%;
}

/*.span_8_of_12 {
	width: 66.13%; */


.span_7_of_12 {
	width: 57.66%; 
}

.span_6_of_12 {
	width: 49.2%; 
}

.span_5_of_12 {
	width: 40.73%; 
}

.span_4_of_12 {
	width: 30%; 
}

/*.span_4_of_12 {
	width: 32.26%; */


.span_3_of_12 {
	width: 23.8%;
}

.span_2_of_12 {
	width: 15.33%; 
}

.span_1_of_12 {
	width: 6.86%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 480px) {
	.span_3_of_3 {
		width: 100%; 
	}
	.span_2_of_3 {
		width: 100%; 
	}
	.span_1_of_3 {
		width: 100%;
	}
}

/* link scheme */
/* you can customize links further down the page too */
a:link { text-decoration: none; color: #000; }
a:active { text-decoration: none; color: #000; }
a:visited { text-decoration: none; color: #000; }
a:hover { text-decoration: underline; }
a img { border: none; }

/* general styles */
small { font-size: 9px; }
code { font-family: monospace; }
blockquote { padding-left: 9px; }

#colophon {
width: 138px;
border: 2px solid black;
padding: 5px 8px 20px 8px;
font-family: "Arial", sans-serif; 
font-size: 12px; 
font-weight: 300; 
line-height: 15px;
text-align: center;
margin-top: 60px;
}

#colophonlogo {
position: relative;
width: 50px;
height: 50px;
top: -60px;
left: 20px;
margin-bottom: -20px;
}

#nextbutton {
width: 40px; 
height: 25px; 
color: black;
position: fixed;
right:0px;
bottom:0px;
text-align: left;
padding: 5px 5px;
text-align: left;
vertical-align: middle;
}


#ghost {
width: 23%; 
height: auto;
position: absolute;
top: 2.5%;
right: 2%;
}



#isle {
width: 70%; 
height: auto;
position: absolute;
top: 1.5%;
right: .5%;
}

.tslist {float: left; display: block; padding: 20px 20px 20px 20px; border-style: solid; border-color: black; border-width: 1px; margin-right: 20px; margin-bottom: 20px; min-width: 150px;}

.tslistp {font-family: "Arial", sans-serif; font-size: 10px; font-weight: 300; line-height: 14px;
}

.tstitle {font-family: "Arial", sans-serif; font-size: 14px; font-weight: 300; line-height: 24px;
}

/* headings */

h1 { font-family: "GorillaITCbyBT-Regular"; font-weight: normal; font-style: normal; font-size: 40px; margin-bottom: 0em; line-height: 36px; letter-spacing: -.04em; word-spacing: -.1em;}

h12 { font-family: "Times New Roman"; font-weight: normal; font-style: normal; font-size: 40px; margin-bottom: 0em; line-height: 36px; letter-spacing: -.04em; word-spacing: -.1em;}

h2 { font-family: "tablet-gothic", sans-serif; font-size: 25px; font-style: normal; font-weight: 400; line-height: 32px; word-spacing: .05em;}

.italicdate { font-family: "tablet-gothic", sans-serif; font-size: 25px; font-style: normal; font-weight: 400; line-height: 32px; word-spacing: .05em;}

h11 {font-family: "tablet-gothic",sans-serif; font-size: 25px; font-style: italic; font-weight: 400; line-height: 32px; word-spacing: .05em;}

h3 { font-family: "prestige-elite-std", monospace; font-weight: 700; font-style: normal; font-size: 14px; line-height: 1.45em; letter-spacing: -.05em; word-spacing: -.15em;}

h4 { font-size: 13px; margin-left: auto; margin-right: auto; margin-bottom: 1em; }

h5 { font-family: "Arial", sans-serif; font-size: 36px; font-weight: 300; line-height: 32px;}

h6 { font-family: "prestige-elite-std", monospace; font-weight: 700; font-size: 30px; line-height: 1.45em;}}

h7 { font-family: "Arial", sans-serif; font-size: 45px; font-weight: 300; line-height: 32px; text-align: center;}

h8 { font-family: "Arial", sans-serif; font-size: 30px; font-weight: 300; line-height: 18px;}

h9 { font-family: "coronette"; font-weight: 400; font-size: 14px; font-style: normal; line-height: 1.45em; }

h10 { font-family: "GorillaITCbyBT-Regular"; font-weight: normal; font-style: normal; font-size: 80px; margin-bottom: 0em; line-height: 65px; letter-spacing: -.04em; word-spacing: -.1em;}

h13 { font-family: "tablet-gothic",sans-serif; font-weight: 700; font-style: normal; font-size: 12px; line-height: 1.2em;  word-spacing: .03em; letter-spacing: .03em; color: #E0E0E0;}


h1 a:hover { text-decoration: none;}
h2 em { font-family: "tablet-gothic", sans-serif; font-style: italic; font-weight: 400;}
h5 a:hover { text-decoration: none; color: red; padding-left: 4px;}
h3 a:hover { text-decoration: none; color: red;}


/* paragraph width */
#index p { margin-bottom: 1em;}
#exhibit p, code, blockquote { /* line-height: 1.3em; */ }

/* highlighter style - maybe you want to change colors? */
.highlight { background: #000; color: #000; }

/* never adjust the margin or padding here unless you seriously know what you are doing */
/* think #index .container and #exhibit .container for only padding adjustments */
#index { width: 200px; background: #fff; }
#exhibit { margin: 0 0 0 200px;}

/* styling the index */
#index ul { list-style-type: none;  margin: 0; 
	font-size: 13px;
	font-family: "arial", sans-serif;
	color: #000;
	line-height: 1.5em;

	/* font-weight: 300; */

}
#index ul.section { margin-bottom: 1.5em;
	}
#index ul.subsection { }

/* the follow rules for index are not required */
/* they are mostly for complex customization */
/* for tag display */
#index ul#all_tags {margin-bottom: 1em; }
#index ul#all_tags li { display: inline; margin-right: 3px;}
#index ul#all_tags li a {}

/* active section title */
#index span.active_section_title,
#index span.active_section_title a { font-weight: bold; }

/* active exhibit title parts */
li.active a:link, li a.active, li.active a:hover, li a.active, li.active a:active, li a.active, 
li.active a:visited, li a.active, li span.active, #index ul.section li.active a:link, 
#index ul.section li.active a:hover, #index ul.section li.active a:active, #index ul.section li.active a:visited
{color: #000; font-weight: bold;}

/*background-color: #FFFF66; */

/* additional #index options */
#index ul li .password a { /* background: url(../img/locked.gif) right center no-repeat; padding-right: 18px; */ }

/* the "new" indicator */
#index ul li sup { color: #0c0; font-weight: bold; text-transform: uppercase; font-size: 8px; vertical-align: top; }
/* end styling for index */

/* links styles only for the #index region */
#index a:link { } 
#index a:hover {  } 
#index a:active {  } 
#index a:visited {  }

/* links styles only for the #exhibit region */
#exhibit a:link {  } 
#exhibit a:hover { } 
#exhibit a:active {  } 
#exhibit a:visited { } 

/* this is where you adjust your paddings for #index and #exhibit together */
.container {  }

/* this is where you pad them separately */
#index .container {  padding: 25px 20px 0px 20px;}
#exhibit .container { padding: 0px 0px 0px 0px;}