@charset "UTF-8";
/* CSS Document, Omar Torrez EP landing page */

body, h1, h2, h3, h4, h5, h6, blockquote, p, img{
	margin: 0;
	padding: 0;
}

#main {  /* centers site in browser window */
	width:989px;
	height: 831px;
	float: none;
	margin:0 auto;
	padding:0px;
	background-color: #fff;
	}
	
#header {
	background-image: url(header.jpg);
	position: relative;
	width: 989px;
	height: 370px;
	background-color: #fff;
	padding: 0;
	margin: 0;
	}
	
/* defines the size of the anchor element to be used as the image map*/

a#imagemap {  
	position: absolute;
	width: 182px;
	height: 45px;
	top: 3px;
	left: 223px;
	padding: 0;
	margin: 0;
	Z-index:1;
	display: block;
	}

/*  makes the text transparent  */

p#imagemap {
	filter: alpha(opacity= 0.0);
	-moz-opacity: 0.0;
	opacity: 0.0;
	}
	
#likebutton {
	position: absolute;
	top: 184px;
	left: 126px;
	margin:0;
	padding: 0;
	}
	
#topspin {
	width: 335px;
	margin:0;
	padding:274px 0 0 200px;
	}
	
#masha {
	width: 300px;
	margin:0;
	padding:0px 0 45px 200px;
	}
		
#info_links {
	width: 989px;
	height:459px;
	margin:0;
	padding:0;
	background-color: #fff;
	}
	
#info {
	background-image: url(info2.jpg);
	width: 622px;
	height:459px;
	float: left;
	margin:0;
	padding:0;
	background-color: #fff;
	}
	
#michelle {
	margin:0;
	padding:20px 0 0 200px;
	}
	
#join {
	margin:90px 0 0 0;
	padding:0px 0 0 200px;
	}
	
#form {
	width: 622px;
	height:459px;
	float: left;
	margin:0;
	padding:0;
	background-color: #fff;
}
	
#content {
	position: relative;
	width:989px;
	margin: 0px 0 0 0;
	padding:0;
	background-color:#CC0099;
	}
		
#bio {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 989px;
	background-image: url(background.jpg);
	background-position: left top;
	background-repeat: repeat-y;
	background-color:#FFF;
	margin: 0px 0 0 0;
	padding: 0px 0px 30px 130px;
	}
	
#quotes {
	position: absolute;
	top: 0px;
	left: 634px;
	width: 200px;
	margin: 0;
	padding: 30px 0px 0 35px;
	
	}
	
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
	}
	
/* social media links: images_album with image hover, text offset */

ul#links {
	list-style-type: none; /* takes off ugly bullets */
	position: absolute:
	top: 371px;
	left: 622px;
	width:367px;
	height: 459px;
	float: right;
	margin:0;
	padding:0;
	background-color: #fff;
	}
	
li.links a { /* class rule for general specs, defines anchor (which no one will see anyway) */
	text-indent: -5000px; /* moves text out of browser*/
	display: block; /* turns li into a block element so you can apply bkgd image */
	width: 367px; 
	height: 459px;
	line-height: 25px;
	background: #ffffff url(index_10.jpg) no-repeat;
	text-transform: uppercase;
	text-decoration: none; /* takes off ugly underline, of course no one will see the text, so who cares */
	text-align: center;
	}
	
li#link1 a:link {
	background: #ffffff url(link1.jpg) no-repeat;
	height: 72px;
	}
li#link2 a:link { /* id rule for individual buttons */
	background: #ffffff url(link2.jpg) no-repeat;
	height: 71px;
	}	
li#link3 a:link {
	background: #ffffff url(link3.jpg) no-repeat;
	height: 71px;
	}
li#link4 a:link {
	background: #ffffff url(link4.jpg) no-repeat;
	height: 71px;
	}
li#link5 a:link {
	background: #ffffff url(link5.jpg) no-repeat;
	height: 78px;
	}
li#link6 a:link {
	background: #ffffff url(link6.jpg) no-repeat;
	height: 96px;
	}
	
/* set a:visited with original images_album */

li#link1 a:visited {
	background: #ffffff url(link1.jpg) no-repeat;
	height: 72px;
	}
li#link2 a:visited { /* id rule for individual buttons */
	background: #ffffff url(link2.jpg) no-repeat;
	height: 71px;
	}	
li#link3 a:visited {
	background: #ffffff url(link3.jpg) no-repeat;
	height: 71px;
	}
li#link4 a:visited {
	background: #ffffff url(link4.jpg) no-repeat;
	height: 71px;
	}
li#link5 a:visited {
	background: #ffffff url(link5.jpg) no-repeat;
	height: 78px;
	}
li#link6 a:visited {
	background: #ffffff url(link6.jpg) no-repeat;
	height: 96px;
	}
	
/* bring in individual hover jpgs for each button */

li#link1 a:hover {
	background: #ffffff url(roll_link1.jpg) no-repeat;
	height: 72px;
	}
li#link2 a:hover { /* id rule for individual buttons */
	background: #ffffff url(roll_link2.jpg) no-repeat;
	height: 71px;
	}	
li#link3 a:hover {
	background: #ffffff url(roll_link3.jpg) no-repeat;
	height: 71px;
	}
li#link4 a:hover {
	background: #ffffff url(roll_link4.jpg) no-repeat;
	height: 71px;
	}
li#link5 a:hover {
	background: #ffffff url(roll_link5.jpg) no-repeat;
	height: 78px;
	}
li#link6 a:hover {
	background: #ffffff url(roll_link6.jpg) no-repeat;
	height: 96px;
	}
	
/* bring in individual active jpgs for each button */

li#link1 a:active {
	background: #ffffff url(roll_link1.jpg) no-repeat;
	height: 72px;
	}
li#link2 a:active { /* id rule for individual buttons */
	background: #ffffff url(roll_link2.jpg) no-repeat;
	height: 71px;
	}	
li#link3 a:active {
	background: #ffffff url(roll_link3.jpg) no-repeat;
	height: 71px;
	}
li#link4 a:active {
	background: #ffffff url(roll_link4.jpg) no-repeat;
	height: 71px;
	}
li#link5 a:active {
	background: #ffffff url(roll_link5.jpg) no-repeat;
	height: 78px;
	}
li#link6 a:active {
	background: #ffffff url(roll_link6.jpg) no-repeat;
	height: 96px;
	}


/* end menu bar. my crazy scheme works, bwa ha ha ha, next, the world! */

/* main text anchors */
	
a:link {
	color: #fff;
	text-decoration: none;
	}
	
a:visited {
	color: #fff;
	text-decoration: none;
	}
	
a:hover {
	color: #fff;
	text-decoration: underline;
	}
	
h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 40px;
	font-weight: bold;
	line-height: 40px;
	color: #000;
	margin: -40px 0 3px 0;
	padding: 0;
	width: 504px;
	float: left;
}

h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-weight: bold;
	line-height: 20px;
	color: #F40000;
	margin: 14px 0 0 0;
	padding: 0;
	width: 504px;
	float: left;
}

h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	line-height: 22px;
	width: 989px;
	color: #F40000;
	margin: -60px 0 0 0;
	padding: 0;
	width: 504px;
	float: left;
}	

h4 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	line-height: 20px;
	color: #000;
	margin: 3px 0 0 0;
	padding: 0;
	width: 504px;
	float: left;
}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 22px;
	float: left;
	color: #000000;
	margin: 13px 0 0 0;
	}
	
p.formemail {
	font-family: "Arial Black", Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 22px;
	width: 290px;
	float: left;
	color: #000000;
	margin: 9px 0 0 0;
	padding: 0px 0 0 200px;
	}

p.form {
	font-family: "Arial Black", Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 22px;
	width: 163px;
	float: left;
	color: #000000;
	margin: 9px 0 0 0;
	padding:0px 0 20px 200px;
	}
	
p.formcountry {
	font-family: "Arial Black", Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 22px;
	width: 121px;
	float: left;
	color: #000000;
	margin: 9px 0 0 0;
	padding:0px 0 0 7px;
	}
	
p.bio {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 22px;
	width: 504px;
	float: left;
	color: #000;
	margin: 13px 0 0 0;
	}
	
p.quotes {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 22px;
	float: left;
	color: #fff;
	margin: 13px 0 0 0;
	}
	
#button {
	width: 20px;
	height: 20px;
	margin: 0px 0 0 200px;
	padding: 0 0 0 0px;
	}
	
p.contact {
	float: left;
	font-family: "Arial Black", Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 18px;
	color: #000000;
	margin: 0;
	padding: 0;
	}