/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }

body {
	background: #221a2f url(../images/bg.jpg) repeat-x fixed top;
	color: #b3b3b3;
	font-family: arial, "lucida console", sans-serif;
	font-size: 11px;
	text-align: center; /* centering the content for IE6 */
	line-height: 11px;
}

a {
	color: #b3b3b3;
}

#logo {
	float:left;
	margin-left:65px;
	margin-right:0px;
}

.wrapper {
	display:table; /* must put this in for FireFox. */
	width:890px;
	margin:auto; /* for IE6 and Firfox centering */
	margin-bottom: 10px;
	text-align:left; /* so that IE6 and Firefox puts the text to the left*/
	height:0px; /* Have to put SOMETHING in here for the height for both browser. DO NOT put in a percentage, must be a pixel value */
}

.rule {
	float:left; /* float the menu to the left */
	width:20px;
	margin-left:-620px;
	height:100%; /* so the menu has the height of the main content and visa versa */
}

.content {
	float:left; /* float the content to the right */
	width:890px;
	height:100%;/* so the content has the height of the menu and visa versa */
}

.title {
	width: 270px;
	height: 60px;
	float: left;
}

.title_right {
	width: 240px;
	height: 100px;
}

.text_content_left {
	width:230px;
	margin-left: 20px;
	text-align:right;
}

.text_content_right {
	width:200px;
	padding-left: 20px;
	padding-bottom: 30px;
	padding-right: 20px;
}
.text_content {
	width:560px;
	float: left;
	margin-left: 20px;
	padding-top: 20px;
	padding-left: 20px;
	padding-bottom: 30px;
	padding-right: 20px;
}

.table_text{
	font-size: 11px;
	line-height: 11px;
	padding-right:10px;
}

.table_text td{
	padding-right: 20px;
}

#header {
	height:82px;
	background: #270a2f url(../images/header_repeater.jpg);
}

.nav_spacer {
	float:left;
	background: url(../images/rule_nav.jpg);
	width:9px;
	height:15px;
	margin-top:61px;
	margin-left:26px;
	margin-right:26px;
}

.nav {
	float:left;
	margin-top:61px;
}

.nav a {
	text-decoration:none;
	color:#FFFFFF;
}

.nav a:hover {
	color:#b400ff;
}

h1 {
	font-size: 14px;
	color:#8e4bab;
	font-weight: bolder;
	font-variant:small-caps;
}

.form_row {
	margin-bottom:7px;
}

#sign_in {
	cursor: pointer;
	border: 0px none;
	margin: 0px;
	background:transparent none repeat scroll 0%;
}

.gallery_image {
	margin-right: 10px;
	margin-bottom: 10px;
	border: solid #FFFFFF 1px;
	padding: 1px;
	float: left;
}

.gallery_header {
	margin-bottom: 10px;
}

.rule_h {
	width:100%;
	height:1px;
	margin-top: 1px;
	margin-bottom: 1px;
}

.wrapper_rule_h_content_1 {
	display:table; /* must put this in for FireFox. */
	width:890px;
	margin:auto; /* for IE6 and Firfox centering */
	text-align:left; /* so that IE6 and Firefox puts the text to the left*/
	height:2px; /* Have to put SOMETHING in here for the height for both browser. DO NOT put in a percentage, must be a pixel value */
}

.wrapper_rule_h_content_2 {
	display:table; /* must put this in for FireFox. */
	width:890px;
	margin:auto; /* for IE6 and Firfox centering */
	margin-bottom: 10px;
	text-align:left; /* so that IE6 and Firefox puts the text to the left*/
	height:1px; /* Have to put SOMETHING in here for the height for both browser. DO NOT put in a percentage, must be a pixel value */
}

.clear {
	clear: both;
}

.error {
	border-color:#FF0000;
}

.errortext {
	color:#FF0000;
	margin-bottom:20px;
}

.section {
	display:table; /* must put this in for FireFox. */
	text-align:left; /* so that IE6 and Firefox puts the text to the left*/
	height:0px; /* Have to put SOMETHING in here for the height for both browser. DO NOT put in a percentage, must be a pixel value */
}


#login {
	position:absolute;
	padding:10px 0px;
	left: 50%;
	margin-left: -445px;
	width: 890px;
	display: none;
	opacity:0;
	filter:alpha(opacity=0);
}