/*
	Document   : screen
	Created on : May 17, 2010, 10:57:52 AM
	Author     : brad
	Description:
		Purpose of the stylesheet follows.
*/

/*
	TODO customize this sample style
	Syntax recommendation http://www.w3.org/TR/REC-CSS2/

There are six ways of controlling the web page:
1- declare an element (e.g. body)
2- declare an id (e.g. #header)
3- declare a class (e.g. .home)
4- declare a context selector (e.g. #nav ul)
5- declare a pseudo class (e.g. a:link, a:visited, a:hover) - this includes the state of the element
6- use an attribute selector (e.g. a[title~=home])
*/

root {
	display: block;
}

body {
	min-width: 960px;
	max-width: 85%;
	margin: 5px auto 0 auto;
	padding: 0;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 1em;
	background-color: #ffffff;
	/*background-color: #101010;*/
	color: #ffffff;
}

div {
}

#topbar {
	/*width: 900px;*/
	background-color: #5b503e;
}

#header {
}

#header>div {
	min-height: 99px;
}

#header h1  {
padding:28px 0 0 0;
}

#logo {
	position: absolute;
	/*top: 47px;*/
	z-index: 2;
}

/*	Begin in class with Brother Roberston */
#nav ul {
	margin: 0 0 0 165px;
	padding: 0 0 0 2px;
	font: bold medium "Palantino Linotype", "Book Antigua", Palantino, serif;
}

#nav li {
	display: inline;
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: center;
}

#nav li a {
	display: inline-block;	/*	This will cause the link to fill the entire space given to it, but not new lines */
	/*width: 7em;	/*	This makes all the tabs the same width, don't think I want this.	*/
	padding: 2px .4em 0 .4em;
	margin-left: 0.2em;
	border: 1px solid #000;
	background-color: #fff;
	text-decoration: none;
	/*	the following lines of code will not validate!	*/
	border-top-left-radius:	5px;	/*	This is going to give the border a rounded look	*/
	border-top-right-radius: 5px;	/*	No browser currently supports these properties in CSS 3 yet	*/
	/*	Telling browser how to interpret code it does not support yet	*/
	/*	Firefox: note Mozilla has it in the wrong order for now, will have to change later	*/
	-moz-border-radius-topright: 5px;
	-moz-border-radius-topleft: 5px;
	/*	Safari and Chrome	*/
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	/*	Opera */
	-o-border-top-left-radius: 5px;
	-o-border-top-right-radius: 5px;
	color: black;
}

#nav a:link {
	color: #000;
}

#nav a:visited {
	color: gray;
	outline: none; /*	this is the dotted line surrounding the last link clicked when you hit the back button to the previous page */
}

#nav a:hover,
#nav a:focus { /*	both selectors will share the rule (can be same line or enter after comma)	*/
	color: #fff;
	background-color: #000;
	/* would also change the border color to match the background color - but it is already black for this example	*/
	border-bottom: 1px solid #fff;
}
/*	He leaves out the active state since it is so short and nobody notices it anyway	*/

/*	We want to have the current tab highlighted aldready!!!	*/
.home #nav a[title~=home],
.family #nav a[title~=Family],
.interests #nav a[title~=Interests],
.technology #nav a[title~=Technology],
.assignments #nav a[title~=Assignments],
.about #nav a[title~=about],
.contact #nav a[title~=Contact] {
	color: #fff;
	background-color: #000;
	/* would also change the border color to match the background color - but it is already black for this example	*/
	border-bottom: 1px solid #fff;	/*	This may want to be the color of the div underneath it!	*/
}

/* End of class work with Brother Roberston */

#mainarea {
	position: relative;
	overflow: auto;
	/*min-width: 900px;*/
	background-color: #bcac90;
}

#mainarea>div>div {

	padding: 5px;
}

#subnav {
	width: 20%;
	min-width: 190px;
	float: left;
	font-size: .8em;
	z-index: 1;
}

#subnav>div>div {
	position: fixed;
}

#subnav p {
	margin: 0;
}

#subnav ul {
	margin: 0;
	padding: 0 0 0 25px;
}

.home #subnav {
	display: none;
}

.home #content {
	width: 100%;
}

#content {
	float: right;
	min-width: 657px;
	width: 80%;
	/*max-width: 685px;*/
	background-color: #313e50;
	min-height: 400px;
}

#content img {
	display: block;
	margin: 5px auto;
}

#content label {	/*	code created in class for contact me form	*/
	font-weight: bold;
	width: 6em;
	margin-right: 1em;
	float: left;
	text-align: right;
}

#content label[for~=submitmessage] {
	clear: both;
}

.imgsidebyside {
	margin: 0 auto;
}

.imgsidebyside img {
	display: inline;
}

/*.about #content img {*/
.right {
	float: right;
	padding: 0 10px;
}

#content h3 {
	text-align: center;
}

#aside {
	display: none;
	float: left;
	/*width: 160px;*/
}

.about #aside {
	display: block;
	width: 160px;
/*	position: absolute;
	right: 0;*/
	float: left;
	background-color: #bcac90;
}

#footer {
	min-width: 960px;
	width: 100%;
	clear: both;
	text-align: center;
	margin: auto;
	background-color: #2a323c;
}

#footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#footer li {
	display: inline;
	padding: 1em;
}

h1 {
	margin: 0;
	text-align: center;
}

p {
}

#footertext {
}

a:link {
	color: red;
}

a:visited {
	color: white;
}

a:active {
	color: gray;
}

a>img {
	border: none;
}

th {
	font-weight: bold;
	text-align: center;
}

table {
	border-collapse: collapse;
}

table, th, td {
	border: 1px solid white;
}

td, th {
	padding: 1px 5px;
}

#stylecolortable {
	background-color: white;
	color: black;
}

#stylecolortable, #stylecolortable>tr>th, #stylecolortable>tr>td {
	border: 1px solid black;
}


/*	Colors for the color table in the style guide */

#color1 {
	background-color: #796646;
}

#color2 {
	background-color: #5b503e;
}

#color3 {
	background-color: #4f3a17;
}

#color4 {
	background-color: #bca681;
}

#color5 {
	background-color: #bcac90;
}

#color6 {
	background-color: #313e50;
}

#color7 {
	background-color: #2a323c;
}

#color8 {
	background-color: #101f34;
}

#color9 {
	background-color: #778ba7;
}

#color10 {
	background-color: #8493a7;
}

#check label {
line-height:1em;
margin-right:0;
}
#check {
display:inline;
float:left;
}
#submitmessage  {
display:block;
clear:left;
}

#sections img  {
display:inline;
margin:0 2%;
width:20%;
max-width:200px;
}

#sections div {
display:table;
margin:0 auto;
width:80%;
}