/* The main style sheet for CMX JumpStart Tahoe. */
/* This is the commented version, which fully explains all the rules within for your ease in understanding what each one does and how to modify it properly for your own design. In order to keep your file size low, it is recommended that you use the uncommented version of this sheet for the actual live deployment on your site. */

body {
     font: 100.01% Verdana, Arial, Helvetica, sans-serif; /* Sets the overall font size and family overriding an older Opera bug. */
     background: #3F77A0; /* Creates the overall window background color that blends in with the two drop shadow images. */
     margin: 0; /* Removes default margin some browsers add. */
     padding: 0; /* Removes default padding some browsers add. */
     text-align: center; /* Makes Win IE 5.5 and 5.0 center the design (bug). */
}

#holder {
	min-width: 600px; /* Keeps div from shrinking more than 600 pixels in width as window is narrowed. */
	max-width: 910px; /* Keeps div from growing more than 910 pixels in width as window is expanded. */
	background: #fff url(background-right.jpg) repeat-y top right; /* Creates the white background behind the content div and the drop shadow to its right. Tiled up and down to make both columns appear to be the same length no matter which is longer. */
	margin: 0 auto; /* Centers the overall design in standards-compliant browsers. */
	text-align: left; /* Gives the div positioning so that an absolutely positioned div (AP Div) descendant can be placed in relation to it. Otherwise, the AP Div would be placed relative to the body element (or the last positioned parent element). */
}
#container {
	width: 100%;
}


/* The following hack is read only by Mac IE. It gives it a fixed width for the holder div since Mac IE doesn't support min- and max-width. Be sure you do not add any comments INSIDE the hack or it will close. */
/*\*//*/
#holder {
	width: 750px;
	}
/* End show to Mac IE. */

#inner {
	background: url(background-left.jpg) repeat-y; /* Creates the blue background behind the sidebar and drop shadow to its left. Tiled up and down to make both columns appear to be the same length no matter which is longer. */
	margin-right: auto;
	margin-left: auto;
}

/* Needed for compliance with Section 508, rule o. */
#skipnav {
	position: absolute; /* Sets the div to be positioned in a precise spot in relation to the holder div. Also removes it from the flow, so it will not push down the header image. */
	top: 0; /* Places the div at the top edge of the holder div. */
	left: 0; /* Places the div at the left edge of the holder div. */
	margin-left: -1000px; /* Moves the div off the left side of the screen, making it invisible to those using visual browsers but accessible to those using screen readers and other user agents. */
	}

#header {
	background: #023467; /* Creates the photo for the top section. The color is used behind the photo in case the image isn't loaded. */
	font-family: " 'Gill Sans' ", "Trebuchet MS", Arial, Helvetica, sans-serif; /* Sets the font-family for all content within.*/
	height: 162px; /* The height matching the photo background. */
	margin: 0 10px; /* Creates space on left and right sides of div to let drop shadowed images on holder and inner divs show on each side. */
	position: relative; /* Gives the div positioning so that an absolutely positioned div descendant can be placed in relation to it. */
}

#header p {
	text-align: right; /* Aligns the home and contact links on the right side. */
	font-size: .8em; /* Reduces font size from default. */
	letter-spacing: .06em; /* Increases space between letter slightly. */
	line-height: 145%; /* Increases space between each line of text. */
	position: absolute; /* Sets the paragraph to be positioned in a precise spot in relation to the header div. */
	bottom: 40px; /* Places the bottom of the paragraph 40 pixels from the bottom of the header div. */
	right: 10px; /* Places the right side of the paragraph 10 pixels from the right edge of the header div. */
	margin: 0; /* Removes default paragraph margin so placement will be uniform across browsers. */
}
#header a:link, 
#header a:visited { /* Sets the styling of the links in the header. */
	color: #fff;
	text-decoration: none;
	font-weight: bold;
}
#header a:hover, 
#header a:active, 
#header a:focus { /* Sets the styling of the links when hovered, clicked on, or otherwise in focus. */
	text-decoration: underline;
}
#logo {
	width: 148px; /* This is the width of the logo image. */
	height: 46px; /* This is the height of the logo image. */
	position: absolute; /* Sets the div to be positioned in a precise spot in relation to the header div. */
	top: 36px; /* Places the top of the div 36 pixels from the top of the header div. */
	left: 23px; /* Places the left side of the div 23 pixels from the left size of the header div. */
}

#content {
	margin: 20px 20px 0 260px; /* Carves out space for the sidebar and gives the content area space. */
	padding-bottom: 5px; /* Prevents bottom margins on elements inside from escaping out the bottom of the div. */
}

/* The following selectors are styling for the content div's headings, paragraphs and links. */
#content h2, 
#content h3, 
#content h4 {
	font: normal 1.35em " 'Gill Sans' ", "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #1E2C31;
}
#content h4 {
	font-size: 1.25em;
}
#content p {
	color: #333;
	font: .75em/135% Verdana, Arial, Helvetica, sans-serif;
}
#content .link { /* Creates the larger Learn More link at the bottom of the page. */
	font: 1.25em " 'Gill Sans' ", "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#content a:link, 
#content a:visited {
	color: #000066;
	text-decoration: none;
	font-weight: bold;
}
#content a:hover, 
#content a:active, 
#content a:focus {
	text-decoration: underline;
}

/* The following selectors control the sidebar/navigational area. */
#sidebar {
	float: left; /* Moves div to left side of screen and allows content div to wrap around it on its right. */
	width: 210px; /* Sets width div should take up. Content div will take up remaining width to the right. */
	margin-top: 20px; /* Aligns the top of the sidebar content with the main content div. */
	margin-left: 10px; /* Creates space on left side of div to let drop shadow image on inner div show on the side. */
	display: inline; /* Fixes the doubled margin bug that Win IE 6 and lower manifest when a left float has a left margin. Doesn't hurt other browsers. */
}

#sidebar h2 {
	font: normal 1.2em " 'Gill Sans' ", "Trebuchet MS", Arial, Helvetica, sans-serif; /* Sets the font weight, size and list of possible families. */
	color: #fff; /* Text color of the headings. */
	background: #4589C0 url(sidehead.jpg) repeat-y; /* Creates the gradient background of the heading, as well as backup background color in case image isn't loaded. */
	padding: 1px 5px 2px; /* Keeps the text away from the inner edges of the background box. */
	margin: 0 0 5px 20px; /* Controls the outer edge placement which keeps the heading box away from other elements. */
}

/* The following selectors create the button look from list items in an unordered list. */
ul#nav {
	padding: 0; /* Removes default padding and margin to create a level playing field between browsers. */
	margin: 0;
	list-style: none; /* Removes the list marker (bullet) from the list items. */
}
#nav li {
	padding-left: 23px; /* Moves the text over by 23 pixels, which is the width of the little icons, so text doesn't overlap them. */
	margin-left: 20px; /* Clears the left side evenly all the way down. */
	font: .8em/110% Arial, Helvetica, sans-serif; /* Sets font size, line-height and list of possible families. */
}
#nav /* Each list item has a unique ID to place its own icon as its background image. The images are vertically centered so that as the text grows they will stay aligned with it. */
 li#marcia {
	background: url(../images/marcia_schuyler.gif) no-repeat left center;
}
#nav  li#phoebe {
	background: url(../images/phoebe_deane.gif) no-repeat left center;
}
#nav  li#miranda {
	background: url(../images/miranda.gif) no-repeat left center;
}

/* The below styles the button area next to the icon. */
#nav li a:link,
#nav li a:visited {
	display: block; /* Turns the A element into a solid block and thus clickable all the way across (not just on the words). */
	background: #fff; /* Overall background color of the button area. */
	color: #000; /* Text color. */
	font-weight: bold; /* Makes the link text appear bolded. */
	text-decoration: none; /* Gets rid of the default underlines on links. */
	margin: 3px 0 2px 0; /* Creates the space outside each button to space them apart from each other. */
	padding: 3px 2px 3px 20px; /* Creates the area within the button and keeps its text away from the edges of its background. */
}

#nav li a:hover, 
#nav li a:active, 
#nav li a:focus {
	background: #023467; /* Changes background color on hover, when clicked, and when otherwise focused. */
	color: #FFFFFF;
}
#sidebar  p a:link, #sidebar p a:visited,#sidebar p a:active {
	color: #000066;
	text-decoration: none;
	font-weight: bold;
}


/* The following selectors create the photo/info teaser area below the navigation. */
#features {
	background: #fff url(sidehead.jpg) no-repeat left bottom; /* Creates small strip of color at bottom of features block. Uses the same slice as the sidebar h2 headings but is set to not repeat. */
	margin: 20px 0 20px 20px; /* Keeps the div away from the UL above and the same distance from the left side of the sidebar. */
	padding-bottom: 10px; /* Creates a little space between the end of the content of the div and its bottom background image strip. */
}

#features h2 {
	margin-left: 0; /* Overrides the left margin set on "#sidebar h2" if one of those h2 element is also within the features div. The features div is already over 20px from the left margin and we don't want more space within it. We want the h2 element to go all the way across. */
}

#features p {
	font: .75em/135% Verdana, Arial, Helvetica, sans-serif; /* Sets font size, line-height and list of possible families. */
	margin: 20px 2px 10px 8px; /* Creates extra space between each paragraph element (with floated image). */
}

/* The next two selectors simply create the black footer area of the page. */
#bottom {
	background: #000; /* Creates the black color that runs all the way across the page background. */
}
#pagebott {
	min-width: 580px; /* Sets minimum width to 20px less than that set on the holder div to make up for the 10px on each side of the holder div that are removed by its side margins. */
	max-width: 890px; /* Sets maximum width to 20px more than that set on the holder div for the same reason. */
	border-left: 10px solid #000; /* Because we don't want drop shadow images to show here, we fill that extra 10px on each side with a border than blends into the background of the bottom div. */
	border-right: 10px solid #000;
	background: #26373E; /* Sets the background color. */
	margin: 0 auto; /* Centers the div like the holder div above it. */
}

#pagebott p {
	margin: 0; /* Removes default margin. */
	text-align: center; /* Center aligns the text. */
	font-size: 0.65em; /* Sets a font size slightly smaller than the main page text. */
	color: #FEDEEF; /* Sets a color without as much contrast as the main page text so that this doesn't jump out. */
	padding: 5px; /* Creates a small amount of space between the text and edges of the background. */
	letter-spacing: .06em; /* Creates small amount of space between letters in the text. */
}

/* The following selectors create the link and hover styling for the pagebott area. */
#pagebott a:link, 
#pagebott a:visited {
	color: #fff;
	text-decoration: underline;
}
#pagebott a:hover, 
#pagebott a:active, 
#pagebott a:focus {
	color: #FB73BA;
	text-decoration: none;
}


/* The following selectors are the form styles for contact.htm */
#content form {
	margin: 0; /* Removes the margin some browsers add by default. */
	padding: 0 0 10px; /* Creates 10px of padding at the bottom of the form. */
  	float: left; /* Keeps the internal clearing BR's within the form from clearing the external floated side column. */
	width: 100%; /* Makes form take up whole width of content div so that content following the form will not wrap on its right side. */
}	
#content fieldset {
	border: 1px solid #CFE5F5; /* Defines a border around each fieldset. */
	margin: 0 0 10px; /* Keeps the fieldset's bottom border 10px away from the next element */
	padding: 5px 0 15px 15px; /* Keep the elements inside away from the edge of the fieldset. */
}
#content legend {
	border: 1px solid #CFE5F5; /* Creates a defined box/border around the legend */
	color: #fff; /* Sets contrasting text color from background color. */
	background: #3F77A0 url(sidehead.jpg) repeat-y; /* Gives the legend the same background image as the feature headings, plus backup background color in case images aren't loaded. */
	padding: 1px 5px 2px; /* Keeps the borders away from the text by these specified amounts. */
	margin-bottom: 5px; /* Creates 5px of space below the legend. */
	font: normal 1em " 'Gill Sans' ", "Trebuchet MS", Arial, Helvetica, sans-serif; /* Styles the text within. */
}
#content label {
	float: left; /* Allows labels to be placed on the left with their inputs following on their right sides. */
 	width: 7em; /* All the labels have the same width, so their right edges line up vertically. */
  	clear: both; /* They are all cleared so that they always start a new line below previous form element floats. */
	font-size: .8em; /* Sets same font size as that used on main content text. */
	text-align: right; /* Aligns text to the right so that all form elements create an even middle gutter. */
	margin-top: 3px; /* Moves the text of the label down slightly to align with the top of the input to its right. */
	}
#content input, #content textarea {
	color: #000; /* Creates the text color inside the inputs. */
	border: 1px solid #FEDEEF; /* Sets a border. */
	padding: 1px; /* Keeps the text from touching the borders. */
	background: #FFF4FB; /* Creates a background color. */
	margin: 3px 5px 2px; /* Creates the space around the inputs and textareas so they don't stack on top of each other. */
	width: 280px; /* Creates a consistent width between all inputs and textareas. */
	float: left; /* Floated next to their labels. */ 
}

/* The following hack can only be read by Mac IE and removes the floats from the inputs and textareas to avoid bugs. Luckily, Mac IE is good without floating. Be sure you do not add any comments INSIDE the hack or it will close. */
/*\*/ /*/
#content input, #content textarea {
	float: none;
}
/* End show to Mac IE. */

/* This selector can be used on input boxes you want to be shorter than the normal ones. */
#content input.sminp {
	width: 110px; /* Smaller width. */
	margin-right: 160px; /* Keeps the shorter boxes aligned on the left with the wider ones. */
}

/* The following changes the colors of the inputs and textareas when the cursor is inside, in supported browsers. */
#content input:focus, #content input:active, #content textarea:focus, #content textarea:active {
	color: #000;
	background: #FEDEEF;
}

/* These float styles can be used to float images with text next to them. */
.fltrt {
	float: right;
	margin-left: 8px;
}
.fltlft {
	float: left;
	margin-right: 8px;
}

.brclear { /* Use a break with this class to clear float containers on both sides. */ 
clear:both; 
height:0; 
margin:0; 
font-size: 1px; 
line-height: 0; 
} 
.clearrt { /* Use a break with this class to clear float containers only on the right (so as not to clear the left floated sidebar, for instance). */
clear:right; 
height:0; 
margin:0; 
font-size: 1px; 
line-height: 0; 
} 
#sidebar h4 {
	font: bold normal 1em " 'Gill Sans' ", "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #1E2C31;
	text-align: center;
}
#sidebar p a:hover {
	color: #2D82A2;
	text-decoration: none;
	font-weight: bold;
}
#paintings p a:hover {
	color: #2D82A2;
	text-decoration: none;
	font-weight: bold;
}
#paintings a:link, #paintings a:visited, #paintings a:active {
	color: #000066;
	text-decoration: none;
	font-weight: bold;
}
#glh li {
	margin-left: 20px; /* Clears the left side evenly all the way down. */
	font: .8em/110% Arial, Helvetica, sans-serif;
	display: block;
	list-style-type: none;
	padding-left: 23px;
}
#glh li a:link, #glh li a:visited {
	display: block; /* Turns the A element into a solid block and thus clickable all the way across (not just on the words). */
	background: #fff; /* Overall background color of the button area. */
	color: #000; /* Text color. */
	font-weight: bold; /* Makes the link text appear bolded. */
	text-decoration: none; /* Gets rid of the default underlines on links. */
	margin: 3px 0 2px 0; /* Creates the space outside each button to space them apart from each other. */
	padding: 3px 2px 3px 20px; /* Creates the area within the button and keeps its text away from the edges of its background. */
}
#glh li a:hover, #glh li a:active, glh li a:focus {
	background: #023467; /* Changes background color on hover, when clicked, and when otherwise focused. */
	color: #FFFFFF;
}
#glh li#grace {
	background: url(../images/marcia_schuyler.gif) no-repeat left center;
}
#glh li#books {
	background: url(../images/phoebe_deane.gif) no-repeat left center;
}
ul#glh {
	padding: 0; /* Removes default padding and margin to create a level playing field between browsers. */
	margin: 0;
	list-style: none; /* Removes the list marker (bullet) from the list items. */
}