/* Hand crafted by muppets */

/*site wide bits*/
html{
	margin:0;
	padding:0;
	font-size:16px;
	overflow-y: scroll;
	}

body { 
	margin:0;
	padding:0;
	font-family: Helvetica, "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif; 
	font-size:62.5%;
	line-height: 1.2em;
	background-color:rgb(238, 238, 224);
    }
  
.wrapper {
	margin-left:auto;
	margin-right:auto;
	width:800px;
	}

.header{
	height:25px;
	width:100%;
	background-color: rgb(100,100,100);
	margin-bottom:10px;
 }
 
 /*
.headcite{float:right;background-color: white;color:rgb(255,0,102);font-size:3em;height:50px;padding-top:10px;margin-top:10px;margin-right:5px;text-align:right;}
 .headslogan{font-size:0.5em;padding-top:10px;color: rgb(255,153,51);}
*/

.footer{
	width:100%;
	height:100px;
	background-color: rgb(100,100,100);
 }
 
.spacer{clear:both}
 
 /*contacts and social on right hand side*/
.rightBox{
	background-repeat: no-repeat;
	position: relative;
	float: right;
	width:150px;
	height:470px;
	background-color:rgb(130,130,130);
	background-image: url(images/ian.png);
 }

.contactBox{
 	position:relative;
 	padding:0;
 	background-color: rgb(255,255,255);
 	width:130px;
 	height:70px;
 	margin-top:250px;
 	margin-left: 10px;
 }
 
 
.contactBox:hover{
 	-webkit-box-shadow: 5px 5px 7px rgb(238,238,224);
	box-shadow: 5px 5px 7px rgb(238,238,224);
	}

 .contactBox a, .contactBox a:link, .contactBox a:visited{
 	color:rgb(51,51,51);
 	text-decoration: none;
 	font-size: 3em;
 	padding: 30px 5px 15px 10px;
 	display:block;
 }
 
 .contactBox a:hover{color:rgb(130,130,130);}
 .contactBox a:active{color:rgb(51,51,51);}
 
 
.socialBox{
 	position:relative;
 	padding:0;
 	background-color: rgb(255,255,255);
 	width:130px;
 	height:125px;
 	margin-top:10px;
 	margin-left: 10px;
 }
 
 .socialBox:hover{
	-webkit-box-shadow: 5px 5px 5px rgb(238,238,224);
	box-shadow: 5px 5px 5px rgb(238,238,224);
	}
 .socialBox a, .socialBox a:link, .socialBox a:visited{
 	color:rgb(51,51,51);
 	text-decoration: none;
 	font-size: 1.5em;
 	padding: 3px 5px 15px 10px;
 	display:block;
 }
 
 .socialBox a:hover{color:rgb(130,130,130);}
 .socialBox a:active{color:rgb(51,51,51);}

 
/*mini nav boxes*/

#redBox{
	background-color: rgb(255,0,102);
	text-align:center;
	margin-left:2px;
	margin-top: 2px;
	float: left;
	height:20px;
	width:20px;

}

	a:hover#redBox {
	background-color: rgb(255,102,153);
	-webkit-box-shadow: inset 2px 2px 1px #888 ;
	box-shadow: inset 2px 2px 1px #888 ;
}

#amberBox{ 
	background-color: rgb(255,153,51);
	margin-top: 2px;
	float: left;
	height:20px;
	width:20px;
}

	a:hover#amberBox {
	background-color: rgb(255,204,102);
	-webkit-box-shadow: inset 2px 2px 1px #888 ;
	box-shadow: inset 2px 2px 1px #888 ;

}

#greenBox{
	background-color: rgb(51,153,51);
	margin-top: 2px;
	float: left;
	height:20px;
	width:20px;
}

	a:hover#greenBox {
	background-color: rgb(102,204,102);
	-webkit-box-shadow: inset 2px 2px 1px #888 ;
	box-shadow: inset 2px  2px 1px #888 ;
}
#blueBox{
	background-color: rgb(25,25,225);
	margin-top: 2px;
	float: left;
	height:20px;
	width:20px;
}

	a:hover#blueBox {
	background-color: rgb(65,105,225);
	-webkit-box-shadow: inset 2px 2px 1px #888 ;
	box-shadow: inset 2px 2px 1px #888 ;
}


.backBox{
	padding:0;margin:0;
	background-color: rgb(255,0,102);
	text-align:center;
	float: right;
	height:20px;
	width:50px;
}

 
/*text control*/
.smallText {
 	font-size: 1em;
 	line-height: 1.5em;
 	color:rgb(255,255,255);
 	padding: 0;
 	margin-top: 0;
 	margin-bottom: 1em;
 	margin-left:5px;
 	margin-right:5px;
 }
 
.bulletText {
 	font-size: 1.5em;
 	line-height: 1.5em;
 	color:rgb(255,255,255);
 	padding: 0;
 	margin-top: 0;
 	margin-bottom: 1em;
 	margin-left:20px;
 	margin-right:5px;
 }


.bigText {
 	color:rgb(255,255,255);
 	text-align: center;
 	font-size:3em;
 	line-height: 1.5em;
 	padding: 0;
 	margin-top: 0;
 	margin-right: 0;
 	margin-bottom: 1em;
 	margin-left: 0;
  }
  
.bodyText {
 	font-size: 12px;
 	line-height: 14.5px;;
 	color:rgb(51,51,51);
 	padding: 0;
 	margin-top: 0;
 	margin-bottom: 1em;
 	margin-left:5px;
 	margin-right:5px;}
 
.emph {
  	font-size: 12px;
 	line-height: 14.5px;;
 	color:rgb(153,0,0);
 	padding: 0;
 	margin-top: 0;
 	margin-bottom: 1em;
 	margin-left:5px;
 	margin-right:5px;}

/*front page*/
.wordBox{
	border-radius: 15px;
	float: left;
	height:230px;
	width:310px;
	background-color: rgb(255,0,102);
	margin-bottom:13px;
	margin-right:13px;
 }
 
.wordBox:hover{
	-webkit-box-shadow: 5px 5px 7px #888;
	box-shadow: 5px 5px 7px #888;}
  
.webBox{
	border-radius: 15px;
	float: left;
	height:230px;
	width:310px;
	background-color: rgb(255,153,51);
	margin-bottom:13px;
	margin-right:13px;
 }
  
.webBox:hover{
	-webkit-box-shadow: 5px 5px 7px #888;
	box-shadow: 5px 5px 7px #888;}  
  
.imageBox{
	border-radius: 15px;
	float: left;
	height:230px;
	width:310px;
	background-color: rgb(51,153,51);
	margin-bottom:13px;
	margin-right:13px;

 }

.imageBox:hover{
	-webkit-box-shadow: 5px 5px 7px #888;
	box-shadow: 5px 5px 7px #888;}
	
.researchBox{
	border-radius: 15px;
	float: left;
	height:230px;
	width:310px;
	background-color: rgb(25,25,225);
	margin-bottom:13px;
    margin-right:13px;

 }

.researchBox:hover{
	-webkit-box-shadow: 5px 5px 7px #888;
	box-shadow: 5px 5px 7px #888;}

/*generic*/   
a:link { 
  	color: rgb(255, 255, 255);
  	text-decoration: none;
    }
    
a:visited { 
  	color: rgb(255, 255, 255);
  	text-decoration: none;
    }
     
a:hover { 
  	color: rgb(238, 238, 224);
  	text-decoration: none;
    }

a:active { 
  	color: rgb(255, 255, 255);
    }

 
h1{
	font-size:1.6em;
 	line-height:1.5em;
 	color:rgb(255,255,255);
 	text-align: center;
 }
 
h2{
 	font-size: 1.3em;
 	line-height: 1.5em;
 	color:rgb(255,255,255);
 	text-align: center;
 }
 
h3{
 	font-size: 1.2em;
 	color:rgb(255,255,255);
 	font-weight:normal;
 	text-align: left;
 }


/*themed page elements*/

   
.wordContainer{
 	height:495px;
 	width:78%;
 	border:5px solid rgb(255,0,102);
 	background-color:rgb(238, 238, 224);
 }
 
.longContainer{
 	width:78%;
 	border:5px solid rgb(255,0,102);
 	background-color:rgb(238, 238, 224);
 }

 
.webContainer{
 	height:495px;
 	width:78%;
 	border:5px solid rgb(255,153,51);
 	background-color:rgb(238, 238, 224);
 }
.imageContainer{
 	height:495px;
 	width:78%;
 	border:5px solid rgb(51,153,51);
 	background-color:rgb(238, 238, 224);
 }
 
.researchContainer{
 	height:495px;
 	width:78%;
 	border:5px solid rgb(25,25,225);
 	background-color:rgb(238, 238, 224);
 }

 
.contactContainer{
 	height:495px;
 	width:78%;
 	border:5px solid rgb(0,0,0);
 	background-color:rgb(238, 238, 224);
 }

 
.wordContainer h2 { 
  	margin-left: 5px; 
  	text-align: left; 
  	color: rgb(153, 0, 0);
    font-size: 1.4em;
    font-weight: bold;
    }

.wordContainer h3 { 
    text-align: left; 
 	margin-left: 5px;
  	color: rgb(0, 0, 153);
    font-size: 1.3em;
    }
    
.wordContainer a:link,  .wordContainer a:visited {
	color: rgb(153, 0, 0);
	font-weight: normal;
	text-decoration: none;
	font-size: 12px;
	}

 .wordContainer a:hover{color:rgb(0,0,153);}
 .wordContainer a:active{color:rgb(51,51,51);}

.webContainer  h2 { 
  	margin-left: 5px; 
  	text-align: left; 
  	color: rgb(153, 0, 0);
    font-size: 1.4em;
    font-weight: bold;
    }

.webContainer h3 { 
    text-align: left; 
 	margin-left: 5px;
  	color: rgb(0, 0, 153);
    font-size: 1.3em;
    }
    
.webContainer a, .webContainer a:link, .webContainer a:visited {
    color: rgb(153, 0, 0);
	font-weight: normal;
	text-decoration: none;	
	font-size: 12px;
	}
	
.webContainer a:hover{color:rgb(0,0,153);}
.webContainer a:active{color:rgb(51,51,51);}

.imageContainer  h2 { 
  	margin-left: 5px; 
  	text-align: left; 
  	color: rgb(153, 0, 0);
    font-size: 1.4em;
    font-weight: bold;
    }

.imageContainer h3 { 
    text-align: left; 
 	margin-left: 5px;
  	color: rgb(0, 0, 153);
    font-size: 1.3em;
    }
    
.imageContainer a, .imageContainer a:link, .imageContainer a:visited {
    color: rgb(153, 0, 0);
	font-weight: normal;
	text-decoration: none;	
	font-size: 12px;
	}
	
.imageContainer a:hover{color:rgb(0,0,153);}
.imageContainer a:active{color:rgb(51,51,51);}

.longContainer  h2 { 
  	margin-left: 5px; 
  	text-align: left; 
  	color: rgb(153, 0, 0);
    font-size: 1.4em;
    font-weight: bold;
    }

 
.longContainer h3 { 
    text-align: left; 
 	margin-left: 5px;
  	color: rgb(0, 0, 153);
    font-size: 1.3em;
    }
    
.longContainer a, .longContainer a:link, .longContainer a:visited {
    color: rgb(153, 0, 0);
	font-weight: normal;
	text-decoration: none;	
	font-size: 12px;
	}
	
.longContainer a:hover{color:rgb(0,0,153);}
.longContainer a:active{color:rgb(51,51,51);}
 
.contactContainer  h2 { 
  	margin-left: 5px; 
  	text-align: left; 
  	color: rgb(153, 0, 0);
    font-size: 1.4em;
    font-weight: bold;
    }

                  
.contactContainer h3 { 
    text-align: left; 
 	margin-left: 5px;
  	color: rgb(0, 0, 153);
    font-size: 1.3em;
    }
    
.contactContainer a, .contactContainer a:link, .contactContainer a:visited {
    color: rgb(153, 0, 0);
	font-weight: normal;
	text-decoration: none;	
	font-size: 12px;
	}
	
.contactContainer a:hover{color:rgb(0,0,153);}
.contactContainer a:active{color:rgb(51,51,51);}
 
.researchContainer h2 { 
  	margin-left: 5px; 
  	text-align: left; 
  	color: rgb(153, 0, 0);
    font-size: 1.4em;
    font-weight: bold;
    }

.researchContainer h3 { 
    text-align: left; 
 	margin-left: 5px;
  	color: rgb(0, 0, 153);
    font-size: 1.3em;
    }
    
.researchContainer a:link,  .researchContainer a:visited {
	color: rgb(153, 0, 0);
	font-weight: normal;
	text-decoration: none;
	font-size: 12px;
	}

.researchContainer a:hover{color:rgb(0,0,153);}
.researchContainer a:active{color:rgb(51,51,51);}
 
.eventContainer{
/*  height:980px; */
 	width:78%;
 	border:5px solid rgb(255,0,102);
 	background-color:rgb(238, 238, 224);}

.eventContainer  h2 { 
  	margin-left: 5px; 
  	text-align: left; 
  	color: rgb(153, 0, 0);
    font-size: 1.4em;
    font-weight: bold;
    }

.eventContainer h3 { 
    text-align: left; 
 	margin-left: 5px;
  	color: rgb(0, 0, 153);
    font-size: 1.3em;
    }
    
.eventContainer a, .eventContainer a:link, .eventContainer a:visited {
    color: rgb(153, 0, 0);
	font-weight: normal;
	text-decoration: none;	
	font-size: 12px;
	}
	
.eventContainer a:hover{color:rgb(0,0,153);}
.eventContainer a:active{color:rgb(51,51,51);}

/*photo gallery*/
.photoPort{
 	float:right;
 	height:300px;
 	width:200px;
 	background-color: rgb(51,51,51);
 	margin-right:20px;
 	-webkit-box-shadow: 5px 5px 7px #888;
	box-shadow: 5px 5px 7px #888;}
.photoLand{
 	float:left;
 	height:200px;
 	width:300px;
 	background-color: rgb(51,51,51);
 	margin-bottom:5px;
 	margin-left:5px;
	-webkit-box-shadow: 5px 5px 7px #888;
	box-shadow: 5px 5px 7px #888;}
  
  /*portfolio table*/
.td30 {
 	width: 30%;
 	vertical-align: top;
 }
.td70 {
 	width: 70%;
 	vertical-align: top;
 }
 
.linktable{
	 margin-left: auto;
	margin-right:auto;
	 width:99%;
	

 }
.linktable p{font-size:1.2em;}

/*portfolio nav - here because of odd FF issue*/
.backBox a, .backBox a:link, .backBox a:visited{ 
  	color: rgb(255, 255, 255);margin-top:3px;display:block;}
  	
.backBox  a:hover {color: rgb(255, 255, 255);background-color: rgb(255,102,153);margin-top:3px;}
 .backBox a:active{color: rgb(255, 255, 255);}