@charset "UTF-8";
/* CSS Document */
body {
	line-height:normal;
	margin:0 auto;
	height: 100%;
	font-family: 'Merriweather', serif;
	color:#333333;
	background-image:url(images/bg.png);
	font-size:16px;
	text-align:center;
}

	
h1 {
	font-family: 'Merriweather', serif;
	font-size: 34px;
	color:#333333;
	font-weight:700;
}

h2 {
	font-weight:400;
	colour: #333333;
	font-size:44px;
	font-family: 'Spirax', cursive;*/
}

h3 {
	colour: #333333;
	font-weight:400;
	font-size:24px;
	font-family: 'Merriweather', serif;
}

h4 {
	colour:#333333;
	font-family:'Lato', sans-serif;
	font-weight:100;
	font-size:28px;
}

h5 {
	colour:#333333;
	font-family:'Lato', sans-serif;
	font-weight:100;
	font-size:18px;
}

h6{
	colour: #333333;
	font-weight:400;
	font-size:20px;
	font-family: 'Merriweather', serif;
}


wrapper {
	text-align:center;
    width: 100%;
	background-image:url(images/bg.png);
}


#back {
	float:left;
	color: #fff;
	margin-left:1%;
}


/****Navigation Start****/
nav { 
	background:none;
	width:100%;
	top:1%;
	position:fixed;
}
	
nav ul {
	display: none;
}
	
nav li {
}

nav a {
}

nav a:hover {
}

nav select {
	width:80%;
	display: inline; 	
}
/****Navigation End****/


/****Header(s) Start****/	
header{
	margin-top:10%;
	height:100%;
	width:100%;
	margin-bottom:3%;
}

header2{
	display:none;
}
/****Header(s) End****/

bordertop{
	margin: 0 auto;
	height:24px;
	background-image:url(images/border.png);
	float:left;
	background-repeat:repeat-x;
	clear:both;
	width:100%;
	margin-bottom:-5px;
}

borderbottom{
	margin: 0 auto;
	height:24px;
	background-image:url(images/border.png);
	float:left;
	background-repeat:repeat-x;
	clear:both;
	width:100%;
	margin-bottom:-5px;
	position:relative;
}

/****Icons Start****/
indexicon{
	width:100%;
	height:266px;
	box-shadow: 1px 1px 7px rgba(255, 255, 255, 0.8);
	padding-top: 1%;
	padding-bottom: 1%;
	display:inline-block;
	/*border-radius: 15px 15px 15px 15px;*/
}

/****Icons End****/


/*********************
MUSEUM PAGE
*********************/
#museumblanket{
	width:100%;
	clear:both;
	text-align:center;
	
}

smalltext{
	font-size:12px;
	text-align:center;
}

#museumblanket a{
	color:#333333;
	text-decoration:underline;

}

#museumblanket a:hover{
	text-decoration:none;
}



/***************
PIONEERS PAGE
***************/
#pioneers{
	width:100%;
	text-align:center;
	clear:both;
}

/***************
BOOKS PAGE
***************/
#books{
	width:100%;
	text-align:center;
	clear:both;
}

/*********************
GLOSSARY PAGE
*********************/
glossary a{
	color:#333333;
	text-decoration:underline;
}

glossary a:hover{
	text-decoration:none;
}

glossary{
	clear:both;
	margin:0 auto;
	text-align:center;
	width:100%;
	float:left;
	margin-bottom:3%;
}

glosstitle{
	margin-top:8%;
	background-color:rgba(255, 255, 255, 0.9);
	width:100%;
	clear:both;
	float:left;
	margin-bottom:1%;
}

glossorn{
	display:inline-block;
	text-align:center;
	clear:both;
	width:100%;
}


gloss1{
	width:47%;
	margin-bottom:2%;
	display:inline-block;
	box-shadow: 1px 1px 7px rgba(255, 255, 255, 0.8);
	padding-bottom: 5%;
	background-color:rgba(255, 255, 255, 1);
	font-size:14px;
}

gloss2{
	width:96%;
	margin-bottom:2%;
	display:inline-block;
	box-shadow: 1px 1px 7px rgba(255, 255, 255, 0.8);
	padding-bottom:3%;
	background-color:rgba(255, 255, 255, 1);
	/*border-radius: 15px 15px 15px 15px;*/
	font-size:14px;
}

gloss2text{
	width:94%;
	display:inline-block;
	text-align:left;
}




/*********************
COMPREHENSIVE GLOSSARY PAGE
*********************/
#comglossary a{
	color:#333333;
	text-decoration:underline;
}

#comglossary a:hover{
	text-decoration:none;
}

#comglossary{
	margin:0 auto;
	text-align:center;
	width:100%;
	float:left;
}

#comglossary ul{
	display:none;
}

#comglossary li{
	display:none;
}
	
#comglossary article{
	text-align:left;
	
}

/*comglossary drop down*/
glossarydrop select {
    width:60%;
	display: inline-block; 
}


dt-left{
	float:left;
	height:100%;
	width:90%;
	margin-top: 2%;
	margin-right: 2%;
	margin-bottom: 1%;
	margin-left: 2%;
	padding:3%;
	text-align:left;
	box-shadow: 1px 1px 7px rgba(153, 153, 153, 0.1);
	background-color:rgba(255, 255, 255, 0.5);
}

imgright{
	float:left;
	width:90%;
	margin-top: 0;
	margin-right: 2%;
	margin-bottom: 8%;
	margin-left: 2%;
	padding:3%;
	text-align:left;
	box-shadow: 1px 1px 7px rgba(153, 153, 153, 0.1);
	background-color:rgba(255, 255, 255, 0.5);
}

#bottomorn{
	clear:both;
	
}

/*********************
TIMELINE PAGE
*********************/
timelinetitle{
	text-align:center;
	clear:both;
}

timelinetitle h2{
	margin:0 auto;
	text-align:center;
	clear:both;
}

.ss-links{
	display:none;
}

.ss-container{
    width: 100%;
    position: relative;
    text-align: left;
    float: left;
	overflow: hidden;
	padding-bottom:20%;
	
}
.ss-container h6{
	text-shadow: 0px 1px 1px #fff;
}

.ss-container:before{ /*Middle line*/
    position: absolute;
    width: 2px;
    background: #333333;
    top: 0px;
    left: 50%;
	margin-left: -2px;
    content: '';
    height: 100%;
}

.ss-row{ /*wrapper for the left and right elements*/
    width: 100%;
    clear: both;
    float: left;
    position: relative;
}

.ss-left, .ss-right{/*start of left and right elements*/
    float: left;
    width: 48%;
    position: relative;
	
}
.ss-right{
    padding-left: 2%;
}
.ss-left{
    text-align: right;
    float: left;
    padding-right: 2%;
}/*end of left and right elements*/


.ss-circle{
	border-radius:50%;
    overflow: hidden;
    display: block;
    text-indent: -9000px;
    text-align: left;
    -webkit-box-shadow: 
		0px 0px 0px 2px rgba(51,51,51,0.4);
    -moz-box-shadow: 
		0px 0px 0px 2px rgba(51,51,51,0.4);
    box-shadow: 
		0px 0px 0px 2px rgba(51,51,51,0.4);
	background-size: cover;
	background-color: #333333;
	background-repeat: no-repeat;
	background-position: center center;
	position: static;
}

.ss-medium .ss-circle{
	width: 150px;
	height: 150px;
}

.ss-circle-deco:before{
	width: 20%;
	height: 0px;
	border-bottom: 4px dotted rgba(51,51,51,0.6);
	-webkit-box-shadow: 0px 1px 1px #fff;
	-moz-box-shadow: 0px 1px 1px #fff;
	box-shadow: 0px 1px 1px #fff;
	position: absolute;
	top: 50%;
	content: '';
	margin-top: -3px;
}

.ss-left .ss-circle-deco:before{
    right: 2%;   
}
.ss-right .ss-circle-deco:before{
    left: 2%;   
}

.ss-circle-deco:after{/*The triangle*/
	width: 0px;
	height: 0px;
	border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
	content: '';
	position: absolute;
	top: 50%;
	margin-top: -10px;
}

.ss-left .ss-circle-deco:after{
	right: 0;
	border-right: 10px solid rgba(17,17,22,0.8);
}
.ss-right .ss-circle-deco:after{
	left: 0;
	border-left: 10px solid rgba(17,17,22,0.8);
}
.ss-left .ss-circle{
    float: right;
    margin-right: 20%;
}
.ss-right .ss-circle{
    float: left;
    margin-left: 20%;
}

.ss-container h3{
	font-size:20px;
    margin-top: 34px;
	padding: 10px 15px;
	box-shadow: 1px 1px 7px rgba(153, 153, 153, 0.1);
	background-color:rgba(255, 255, 255, 0.5);
	color:#333333;
}
.ss-container .ss-medium h3{
	margin-top: 55px;
}

.ss-container .ss-left h3{
	border-right: 3px solid rgba(0,255,197,0.5);
}
.ss-container .ss-right h3{
	border-left: 3px solid rgba(0,255,197,0.5);
}
.ss-container h3 span{
    color:#333333;
    font-size: 14px;
    display: block;
    padding-bottom: 5px;
}


/****** ONLY NEEDED IF THE TITLES OF THE EVENTS ARE LINKS
.ss-container h3 a{
    font-size: 28px;
    color: rgba(255,255,255,0.9);
    display: block;
}
.ss-container h3 a:hover{
	color: rgba(255,255,255,1);
}*****/


.ss-circle-1{
    background-image:url(../images/1.jpg);
}
.ss-circle-2{
    background-image: url(../images/2.jpg);
}
.ss-circle-3{
    background-image: url(images/3SumPic.jpg);
}
.ss-circle-4{
    background-image:url(images/4HieroglyphicScript.jpg);
}
.ss-circle-5{
    background-image: url(../images/5.jpg);
}
.ss-circle-6{
    background-image: url(../images/6.jpg);
}
.ss-circle-7{
    background-image: url(images/7CylinderSeal.jpg);
}








footer {
	clear: both;
	background-color:#ffffff;
	font-size:12px;
	text-align:center;
	padding-top:1%;
}


img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}



	
	
/****************************************************************************************
MEDIA QUERIES
*****************************************************************************************/
@media only screen and (min-width: 480px) {
@import "480"; 
	h1 {
	font-size: 34px;
	}

	h2 {
	font-size:50px;
	}

	h3 {
	font-size:24px;
	}

	h4 {
	font-size:28px;
	}

	h5 {
	font-size:18px;
	}

	h6{
	font-size:18px;
	}
	
	header{
		margin-top:6%;
	}
	
	indexicon{
		width:50%;
	}
	
	/******
	MUSEUM PAGE
	******/
	smalltext{
	font-size:16px;
	}
	
	museum-locations li{
	margin:5%;
	}
	
	/******
	GLOSSARY PAGE
	******/
	gloss1{
	width:32%;
	margin-bottom:1%;
	}

	gloss2{
	width:98%;
	margin-bottom:2%;
	}

	gloss2text{
	width:96%;
	}
	
	/******
	TIMELINE PAGE
	******/
	ss.circle{
	-webkit-box-shadow: 
		0px 0px 0px 5px rgba(51,51,51,0.4);
    -moz-box-shadow: 
		0px 0px 0px 5px rgba(51,51,51,0.4);
    box-shadow: 
		0px 0px 0px 5px rgba(51,51,51,0.4);
	}
	
	.ss-medium .ss-circle{
	width: 170px;
	height: 170px;
	}
	
	.ss-container h3{
	font-size:22px;
	}
	
	.ss-container .ss-medium h3{
	margin-top: 65px;
	}

	.ss-container .ss-left h3{
	border-right: 4px solid rgba(0,255,197,0.5);
	}
	.ss-container .ss-right h3{
	border-left: 4px solid rgba(0,255,197,0.5);
	}

}

@media only screen and (min-width: 600px) {
@import "600"; 
	h6{
	font-size:20px;
	}
	
	header{
		margin-top:5%;
	}
	indexicon{
		width:50%;
	}
	
	/******
	GLOSSARY PAGE
	******/
	gloss1{
	width:24%;
	margin-bottom:1%;
	padding-bottom: 4%;
}

gloss2{
	width:49%;
	margin-bottom:1%;
	padding-bottom:2%;
}

gloss2text{
	width:94%;
	display:inline-block;
	text-align:left;
}
	
	/******
	COM GLOSSARY PAGE
	******/
	imgright{
	margin-bottom:5%;
	}
	
	/******
	TIMELINE PAGE
	******/
	.ss-container:before{ /*Middle line*/
    width: 3px;
	}
	
	.ss-circle{
	-webkit-box-shadow: 
		0px 0px 0px 4px rgba(51,51,51,0.4);
    -moz-box-shadow: 
		0px 0px 0px 4px rgba(51,51,51,0.4);
    box-shadow: 
		0px 0px 0px 4px rgba(51,51,51,0.4);
	}
	
	.ss-medium .ss-circle{
	width: 210px;
	height: 210px;
	}
	
	.ss-container h3{
	font-size:24px;
	}
	
	.ss-container .ss-medium h3{
	margin-top: 88px;
	}

}

@media only screen and (min-width: 768px) {
@import "768"; 
	h1 {
	font-size: 34px;
	}

	h2 {
	font-size:50px;
	}

	h3 {
	font-size:32px;
	}

	h4 {
	font-size:28px;
	}

	h5 {
	font-size:19px;
	}

	h6{
	font-size:22px;
	}	

	header{
		width:50%;
		float:left;
	}
	
	header2{
		width:42%;
		display:inline-block;
		float:left;
		margin-top:14%;
		margin-left:8%;
	}
	
	/******
	MUSEUM PAGE
	******/
	museum-locations li{
	clear:both;
	margin:5%;
	display:inline;
	}
	
	/******
	GLOSSARY PAGE
	******/
	gloss1{
	width:18%;
	margin:1%;
	}
	
	gloss2{
	width:31.3%;
	margin:1%;
	padding-bottom:1%;
	}

	gloss2text{
	}
	
	/******
	COM GLOSSARY PAGE
	******/
	imgright{
	margin-bottom:3%;
	}
	
	/******
	TIMELINE PAGE
	******/
	.ss-circle{
	-webkit-box-shadow: 
		0px 0px 0px 6px rgba(51,51,51,0.4);
    -moz-box-shadow: 
		0px 0px 0px 6px rgba(51,51,51,0.4);
    box-shadow: 
		0px 0px 0px 6px rgba(51,51,51,0.4);
	}
	
	.ss-medium .ss-circle{
	width: 270px;
	height: 270px;
	}
	
	.ss-circle-deco:before{
	border-bottom: 5px dotted rgba(51,51,51,0.6);
	}
	
	.ss-container .ss-medium h3{
	margin-top: 115px;
	}
	
	
}

@media only screen and (min-width: 960px) {
@import "960"; 
	h1 {
	font-size: 44px;
	}

	h2 {
	font-size:60px;
	}

	h3 {
	font-size:40px;
	}

	h4 {
	font-size:32px;
	}

	h5 {
	font-size:20px;
	}

	h6{
	font-size:24px;
	}	
	
	header{
		margin-top:8%;
	}
	
	header2{
		width:47%;
		display:inline-block;
		float:left;
		margin-top:20%;
		margin-left:3%;
	}
	
	indexicon{
		width:25%;
	}
	
	nav{
		font-size:12px;
		top:2%;
		position:fixed;
		background-color: #333333;
		height:50px;
		line-height:50px;
	}

	nav ul{ 
		margin: 0;
		padding: 0;
		display: inline;
		list-style:none;
	}
	
	nav li{ 
		display: inline;
		list-style:none;
		margin-right: 6%;
		
	}
    
	
	nav select {
		display:none; 
	}
	
	nav a{
		color:#ffffff;
		text-decoration:none;
	}
	
	nav a:visited{
		color:#ffffff;
		text-decoration:none;
	}
	
	nav a:hover{
		color:#00FFC5;
		text-decoration:none;
	}
	
	/******
	MUSEUM PAGE
	******/
	museum-locations li{
	clear:both;
	display:inline;
	}
	
	/******
	GLOSSARY PAGE
	******/
	gloss1{
	width:15.66%;
	margin:0.5%;
	}
	
	gloss2{
	width:24%;
	margin:0.5%;
	padding-bottom:0.5%;
	}

	gloss2text{
	}
	/******
	COM GLOSSARY PAGE
	******/
	#comglossary ul{
	margin:0;
    padding:0;
    display:inline;
    list-style: none;
	}

	#comglossary li{
	display:inline;
	margin:1%;
	}
	
	glossarydrop select{
	display:none;
	}
	
	dt-left{
		width:41.5%;
		margin-right:0.5%;
		margin-top:1%;
	}
	
	imgright{
		width:41.5%;
		margin-top: 1%;
		margin-left:0.5%;
		margin-bottom:4%;
	}
	
	/******
	TIMELINE PAGE
	******/
	.ss-container:before{ /*Middle line*/
    width: 4px;
	}
	
	.ss-circle{
	-webkit-box-shadow: 
		0px 0px 0px 8px rgba(51,51,51,0.4);
    -moz-box-shadow: 
		0px 0px 0px 8px rgba(51,51,51,0.4);
    box-shadow: 
		0px 0px 0px 8px rgba(51,51,51,0.4);
	}
	
	.ss-medium .ss-circle{
	width: 280px;
	height: 280px;
	}
	
	.ss-container h3{
	font-size:32px;
	}
	
	.ss-container .ss-medium h3{
	margin-top: 124px;
	}
}

	
@media only screen and (min-width: 1024px) {
@import "1024"; 
	h1 {
	font-size: 52px;
	}

	h2 {
	font-size:68px;
	}

	h3 {
	font-size:40px;
	}

	h4 {
	font-size:38px;
	}

	h5 {
	font-size:22px;
	}

	h6{
	font-size:18px;
	}	
	
	
	header{
		margin-top:7%;
	}
	
	header2{
		width:40%;
		margin-top:13%;
		margin-right:7%;
	}
	
	indexicon{
		width:25%;
	}
	
	nav{
		font-size:14px;
	}
	
	/******
	MUSEUM PAGE
	******/
	museum-locations li{
	clear:both;
	display:inline;
	margin:2%;
	}
	
	/******
	GLOSSARY PAGE
	******/
	gloss1{
	width:11.5%;
	margin:0.5%;
	}
	
	gloss2{
	width:24%;
	margin:0.5%;
	padding-bottom:0.5%;
	}

	gloss2text{
	}
	
	/******
	COM GLOSSARY PAGE
	******/
	#comglossary ul{
	margin:0;
    padding:0;
    display:inline;
    list-style: none;
	}

	#comglossary li{
	display:inline;
	margin:1.1%;
	}
	
	dt-left{
	margin-top:1%;
	}
	
	imgright{
	margin-top:1%;
	margin-bottom:3%;
	}

}

@media only screen and (min-width: 1440px) {
@import "1440"; 
	h1 {
	font-size: 52px;
	}

	h2 {
	font-size:68px;
	}

	h3 {
	font-size:40px;
	}

	h4 {
	font-size:38px;
	}

	h5 {
	font-size:24px;
	}

	h6{
	font-size:28px;
	}	
	
	
	header{
		margin-top:6%;
	}
	
	header2{
		width:40%;
		margin-top:13%;
		margin-right:7%;
	}
	
	indexicon{
		width:20%;
	}
	
	nav{
		font-size:14px;
	}
	
	/******
	MUSEUM PAGE
	******/
	museum-locations li{
	clear:both;
	display:inline;
	margin:2%;
	}
	
	/******
	GLOSSARY PAGE
	******/
	gloss1{
	width:10.11%;
	margin:0.5%;
	}
	
	gloss2{
	width:19%;
	margin:0.5%;
	padding-bottom:0.5%;
	}

	gloss2text{
	}
	/******
	COM GLOSSARY PAGE
	******/
	imgright{
		margin-bottom:1%;
	}
	
	/******
	TIMELINE PAGE
	******/
	.ss-container:before{ /*Middle line*/
    width: 5px;
	}
	
	.ss-circle{
	-webkit-box-shadow: 
		0px 0px 0px 10px rgba(51,51,51,0.4);
    -moz-box-shadow: 
		0px 0px 0px 10px rgba(51,51,51,0.4);
    box-shadow: 
		0px 0px 0px 10px rgba(51,51,51,0.4);
	}
	
	.ss-medium .ss-circle{
	width: 300px;
	height: 300px;
	}
	
	.ss-circle-deco:before{
	border-bottom: 7px dotted rgba(51,51,51,0.6);
	}
	
	.ss-container h3{
	font-size:32px;
	}
	
	.ss-container .ss-medium h3{
	margin-top: 136px;
	}
	
}