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

* {
	margin: 0 auto;
	padding: 0 auto;
}

body {
	background-image: url(); /* We can change this but it's helping me program right now */ 
	background-color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-align: center;
}

a:visited {
	color: #df7aaf;
	text-decoration: underline;
}
 
a:link {
	color: #df7aaf;
	text-decoration: underline;
}
 
a:hover {
	text-decoration: none;
	color: #FC0;
	font-weight: normal;
}

h1 {
	color: #000000;
	font-size: 22px;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

h2 {
	color: #000000;
	font-size: 20px;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}
 
h3 {
	color: #000000;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

h4 {
	color: #000000;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

h5 {
	color: #000000;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

h6 {
	color: #000000;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

p {
	margin: 5px 0px 12px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #df7aaf;
}
 
 
ul {
	margin: 2px 0px 5px 10px;
}

table {
	margin: 0px 0px 0px 0px; 
}





/* Begin DIV specific definitions here - everything above this is default behavior before DIV classes are applied*/ 

/* left gutter div class definitions here id=leftgutter */ 
#leftgutter h1 {
	font-size: 30px;
	color: #df7aaf;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
	text-align:left;
}

#leftgutter h2 {
	font-size: 24px;
	margin-bottom: 5px; 
	color: #df7aaf ;
	font-family: Arial, Helvetica, sans-serif;
	text-align:left;
} 

#leftgutter h3 {
	font-size: 20px;
	color: #df7aaf;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
	text-align:left;
	
}
	
	

#leftgutter h4 {
	font-size: 18px;
	color: #df7aaf;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
	text-align:left;
}

#leftgutter h5 {
	font-size: 16px;
	color: #df7aaf;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
	text-align:left;
}

#leftgutter h6 {
	font-size: 14px;
	color: #df7aaf;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
	text-align:left;
}

#leftgutter p {
	font-size: 12px;
	/* top left bottom right */ 
	margin: 20px 0px 20px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
	text-align:left;
}

#leftgutter a:visited {
	color: #000000; 
	text-decoration:none ;
}

#leftgutter a:link {
	color: #000000; 
	text-decoration:none ;
}

#leftgutter a:hover {
	text-decoration: none;
	color: #df7aaf;
	font-weight: normal;
}

#leftgutter ul {
	margin: 2px 0px 5px 10px;
}



#body h1 {
	color: #df7aaf;
	font-size: 35px;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

#body h2 {
	margin-bottom: 5px;
	font-size: 30px ; 
	color: #df7aaf ;
	font-family: Arial, Helvetica, sans-serif;
} 

#body h3 {
	color: #df7aaf;
	font-size: 25px;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

#body h4 {
	font-size: 22px;
	color: #df7aaf;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

#body h5 {
	font-size: 20px;
	color: #df7aaf;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

#body h6 {
	font-size: 18px;
	color: #df7aaf;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}

#body p {
	font-size: 14px;
	margin: 10px 0px 10px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000000;
}

#body b {
	font-size: 14px;
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style:oblique
	color: #df7aaf;
}

#body a:visited {
	color: #000000;
	text-decoration: underline;
}

#body a:link {
	color: #000000;
	text-decoration: underline;
}

#body a:hover {
	text-decoration: none;
	color: #df7aaf;
	font-weight: none;
}

#body ul {
	margin: 2px 0px 5px 10px;
}



/* The next three TD specs control the site body cells - in particular the background and width of the gutters and main body content cell. 
   Note that the body cell is on auto align, so if the right gutter is turned off it will extend to the right until the end of the window 
   size defined by the .window class    IF YOU WANT TO CHANGE THE BACKGROUND OF THE GUTTERS AND BODY YOU DO IT HERE. IF YOU WANT A BACKGROUND 
   IMAGE IN THOSE THEN YOU DO IT HERE */ 

table.body { width: 1000px; 
			margin: 0px 0px 0px 0px;}
		

td.leftgutter {
	background-color: #a9dfe8;
	background-attachment: fixed;
	width: 300px;
	height: 100%;
	vertical-align:top left;
	text-align:left;
	margin: 0px 5px 0px 5px; 
}   
 
td.content {
	background-color: ;
	width: 700px;
	height: 100%;
	vertical-align: top;
	text-align:right;
	margin: 0px 0px 0px 0px;
	position: relative;
	right: 0px;
	top: 300px;
}

/* The entire window resides here - this is the box that floats inside the entire browser window THIS CONTROLS HOW THE CONTENT 
    WINDOW FLOATS IN THE BROWSER. YOU CAN SET WIDTH TO AUTO AND TAKE THE WHOLE WINDOW. THE GUTTERS WOULD STILL STAY FIXED 
	WIDTH, BUT THE BODY WOULD EXTEND. YOU CAN DO ALL KINDS OF NIFTY THINGS HERE TO THE WHOLE WINDOW BEHAVIOR */ 
.window {
	background-image: url(../images/Components/gray-gears-background.jpg);
	background-position: left top;
	background-repeat: no repeat;
	background-color: #ffffff;
	/* border: 1px solid #000000; */
	width: 1000px;
	float: top;
	/* top left bottom right */ 
	margin: 10px auto 10px auto;
	
}

/* div clear with a single underline puts an underline through the page where you want it. it's a marker */ 
.clear {
	clear: both;
	font-size: 1px;
	height: 1px;
	overflow: hidden;
	width: 1px;
}
/* Not actually being used but it's a good example */ 
.hidden {
	visibility: hidden;
}
/* Not actually being used but it's a good example */ 
.visible {
	visibility: hidden;
}