/*-------------------------------------------------------------------------------------------------------
Core StyleSheet

Version: 1.0
Date: 20 November 2006
Author: Syed Latif
-------------------------------------------------------------------------------------------------------*/
body {
	background: #EDEDED;
	font-family: Arial, Helvetica, sans-serif;	
	font-size: 62.5%;
	margin: 0;
	padding: 10px 0 0 0;
	text-align: center;
	}
	
#wrapper{
	width: 720px;
	padding: 0;
	margin: 0 auto;
	text-align: left;
	font-size:1.2em;
	background: #FFFFFF url(../images/bg-TwoColumn.gif);
	position: relative;
	}
	
body.oneColumn #wrapper{
	background: #FFFFFF url(../images/bg-OneColumn.gif);
	}
	

/* =Header
-------------------------------------------------------------------------------------------------------*/
#Header{
	background: #000000 url(../images/bgTop.gif) no-repeat top;
	height: 120px;
	position: relative;
	
	}

#BrandingLogo {
	position: absolute;
	top:10px;
	left: 15px;
	}
#BrandingLogo img {
	display: block;
	width: 0; /*Hides lo-fi logo*/
	}
#BrandingLogo a { /*Keeps logo area clickable to return to Homepage */
	display: block;
	width: 310px;
	height: 75px;
	border: none;
	}

#BrandingNav, #PrimarilyNav{	
	position: absolute;
	right: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	}
	
#BrandingNav {
	top: 10px;	
	}	
	
#PrimarilyNav {
	bottom: 0;
	width: 718px;
	font-size: 90%;
	background: #CC0000 url(../images/primNavBg.gif) repeat-x top;
	border-left: 1px solid #AFAFAF;	
	border-right: 1px solid #AFAFAF; 
	border-top: 1px solid #333333;
	border-bottom: 1px solid #000000; 
	}

#BrandingNav li, #PrimarilyNav li{
	list-style-type: none;
	float: left;
	}
	
#BrandingNav a, #PrimarilyNav a{
	text-decoration: none;
	text-transform: capitalize;
	font-weight: bold;
	}
	
#PrimarilyNav a{
	display: block;
	line-height: 2.1em;
	color:#000000;
	border-left: 1px solid #CC3333;
	border-right: 1px solid #000000;
	background-image: none;
	padding: 0 4em;
	}
	
#BrandingNav a{
	color:#ffffff;
	background:  url(../images/icon_home.gif) no-repeat 0 50%;
	padding: 0 2em;
	}
	
#BrandingNav a.active, #BrandingNav a:hover{
	color:#00ccff;
	background:  url(../images/icon_home_hov.gif) no-repeat 0 50%;
	}
	
#BrandingNav a#smap{
	background:  url(../images/icon_sitemap.gif) no-repeat 0 50%;
	}
	
#BrandingNav a.active#smap, #BrandingNav a:hover#smap{
	background:  url(../images/icon_sitemap_hov.gif) no-repeat 0 50%;
	}
	
#BrandingNav a#contact{
	background:  url(../images/icon_contact.gif) no-repeat 0 50%;
	}
	
#BrandingNav a.active#contact, #BrandingNav a:hover#contact{
	background:  url(../images/icon_contact_hov.gif) no-repeat 0 50%;
	}

#PrimarilyNav a.active, #PrimarilyNav a:hover {
	color: #FFFFFF;
	border-left: 1px solid #AFAFAF;
	background: url(../images/primNavBgHov.gif) repeat-x top;
	} 

/*You are here effect */	
body#profile #profile_tab a, body#designs #designs_tab a {
	color: #000000;
	border-left: 1px solid #AFAFAF ;
	background: url(../images/primNavbgHere.gif) repeat-x top;
	}

 
/* =Content
-------------------------------------------------------------------------------------------------------*/
#PrimaryContent {
	float: left;
	width: 500px;
	min-height: 400px; /*Sets the Minimum Height for the content ares */
	}

/* Minimum Height hack for Internet Explorer */
/*\*/
* html #PrimaryContent {
height: 400px;
}
/**/


body.oneColumn #PrimaryContent { 
	width: 710px;
	}
	
#PrimaryContent p {
	padding: 10px;
	margin: 0;
	}

#PrimaryContent h1, #PrimaryContent h2,
#PrimaryContent h3,#PrimaryContent h4{
	padding: 10px;
	margin: 0px;
	color: #CC0000;
	}

#PrimaryContent h1 {
	font-size: 1.8em;
	border-bottom: 1px solid #CC0000;
	padding-bottom: 0;
	}

#PrimaryContent h2 {
	font-size: 1.4em;
	background:url(../images/h2icon.gif) no-repeat left center;
	padding-left: 25px;
	margin-left: 10px;
	}
	
#PrimaryContent a:link, #PrimaryContent a:visited {
	color: #CC0000;
	text-decoration: none;
	padding: 0 2px;
	background: #EDEDED;
	border-bottom: 1px dashed #CC0000;
	}
	
#PrimaryContent a:hover {
	border-bottom: 1px solid #CC0000;
	}
	
#PrimaryContent a.external {
	background: #EDEDED url(../images/extLink.gif) no-repeat right top !important;
	padding-right: 14px !important;
	}
	
.drop {
	float: left;
	font-size: 4em;
	line-height: 1em;
	margin: 4px 10px 10px 0;
	padding: 4px 10px;
	border: 2px solid #CC0000;
	background: #EDEDED;
	font-family: "Times New Roman", Times, serif;
	}

/*Form stylings */
	
fieldset {
	margin: 1em;
	padding: 1em;
	border: 1px solid #CC0000;
	}

legend {
	color: #CC0000;
	font-weight: bold;
	background: #EDEDED;
	border: 1px solid #CC0000;
	padding: 4px 8px;
	} 

label {
	width: 10em;
	float: left;
	text-align: right;
	margin-right: 1em;
	display: block;
	}

.required {
	display: block;
	color: #CC0000;
	font-size: 0.8em;
	}
	
input[type="text"], textarea {
	width: 200px;
	background: #EDEDED;
	border: 1px solid #AFAFAF;
	}

input.radio, input.checkbox, input.submit {
	width: auto;
	margin: 0, 30px;
	} 	

textarea {
	width: 300px;
	}

.stronger {
	font-weight: bold;	
	}
	
#formbutton {
	margin-left: 25px;
	border: 1px solid #1F1F1F;
	background: #CC9797;
	font-weight: bold;
	color: #1F1F1F;
	}

/* PrimaryContent Image stylings */	
.img-right {
   float: right;
   margin: 2px 0px 2px 10px;
   background-color: #FFFFFF;
   border: 1px solid #AFAFAF;
   padding: 4px;
} 

.img-left {
   float: left;
   margin: 2px 10px 2px 0px;
   background-color: #FFFFFF;
   border: 1px solid #AFAFAF;
   padding: 4px;
} 

.img-wrap {
   margin: 2px 0px 2px 10px;
   background-color: #FFFFFF;
   border: 1px solid #AFAFAF;
   padding: 4px;
} 




	
/* =SecondaryNav
-------------------------------------------------------------------------------------------------------*/
#SecondaryNav {
	width: 200px;
	float: right;
	padding: 35px 0 0 0;
	margin: 0;
	position: relative;
	}

#SecondaryNav li{
	list-style-type: none;
	}
	
#SecondaryNav li a {
	display: block;
	height: 25px;
	line-height: 25px;
	text-decoration: none;
	color: #FFFFFF;
	text-indent: 40px;
	background: url(../images/secNavBg.gif) no-repeat left top;
	font-weight: bold;
	}
	
/*You are here effect */	
#SecondaryNav li#here a{
	background: url(../images/secNavBg.gif) no-repeat center top;
	color: #333333;
	}
	
#SecondaryNav li a.active, #SecondaryNav a:hover {
	
	background: url(../images/secNavBg.gif) no-repeat right top !important;
	}
	
body.oneColumn #SecondaryNav { 
	display: none; /*This hides the <SecondaryNav> in single column pages */
	}
	
/* =Footer
-------------------------------------------------------------------------------------------------------*/
#Footer {
	background: #EDEDED url(../images/bgBottom-TwoColumn.gif) no-repeat top;
	clear: both;
	width: 720px;
	font-size: 10px;
	color:#666666;
	text-align: right;
	margin: 0 auto;
	padding: 10px 0;
	position: relative;
	}
	
#FooterArea {
	width: 190px;
	background: url(../images/footerlogo.gif) no-repeat left top;
	position:absolute;
	right: 0;
	top: 0;
	margin: 20px 0;
	padding-bottom:10px;
	}
	
body.oneColumn #Footer {	
	background: #EDEDED url(../images/bgBottom-OneColumn.gif) no-repeat top;
	}