@font-face
{
font-family: Futura;
src: url(fonts/2745D0_0_0.ttf);

}

@font-face
{
font-family: FuturaBold;
src: url(fonts/2745D0_1_0.ttf);
}


body {	
	margin:0 auto; 
	padding-top:0px; 
	font-family: Futura; 
}
	
p {
	text-align:right;
	Font-Size: 14pt;
	font-color: #a3298a;
}

hr {
	color: #a3298a;	
	align: center;
}

h1 {
	text-align:right;
	Font-Size: 16pt;
	font-color: #5e63ad;
	font-family: FuturaBold;
}

h2 {
	text-align:left;
	Font-Size: 16pt;
	font-family: FuturaBold;
}

	
ul {
	margin-top:150px;
	line-height: 40px;
}

  
img.outline {
 	border: 3px solid #000000;
}

input {
	width: 400px;
}

textarea {
	width: 400px;
}

.container {
	background-image:url(images/square-web-background-final.jpg);
	width:1025px; 
	margin-left:auto;
	margin-right:auto;
	background-color: #ffffff;
	border:thin solid #5e63ad;
	}  


#header {
	position: fixed;
	width: 1000px;
	height: 75px;
	background-color: rgba(94,99,173,0.7);
	padding: 20px 30px 40px 0px;
	font-size: 75px;
	color: #FFF;
	text-align: right;
	z-index: 100;
}  

#footer {
	background-color:#5e63ad;
	padding: 20px 20px 40px 20px;
	font-size:16px;	
	color: #fff;
	z-index:101;
}


#bottom_image {
	position: fixed;
	top:135px;
	z-index:50;
	opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
} 

#menu {

}

ul {
    color: #a3298a;
  }
  

ul#menu {  
    margin:10px; 
	padding:5px;  
	background-color: #ffffff;
	color: #000;
} 
 
ul#menu li {  
    margin-left:0px;
	color: #a3298a;  
}
  
ul#menu li a {  
	font-family: FuturaBold;
    text-decoration:none;  
    color:#a3298a;   
    font-size:20px;  
	letter-spacing:2px;	
    text-transform:lowercase;  
}  

ul#menu li a:active, ul#menu li a:hover {  
    color:#5e63ad;  
} 


#left_panel {
	float:left;
	width:235px;
	padding:150px 25px 25px 25px;
	background-color:#FFF;
}
	
#right_panel {
	float:left;
	background-color:#fff;
	width:550px;	
	padding:200px 20px 5px 25px;
	align:left;
	margin-left:105px;
}

#right_panel h1 {
    color:#a3298a;   
    font-size:26px;  
	letter-spacing:2px;	
    text-transform:lowercase; 
}

#right_panel h2 {
    color:#5e63ad;    
	letter-spacing:2px;	
}

#right_panel p {
    color:#5363ad;   
    font-size:19px;  
}

#right_panel img {
	border:thin solid #000;  
}
	
.caption {
	text-align:left;
	color:#a3298a;   
    font-size:20px;  
	padding-left:25px;
}
	


.center {   
	margin-left: auto;   
	margin-right: auto;   

}

.clear {clear:both};

	
a:link {
	color:black;
	text-decoration:none;
}

a:visited {
	color:black;
	text-decoration:none;
}

a:active, a:hover {
	color:#5363ad;
	text-decoration:underline;	
}


.spin {
  -webkit-transition:all 0.5s ease-out;
  -moz-transition:all 0.5s ease-out;
  -ms-transition:all 0.5s ease-out;
  -o-transition:all 0.5s ease-out;
  transition:all 0.5s ease-out;
}

.spin:hover {
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  transform:rotate(360deg);
}

/* This is CSS for the image gallery */

.gallerycontainer{
position: relative;
background-color:transparent; 
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 2px solid black;
margin: 0 5px 5px 0;

}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 2px solid #CC5200;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #e4f4f8;
padding: 5px;
left: -1000:px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
right: 10px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

/* This ends the CSS for the image gallery */