@charset "UTF-8";
/* CSS Document */

/* background color: purple */
body {
	background-color:#894BB7;
}

/* Links */	
a:link{
         color:#9C3081;
         text-decoration: none;
}
a:visited{ 
          color:#660066;
          text-decoration: none;

}
a:active{  
         color:#9900FF;
         text-decoration: none;
}
a:hover{
	color:#007FFF;
	text-decoration: underline;
	font-family: Arial, Helvetica, sans-serif;
}

/* Use this class on external links.  It places an image that indicates an external link and is helpful for users. */
a.external{background:url(../images/External.png) center right no-repeat; padding-right:15px;}

/* Main Div.  It is centered!  Note: The line height is the space between lines of text.  Having a bigger line height value makes the page easier to read. */
#center {
	width:70.8em;
	height:100%;
	margin-left:auto;
	margin-right:auto;
	top:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:13px;
	line-height:20px;
	padding:13px;
	background-color: #FFF;
}

/* Bottom section of the page that contain the copyright info and banners.  It is meant to sit at the end of the page no matter how long the main div is. */ 
#footer{
	width:59.2em;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	background-color: #CC3299;
}

/* Div that holds the social media images.  Note that the position is relative.  This means that the position of the div is based upon where in the div it is placed.  Be careful adjusting it. */  
#other{
	position:relative;
	left:645px;
	top:130px;
	width:21em;
	color:#fff;
}

/* Making sure that linked images do not have a border */
img {
	border:none;
}

/* Font Styles */
h1 {
	font-family:"Arial Black", Gadget, sans-serif;
	color:#E4A123;
	text-align: center;
	font-size:20px;	
}
h2 {
	font-family:"Arial Black", Gadget, sans-serif;
	color:#F3AD24;
	text-align:left;
	font-size:24px;
}
h3 {
	font-family:Arial, Helvetica, sans-serif;
	color:#000;
	font-size:15px;
	text-align:left;
}
h4 {
	font-family:Arial, Helvetica, sans-serif;
	color:#000;
	font-size:13px;
	text-align:center;
}
h5 {
	font-size:10px;
	color:#CFD0C4;
}
h6 {
	font-size:20px;
}

/* Padding for hr image.  I probably should have named it somthing better.  Sorry.  */
.class{
	padding:10px;
	text-align:center;
}

/* Center images It probably should be changed to a div class rather than an Id.  Oh well. */
#centered {
	display: table;
	margin-left: auto;
	margin-right: auto;;
	}

/* Aligns text to center */
.center{
	text-align:center;
}

/* Main use is centering the videos on the robot pages.  Again I appologize for the name. */
.centerlinks{
	text-align:left;
	font-size:17px;
	padding-left:130px;
}

/* A div made for quotes.  It is used on the "About FIRST" page */
.quotebox {
	background-color: #F9F9F9; 
	border: 1px solid #CCCCCC; 
	padding: 4px; 
	font: 11px/1.4em Arial, sans-serif;
	 height:44px;
	 width:600px;
	 font-size:12px;
	 } 
	 
/* Code for picture captions adapted by team members from labnol.org.  This code allows for images with captions! */
.picture {
	background-color: #F9F9F9; 
	border: 1px solid #CCCCCC; 
	padding: 6px; 
	font: 11px/1.4em Arial, sans-serif;
	 } 
.picture img { 
	border: 1.5px solid #CCCCCC; 
	vertical-align:middle;
 	margin-bottom: 3px;
 	padding:4px;
  } 

/* The following is if you want to the picture to be aligned right. */	
.right { 
	margin: 1em 0pt 1em 1em; 
	float:right; 
	padding-right:4px;
	} 
	
/* The following is if you want to the picture to be aligned left. */	
.left { 
	margin: 0.5em 0.8em 0.5em 0; 
	float:left;
	padding:4px;
	}

/* The following are for the contact form submissions.  If the page is submitted properly the text would be green.  If not, it would be red. */
.red{
	color:#C00;
}
.green{
	color:#393;
}