/* Created by http://freehtml5templates.com */
/* (adapted to also use leaverou.github.com/prefixfree/) */

/* basics */

/* reset */
* {
	margin: 0;
	padding: 0;
}

/* render html5 elements as block */
header, footer, section, aside, nav, article {
	display: block;
}

/* standard body */
body {
	margin: 0 auto;
	width: 960px;
	font: 14px/20px "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
	background: #695e53 url("/css/images/granite.jpg");
	background-size: cover;
	background-attachment: fixed;	
}
	
/* make sup a little smaller than normal so it doesn't disturb lines */	
sup {
  vertical-align: super;
  font-size: 10px;
}	

/* standard alignments */
.alignleft {
	float: left;
}

img.alignleft {
	margin: 5px 10px 0 0; 
}

.alignright {
	float: right;
}

img.alignright {
	margin: 5px 0 0 10px; 
}
	
.center {
	text-align: center;
}
	
.fleft {
	text-align: left;
	float: left;
	margin-left: 20px;
}
	
.fright {
	float: right;
	text-align: right;
	margin-right: 20px;
}
	
.fcentered {
	text-align: center;
}

/* Hx tags */

h1 {
	font-size: 48px;
	padding: 20px 0;
	text-shadow: 2px 2px 2px #000;
	color: #d6a965;
}

/* add plain magmasource.caltech.edu link */
h1 a {
  text-decoration: none;
	color: #d6a965;
}

h2 {
	font-size: 24px;
	padding: 20px 0;
}

h3 {
	font-size: 18px;
	padding: 10px 0;
}

h4 {
	font-size: 24px;
	line-height: 25px;
	padding: 17px 0 14px 0;
}

p {
	padding-bottom: 20px;
}

/* MAGMAsource */
.magma {
  font-style: italic;
}

/* nav */

nav {
	position: absolute;
	width: 960px;
	background: url("images/navbg.png");
	border-radius: 10px;
}

nav ul {
	margin: 0 auto;
	width: 960px;
	list-style: none;
}

nav ul li {
	float: left;
}
		
nav ul li a {
	display: block;
	margin-right: 20px;
	width: 140px;
	font-size: 16px;
	font-weight: bold;
	line-height: 44px;
	text-align: center;
	text-decoration: none;
	color: #f2ede7;
}
			
nav ul li a:hover {
	color: #d6a965;
}
			
nav ul li.selected a {
	color: #d6a965;
}
			
nav ul li.subscribe a {
	margin-left: 20px;
	padding-left: 33px;
	text-align: left;
	background: url("images/rss.png") left center no-repeat;
}

/* intro */

#intro {
	position: relative;
	margin-top: 55px;
	padding: 50px;
	/* background size - no prefixfree support? (required for iPad) */
	background-size: 100%;	
   -webkit-background-size: 100%;
  /* change order to get it to work on Opera */
	background: #695e53 url("images/introbkg.png") repeat-x;	
	/* curved border radius */
	border-radius: 10px;
}
	
#intro h2, #intro p {
	position: relative;
	z-index: 9999;
	width: 350px;
}
	
#intro h2 {
	padding: 0 0 20px 0;
	font-weight: normal;
	color: #fff;
}
	
#intro p {
	padding: 0;
	color: #d6a965;
}

/* add links in the introduction */
#intro a {
	color: #000;  
}

#intro a:hover {
	color: #d6a965;
	text-decoration: none;
}	
	
#intro img {
	position: absolute;
	top: 0;
	right: 0;
	width: 521px;
	height: 220px;	
	/* curved border radius */
	border-radius: 10px;
}

/* content and sidebar layout */

#content {
	position: relative;
	margin-top: 50px;
	float: left; 
	width: 920px; 
	margin:10px 5px 10px 0; 
	padding:5px 20px 5px 20px;
	background-color: #f2ede7;	
	border-radius: 10px;
}

/* columns */

#content ul.column {
	width: 100%;
	padding: 0;
	margin: 10px 0;
	list-style: none;
}

#content ul.column li {
	float: left;
	width: 230px; /*Set default width*/
	padding: 0;
	margin: 5px 0;
	display: inline;
}

#content .block {
	height: 355px;
	font-size: 1em;
	margin-right: 10px; /*Creates the 10px gap between each column*/
	padding: 20px;
	background: #d6a965;
/* curved border radius */
	border-radius: 10px;
}

#content .block a {
	color: #FFF;
}
	
/* 156px × 140px (scaled to 160px × 144px) */
#content .block img {
  /*Flexible image size with border*/
	width: 89%;
	padding: 5%;
	background:#fff;
	margin: 0 auto;
	display: block;
}
/* end of column configuration */
	
/* footer */
footer {
	width: 960px;
	clear: both;
	color: #f2ede7;
	overflow: hidden;
	padding-top: 10px;
	background-color: #271408;
	border-radius: 10px;
	height: 200px;
	margin-bottom: 10px;
}
	
footer section {
	width: 300px;
	float: left;
	padding: 0 10px;
}

footer section h2 {
	margin-top: 0;
}

footer section p {
  font-size: 12px;
}

footer section a {
	color: #999;
}
	
footer section a:hover {
	color: #FFF;
	text-decoration: none;
}
	
/* for inner pages */

/* content and sidebar layout */

#innercontent {
	float: left; 
	width: 610px; 
	margin:10px 5px 10px 0; 
	padding:5px 20px 5px 20px;
	background-color: #d6a965;	
	border-radius: 10px;
}

aside {
	float: right;
	text-align: left; 
	width: 300px; 
	margin:0; 
	padding:0;
}

/* article */
.articlecontent header p, .blogPost header p a {
	font-size: 14px;
	font-style: italic;
	color: #777;
}

.articlecontent p a {
	color: #695e53;
}
	
.articlecontent p a:hover {
	color: #fff;
}
	
.articlecontent header p a:hover {
	text-decoration: none;
	color: #000;
}
	
/* box shadow on pics; was webkit only */
.articlecontent img {
	box-shadow: 3px 3px 7px #777;
}

/* list style for links.php etc. */
.articlecontent ul {
	margin: 0 0 10px 20px;
}

.articlecontent li {
	padding-bottom: 5px;
}

.articlecontent li a {
	color: #695e53;
}
	
.articlecontent li a:hover {
	color: #fff;
}
	
.articlecontent .hangingindent {
    padding-left: 22px ;
    text-indent: -22px ;
}


/* sidebar */
aside section {
	margin: 10px 0 0 10px;
	padding: 10px 15px;
	background-color: #d6a965;	
	border-radius: 10px;
}

aside section ul {
	margin: 0 0 0 20px;
	color: #FFF;
}
	
/* switched to inline-block for calculator */	
aside section ul li a {
	display: inline-block;
	text-decoration: none;
	color: #695e53;
}
				
aside section ul li a:hover {
	text-decoration: underline;
	color: #fff;
}
	
/* for login / logout */
aside section p {
	color: #000;
  padding:0;
}

aside section p a {  
	text-decoration: underline;
	color: #695e53;
}

aside section p a:hover {  
	color: #fff;
}
		
aside section .ad {
  padding: 0 4px 15px 0;
	display: inline-block;
	float: left;
}  
  
aside section .ad a {  
	font-size: 12px;
	text-decoration: underline;
	color: #695e53;
}

aside section .ad a:hover {  
	color: #fff;
}

aside section img {
  width: 117px;
  height: 105px;
  padding: 4px;
  border: none;
  background: #FFF;
  display: inline-block;
}

#adbox {
  height: 350px;
}
  
table {
  width: 100%;
}

fieldset {
  padding: 15px 15px 5px 15px;
  margin-right: 20px;
  border: 4px solid #fff;
	border-radius: 10px;
}

/* input boxes (need white background for opera)
use prefixfree for webkit and moz versions, if needed */
input {
    background-color: #fff;
    border:1px solid #695e53;
    border-radius:.3em;
    margin-left: 0px;
    padding:2px;
}

input:focus { 
    outline:none;
    border-color:#2e1c10;
    box-shadow:0 0 5px #695e53;
}

.input_text, .input_password {
    width: 120px;
}

/* button adapted from http://css-tricks.com/css3-gradients/
and http://webdesignerwall.com/tutorials/css3-gradient-buttons
---------------------------------------------- */

/*zoom: 1; zoom and *display = ie7 hack for display:inline-block
	*display: inline; */
	/* font: 14px/100%; */
	/*text-shadow: 0 1px 1px rgba(0,0,0,.3);*/

.button {
	display: inline-block;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font-family: Helvetica,Arial,Verdana,sans-serif;
   font-weight : bold;
	padding: .5em 2em .55em;
	border-radius: .5em;
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}

.medium {
	font-size: 12px;
	padding: .4em 1.5em .42em;
  margin: 8px 0 20px 0;
}
.small {
	font-size: 11px;
	padding: .2em 1em .275em;
  margin: 8px 0 20px 0;
}

/* color styles 
---------------------------------------------- */

/* brown colours taken from CoffeeCols template - dark #2e1c10; light #b2aca1 */
.brown {
	color: #fff;
	border: solid 1px #695e53;
	background: #706459; /* mean gradient value */
	background: -webkit-gradient(linear, left top, left bottom, from(#b2aca1), to(#2e1c10));
	background: -webkit-linear-gradient(top,  #b2aca1,  #2e1c10);
	background: -moz-linear-gradient(top,  #b2aca1,  #2e1c10);
   background: -o-linear-gradient(top,  #b2aca1,  #2e1c10);
   background: linear-gradient(top,  #b2aca1,  #2e1c10);
}
 /* #38322c mean gradient value */
.brown:hover {
	color: #d6a965;
	background: #38322c;
	background: -webkit-gradient(linear, left top, left bottom, from(#706459), to(#000));
	background: -webkit-linear-gradient(top,  #706459,  #000);
	background: -moz-linear-gradient(top,  #706459,  #000);
   background: -o-linear-gradient(top,  #706459,  #000);
	background: linear-gradient(top,  #706459,  #000);
}
.brown:active {
	color: #d6a965;
	background: -webkit-gradient(linear, left top, left bottom, from(#2e1c10), to(#b2aca1));
	background: -webkit-linear-gradient(top,  #2e1c10,  #b2aca1);
	background: -moz-linear-gradient(top,  #2e1c10,  #b2aca1);
	background: -o-linear-gradient(top,  #2e1c10,  #b2aca1);
	background: linear-gradient(top,  #2e1c10,  #b2aca1);
}