/*mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

	

	Sevenisima

  

  	Table of Contents

	1. Page Controls - Controls Page Constraints

	2. Color - Controls Base Colors

	3. Base Styling - Generic Styling for all Elements

	4. Generic Styling - Generic Styling Used Across Site 			

	5. Element Styling - Element Specific Styling

	6. Layout Options - Layout Options
	
	7. Form Controls

  

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm*/

/* Generic CSS Reset Import */
@import url("reset.css");

/*mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm 

	1. PAGE CONTROLS

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm*/



#wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	z-index:250;
}

#header {
	position: relative;
	width: 960px;
	height: 315px;
	margin: 0 auto;
	z-index: 1040;
}

#content { 
	position: relative;
	width:960px;
	height: 690px;
	padding: 0;
	margin: 0 auto;
	margin-top: 165px;
	z-index: 1050;
	overflow: hidden;
}

body.admin #content { top: -300px; }

#footer {
position: absolute;
top: 650px;
left: 50%;
margin-left: -480px;
z-index: 1000;
width: 960px;
}

p.ugcDis { width: 700px; margin: 30px auto; color: #fff; text-align: justify; padding-bottom: 10px;}

#bgContainer { position: absolute; top: 0; z-index: 950; }

/*mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm 

	2. COLORS

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm*/

#contentArea { color: #f9f9f6; }
#mainScroll a { color: #fff; text-decoration: underline; }
#mainScroll h4 { font-weight: bold; margin-bottom: 15px; color: #ff0; clear: both; }

.red { color: #f00;}

/*mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm 

	3. BASE STYLING

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm*/

html { overflow: -moz-scrollbars-vertical; height: 100%; }

body {
	font-family: Trebuchet, "Trebuchet MS", Verdana, Helvetica, sans-serif; 
	font-size:13px; 
	font-weight:normal;
	line-height: 1.1em;
	word-spacing: normal;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	text-indent:0;
	white-space: normal;
	background: #fff url(../images/skyandgrass_bg.jpg) 50% 0 no-repeat;
	height: 100%;
}
body.admin { background-color:#d7e8a7; }

h1 { font-size: 1.37em;	margin:0;  padding:0; }	

h2 { margin: 0 0 0.5em 0; line-height: 1.4em; font-size: 1.27em; padding:0; }

h3 { font-size: 1.1em; padding: 0; line-height: 1.4em; margin-bottom: 0.5em; margin-top:0px; }

h4, h5, h6 { margin:0 0 0.5em 0; font-size:1em; padding: 0; line-height:1.4em; }

p {	overflow: visible; padding-bottom:0.0em; margin-top: 0; line-height:1.4em; margin-bottom:1.2em; }

ul { line-height:1.4em; list-style-type:disc; list-style-position:outside; margin-left:1.6em;  margin-bottom:1.2em; }

a { text-decoration:none; }



/*mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm 

	4. GENERIC STYLING

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm*/

.floatLeft, .floatLeftSpace { float:left; }

.floatLeftSpace { padding:5px 10px 10px 0; }

.floatRight, .floatRightSpace, .floatRightMoreSpace { float:right; }

.floatRightSpace { padding:8px 0 8px 8px; }

.floatRightMoreSpace { margin:0 0 16px 16px; }

.clearBoth { clear:both; }

.clearLeft { clear:left; }

.clearRight { clear:right; }

.faintBorder { border:1px solid #d6d6d6; }

.faintBorderRight { border-right:1px solid #D6D6D6; }

.faintBorderLeft { border-left:1px solid #D6D6D6; }

.faintBorderBottom { border-bottom:1px solid #D6D6D6; }

.faintBorderTop { border-top:1px solid #D6D6D6; }

.smallText { font-size:small; }

.smallerText { font-size:x-small; }

.extraSmallText { font-size:1em; }

.mediumText { font-size:1.2em; }

.largeText { font-size:1.5em; }

.hidden { display:none; }

.noBottomMargin { margin-bottom:0 !important; }

.noBorder { border:none !important; }

.noRborder { border-right:none !important; }

ul.nobullets { list-style:none; list-style-type:none; }

ul.arrows { list-style-image:url(../images/bulletArrows.gif) !important; }

ul.doublearrows { list-style-image:url(../images/doubleArrows.gif) !important; }

ol { list-style-type: decimal; }
ol li { margin: 0px 0px 15px 25px; }

.lastFeature { border-bottom:2px solid #98BF4B; padding-bottom:1em; }

.noLeftMargin { margin-left:0 !important; }

.noTopMargin { margin-top: 0 !important; }

.noTopPadding { padding-top: 0 !important; }

.center { text-align: center; }

.closeButton { margin-right: 175px; margin-top: 5px; color: #FFFF00; font-weight: bold; text-decoration: underline; }

.headerBack { text-align: right; padding-right: 25px; color: #fff; }
.headerBack a { color: #fff; text-decoration: underline; }


/*mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm 

	5. ELEMENT STYLING

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm*/

dl.regs dt { display: block; float: left; width: 300px;margin-right: 20px; }
dl.regs dd { margin-bottom: 15px; margin-left: 325px; }

#missing-flash { display: none; }

#wrapperBG { 
width:100%;
left:0;
margin:0;
/*min-height:600px;*/
min-width:900px;
position:absolute;
top:0;
z-index:0;
}

#grassBG {
position: absolute;
bottom: 0;
left: 0;
z-index: 25;
width: 100%;
}

#bgElements {
position: absolute;
top: 100px;
left: 50%;
margin-left: -480px;
z-index: 850;
width: 960px;
}

#bgElements #canGana { position: absolute; left: -75px; top: 225px;}
#bgElements #bubbles { position: relative; top: 150px; left: 800px; float: left;}

/* Alegria */
#bgElements .bgElemDenise { position: relative; left: -250px; float: left;}
#bgElements #bgElemCan { position: absolute; left: 775px; bottom: 30px; width: 350px; height: 425px;}

/* Energia */
#bgElements .bgElemFamily { position: relative; left: -200px; float: left;}
#bgElements #bgElemCanRight { position: absolute; left: 774px; bottom: 21px; width: 350px; height: 425px;}

/* Vida */
#bgElements #bgElemCanLeft { position: absolute; left: -127px; top: 185px; width: 350px; height: 425px;}
#bgElements .bgElemRope { position: relative; top: 50px; left: 700px; float: left;}

/* Home page */
#bgHome {
position: absolute;
top: 0;
left: 50%;
margin-left: -480px;
z-index: 9000;
width: 960px;
}
#bgHome #bgElemHome { position: absolute; left: -124px; top: 150px; width: 1205px; height: 565px; z-index: 9000; }

#clusters {
	position: absolute;
	top: 0;
	z-index: 150;
}

/* ||||| Boxes ||||| */

#largeBox {
	position: relative;
	width: 532px;
	height: 472px;
	background: url(../images/boxTest.png) no-repeat;
	z-index: 50;
	margin: 0 auto;
}
#largeBox.fullBox {
	position: relative;
	width: 960px;
	height: 472px;
	background: url(../images/boxFull.png) no-repeat;
	z-index: 50;
}

#largeBox .sectionHeader {
	height: 35px;
	padding: 30px 0px 15px 36px;
}
	
#largeBox .sectionHeader h2 { 
	color: #ffff00;
	font-size: 19px;
	font-weight: 100;
}

#largeBox #contentArea {
	position: relative;
	width: 460px;
	margin: 0 auto;
	z-index: 900;
}
#largeBox.fullBox #contentArea { width: 888px; }

#largeBox #contentArea h3 {
	color: #ffff00;
	font-size: 22px;
	font-weight: 100;
}

#lyrics { display: none; }

/* ||||| nav box ||||| */

	#boxNav {
		height: 400px;
		width: 725px;
		margin: 0 auto;
		position: relative;
		z-index: 50;
	}
	#boxNav #navCol { float: left; width: 180px; }
	#boxNav #navCol .onBox { position: relative; width: 177px; height: 78px; background: url(../images/boxNav_on.png) no-repeat; }
    #boxNav #navCol .offBox { position: relative; width: 177px; height: 156px; background: url(../images/boxNav_off.png) no-repeat; }
	#boxNav #navCol .sectionHeader { padding:20px 0 5px 25px; }
	#boxNav #navCol .contentArea { padding:0px 25px 0px 25px; }
	
	#boxNav #navCol h3 { color: #ff0; font-size: 17px; font-weight: 100; line-height: 18px; }
	#boxNav #navCol p { color: #fff; font-size: 11px; }	
	#boxNav #navCol a.verMas { text-indent: -9000px; width: 57px; height: 18px; background: url(../images/buttonVerMasRoll.png) 0px -20px no-repeat; display: block; position: absolute; right: 20px; bottom: 15px; }
	#boxNav #navCol a.verMas:hover { background-position: 0 -2px; }
	#boxNav #midBox { margin-left: 185px; width: 535px; height: 390px; background: url(../images/boxMid.png) no-repeat; }
	#midBox .sectionHeader {
		height: 35px;
		padding: 30px 0px 15px 36px;
	}
		
	#midBox .sectionHeader h2 { 
		color: #ffff00;
		font-size: 19px;
		font-weight: 100;
	}
	#midBox #contentArea {
	position: relative;
	margin: 0 auto;
	width: 460px;
	z-index: 900;
	}
	#midBox #contentArea h3 {
	color: #ffff00;
	font-size: 22px;
	font-weight: 100;
	}



/* ||||| nav box ||||| */

	#regBoxNav {
		height: 400px;
		width: 775px;
		margin: 0 auto;
		position: relative;
		z-index: 50;
	}
	#regBoxNav #navCol { float: left; width: 230px; }
	#regBoxNav #navCol .onBox { position: relative; width: 177px; height: 78px; background: url(../images/boxNav_on.png) no-repeat; }
    #regBoxNav #navCol .offBox { position: relative; width: 230px; height: 205px; background: url(../images/boxNav_off.png) no-repeat; }
	#regBoxNav #navCol .sectionHeader { padding:20px 0 5px 25px; }
	#regBoxNav #navCol .contentArea { padding:60px 25px 0px 45px; }
	
	#regBoxNav #navCol h3 { color: #ff0; font-size: 17px; font-weight: 100; line-height: 18px; }
	#regBoxNav #navCol p { color: #fff; font-size: 11px; }	
	#regBoxNav #navCol a.verMas { text-indent: -9000px; width: 57px; height: 18px; background: url(../images/buttonVerMas.png) no-repeat; display: block; position: absolute; right: 20px; bottom: 15px; }
	#regBoxNav #midBox { margin-left: 235px; width: 535px; height: 530px; background: url(../images/boxMid.png) no-repeat; }
	#regMidBox .sectionHeader {
		height: 35px;
		padding: 30px 0px 15px 36px;
	}
	img.navDeco { position: absolute; top: 00px; left: -10px; }
		
	#regMidBox .sectionHeader h2 { 
		color: #ffff00;
		font-size: 19px;
		font-weight: 100;
	}
	#regMidBox #contentArea {
	position: relative;
	margin: 0 auto;
	width: 460px;
	z-index: 900;
	}
	#regMidBox #contentArea h3 {
	color: #ffff00;
	font-size: 22px;
	font-weight: 100;
	}




/* ||||| decorative extras ||||| */
#largeBox img.butterfly, #boxNav #midBox img.butterfly{
	position: absolute;
	z-index: 100;
	right: 75px;
	top: 0px;
}
#largeBox img.daisy, #boxNav #midBox img.daisy {
	position: absolute;
	z-index: 90;
	right: -10px;
	top: 20px;
}


/* ||||| Main Navigation ||||| */

#header .logo { position: absolute; margin-left: 150px; }
#header .homeLink  { position: absolute; left: 425px; top: 25px; width: 100px; height: 100px; text-indent: -9000px; display: block; z-index: 900; background: url(../images/transparent.gif);}

#header .navAmor {
	position: absolute;
	top: 46px;
	left: 102px;
	display: block;
	width: 107px;
	height: 49px;
	text-indent: -9000px;
	background: url(../images/navAmorNatural.png) no-repeat;
}

#header .navEnergia {
	position: absolute;
	top: 52px;
	left: 720px;
	display: block;
	width: 107px;
	height: 49px;
	text-indent: -9000px;
	background: url(../images/navEnergiaNatural.png) no-repeat;
}

#header .navVida {
	position: absolute;
	top: 70px;
	left: 575px;
	display: block;
	width: 107px;
	height: 49px;
	text-indent: -9000px;
	background: url(../images/navVidaNatural.png) no-repeat;
}

#header .navAlegria {
	position: absolute;
	top: 32px;
	left: 255px;
	display: block;
	width: 139px;
	height: 49px;
	text-indent: -9000px;
	background: url(../images/navAlegriaNatural.png) no-repeat;
}

#header a.navItem:hover  { background-position: 0px -53px; }

/* ||||| FOOTER ||||| */

#footer p { margin: 0px; color: #FFFF00; font-weight: bold; text-align: center;}
#footer p a { color: #FFFF00; }
.footerClose { float: right; }

span.ugcLegal { display: none; }
body#vida span.ugcLegal, body#energia span.ugcLegal { display: inline; }


/* ||||| UGC Front-end Containers ||||| */

#ugcContent {
	width: 800px;
	height: 450px;
	margin-left: 80px;
}
#ugcContentEnergia {
	width: 800px;
	height: 450px;
	margin-left: 225px;
}

/* UGC Submissions */
#results { display: none; }

#submitContent { margin-top: 30px; }
#submitContent label { display: block; width: 150px; float: left; text-align: right; margin-right: 20px; }
#submitContent #submit { margin-left: 170px; }
#submitContent input, #submitContent select, #submitContent textarea { margin-bottom: 10px; }


/*mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm 

	6. LAYOUT OPTIONS

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm*/

/* ||||| Missing JS / Flash Messgae ||||| */

.caption { margin-top: -125px;}

/*mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm 

	6. Form Controls

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm*/

.formElement { margin-bottom: 5px; }
.formElement label { display: block; width: 225px; float: left; }