/* *=universals
These rules are applied to all elements unless otherwise specified below. 

This meeans I don't have to use margin 0 and padding 0 anywhere else in the css style. */
* { margin : 	0; 
	padding : 	0; }
		
/* --------- basic styling -------- */

body {
/*positioning*/
/*padding and margins*/ /*To avoid having to use ie hacks, use margins on child elements instead of padding on parent elements*/
/*sizing and background*/
	background-color: #c90;
/*borders*/	border: none;
/*text features*/	
	text-align: center; /* takes care of the Internet Explorer problem, i.e., it doesn't always calculate auto margines correctly ... see wrapper div*/
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 100%; /* display my font inside the body tag at 100% of whatever of what the normal display font size of the device display */
	color: #600;/*	margin: 30 150;*/
		}
/* ------------------------------- positioning container elements  ----------------------------- */
#wrapper {
/*positioning*/
	position: relative; /* resetting the zero zero positioning to the wrapper div tag for elements contained within */
/*padding and margins*/
	margin: 0 auto; /* centering, i.e., shorthand = 0 is top and left, second value auto is left and right: zero aligns to top left of page and auto means all pixels left over automatically puts half on the left and half on right */ 
/*sizing and background*/
	width: 840px;
/*borders*/	border: none;
/*text features*/
	text-align:left; /* Internet Explorer doesn't always calculate auto margins so we need to center then left align text to fix it */ 
}
	
#header {
/*positioning*/
	position: relative; /* any nested elements use it as a reference point to position itself not relative to the wrapper or body tag */
/*padding and margins*/
/*sizing and background*/
	height: 162px;
	background: #c90 url(../images/logo.gif) no-repeat left top;
/*borders*/	border: none;
/*text features*/
}
#header h1 {
/*positioning*/
/*padding and margins*/
	margin-left: -9000px; /*Title added for search engine purposes then placed off screen with a negative positioning*/
	margin-top: 0;/*needed for ie*/
/*sizing and background*/
/*borders*/	border: none;
/*text features*/
	line-height: 14px;/*without line-height, ie will bump the nav bar further down the page*/
}
/* to place another image in the header ... see corresponding empty div in the html header 
#header otherImage {
	position:absolute;
	top: 0;
	right: 0;
	width: 200px;
	height: 141px;
	background: url(../images/image.gif) no-repeat;
}*/

/* ============ mainmenu ==============*/

#header #mainmenu {
	    position: absolute;
}

#mainmenu ul {
/*positioning*/
/*padding and margins*/
	margin-top: 120px;
/*sizing and background*/
	width:836px;
/*borders*/	border: none;
/*text features*/
	font: normal 600 10px/2em Verdana, san serif;
	text-align:right;
	letter-spacing:1px;
	word-spacing: 50px;
	z-index: 12;
}

#mainMenu li {
	display:inline;
}

#mainMenu li a:link, #mainMenu li a:visited {
	color: black;
	text-decoration: none;
}

#mainMenu li a:hover, #mainMenu li a:active {
    color: #f8b449;
	text-decoration: none;
}

#mainMenu li a.current {
	color: #ffcc00;
}

#mainMenu li a.current:hover {
	cursor: default;
}

/*----------------Pseudo-properties applied to the anchor element ----------------------
a:link {
	color: black;
	text-decoration: none;
	cursor: hand;
}
a:visited {
	color: black;
	text-decoration: none;
	cursor: hand;
}
a:hover {
	color: #ffcc00;
	text-decoration: none;
	cursor: hand;
}
a:active {
	color: #ffcc00;
	text-decoration: none;
	cursor: hand;
}
.current {
	color: ffcc00;
}*/

#firstcolumn {
/*positioning*/
	float: left;
/*padding and margins*/
/*sizing and background*/
	width: 300px; /*total width 300*/
/*borders*/	border: none;
/*text features*/
}
#secondcolumn {
/*positioning*/
	float: right;
/*padding and margins*/
	margin-top: 1em;
/*sizing and background*/	
	background-color: #c90;
	height: 313px;
	width: 520px; /* firstcolumn width of 300 plus secondcolumn width of 520 = 840 plust 20px guttor = 840 total page width*/
/*borders*/
	border: none;
/*text features*/
}

/************************************************************/
/* DIV that holds the ... */

#artboard {
/*positioning*/
position: absolute;

/*padding and margins*/
	
/*sizing and background*/
	height:313px;
	width: 520px; /* same as secondcolumn*/
	background-color:#000000;

/*borders*/
	border: none;
/*text features*/
}

#artboard ul {
/*positioning*/
/*padding and margins*/
	margin: 20px 0px 0 20px;
/*sizing and background*/
	width: auto;
/*borders*/	
	border: none;
/*text features*/
	font: normal 600 11px/2em Verdana, san serif;
	text-align:left;
	letter-spacing:1px;
	word-spacing: 50px;
	z-index: 11;
	list-style:none;
}

#artboard li {
	display: list-item;
}

#artboard li a:link, #artboard li a:visited {
	color:#0CC;
	text-decoration: none;
}

#artboard li a:hover, #artboard li a:active {
    color: #ffcc00;
	text-decoration: none;
}

#artboard li a.current {
	color: #ffcc00;
}

#artboard li a.current:hover {
	cursor: default;
}

/* artboard HTML Modified Features -- Positioning    */
/************************************************************/

/* artboard Specific div id Features                 */
/************************************************************/

/*#arrowP #magazineboard, #arrowN, {
		float: left;
}*/

#arrowP {
/*positioning*/
	float:left;
	z-index:5;
/*padding and margins*/
	margin-top:297px;
	margin-left: 16px;/*10px + 14px =24px wide*/
	padding: 0 0 0 0;	
/*sizing and background*/
	height: 16px;
	width: 14px;
/*borders*/
	border:none;
/*text features*/
	}
	
#magazineboard {
/*positioning*/
	float:left;
	z-index:4;
/*padding and margins*/
	margin-left: 10px;
	margin-top: 5px;
/*sizing and background*/
	width: 436px;
	height:305px;
/*borders*/
	border: none;
/*text features*/
}
	
#arrowN {
/*positioning*/
	float:left;
	z-index:5;
/*padding and margins*/
	margin-top:297px;
	margin-left:10px;/*arrowP=24+ magazineboard=446p = 470 + arrowN= 14px =484*/
	padding: 0 0 0 0;	
/*sizing and background*/
	height: 16px;
	width: 14px;
/*borders*/
	border: none;
/*text features*/
/*text-align:right;*/
	}
	

/**************************** image for contact page ********************************/
#cicada		{
/*positioning*/
/*padding and margins*/
/*sizing and background*/
	width: 840px;
	height: 317px;
/*borders*/	
	border: none;
/*text features*/
}	
#footer {
/*positioning*/
	clear: both;
/*padding and margins*/
	margin: 0 auto;
	
/*sizing and background*/
	width: 836px;
	background: transparent;
/*borders*/	border: none;
/*text features*/
	text-align:center;
	color: #f8b449;
	font: normal 300 12px/2em Georgia, Times New Roman serif;
}
#footer p {
/*positioning*/
	clear: both;
/*padding and margins*/
	margin: 0;
/*sizing and background*/
	width: 836px;
	background: transparent;
/*borders*/	border: none;
/*text features*/
	text-align:center;
	font: normal 300 12px/2em Georgia, Times New Roman serif;
}

br {
	line-height: 14px;
}

/* ----------------------- styling ------------------------------*/

/* ----------------------- home styling ------------------------------*/

#intro		{
/*positioning*/
	position: relative;
/*padding and margins*/
/*sizing and background*/
	width: 840px;
/*borders*/
	border: none;
/*text features*/	
			}
			
#intro h1 {
/*positioning*/
	z-index: 4;
/*padding and margins*/
	margin-left:30px;
/*sizing and background*/
/*borders*/	border: none;
/*text features*/
	font: normal 500 1.5em/2.5em Verdana, Arial, sans-serif;
}
				
#intro p	{
/*positioning*/
	position: relative;
	z-index: 4;
/*padding and margins*/
	margin-top: 8px;
	margin-left:30px;
/*sizing and background*/
	width: 790px;
/*borders*/	border: none;
/*text features*/	
	font: normal 300 1em/1.5em Georgia, Times New Roman serif;
	letter-spacing: .33px;
	line-height: 22px;
	word-spacing: normal;
	}
/* ----------------------- other pages styling ------------------------------*/

h1 {
/*positioning*/
	z-index: 4;
/*padding and margins*/
	/*margin: 40 65;*/
/*sizing and background*/
/*borders*/	
border: none;
/*text features*/	
	font: normal 500 1.5em/2.5em Verdana, Arial, san serif;
}
h2 {
/*positioning*/
	z-index: 4;
/*padding and margins*/
	margin-left:30px; /*left margin of 30 plus 260px text width  = 290 ... leaves 10px right margine totals 300px fits within firstcolumn 		    float of 300px*/
/*sizing and background*/
	width:260px; 
	/*width of text area within 300px firstcolumn float*/
/*borders*/	border: none;
/*text features*/	
	font: normal 500 1em/2.5em Verdana, Arial, san serif;
}
p {
/*positioning*/
	z-index: 4;
/*padding and margins*/
	margin-top:8px;
	margin-left: 30px;
	margin-bottom:8px; /*and right*/
/*sizing and background*/
	width:260px; /*30px left margin + 260px width = 290 leaving 10 px right margin totals 300px fits within firstcolumn float of 300px*/
/*borders*/	border: none;
/*text features*/	
	font: normal 300 14px/1.5em Georgia, Times New Roman serif;
	letter-spacing: .35px;
	line-height: 18px;
	word-spacing: normal;
}

/*============= secondary nav bar =============*/
#wrapper #secondarynav {
/*positioning*/
/*padding and margins*/
/*margin: 40 65;*/
/*sizing and background*/
	width:840px;
/*borders*/	
    border: none;
    display: block;
/*text features*/
	font: normal 600 10px/2em Verdana, san serif;
	font-size: 60%;
	text-align:right;
	text-decoration: none;
}

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

 #secondarynav a:hover, a:active {
    color: #f8b449;
	text-decoration: none;
}
#secondarynav a.current {
	color: #ffcc00;
}

#secondarynav a.current:hover {
	cursor: default;
}
#clear {
	clear:both;
	}