@charset "UTF-8";

object{
	width:100%;
	outline:0;}

a{
	color: #9ff;
	text-decoration: none;
	}
	
a:hover{
	text-decoration: none;
	color: #fc0;
	}

h1 {
	font-family:Overlock, cursive;
	font-size:20px;
}

h2 {
	font-family:Overlock, cursive;
	color:#f3df05;
	font-weight: 400;
	font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
h2 center {
	font-family:Overlock, cursive;
	color:#f3df05;
	font-weight: 400;
	font-size: 1.3rem;
  margin-bottom: 0.5rem;
	text-align: center;
}
	
h3{
	font-family:Overlock, cursive;
	color:#f3df05;
	font-weight: 400;
	font-size: 1.3rem;
  margin-bottom: 0.5rem;

	}
	
h4 {
	font-family:Overlock, cursive;
	font-size:12px;
	color:#fff;
	padding-bottom:0;
	outline:0;
	border:none;
}

h5 {font-family:Overlock, cursive;
	font-size:42px;
	color:#f3df05;
	margin: 10px 0 10px 0;
	font-weight: 400;}
	
h6{
	font-family:Overlock, cursive;
	font-size:24px;
	color:#3688bd;
	margin: 0;
	font-weight: 400;
	}

h6{
	font-family:Overlock, cursive;
	font-size:24px;
	color:#67CCA1;
	margin: 0;
	font-weight: 400;
	}


p{
	margin: 0;
	}
	
ul{
	margin-bottom: 0;
	padding-left: 30px;
	}
	
.clearBoth{
	clear: both;
	}

.nowrap{
	white-space: nowrap;
	}



/* CSS */

.button-20 {
  background-color: #36A9AE;
  background-image: linear-gradient(#37ADB2, #329CA0);
  border: 1px solid #2A8387;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.12) 0 1px 1px;
  color: #FFFFFF;
  cursor: pointer;
  display: block;
  font-family: -apple-system,".SFNSDisplay-Regular","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 0.75rem;
  line-height: 100%;
  margin: 0;
  outline: 0;
  padding: 11px 15px 12px;
  text-align: center;
  transition: box-shadow .05s ease-in-out,opacity .05s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
}
.button-25 {
  background-color: #36A9AE;
  background-image: linear-gradient(#37ADB2, #329CA0);
  border: 1px solid #2A8387;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.12) 0 1px 1px;
  color: #FFFFFF;
  cursor: pointer;
  display: block;
  font-family: -apple-system,".SFNSDisplay-Regular","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 17px;
  line-height: 100%;
  margin: 0;
  outline: 0;
  padding: 11px 15px 12px;
  text-align: center;
  transition: box-shadow .05s ease-in-out,opacity .05s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
}

.button-25:hover .button-20:hover {
  box-shadow: rgba(255, 255, 255, 0.3) 0 0 2px inset, rgba(0, 0, 0, 0.4) 0 1px 2px;
  text-decoration: none;
  transition-duration: .15s, .15s;
}

.button-25:active .button-20:active {
  box-shadow: rgba(0, 0, 0, 0.15) 0 2px 4px inset, rgba(0, 0, 0, 0.4) 0 1px 1px;
}

.button-25:disabled .button-20:disabled {
  cursor: not-allowed;
  opacity: .6;
}

.button-25:disabled:active .button-20:disabled:active{
  pointer-events: none;
}

.button-25:disabled:hover .button-20:disabled:hover{
  box-shadow: none;
}


html{
	overflow-x:hidden;
	overflow-y:visible;}
	
body{
	background-color: #224759;
	color: #fff;
	background-image: url(https://chemistry-teaching-resources.com/images/new-background.png);
	background-attachment: inherit;
	background-position: center top, center bottom;
	background-repeat-x: no-repeat;
	background-repeat-y: no-repeat;
	background-repeat: no-repeat;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	margin: 10px;
	padding: 0px;
	font-size: 12px;
	overflow-x:hidden;
	overflow-y:visible;
	
	}
	
#wrapper{
	width: 1200px;
	margin: 0 auto;
	min-height:1000px;
	}
	
#header{
	padding-top: 20px;
	padding-bottom:20px;
	clear: both;
	position: relative;
	}

	
#content{
	margin-top: 20px;
	clear: both;
	margin-left: 10px
	}
	
#footer{
	position: bottom;
	margin-top: 20px;
	padding-bottom: 150px;
	text-align: center;
	font-size: 10px;
	color: #a6caf0;
	clear: both;
	}
	
.statcounter{
	margin-left:10px;
	position:relative;
	top:5px}


	
#logo{
	float: left; 
	font-size: 28px;
	}
	

.content4Column{
	width: 22%;
	margin-top: 20px;
	float: left;
	}
	
.content4Column.gap{
	padding-right: 4%;
	}
	
.content3Column{
	width: 30%;
	margin-top: 20px;
	float: left;
	}
	
.content3Column.gap{
	padding-right: 5%;
	}
	
.content2Column{
	width:47%;
	margin-top:20px;
	float:left;
}

.content2Column.gap{
	padding-right:6%}
	

.contentMedium{
	width: 980px;
	float: left;
	}
	
.contentMediumRight{
	width: 900px;
	float: left;
	
	}
	
.searchText{
	font-size:13px;
	}
	
.donateText{
	font-size:14px;
	color: #9ff;
	font-family:Overlock, cursive;
	padding-bottom:10px;
	font-weight: 400;}
	

.content1Column{
	width:100%;}

	
.contentSmall{
	width: 700px;
	float: left;
	}
	
.sidebarLeft{
	width: 200px;
	float: left;
	margin-right: 20px;
	background: #252525;
	box-shadow:rgba(0, 0, 0, 0.398438) 0 1px 3px;
	background-color:rgba(255,255,255,0.20);
	margin-bottom:1em;
	max-height:2000px;
	overflow:auto;}
	
	
.sidebarLeft::-webkit-scrollbar {  
    width:10px;
    height:10px;
    -webkit-border-radius: 5px;
	border-radius: 5px;
}

.sidebarLeft::-webkit-scrollbar-track,
.sidebarLeft::-webkit-scrollbar-track-piece {
    background-color:transparent;
}

.sidebarLeft::-webkit-scrollbar-thumb {  
    background-color: rgba(255,255,255,0.20);
    width: 10px;
    height: 10px;
    -webkit-border-radius:2px;
	border-radius:2px;
}


	
.sidebarRight{
	width: 260px;
	float: right;
	background: #252525;
	box-shadow:rgba(0, 0, 0, 0.398438) 0 1px 3px;
	background-color:rgba(255,255,255,0.20);
	}
	
.sidebarItem{
	padding: 20px;
	border-bottom: solid 1px #2d2d2d;
	}
	
.sidebarLeft .sidebarItem img{
	border: solid 1px #a6caf0;
	width:160px;
	}
	
.sidebarLeft .sidebarItem .gap{
	margin-bottom: 20px;
	}
	
.sidebarLeft a, .sidebarRight a{
	color: #a6caf0;
	}
	
.blogEntry{
	padding-bottom: 15px;
	border-bottom: dotted 1px #a6caf0;
	margin-bottom: 15px;
	}
	
.blogEntry.last{
	border-bottom: none;
	margin-bottom: 0;
	}
	
.blogEntry .meta{
	font-size: 10px;
	margin-top: -10px;
	margin-bottom: 10px;
	color: #a6caf0;
	}



	

.contactForm input, 
.contactForm select, 
.contactForm textarea{
	width: 350px;
	border: solid 1px #224759;
	padding: 8px 5px;
	margin-top: 5px; 
	-webkit-border-top-left-radius:8px;
	-o-border-top-left-radius:8px;
	-ms-border-top-left-radius:8px;
	-moz-border-radius-topleft:8px;
	border-top-left-radius:8px;
	
	-webkit-border-top-right-radius:8px;
	-o-border-top-right-radius:8px;
	-ms-border-top-right-radius:8px;
	-moz-border-radius-topright:8px;
	border-top-right-radius:8px;
	
	-webkit-border-bottom-right-radius:8px;
	-o-border-bottom-right-radius:8px;
	-ms-border-bottom-right-radius:8px;
	-moz-border-radius-bottomright:8px;
	border-bottom-right-radius:8px;
	
	-webkit-border-bottom-left-radius:8px;
	-o-border-bottom-left-radius:8px;
	-ms-border-bottom-left-radius:8px;
	-moz-border-radius-bottomleft:8px;
	border-bottom-left-radius:8px;
	
	box-shadow:rgba(0, 0, 0, 0.398438) 0 1px 3px;
	background-color:rgba(255,255,255,0.20);
	margin-bottom:1em;
	}
	
.contactForm select{
	width: 360px;
	}
	
.contactForm textarea{
	width: 90%;
	}
		
	
#site-logo {
	position:absolute;
	top:10px;
}

#site-logo a {
	color:#fff;
	text-decoration:none;
	font:normal normal bold 40px Overlock, cursive;
}
#site-logo a:hover {
	color: #a6caf0;
	text-decoration: none;
	font: normal normal bold 40px Overlock, cursive;
}



#site-description {
	color:#fff;
	position:absolute;
	font:italic normal normal 17px 'Times New Roman', Times, serif;
	left:10px;
	top:48px;
}


video {
    max-width: 100%;
    height: auto;
	outline:0;
}

.container {
    background: 0 0;
    position: relative;
    height: 0;
    overflow: hidden;
}

.container embed,  
.container iframe,  
.container object,
.container video{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;}

.align_left {
	float:left;
	margin:6px;}

.align_right {
	float:right;
	margin-right:6px;
	margin-left:6px;
	margin-bottom:6px;}
	
.align_center{
	text-align:center}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
	
.post-image {
	padding-left:6px;
	margin:4px 0 0 0;}
	
figure {
	display:block;
}

#swf-container{
	margin-top:15px;
	width:100%;
	height:800px;
	z-index:0;
}
	
#level-holder{
	position:relative;
	width:100%;
	left:0;
	padding-right:0;
}

div.scrollmenu {
	width: 100%;
  background-color:transparent;
  overflow: auto;
  white-space: wrap;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	
}

div.scrollmenu a {
	font-size: 16px;
	font-weight:500;
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
  display: inline-block;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration:none;
	background-color: #5a2147;	
-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #224759;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.7),
		0px 1px 0px rgba(255,255,255,0.3);	
		background: -moz-linear-gradient(
		top,
		#cd4ca2 0%,
		#5a2147);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#cd4ca2),
		to(#5a2147));
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cd4ca2', endColorstr='#5a2147');
}

div.scrollmenu a.active {
	

	
color:#f3df05;
	background-color: #4996bb;
  pointer-events: none;
	background: -moz-linear-gradient(
		top,
		#4996bb 0%,
		#224759);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#4996bb),
		to(#224759));
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4996bb', endColorstr='#224759');
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #224759;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.7),
		0px 1px 0px rgba(255,255,255,0.3);
}
div.scrollmenu a:hover {
  background-color: #5a2147;
	color: #f3df05;
}
@media only screen and (max-width:1200px){

	
	#wrapper{
		width: 960px;
		}
		
	.contentMedium{
		width: 740px;
		}
		
	.contentMediumRight{
		width: 660px;
		}
		
#swf-container{
	height:600px;
	}

	.contentSmall{
		width: 740px;
		}

		
	.columns3 .sidebarRight{
		width: 740px;
		float: right;
		margin-top: 20px;
		padding-top: 20px;
		border-top: solid 1px #a6caf0;
		background: 0 0;
		box-shadow:none;
		background-color:none;
		border:none;
		outline:0;
		}
		
	.columns3 .sidebarRight .sidebarItem{
		width: 30%;
		float: left;
		padding: 0;
		border-bottom: none;
		}
		
	.columns3 .sidebarRight .sidebarItem.gap{
		padding-right: 5%;
		}

		
		.searchText{
	font-size:14px;}	
	
	}

@media only screen and (max-width: 960px){

	
	#wrapper{
		width:728px;
		}

	.contentMedium,
	.contentMediumRight, 
	.contentSmall{
	width:100%;
	clear: both;
	margin-bottom:20px;
		}
		
		#swf-container{
	margin-top:15px;
	width:100%;
	height:595px;
	z-index:0;
}
		
	.columns2 .sidebarRight, 
	.columns3 .sidebarRight{
		width: 100%;
		float: none;
		clear: both;
		padding-top: 20px;
		border-top: solid 1px #a6caf0;
		background: 0 0;
		box-shadow:none;
		background-color:none;
		border:none;
		outline:0;
		}
		
	.columns2 .sidebarRight .sidebarItem, 
	.columns3 .sidebarRight .sidebarItem{
		width:30%;
		float:left;
		padding:0;
		border-bottom:none;
		}
		
	.columns2 .sidebarRight .sidebarItem.gap, 
	.columns3 .sidebarRight .sidebarItem.gap{
		padding-right: 5%;
		}
	
	.columns2 .sidebarLeft,	
	.columns3 .sidebarLeft{
		width: 100%;
		float: none;
		clear: both;
		padding-top: 20px;
		padding-bottom: 20px;
		border-top: solid 1px #a6caf0;
		background: 0 0;
		box-shadow:none;
		background-color:none;
		border:none;
		outline:0;
		}
	
	.columns2 .sidebarLeft .sidebarItem,	
	.columns3 .sidebarLeft .sidebarItem{
		width: 100%;
		float: none;
		clear: both;
		padding: 0;
		border-bottom: none;
		}
	
	.columns2 .sidebarLeft .sidebarItem .gap,	
	.columns3 .sidebarLeft .sidebarItem .gap{
		margin-right: 15px;
		margin-bottom: 10px;
		}
	
	
	
	
		
	
	}
		
@media only screen and (max-width: 728px){
	
	#wrapper{
		width: 98%;
		margin-left:1%;
		margin-right:1%;
		}

		
	#content{
		width: 100%; 
		margin: 20px 0 0 0;
		padding-top:20px;
		}

		
		.content4Column{
	width: 100%;
	margin-top: 20px;
	float: left;
	}
	
.content4Column.gap{
	padding-right: 0;
	}
		
	.content3Column{
		width: 100%;
		padding-top: 20px;
		float: none;
		}
		
	.content3Column.gap{
		padding-right: 0;
		}
		
	.content2Column{
	width:100%;
	margin-top:20px;
	float:none;
}

.content2Column.gap{
	padding-right:0}
	
	.columns2 .sidebarRight, 
	.columns3 .sidebarRight{
		
		padding-top: 0;
		box-shadow:none;
		background-color:none;
		border:none;
		outline:0;
		}
	
	.columns3 .sidebarLeft{
		border-top: none;
		padding-top: 0;
		margin-top: 0;
		box-shadow:none;
		background-color:none;
		border:none;
		outline:0;
		}
	
	.columns2 .sidebarRight .sidebarItem, 
	.columns3 .sidebarRight .sidebarItem, 
	.columns3 .sidebarLeft .sidebarItem{
		width: 100%;
		padding-top: 20px;
		float: none;
		}
		
	.columns3 .sidebarLeft .sidebarItem{
		text-align: center;
		padding-top: 0;
		}
		
	.columns2 .sidebarRight .sidebarItem.gap, 
	.columns3 .sidebarRight .sidebarItem.gap, 
	.columns3 .sidebarLeft .sidebarItem.gap{
		padding-right: 0;
		}
		
		
	.columns3 .sidebarLeft .sidebarItem img{
		width: 140px;
		}
		
	.columns3 .sidebarLeft .sidebarItem .gap{
		margin-right: 0;
		margin-bottom: 0;
		}
	
	.blogEntry {
		width: 100%; 
		}
	
	
	.contactForm input, 
	.contactForm select, 
	.contactForm textarea{
		width: 95%;
		border: solid 1px #666;
		padding: 8px 5px;
		margin-top: 5px; 
		background: #d9d9d9
		}
		
	.contactForm select{
		width: 100%;
		}		
			

#swf-container{
	margin-top:15px;
	width:100%;
	height:250px;
	z-index:0;
}

h5 {font-family:Overlock, cursive;
	font-size:24px;
	color:#f3df05;
	margin: 10px 0 10px 0;
	font-weight: 400;}

.searchText{
	font-size:10px;}
	
	p{
	padding-left: 10;
	margin-right: 10;
	}
	
h6{
	font-family:Overlock, cursive;
	font-size:14px;
	color:#fff;
	margin: 0px 0 10px 0;
	font-weight: 400;
	}
	
	.sidebarLeft .sidebarItem img{
	border: solid 1px #a6caf0;
	width:195px;
	}
	
	

	
	}
	
	@media only screen and (max-width: 475px){
		.sidebarLeft .sidebarItem img{
	border: solid 1px #a6caf0;
	width:280px;
	}
	
		
	}