/* CSS Document */

body
{
	width: 765px ;
	background: url(_images/bodyBg-small.jpg) repeat ;
	margin: auto ;
}

h1, h2, h3, h4, h5, h6
{
	font-size: 100% ;
	color: #089C36 ;
	
}

h1, h2
{
	text-decoration: underline ;
	color: #279735 ;
}

hr {

	border: #2dB14A solid 1px ;
	width: 75% ;
	height: 1px ;
}

* > hr {
	width: 100% ;
	height: 20px ;
	border: none ;
	background: url(_images/moire-green_hr.gif) center center no-repeat ;
}


/*=============== BANNER ===============*/

#introWrapper
{
	width: 763px ;
	height: 90px ;
	background: url(_images/moire-green_banner.gif) no-repeat ;
}

#intro, #quickSummary
{
	display: none ;
}

/*=============== NAVIGATION MENU ===============*/

#navWrapper
{
	margin: 0 ;
	padding: 0 ;
	position: relative ;
	top: -7px ;
}

#navigation h2
{
	display: none ;
}

#menu
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

#menu li
{
	float: left ;
	width: 123px ;
	height: 34px ;
	
	position: relative ;
	background: url(_images/moire-green_secondNav.gif) no-repeat top left ;
}

#menu > li
{
	background: url(_images/moire-green_firstNav.gif) no-repeat top left ;
}

#menu > li + li
{
	background: url(_images/moire-green_secondNav.gif) no-repeat top left ;
}

#menu > li + li + li
{
	background: url(_images/moire-green_thirdNav.gif) no-repeat top left ;
}

#menu > li + li + li + li
{
	background: url(_images/moire-green_fourthNav.gif) no-repeat top left ;
}

#menu li:hover
{
	background: url(_images/moire-green_navMouseOver.gif) no-repeat top left ;
	color: #333333 !important ;
}

#menu li a
{
	position: absolute ;
	top: 8px ;
	left: 8px ;
	
	color: #6600cc ;
	font-family: Arial, Helvetica, sans-serif ;
	font-size: 10pt ;
	font-weight: bold ;
	text-decoration: none ;
}

#menu > li a:visited
{
	color: #6600cc ;
}

#menu li a:hover
{
	text-decoration: underline ;
	letter-spacing: 1px ;
	font-weight: bold ;
	color: #333333 ;
}

#menu li a:active
{
	color: #CC3333 ;
}


.current
{
	text-transform: uppercase ;
	text-decoration: underline ;
	font-style: oblique ;
}

/*=============== CONTENT ===============*/

#contentWrapper
{
	clear: both ;
	position: relative ;
	width: 100% ;
	/*height: 100% ;*/
	display: table ;
	background: /*#fdfefd*/ #ffffff url(_images/moire-green_contentTopBg.gif) no-repeat top ;

}

#content
{
	position: relative ;
	width: 100% ;
	/*height: 100% ;*/
	display: table ;
	/*background: url(green_images/moire-green_contentBg.gif) repeat-y ;*/
	padding: 3px ;
	color: #487059 ;
}

#content a:hover
{
	background: #ADC0D7 ;
	color: black ;
}

#content h1, #content h2
{
	text-decoration: underline ;
}

#content p
{
	font-size: 11pt ;
	font-family: "Times New Roman", Times, serif ;
	padding: 0 7px 0 5px ;
	text-align: justify ;
}

#content p:first-letter
{
	/*font-size: 150% ;
	float: left ;*/
}

#pageContent
{
	position: relative ;
	width: 75% ;
	margin: 0 5px 0 5px ;
	float: left ;
}

#siteNews
{
	position: relative ;
	width: 22% ;
	/*margin: 0 2px 3px 75% ;*/
	float: right ;
}

#siteNews .newsTime
{
	font-weight: bold ;
	margin: 0 ;
}

#siteNews .newsContent
{
	margin: 2px 0 5px 5px ;
	font-size: 10pt ;
}

#siteNews .siteContentArea
{
	margin-bottom: 7px ;
}

.referralContent
{
	margin-top: 5px ;
}

/*------------ CONTENT - HOME PAGE ---------------*/


#preamble
{
	position: relative ;
	width: 35% ;
	height: 100% ;
	float: left ;
}

#preamble img
{
	margin: 0 2px 2px 5px ;
	padding-right: 3px ;
	float: left ;
}

#recentWork
{
	position: relative ;
	width: 63% ;
	height: 100% ;
	margin-left: 36% ;
}

#recentWorkDemo
{
	width: 90% ;
	margin: 0 4% 0 4% ;
	padding-left: 4px ;
	background: #F4FAF2 ;
	border: 1px solid #089C36 ;
}

#recentWorkPreview
{
	padding: 3px ;
	float: left ;
}


/*------------ CONTENT - SUBJECT PAGE ---------------*/

.project
{
	clear: both ;
	margin: 4px ;
}

.projectName a, .projectName a:visited
{
	color: #089C36 ;
}


.projectImage
{
	padding: 4px ;
	margin: 7px ;
	border: 3px double #089C36 ;
	float: left ;
}

.projectDescription
{
	margin-right: 4px ;
}

/********************* RESOURCES PAGE CONTENT *********************/

#resources
{
	position: relative ;
	display: table ;
	width: 100% ;
	height: 100% ;
}

#resourcesArticle
{
	width: 32% ;
	float: left ;
	padding-right: 10px ;
}

#resourcesTutorial
{
	width: 32% ;
	float: left ;
	padding-right: 10px ;
}

#resourcesBookmarks
{
	width: 30% ;
	float: left ;
}

#resourcesArticle h3, #resourcesTutorial h3, #resourcesBookmarks h3
{
	text-decoration: underline ;
	border: 1px solid #666666 ;
	padding: 3px 2px 3px 4px ;
	background: #669933 ;
	color: white ;
}

.article, .tutorial, .bookmark
{
	background: #f4faf2 ;
	padding-bottom: 1px ;
}

.articleTitle, .tutorialTitle
{
	padding: 3px 4px 3px 4px ;
	color: #487059 !important ;
}

.articleTitle, .tutorialTitle, #bookmarkList
{
	background: #e6f2df ;
}

.articlePreview img, .tutorialPreview img
{
	float: left ;
	padding: 4px ;
}

#bookmarkList
{
	list-style-type: square ;
	padding-left: 25px ;
	margin: 0 ;
}

.bookmark
{
	width: 100% ;
	padding: 3px ;
}

.bookmark:hover
{
	background: #E6F2DF ;
}

.bookmark a:hover
{
	background: none !important ;
	color: blue !important ;
}

/*----------------- THEME PAGE ---------------*/

#siteThemes
{
	display: table ;
	height: 100% ;
}

.theme
{
	padding: 4px ;
	margin: 3px ;
	border: 2px solid #abc ;
	width: 102px ;
	background: #f8fbf6 ;/*#cce4bd ;*/
	float: left ;
}

.theme a img
{
	border: none ;
	margin: 0 ;
	padding: 0 ;
}

.theme a:hover
{
	background: none !important ;
}

.theme:hover /** !!!! **/
{
	border: 2px solid #089c36 ;
	/*background: #f4faf2 ;*/
}

.themeCaption
{
	margin: 0 ;
	padding: 0 ;

}

.themeCaption p
{
	margin: 0 ;
	padding: 0 ;
	font-size: 9pt !important ;
	font-weight: bold ;
	text-align: center !important ;
	color: navy ;
}

.themeCaption p:first-letter
{
	font-size: 100% !important ;
	float: none !important ;
}

#themeIntro
{
	/*border: 5px solid #669966 ;*/
	width: 27% ;
	float: left ;
	padding: 5px ;
	margin-right: 5px ;
	/*margin-left: 10px ;*/
}

#themesDisplay
{
	margin-left: 30% ;
}
/*=============== FOOTER ===============*/

#footerWrapper
{
	clear: both ;
	position: relative ;
	height: 100% ;
	background: #fdfefd url(_images/moire-green_footerBg.gif) bottom no-repeat ;
}

#footer
{
	position: relative ;
	padding: 3px ;
	height: 100% ;
	text-align: center ;
}

#footer a, #footer p
{
	color: #000 ;
	font-size: 8pt ;
	font-family: Arial, Helvetica, sans-serif ;
	text-decoration: none ;
	padding: 0 2px 0 2px ;
}

#footer a img
{
	border: 0px ;
}

#footer #footerTextLinks a:hover
{
	background: #a0fea0 ;
	text-decoration: underline ;
}


#footer a:active
{
	color: red ;
}


/*=============== PROJECTS JOURNAL ===============*/

#projectTask
{
	width: 29% ;
	float: left ;
	padding: 5px  2px 2px 2px ;
}

#taskList
{
	text-decoration: underline ;
}

#projectTask img
{
	width: 200px ;
	height: 170px ; 
}

#projectJournal/*, #projectIntro*/
{
	margin-left: 30%;
	padding: 5px;
	border-left: 1px dotted #339900 ;
	text-align: justify ;
}

#projectJournal p:first-letter
{
	font-size: 16pt ;
	font-family:Verdana, Arial, Helvetica, sans-serif ;
	float: left ;
	text-transform: uppercase ;
	padding-right: 2px ;
}

.journal
{
	border-top: 3px double #339900;
}

.journal pre
{
	width: 400px ;
	height: 50px ;
	overflow: auto ;
}

.lessons
{
	font-family: "Courier New", Courier, monospace ;
	background: #f4faf2 ;
	border-left: 5px solid #089c36 ;
	margin-left: 9px ;
	padding: 0 10px 0 10px ;
}

#content .logTime
{
	font-size: 13pt ;
}

#content .hoursWorked
{
	padding-left: 10px ;
	font-size: 12pt ;
}

/***** task status ******/
.done
{
	color: #005500 ;
	list-style-image: url(../_images/projectTaskDone.gif) ;
}

.pending
{
	color: #330099 ;
	font-weight: bold ;
	list-style-image: url(../_images/projectTaskPending.gif) ;
}

.notDoneYet
{
	color: #880000 ;
	list-style-image: url(../_images/projectTaskNotDoneYet.gif) ;
}