@charset "UTF-8";
/* CSS Document */

/* COLORS
	Light Tan: #D9D0BB; (page background)
	Brown: #B0A68D; (drop-down menu bkgnd, main nav rollover bkgnd, accents)
	Dark Brown: #A9A18D; (text links in main content area)
	Red: #A60D11; (headings / accents)
	Golden Brown: #B1934B; (sub-nav rollover accent & text links rollover color)
	Cream: #ECE4D1 (sub-nav background color)
*/

html {
	overflow: scroll;
}

body {
	background-color: #D9D0BB; /* light tan */
	background-image: url(../images/bkgnd_1px_slice.jpg);
	background-repeat: repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
}

#banner h1 { /*this is here for SEO, to indent the wording "Web Skills Work" off the page */
	text-indent: -9999px;
	font-size: 22px;
	font-weight: bold;
}

h2 {
	text-transform: none; /* uppercase */
	font-size: 22px;
	font-weight: bold;
	color: #A60D11; /* red */
	margin-top: 14px;
	margin-bottom: 28px;
}

h3 {
	font-size: 16px;
	font-weight: bold;
	color: #000;
	margin-top: 10px;
	margin-bottom: 16px;
}
	
.clearfloat {
	clear: both;	
}

#wrapper {
	width: 1000px;
	margin: 0 auto;	
}
a {
	outline: none;
}

/********** HEADER **********/
#banner {
	width: 1000px;
	height: 129px;
	background-image: url(../images/header.jpg)
}

#beta { /*styling for "beta" in header, can be removed once you switch from beta to final live version of site */
	float: right;
	padding-right: 60px;	
}
            
#beta p {
	font-size: 36px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	color: #D9D0BB; /* light tan */
}

h1 {
	font: 4.7em normal Georgia, 'Times New Roman', Times, serif;
	color: #333;
	margin: 0;
	padding: 5px 0;
}
h1 small{
	font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing: 1.5em;
	display: block;
	color: #fff; /* black */
}
.container {
	width: 970px;
	margin: 0 auto;
}
ul#topnav {
	margin: 0; padding: 0;
	float: left;
	width: 970px;
	list-style: none;
	position: relative;
	font-size: 1.2em;
/*	background: url(../images/topnav_stretch.gif) repeat-x;
*/
	color: #000; /* black */
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
/*	border-right: 1px solid #555;
*/	border-right: solid 1px #B0A68D;
}
ul#topnav li.noborder {
	float: left;
	margin: 0; padding: 0;
	border-right: none;
}
ul#topnav li a {
	padding: 10px 15px;
	display: block;
	color: #000; /* black */          /* #f0f0f0; /* white */
	text-decoration: none;
}
ul#topnav li:hover {
	background: #D9D0BB; /* light tan */        /* #1376c9 url(../images/topnav_active.gif) repeat-x; */
	color: #A60D11; /* red */
}
ul#topnav li span {
	float: left;
	padding: 15px 0;
	position: absolute;
	left: 0;
	top:35px;
	display: none;
	width: 1000px;          /* 970px; */
	background: #B0A68D; /* brown */     /* #1376c9; */
	color: #000; /* black */          /* #fff; */
/*	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
*/}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}




/********** MAIN NAVIGATION **********/
			
#nav_main {
	width: 1000px;
	height: 35px;
}

ul#nav {
	display: inline;
	height: 35px;
	width: 1000px;
}

li.nav_item {
	float: left;
	display: block;
	height: 35px;
	border-right: solid 1px #B0A68D;
	text-align: center;
}

li.nav_item_last {
	float: left;
	display: block;
	height: 35px;
	text-align: center;
}

#nav a:link,  #nav a:visited {
	display: block;
	height: 9px;
	padding-top: 14px;
	padding-bottom:12px;
	color: #000;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

#nav a:hover,  #nav a:active {
	background-color: #B0A68D;
	color: #A60D11;
}

#home {
	width: 72px;
}

#html_css {
	width: 112px;
}

#javascript_jquery {
	width: 182px;
}

#php_mysql {
	width: 120px;
}

#sql {
	width: 63px;
}

#ajax {
	width: 72px;
}

#e_commerce {
	width: 130px;
}

#ruby {
	width: 127px;
}

#photoshop {
	width: 114px;
}

/********** BREADCRUMBS / PAGE TITLES **********/
/********** These will probably be dynamic, and function as links? **********/            
#breadcrumbs {
	width: 1000px;
	/*height: 94px;*/
	/*background-color: #00F;*/
	font-size: 24px;
	font-weight: bold;
	margin-top: 77px;
}
	
#breadcrumbs p {
	margin: 34px 10px;
}

.arrow {
	color: #A60D11;
}

.current_page {
	color: #A60D11;
}
            
#content {
	width: 1000px;
}

/********** LEFT COLUMN **********/
/********** This is the sub-navigation that would change for each section **********/
            
#left_column {
	width: 335px;
	min-height: 250px;
	float: left;
}

#left_column p {
	/*height: 10px;*/
	width: 315px;
	background-color: #B0A68D;
	padding: 10px;	
	font-size: 22px;
	color: #FFF;
	font-weight: bold;
}

#nav_sub li a {
	display: block;
	height: 12px;
	width: 325px;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 10px; 
	border-top: 1px #FFF;	
	text-decoration: none;
	color: #666;
	margin-top: 1px;
}

#nav_sub li a:link, #nav_sub li a:visited  {
	background-color: #ECE4D1;
}

#nav_sub li a:hover, #nav_sub li a:active  {
	background-color: #B1934B;
	color: #FFF;
	border-left: solid 7px #990000;
	margin-left: -7px;
}

span {
	font-weight: bold;
	color: #B0A68D;
	padding-right: 3px;
}

#nav_sub li a:hover span {
	font-weight: bold;
	color: #A60D11; /* #B0A68D; */
	padding-right: 3px;
}

.current_nav_page {
	color: #A60D11;
	padding-right: 3px;
}


/********** CENTER COLUMN **********/
/********** Main content area **********/

#center_column {
	width: 355px; /* full width: 446px (446px - 1px border - 45px margin-left - 45px padding-right */
	min-height: 100px;
	float: left;
	margin-left: 45px;
	padding-right: 45px;
	border-right: solid 1px #B0A68D;
}

#center_column p {
	line-height: 16px;
	margin-bottom: 20px;
	font-size: 14px;
}

#center_column p.last {
	line-height: 16px;
	margin-bottom: 40px;
	margin-top: 20px;
}

#center_column p.last a:link,
#center_column p.last a:visited {
	color: #8C836E;
	text-decoration: none;
	font-weight: bold;
	font-size: 16px;
	outline: none;
}

#center_column p.last a:hover,
#center_column p.last a:active {
	color: #A60D11;       /* #B1934B; */
	border-bottom: 1px solid #A60D11;
	font-weight: bold;
	font-size: 16px;
	outline: none;
}


#center_column ul li {
	list-style-type: disc;
	list-style-position: inside;
	font-size: 14px;
	padding: 5px 0 0 20px;
    text-indent: -1em;
    padding: 5px 0 0 20px; 
}
a.more_info {
/*	display: block;
*/	line-height: 16px;
	font-weight: bold;
	font-size: 14px;
	text-decoration: none;
}

a.more_info:link, a.more_info:visited {
	color: #8C836E;
}

a.more_info:hover, a.more_info:active {
	color: #A60D11;       /* #B1934B; */
	border-bottom: 1px solid #A60D11;
}

/* Gene new */

a.more_info_2 {
/*	display: block;
*/	line-height: 16px;
	font-weight: bold;
	font-size: 10px;
	text-decoration: none;
}

.book_info em {
	font-style: italic;
	font-weight: bold;
}

a.more_info_2:link, a.more_info_2:visited {
	color: #8C836E;
}

a.more_info_2:hover, a.more_info_2:active {
	color: #A60D11;       /* #B1934B; */
	border-bottom: 1px solid #A60D11;
}

/********** RIGHT COLUMN **********/
/********** For book covers, additional book links, images, etc. **********/

#right_column {
	width: 173px; /*full width: 219px*/
	min-height: 250px;
	float: left;
	margin-left: 45px;
}

#right_column img { /* A width of 175px with the height scaling proportionately will give you the proper left margin between book image and dividing line */
	float: right;
	padding-bottom: 30px;
}

p.book_info {
	line-height: 16px;
	font-size: 10px;
	font-color: #A9A18D;	
}

/********** FOOTER **********/
#footer {
	width: 1000px;
	min-height: 30px;
	background-color: #B0A68D;
	margin-top: 20px;        /* 60px; */
	padding-top: 15px;
}

p.footer_info {
	font-size: 12px;
/*	color: #ECE4D1;
*/
	color: #000;
	font-weight: bold;
	font-size: 14px;
	margin-left: 10px;
	margin- top: 10px;
}
.right {
	float: right;
	color: #000;
	padding-right: 10px;
}
.footer_info a {
	line-height: 16px;
	font-weight: bold;
	font-size: 14px;
	text-decoration: none;
}

.footer_info a:link, .footer_info a:visited {
	color: #A60D11;
	outline: none;
}

.footer_info a:hover, .footer_info a:active {
	color: #A60D11;
	border-bottom: 1px solid #A60D11;
}

#center_column p.responsinator {
	font-weight: bolder;
	font-size: larger;
}