/* Red Lantern redesign  HFWD Chapter 1
http://headfirslabs.com/books/hfwd/ch01/stylesheets/screen.css
*/



/* ////////////////////////
//////// BODY /////////////
///////////////////////////
*/

body {
	margin: 0;
	padding: 0;
	background: #ccc url('../images/bg_stripe.jpg') repeat-x top;
	font-family: Helvetica, sans-serif;
	font-size: 62.5%;		/*The font size here is set to 62.5% so that 1em = 10px.*/
							/*This makes adjusting our typography a little easier*/
	color: #036;
}

h1, h2, p {
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4{
	color: #036;
	margin-top: 2em;
}


p {
	font-size: 1.4em;
	line-height: 1.4em;
	color: #036;
}






/* ////////////////////////
//////// LINKS /////////////
///////////////////////////
*/

#link-list {  /*these are links in a list, like the one that says "contact Dianne Mullen" */
	margin: 20px 0 0 0;
	font-size: 1em; /*was 1.2em*/
	/*font-color: #000;*/   /*removed during css validation*/
}

#link-list li {
	margin: 0 0 10px 0;
	list-style-type: none;
	/*font-color: #000; */   /*removed during css validation*/
}

/*////
IF THE LINK COLORS LOOK WRONG, CHECK HERE
/////*/
a:link 	{				/*a:visited*/
	color: #669; 		/*was #ffc and before that it was #333*/
	background: #fff;	/* was #ffc and before that it was #eee*/
}

#footer a:link{
	color: #036;
	background: #cc9;
}


/*
a:hover{
	font-color: #966;    /removed during css validation/
}
*/

a:visited{
	color: #966;
	background: #ffc;
}





/* ////////////////////////
//////// LISTS /////////////
///////////////////////////
*/
ul, li {			/* in the  BODY */
	margin: 0;
	padding: 0;
	color: #996;
}

ul {				/* in the  BODY */
	list-style-type: none;
}





/*///////////////////////
//// MASTHEAD ////////////
/////////////////////////
*/

/*
"margin: 0 auto" with a width will center the layout in the browser window
*/
#masthead {
	margin: 0 auto;
	margin-top: 20px;
	width: 800px;
	/*color: #fff;*/    /*removed during css validation*/
}

#masthead h1 {
	float: left;
}


/*///////////////////////
//// NAV ////////////
/////////////////////////
*/
#nav {
	float: right;
	margin: 50px 10px 0 0;
	font-size: 1.4em;
}

#nav li {
	display: inline;
	margin: 0 0 0 20px;
	color: #fff;
	text-decoration: none;
	/*background: none;*/
	padding: 2px 5px 2px 5px;
	line-height: 1em;
	font-size: 1.3em;
}

#nav a {
	color: #fff;
	text-decoration: none;
	background: none;
	padding: 0 2px;
}

.youarehere{			/*used in the top navigation bar*/
	background: #669;
}

#nav a:visited{
	color: #ffc;
	/*background: #ffc;*/
}

/*///////////////////////
//// WRAP ////////////
/////////////////////////
*/

/*
Because the header content is outside the wrap <div>, we need to 
use the same "margin: 0 auto" trick to center the layout
*/
#wrap {
	clear: both;
	margin: 0 auto;
	padding: 10px;
	width: 780px;
	background: #fff;
	border: 10px solid #669;
}



/*///////////////////////
//// HEADER ////////////
/////////////////////////
*/
#header img {
	border: 10px solid #cc9;
}

#header h1 {
	font-size: 2em;
	margin: 10px 0 0 0;
	padding: 10px;
	text-align: center;
	/*background: url('../images/tagline_bg.gif') repeat-x;*/
	background: #cc9;
}

/* This rule adds a nice style to our ampersands.
It's used in the h1 tag of the header*/
span.amp {
	font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;
	font-weight: normal;
	font-style: italic;
}



/*///////////////////////
//// CONTENT ////////////
/////////////////////////
*/
#content {
	width: 360px;
	margin: 20px 0 20px 0;
	padding: 10px;
	float: right;
}

#content h2 {
	font-size: 2.4em;
	margin: 0 0 10px 0;
}

#content p {
	margin: 0 0 10px 0;
	font-size: 1.4em;
	color: #333;
}

#content ul, li {
	font-size: 1.4em;
	color: #333;
}


/*//////
////// CONTENT-WIDE
//////
*/
#content-wide {
	float: right;
}

#content-wide {
	width: 520px;
	margin: 20px 0 20px 0;
	padding: 10px;
}

#content-wide h2 {
	font-size: 2.4em;
	margin: 0 0 10px 0;
}

#content-wide p {
	margin: 0 0 10px 0;
	font-size: 1.4em;
}

#content-wide ul{
	list-style-type: square;
			/*font-color: #000;*/   /*removed during css validation*/
}

#content-wide li{
		margin-left: 10px;
		line-height: 1.4em;
		/*font-color: #000; */    /*removed during css validation*/
}


/*////
////// CONTENT-MIDDLE 
//////
*/
#content-middle{
	width: 760px;
}



/*/////
/////// CONTENT-ONE-COL 
///////
*/
#content-one-col{
	margin: 20px;
}

#content-one-col ul {
	list-style-type:	square;	
	margin-left:	20px;
}

#content-one-col a{
	color: #036;
	background: none;	
}


/*////
////// CONTENT-LEFT-COL 
//////
*/
#content-left-col{
	width: 260px;
	margin: 10px;
	float: left;
}

#content-left-col h2{
	font-size: 2.4em;
	margin-top: 10px;
}

#content-left-col h3{
	font-size: 2.0em;
	font-style: oblique;
	margin-top: 10px;
}

#content-left-col ul{
	list-style-type: square;
			/*font-color: #000;*/   /*removed during css validation*/
			margin-left: 5px;
}

#content-left-col li{
		margin-left: 10px;
		line-height: 1.4em;
		/*font-color: #000; */    /*removed during css validation*/
}






/*////
////// CONTENT-MIDDLE-COL 
//////
*/
#content-middle-col{
	width: 260px;
	margin: 10px;
	float: left;
}

#content-middle-col h2{
	font-size: 2.4em;
	margin-top: 10px;
}

#content-middle-col h3{
	font-size: 2.0em;
	font-style: oblique;
	margin-top: 10px;
}

#content-middle-col ul{
	list-style-type: square;
	/*font-color: #000;	*/	/*removed during css validation*/
	margin-left: 5px;
}

#content-middle-col li{
		margin-left: 10px;
		line-height: 1.4em;
		/*font-color: #000;*/	/*removed during css validation*/
}


/*/////
/////// CONTENT-RIGHT-COL   (the one with Resources)
///////
*/
#content-right-col{
	width: 190px;
	margin: 50px 0px 10px 0px;
	float: right;
	background: #cc9;
	padding: 5px;
}

#content-right-col h2{
	font-size: 1.4em;
	margin-top: 10px;
}

#content-right-col ul{
	list-style-type: square;
			/*font-color: #000;*/	/*removed during css validation*/
}

#content-right-col li{
		margin-left: 10px;
		line-height: 1.4em;
		/*font-color: #000;*/		/*removed during css validation*/
		background-color: #cc9;
}

#content-right-col a{
	background-color: #cc9;			/* color of the link in Resources */
}


/*
////////////////////////
//// SIDEBAR ///////////
////////////////////////
*/

#sidebar {
	width: 360px;
	margin: 20px 0 20px 0;
	padding: 10px;
	float: left;
	background: #eee;
}

#sidebar h2 {
	font-weight: bold;
	border-bottom: 1px solid #966;
	margin: 0 0 20px 0;
	padding: 5px;
}

/*////
////// SIDEBAR-NARROW 
//////
*/
#sidebar-narrow{
	float: left;
	background: #cc9;
	width: 200px;
	margin: 20px 0 20px 0;
	padding: 10px;
}

#sidebar-narrow h2 {
	font-weight: bold;
	border-bottom: 1px solid #966;
	margin: 0 20px 20px 5px;
	padding: 5px;
	color: #966;
}






/* ////////////////////////
//////// PORT (thumbnails)  /////////////
///////////////////////////
*/

#port li {
	/*margin: 0 10px 20px 0; */
	margin: 5px 5px 10px 5px;
	padding-bottom: 0px;
	float: left;
	border: 5px solid #966/*#ddd*/;
	line-height: 0px;  /* this is to get the bottom border to touch the bottom of the image*/
}


#port-dianne li {
	float: left;
	font-style: italic;
	margin: 0 20px 20px 20px;
	font-size: 1.2em;
}




/* ////////////////////////
//////// FOOTER /////////////
///////////////////////////
*/

#footer {
	clear: both;
	background: #cc9;
	padding: 10px;
	border-top: 2px solid #cc9;
	text-align: center;
	color: #eee;
}

#footer p{
	color: #fff;
}





/* Testing these link codes */
/*
a:link{color: purple;}			Link not yet clicked
a:visited{color: orange;}	Link has been visited
a:hover{color: green;}		Link when mouse hovers over it
a:active{color: blue;}		Link when clicked
.active {background: #03c;}
*/