/* 
-------------------------------------------------------------
Authors: 			Ulan McKnight and Marisa Desalles
Modified: 		09-14-07
Modified: 		03-31-08
Modified:     04-15-08  IE index.html fix
-------------------------------------------------------------
gibsonworks.com is a centered, non-fluid, 600px wide website design.

The site has four 150px wide navigation categories.

The footer is flush left

-------------------------------------------------------------
Typography:

Font is 

Colors:

The color scheme is dark gray, light gray and green and orange.

dark gray:	#a4a3a2
light gray: #cacac9
green:			#75af10
orange: 		#f97716

page background: #ffffff
-------------------------------------------------------------
*/

body {
	background-color: #ffffff;
	font-size: 14px;
	font-family: Bookman, serif;
	color: #a4a3a2;
	width: 600px;
	margin: 5px auto 5px auto; 
	padding: 0px 0px 0px 0px;
	/* border: 2px solid #cacac9; */
}

/* 
-------------------------------------------------------------
text treatment
-------------------------------------------------------------
*/

h1 { 
	margin: 0px 0px 0.7em 0px;
	color: #75af10;
	font-size: 1.5em;
	font-weight: lighter;
	/* border: 3px solid green; */
}

h1 a:link,
	h1 a:visited { 
		color: #75af10;	
		font-size: 1.5em;
		font-weight: normal;
		text-decoration: none;
		margin: 0px 0px 0.7em 0px;
		padding: 0px 0px 0px 0px;
}

h1 a:hover,
	h1 a:active { 
		color: #f97716;
		text-decoration: underline;
}


h2, h2 a:link, h2 a:visited { 
	margin: 0.7em 0.7em 0.7em 0em;
	color: #f97716;
	font-size: 1.3em;
	font-weight: lighter;
	/* border: 3px solid green; */
}

h4 { 
	font-size: 1.2em;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

p { 
	margin: 0.5em 0em 0.8em 0em;
	color: #a4a3a2;
}

p.category {
	font-size: 1.2em;
	color: #a4a3a2;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 0px;
	/* border: 1px dashed #a4a3a2; */
}

p.sub-category {
	font-size: 1.0em;
	line-height: 90%;
	color: #cacac9;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	/* border: 1px dashed #a4a3a2; */
}

p.category a:link,  
	p.category a:visited {
		color: #a4a3a2;
}

p.category a:hover,  
	p.category a:active {
		color: #75af10;
}

/* 
p.sub-category a:link,  
	p.sub-category a:visited {
		color: #cacac9;
}

p.sub-category a:hover,  
	p.sub-category a:active {
		color: #75af10;
}
*/

p.copy {
	font-size: 1.0em;
	/*width: 420px;*/
	margin: 0px 0px 0px 0px;
	padding: 0px 10px 10px 0px;
	color: #a4a3a2;
	/* border: 1px dashed #a4a3a2; */
}
p.copy-tiny {
	font-size: 0.7em;
	/*width: 420px;*/
	margin: 0px 0px 0px 0px;
	padding: 0px 10px 10px 0px;
	color: #a4a3a2;
	/* border: 1px dashed #a4a3a2; */
}

p.testimonial {
	font-size: 0.9em;
	line-height: 150%;
	margin: 10px 0px 10px 0px;
	padding: 5px 5px 5px 5px;
	border: 1px dotted #f97716;
}

p.pull-quote {
	float: right;
	font-size: 1.3em;
	color: #ffffff;
	background-color: #f97716;
	width: 100px;
	margin: 0px 0px 0px 0px;
	padding: 5px 5px 5px 8px;
	/* border: 1px dashed #a4a3a2; */
}

p.pull-quote-right {
	float: right;
	font-size: 0.9em;
	color: #ffffff;
	background-color: #f97716;
	border: 2px solid white;
	width: 120px;
	/* height: 100px; */
	line-height: 150%;
	margin: 0px 10px 0px 10px;
	padding: 20px 20px 20px 20px;
}

p.pull-quote-left {
	float: left;
	font-size: 0.9em;
	color: #ffffff;
	background-color: #f97716;
	width: 120px;
	/* height: 100px; */
	line-height: 150%;
	margin: 0px 10px 0px 10px;
	padding: 20px 20px 20px 20px;
}

p.pull-quote-middle {
	float: left;
	font-size: 0.9em;
	color: #ffffff;
	background-color: #f97716;
	width: 100px;
	/* height: 100px; */
	line-height: 150%;
	margin: 0px 10px 0px 10px;
	padding: 20px 20px 20px 20px;
	/* border: 1px dashed #a4a3a2; */
}

span.quotesleft {
	float: left; 
	font-family: serif;
	font-size: 2.0em; 
	color: #cacac9; 
	padding: 0px 10px 0px 0px; 
}

span.quotesright {
	float: right; 
	font-family: serif;
	font-size: 2.0em; 
	color: #cacac9; 
	padding: -10px 0px 0px 10px; 
}

p.advice {
	font-size: 1.0em;
	color: #f97716;
	margin: 0px 0px 10px 0px;
	padding: 0px 10px 10px 0px;
	/* border: 1px dashed #a4a3a2; */
}

p.small {
  margin: 1px 1px 1px 1px;
  padding: 0px 0px 0px 0px;
}

p.book {
	text-decoration: bold;
	font-size: 110%;
	padding: 5px;
}

span.title {
	color: #f97716;
}

span.publisher {
	text-decoration: italic;
	margin: 0 0 10px 0;
}

img.book-thumb {
	border: 3px solid #75af10;
	margin: 10px;
	padding: 3 px;
}	

.book-img {
  float: left;
	border: 3px solid #75af10;
	margin: 8px 10px 10px 0px;
	padding: 10px 3px 3px 3px;
}	

.assessment {
  margin: -5px 0px 10px 0px;
  padding: 5px 5px 5px 5px;
  border: 1px dotted #f97716;
}

.assessment p {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}


.assessment .left-column {
  float: left;
	color: #a4a3a2;
  width: 80px;
}

.assessment .right-column {
  float: left;
	color: #a4a3a2;
  width: 140px;
}

/* 
-------------------------------------------------------------
link treatment
-------------------------------------------------------------
*/

a:link,
	a:visited { 
		color: #cacac9;
		text-decoration: none;
}

a:hover,
	a:active { 
		color: #75af10;
}

.copy { 
	font-size:80%;
}

.copy-center { 
	text-align: center; 
	font-size:80% ;
}

/* 
-------------------------------------------------------------
list treatment
-------------------------------------------------------------
*/

ul {
	list-style-type: none;
	margin: 0px 0px 0px 0px; 
	padding: 0px 0px 0px 0px;
	/* border: 2px dotted #cacac9; */
}

li {
	background-repeat: no-repeat;
	background-position: 0em .3em;
	padding: 0px 0px 0px 1em; 
}

/* 
-------------------------------------------------------------
All navigation goes in the #top div
-------------------------------------------------------------
*/

#top {
	position: relative;
	font-family: "Trebuchet MS", sans-serif;
	margin: 0px 0px 0px 0px; 
	padding: 20px 0px 0px 0px;
	/* border: 1px solid purple; */
}

#logo {
	float:left;
	width: 100%;
	margin: 0px 0px 0px 0px; 
	padding: 0px 0px 0px 0px;
}

#line {
	float:left;
	background-image: url("/media/line.gif");
	height: 7px;
	background-repeat: repeat-x;
	width: 100%;
	margin: 0px 0px 20px 0px; 
	padding: 0px 0px 0px 0px;
}

#top-1 {
	float:left;
	width: 140px;
	margin: 0px 0px 0px 0px; 
	padding: 0px 15px 0px 0px;
	/* border: 2px dotted #cacac9; */
}

#top-1 a:active,
	#top-1 a:hover {
		/* border-bottom: 2px solid green; */
}

#top-2 {
	float: left;
	width: 140px;
	margin: 0px 0px 0px 0px;
	padding: 0px 15px 0px 0px;
	/* border: 1px dashed #a4a3a2; */
}

#top-3 {
	float: left;
	width: 140px;
	margin: 0px 0px 0px 0px;
	padding: 0px 15px 0px 0px;
	/* border: 1px solid green; */
}

#top-4 {
	float: right;
	width: 120px;
	margin: 0px 0px 0px 0px; 
	padding: 0px 0px 0px 0px;
	/* border: 2px dotted #cacac9; */
}

img.index-left {
	float: left;
	margin: 0px;
	width: 150px;
	height: 500px;
	background-color:#75af10;
}

img.index-right {
	float: right;
	margin: 0px;
	width: 150px;
	height: 500px;
	background-color:#75af10;
}

img.index-middle {
	margin: 0px;
	padding: 270px 30px 0px 30px;
	background-color:#FFFFFF;
}

/* 
-------------------------------------------------------------
breadcrumbs treatment
-------------------------------------------------------------
*/

#breadcrumbs {
	font-size: 0.9em;
	font-weight: bold;
	margin: 0px 0px 0px 0px; 
	padding: 0px 0px 0px 0px;
	/* border: 1px solid purple; */
}

/* 
-------------------------------------------------------------
Main content goes in class .middle-container div
class so we can have multiple instances on template page
-------------------------------------------------------------
*/

.middle-content {
	margin: 30px 0px 0px 0px;
	position: relative;
	/* border: 2px dotted #cacac9; */
}

/* 
-------------------------------------------------------------
3 columns: 166px, 166px, 168px
#content-1-3 contains left content in 3 column layout
#content-2-3 contains middle content in 3 column layout
#content-3-3 contains right content in 3 column layout

2 columns: 382px, 118px
#content-1-2 contains left content in 2 column layout
#content-2-2 contains right content in 2 column layout
-------------------------------------------------------------
*/

#content-1-1 {
	width: 100%;
	position: relative;
	/* border: 1px solid aqua; */
}

.content-1-2 {
	float: left;
	width: 60%;
	padding: 0 20px 0 0;
	border-right: 1px dotted gray; 
}

.content-2-2 {
	float: left;
	width: 25%;
	padding: 0em 0em 0em 10px;
	/* border: 1px dotted blue; */
}

#content-3 {
	float: left;
	width: 600px;
	margin: 0px;
	padding: 10px;
	/* border: 1px solid aqua; */
}

#content-1-3 {
	float: left;
	width: 180px;
	height: 250px;
	margin: 0px 0px 0px 0px;
	padding: 30px 0px 30px 20px;
	/*background-color: #75af10;*/
	/* border: 1px solid aqua; */
}

#content-2-3 {
	float: left;
	width: 180px;
	padding: 145px 0px 0px 15px;
	/* border: 1px dotted blue; */
}

#content-3-3 {
	float: right;
	width: 180px;
	height: 250px;
	padding: 60px 0px 0px 23px;
	/*background-color: #75af10;*/
	/* border: 1px dashed green; */
}

.column1 {
	float: left;
	width: 270px;
	color: #ffffff;
	height: 50px;
	border: 3px dotted white;
	margin: 10px 10px 10px 10px;
	padding: 5px 5px 5px 5px;
	background-color: #75af10;
	/* border: 1px solid aqua; */
}

.column2 {
	float: right;
	text-align: left;
	width: 260px;
	height: 55px;
	margin: 10px 10px 10px 10px;
	padding: 5px 5px 5px 5px;
	background-color: #75af10;
	/* border: 1px dotted blue; */
}

/* contact.html */
.contact-1 {
	float: left;
	width: 100px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.contact-2 {
	float: left;
	width: 240px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.whitecolumn1 {
	float: left;
	width: 240px;
	height: 50px;
	margin: 10px;
	padding: 5px;
}

.whitecolumn2 {
	float: right;
	width: 240px;
	height: 50px;
	padding: 20px;
	margin: 20px;
	background-color: #fff;
}
/* 
-------------------------------------------------------------
#middle-4 contains all right navigation elements
#right-1 contains local naviagtion for static pages
	Contact us, Find a distributor, Careers, Events, etc
#right-2 contains Feature data
#right-3 contains Complementary data
-------------------------------------------------------------
*/


/* 
-------------------------------------------------------------
#middle-2 contains all content
-------------------------------------------------------------
*/

#middle-2 {
	margin: 0 145px 0 175px;
	padding: 4px 5px 0px 5px;
	color: #00217f;
	/* border: 1px solid #cc9966; */
}

#middle-2-home {
	margin: 0 145px 0 175px;
	padding: 4px 5px 0px 5px;
	/* border: 1px solid #cc9966; */
}

/* 
-------------------------------------------------------------
footer treatment
-------------------------------------------------------------
*/

#footer {
	margin: 0px 0px 0px 0px; 
	padding: 0px 0px 0px 0px;
	/* border: 1px solid purple; */
}

#footer p {
	font-size: 0.7em;
	color: #a4a3a2;
	margin: 0px 0px 0px 0px;
	padding: 26px 0px 0px 0px;
}

/* 
-------------------------------------------------------------
section classes
-------------------------------------------------------------
*/

.cleaner {
	clear: both;
	/*
	line-height: 0px; 
	background: transparent;
	height: 0px;
	margin: 0px 0px 0px 0px; 
	padding: 0px 0px 0px 0px;
	*/
}

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

.footer {
	float: right;
	color: #00000;
	font-size: 11px;
	line-height: 150%;
	margin: 0px 0px 0px 0px;
	padding: 12px 12px 35px 0px;
	/* border: 1px solid red; */
}

/* 
-------------------------------------------------------------
remote rollovers
http://www.andybudd.com/test/remote-rollovers/remote-rollovers.htm
-------------------------------------------------------------
*/ 

#navigation-1-4 {
  margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width: 140px;
	height: 50px;
	list-style: none;
	position: relative;
	font-family: "Trebuchet MS", sans-serif;
	background-color: #f97716;
	border: 1px solid aqua;
	/*
	If we want to use a background image
	background: url(/media/left.gif) no-repeat;
	*/
}

#navigation-1-4 a {
  display: block;
	width: 100px;
	height: 140px;
	text-decoration:none;
	color:#003399;
}

#navigation-1-4 a:hover {
 border: 1px solid #fff;
}

/* 
-------------------------------------------------------------
rollover text
-------------------------------------------------------------
*/ 

#navigation-1-4 a:hover span {
 color: #0066FF;
 display: block;
}

#navigation-1-4 a span {
  position: absolute;
	width: 15em;
}

#navigation-1-4 .people-like-you a span {
  bottom: -2em;
	left: 0;
}

#navigation-1-4 .make-a-change a span {
  bottom: -3.2em;
	left: 0;
}

/* 
-------------------------------------------------------------
rollover link image position
-------------------------------------------------------------
*/ 

#navigation-1-4 a {
  float: left;
	display: inline;
}

#navigation-1-4 .people-like-you a {
	font-size: 1.2em;
	color: #a4a3a2;
  margin: 40px 0px 0px -10px
}

#navigation-1-4 .make-a-change a {
	margin: -5px 0px 0px -10px;
}

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

#pic {
  margin: 0;
	padding: 0;
	width: 640px;
	height: 480px;
	list-style: none;
	background: url(/media/left.gif) no-repeat;
	position: relative;
	font-size: 1.4em;
}

#pic a {
  display: block;
	width: 100px;
	height: 140px;
	text-decoration:none;
	color:#003399;
}

#pic a:hover {
 border: 1px solid #fff;
}

#pic a {
  float: left;
	display: inline;
}

#pic .rich a {
  margin-left: 80px;
	margin-top: 40px;
}

#pic .dan a {
  margin-left: 90px;
	margin-top: 50px;
}

#pic .dunstan a {
  margin-left: 140px;
	margin-top: 60px;
}

#pic a:hover span {
 color: #0066FF;
 display: block;
}

#pic a span {
  position: absolute;
	width: 15em;
}

#pic .rich a span {
  bottom: -2em;
	left: 0;
}

#pic .dan a span {
  bottom: -3.2em;
	left: 0;
}

#pic .dunstan a span {
  bottom: -4.4em;
	left: 0;
}


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


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