@charset "utf-8";

/*--------------------------------------------------------

* Filename: styles.css
* Description: Main styles for RRT site

* Author: R. Brian Redd 2011-10-02
* Nerdery Front-end Developer Code Challenge

== STRUCTURE =============================================

* Page width: per client PDF, 823px "usable" space
* Layout:
	- Header: same across all pages
		- chose not to reuse code (via include, etc) 
			to allow greater future flexibility 
			in design (each page can be modified
			individually without messing with
			global header file
	- Main Page: 
		- Top "info spinner"
		- Main Section and right sidebar
	- Internal Page(s): 
		- left & right sidebar, plus central content

== TABLE OF CONTENTS =====================================

+ GLOBAL		Global definitions
+ HEADER		Header definitions
+ SIDEBAR		Sidebar definitions
+ HOME_PAGE		Home Page definitions
+ ABOUT (INTERIOR 1)	About (Interior) Page definitions
+ INTERIOR 2		Other Interior Page definitions (inc 404)
+ FOOTER		Footer definitions
         
--------------------------------------------------------*/       


/* GLOBAL
--------------------------------------------------------*/

body { 
	height: 960px;
	font-family: Arial, Helvetica, sans-serif;
	background: rgb(255, 255, 255) url('../images/bg.jpg') repeat-x 0 0;
	
	-webkit-font-smoothing: subpixel-antialiased;
}

.sw { /*Set "usable" screen width based on design specs*/
	position: relative;
	margin: 0 auto;
	width: 823px;
}

.newsection { /*new section (with 20px margin at top)*/
	margin-top: 20px;
}

/*-- general/default font definitions --*/

h1 {/*default headline text */
	color: rgb(0, 64, 37);
	font: bold 16px Arial, Helvetica, sans-serif;
}

h2 {/*default section header text */
	margin-bottom: -2px;
	color: rgb(0, 101, 58);
	font: bold 14px Arial, Helvetica, sans-serif;
}

p {/*default paragraph*/
	margin: 10px 0px 10px 0px;
	color: rgb(45, 45, 45);
	font-size: 12px;
	line-height: 150%;
}

p a {/*default paragraph link*/
	color: rgb(0, 64, 37);
	text-decoration: none;
	border-bottom: 1px solid rgb(0, 64, 37);
	
	/*CSS3 transitions (not supported in IE6-8)*/
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

p a:hover,
p a:focus {/*default paragraph link mouseover/focus*/
	color: rgb(0, 101, 58);
	background-color: rgb(254, 250, 179);
	border-bottom: 1px solid rgb(0, 101, 58);	
}

ul { /*default list style*/
	margin-left: 12px; 
}

ul li {
	margin-left: 14px;
	color: rgb(45, 45, 45);
	font-size: 12px;
	line-height: 150%;
	list-style-type: disc;
	list-style-position: outside; 
	/*NOTE: to improve display of list items in IE6-8, used "outside" in conjunction with ul and li left margin*/
	list-style-image:url('../images/bullet.gif');
}

/*-- common styles shared across multiple pages --*/

.sectionheader { /*Set header of section boxes*/
	position: relative;
	height: 27px;
	padding: 15px 0px 0px 18px;
	background-color: rgb(0, 101, 58);
	border: 0px; 
	border-style: solid rgb(0, 101, 58);
	
	/*CSS3 border-radius*/
	-webkit-border-radius: 15px 15px 0px 0px;
	-moz-border-radius: 15px 15px 0px 0px;
	border-radius: 15px 15px 0px 0px;
}

.sectionheader p {/*Section box headline text*/
	margin: 0px;
	color: rgb(255, 255, 255);
	font: bold 20px Arial, Helvetica, sans-serif;
	line-height: 80%;
}

.linkbar { /*Main section links bar*/
	height: 24px;
	padding-top: 2px;
	padding-left: 13px;
	background-color: rgb(0, 167, 94);
	border-width: 0px 2px 0px 2px;
	border-style: solid;
	border-color: rgb(0, 101, 58);
}

.linkbar a { /*Links bar text */
	margin-left: 5px;
	color: rgb(255, 255, 255);
	font: bold 12px Arial, Helvetica, sans-serif;
	text-decoration: none;
	border-bottom: 1px solid rgb(255, 255, 255); 
	
	/*CSS3 transitions (not supported in IE6-8)*/
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	
}

.linkbar a:hover,
.linkbar a:focus { /*Links bar text mouseover/focus*/
	color: rgb(254, 250, 179);
	border-bottom: 1px solid rgb(254, 250, 179); 
	
}

.boxbody { /*body content of site boxes*/
	position: relative;
	background-color: rgb(255, 255, 255);
	border-width: 0px 2px 2px 2px;
	border-style: solid;
	border-color: rgb(0, 101, 58);
	
	/*CSS3 border-radius*/
	-webkit-border-radius: 0px 0px 15px 15px;
	-moz-border-radius: 0px 0px 15px 15px;
	border-radius: 0px 0px 15px 15px;
}


/* HEADER
--------------------------------------------------------*/

/*--top header bar (with "sunburst" background)--*/

#sunburst { /*background bar with sunburst graphic*/
	width: 100%;
	height: 61px;
	background: rgb(161, 200, 55) url('../images/hdr_bg.jpg') no-repeat top center;
}

#logo { /*"Reliable Renewable Technology" logo*/
	position: absolute;
	top: 9px;
	border: 0px;
}

#rrs img { /*"Reliable Renewable Sustainable" text img */
	position: absolute;
	top: 39px;
	right: 0px;
	border: none;
}

/*--search form--*/

#search { /*Search Bar*/
	position: absolute;
	top: 7px;
	right: 0px;
}


#searchform div {/*Search bar (form)*/
	width: 234px;
	height: 23px;
	background: url(../images/search_bg.gif) no-repeat 0 0;
}

#searchterm { /*Search term field*/
	float:left;
	top: 3px;
	width: 170px;
	margin-left:6px;
	color: rgb(0,101,58);
	background: none;
	border: none;
	font: 13px Arial, Helvetica, sans-serif;
	line-height: 125%;
}

#searchsubmit { /*Search form submit button*/
	float: right;
	width: 56px;
	height: 23px;
	display: inline;
	opacity: 1;
	cursor: pointer;
	background: url(../images/search_btn.gif) no-repeat 0 0;
	border: none;
	
	/*CSS3 transitions (not supported in IE6-8)*/
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#searchsubmit:hover,
#searchsubmit:focus { /*Search button mouse-over affect*/
	opacity: 0.8;
}

/*--nav bar--*/

#navbar { /*solid green navigation bar beneath "sunburst"*/
	width: 100%;
	height: 58px;
	background-color: rgb(0, 101, 58);
}

#rrt { /*"RRT" logo*/
	float: left;
	border: 0px;
}


/*--nav buttons--*/

#navigation {
	float: right;
}

#navigation div { /*default button bg image position*/
	float: left;
	cursor: pointer;
	background: url(../images/navbutton_bg.jpg) repeat-x 0 0;
}

/*mouseover effects performed by moving "navbutton_bg.jpg"
using jQuery/plug-in function (see scripts.js)*/

#navigation button {/*"Invisible" buttons used for tab/keyboard access*/
	height: 1px;
	width: 1px;
	padding: 0px;
	margin:0px;
	background: none;
	border: 0px;
}

#navitem1 {/*Home cell*/
	height: 58px;
	width: 73px;
	border-left: 1px solid rgb(0,130,76);
}

#navitem2 {/*About cell*/
	height: 58px;
	width: 79px;
	border-left: 1px solid rgb(0,130,76);
}

#navitem3 {/*News cell*/
	height: 58px;
	width: 70px;
	border-left: 1px solid rgb(0,130,76);
}

#navitem4 {/*Contact cell*/
	height: 58px;
	width: 91px;
	border-left: 1px solid rgb(0,130,76);
	border-right: 1px solid rgb(0,130,76);
}

/*set each navigation "text" image with its own margins*/
#navitem1 img {
	/*"Home"*/
	margin: 23px 18px 0px 20px;
}

#navitem2 img { 
	/*"About"*/
	margin: 23px 19px 0px 19px;
} 

#navitem3 img { 
	/*"News"*/
	margin: 23px 18px 0px 18px;
} 

#navitem4 img { 
	/*"Contact"*/
	margin: 23px 18px 0px 19px;
} 

/*-- /Header --*/


/* SIDEBARS
--------------------------------------------------------*/

.sidebar {/*sidebar common styles*/
	width: 201px;
}
.sidebar .sectionheader {/*sidebar sectionheader has slightly different padding*/
	padding-left: 13px; 
}

.sidebar .boxbody p { /*additional paragraph style for sidebar text*/
	margin: 0px 0px 10px 0px;
	font-size: 11px;
	line-height: 140%;
}

/*-- /Header --*/

/* HOME_PAGE
--------------------------------------------------------*/

/*** Home Page Info Box ("Slideshow") ***/

#info { /*main info box element*/
	margin-top: 20px;
}
#container {
	position:relative;
	width:562px;
	left:259px;
	z-index:0;
	
	border-width: 2px 2px 2px 0px;
	border-style: solid;
	border-color: rgb(0, 101, 58);
	
	/*CSS3 border-radius*/

}
#slides {
	/*top:15px;
	left:4px;*/
	left: -260px;
	}

.slides_container {
	position: relative;
	width:562px;
	overflow:hidden;
	display:none;
	z-index: 150;
}

.slides_container a {
	left:259px;
	width:562px;
	height:171px;
	display:block;
	overflow:hidden;
	
}

.slides_container a img {
	display:block;
}

.pagination {
    position: absolute;
    top: 148px;
    left: -80px;
}

.pagination li {
    float:left;
    margin:0px 0px 0px 5px;
    list-style:none;
}

.pagination li a {
    display:block;
    width:12px;
    height:0;
    padding-top:12px;
    background-image:url(../images/pagination.gif);
    background-position:0 0;
    float:left;
    overflow:hidden;
	
}

.pagination li.current a {
    background-position:0 -12px;
}


/* /Slideshow */

.infotext { /*left-hand text box*/
	position: absolute;
	top: 0px;
	left: 0px;
	height: 171px;
	width: 259px;
	color: rgb(255, 255, 255);
	text-align: right;
			
	background: rgb(0, 164, 94);
	border-width: 2px 0px 2px 2px;
	border-style: solid;
	border-color: rgb(0, 101, 58);
	
	/*CSS3 border-radius*/
	-webkit-border-radius: 15px 0px 0px 15px;
	-moz-border-radius: 15px 0px 0px 15px;
	border-radius: 15px 0px 0px 15px;
	
}

.infotext h1 { /*Infotext Header*/
	position: absolute;
	top: 11px;
	right: 15px;
	color: rgb(255, 255, 255);
	font: bold 36px Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
}

.infotext h2 {/*Infotext Quote*/
	position: absolute;
	top: 62px;
	right: 18px;
	color: rgb(255, 255, 255);
	font: italic lighter 14px Arial, Helvetica, sans-serif;
	line-height: 130%;
}

.infotext a {/*Infotext link*/
	position: absolute;
	top: 114px;
	right: 19px;
	color: rgb(255, 255, 255);
	font: bold 14px Arial, Helvetica, sans-serif;
	text-decoration: none;
	cursor: pointer;
	
	/*CSS3 transitions (not supported in IE6-8)*/
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.infotext a img {/*Infotext link arrow*/
	height: 10px;
	width: 13px;
	margin-left: 8px; 
	background: url('../images/arrow.gif');
	border: none;
}

	/*Infotext/Img link mouseover/focus*/
.infotext a:hover,
.infotext a:focus {
	color: rgb(254, 250, 179);
}

.infotext a:hover img,
.infotext a:focus img {
	background: url('../images/arrow_on.gif')
}

/** Home Page Main **/

/** Home Page Sidebar (Secondary Section) **/

#hpsidebar {/*Side bar*/
	float: right;
}

#hpsidebarbody {/*Side bar body*/
	height: 320px;
	padding: 11px 13px 15px 14px;
}


/** Home Page Primary Section**/

#main { /*Home Page main content element*/
	position: relative;
	width: 602px;
}

#mscontent {/*Home page main content text*/
	height: 374px;
	padding: 10px 18px 20px 20px;
}

/*-- /Home Page --*/

/* ABOUT (INTERIOR 1)
--------------------------------------------------------*/

/*** About Page Contents ***/

#aboutmain {/*About main content text*/
	position: relative;
	top: 0px;
	left: 220px;
	width: 380px;
}

#aboutsidebar1 {/*About left bar*/
	position: absolute;
	left: 0px;
	top: 0px;
}

#aboutsidebar2 {/*About right bar*/
	position: absolute;
	right: 0px;
	top: 0px;
}

.aboutsidebarbody {/*Side bar body*/
	height: 320px;
	padding: 11px 13px 15px 14px;
}

#aboutcontent {/*About page main content*/
	height: 374px;
	padding: 10px 15px 20px 18px;
}

#aboutpagefootspace { /*Adding space at bottom of About content for footer*/
	margin-top: 179px;
}


/*-- /About Page --*/


/* INTERIOR 2 (OTHER INTERIOR PAGES, INC 404)
--------------------------------------------------------*/

#underconstruction {
	width: 823px;
}

#underconstruction .boxbody {/*Under Construction content text*/
	height: 95px;
	padding: 10px 18px 20px 20px;
}

#underconstruction a {/*Site map links*/
	color: rgb(0, 101, 58);
	text-decoration: none;
	cursor: pointer;
	
	/*CSS3 transitions (not supported in IE6-8)*/
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#underconstruction a:hover,
#underconstruction a:focus {/*Site map links mouseover/focus*/
	color: rgb(0, 164, 94);
	text-decoration: none;
	background-color: rgb(254, 250, 179);
}


/* FOOTER
--------------------------------------------------------*/

#footer { /*Footer block*/
	margin-top: 17px;
	padding-left: 40px;
	text-align: center;
}

#footer p {
	font-family: Helvetica, sans-serif;
	color: rgb(0, 51, 51);
	font-size: 10px;
	line-height: 150%;
}

/*-- /Footer --*/