/*************************************************************************

A style sheet for a portfolio of projects

Menubar styles are adapted from Adobe Spry CSS example styles

*************************************************************************/


.body  {
	margin-left: 0px;
	background-color: #1A1A1A;
}
	
.navbar {
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #CCCCCC;
	font-weight: bold;
	text-transform: capitalize;
	background-color: #330000;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #333333;
}
#header {
	background-color: #1a1a1a;
} 
#wrapper { /* this is the wrapper for the drop-down thumbnail menu */
	position:absolute;
	left:56px;
	top:84px;
	width:760px;
	height:auto;
	z-index:30;
	visibility: hidden;
}
#thumbslide { /* child of wrapper; determines the color of the slide-down part of the menu */
	background-color: #333333;
	height: 100px;
	z-index: 35;
	left: inherit;
	top: inherit;
}
#thumbbox {
	height: auto;
	width: auto;
	padding-left: 40px;
	position: relative;
	padding-top: 9px;
	z-index: 36;
}
.thumbs {
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-variant: small-caps;
	font-size: 12px;
	text-decoration: none;
	letter-spacing: 2pt;
	text-align: center;
	line-height: 30px;
	font-weight: bold;
}

img.thumbs {
	float:left;
	border: 1px solid #330000;
	margin-left: 6px;
	margin-right: 6px;
}
#container {
	height: 460px;
	margin: 0px;
	padding-top: 14px;
	padding-left: 54px;
	z-index: 10;
}
.container {
	background-color: #330000;
}

#proj-info {
	height:95px;
	width: 705px;
	padding-left: 152px;
	position: absolute;
	background-image: url(../projects/images/titleblock.jpg);
	background-repeat: no-repeat;
	z-index: 1;
	top: 100px;
	padding-top: 2px;
	background-position: 0px 0px;
}
.proj-info {
	font-size: 18px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 10px;
	font-weight: normal;
	color: #1a1a1a;
	text-decoration: none;
	position: absolute;
	left: 54px;
}
.client {font-size: 14px}
#contentlft {
	height: 322px;
	width: 500px;
	background-image: url(../projects/images/content1block.png);
	background-repeat: no-repeat;
	float: left;
	padding-top: 22px;
	margin-top: 100px;
	text-align: right;
	position: relative;
	padding-left: 21px;
}
#content1block  {
	height: 278px;
	width: 388px;
	float: left;
	z-index: 10;
}
#imageholder {
	margin-left: 0px;
	display: inline;
	text-align: center;
}
#captionslide {
	height:278px;
	z-index:20;
	position: absolute;
	left: 16px;
	width: 396px;
	bottom: 45px;
}
#caption {
	position: absolute;
	height: auto;
	width: 378px;
	visibility: hidden;
	bottom: -2px;
	z-index: 30;
	background-color: #333333;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #1A1A1A;
	border-bottom-color: #1A1A1A;
	border-left-color: #1A1A1A;
	left: 1px;
	padding-right: 8px;
	padding-left: 8px;
}
.caption {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	font-weight: normal;
	z-index: 25;
	font-style: italic;
	text-decoration: none;
	text-align: left;
	line-height: 170%;
}
img.button {
	margin-left: 0px;
	padding-bottom: 24px;
}
#buttonset  {
	height: 260px;
	position: absolute;
	z-index: 1;
	width: 66px;
	background-position: right top;
	text-align: center;
	left: 434px;
	top: 5px;
}

#contentrt {
	width:378px;
	text-align: center;
	height: 326px;
	background-color: #330000;
	margin-top: 100px;
	position: absolute;
	left: 575px;
}
#textslide {
	position: absolute;
	top: inherit;
	width: inherit;
	margin: 0px;
	height: 260px;
	visibility: hidden;
}
#content2title {
	height: auto;
	border: 1px dashed #CCCCCC;
	text-align: left;
	padding-top: 4px;
	padding-bottom: 2px;
	padding-left: 4px;
	position: absolute;
	width: 366px;
	left: 3px;
	top: 3px;
}
#content2header {
	background-color: #333333;
	height: 31px;
	width: 372px;
	clear: both;
	padding: 3px;
}
#fadeheader {
	height: 31px;
	width: 372px;
	clear: both;
	position: absolute;
	left: 0px;
	top: 6px;
	text-align: left;
	padding-top: 2px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 8px;
	visibility: hidden;
}
#content2 {
	width: 360px;
	height: 272px;
	background-color: #FFFFFF;
	margin-right: auto;
	margin-left: auto;
	margin-top: 4px;
	padding: 3px;
}
#textframe {
	border: 2px solid #CCCCCC;
	overflow: auto;
	width: 340px;
	height: 266px;
	margin: auto;
}
#text1 {
	margin: 0px;
	padding: 0px;
	}
#text2 {
	float: left;
	margin: 0px;
	padding: 0px;
	background-color: #FFFFFF;
	position: relative;
	width: inherit;
	height: inherit;
}
.text {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	font-weight: normal;
	text-align: left;
	color: #000000;
	line-height: 160%;
	padding-right: 9px;
	padding-left: 8px;
	padding-top: 3px;
}
#footer  {
	border-top-width: thin;
	border-top-style: dotted;
	border-top-color: #333333;
	background-color: #1a1a1a;
	clear: both;
}
.footer {
	background-color: #1a1a1a;
	color: #1a1a1a;
}

/****************************************************************************************

  MENU BUTTON STYLES
  
****************************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
	font-weight: normal;
	text-transform: capitalize;
	background-color: #330000;
	border: 1px solid #999999;
}
/* This appears to be the place to set any visual characteristic that you want to be common to all submenu items. E.g. background color.  The border refered to here is the border around ALL the currently visible submenu bars.  */


/* ul.MenuBarHorizontal a sets the appearance of all <a> tags within unordered lists. It therefore sets visual characteristics for ALL menu items. If you want submenu items to have a different appearance than top-level menu items, set those rules using different selectors. I've therefore removed 
	background-color: #EEE; 
	
This means that the buttons will take on the color of the page background. So I've added a MenuDiv to underlie them and provide the color for the top menu level.  The submenu characteristics are set independently in submenu selectors, below. 

All menu items have padding, borders and no text decoration. This also sets the type style, color (in the default state), and size. */

ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	text-decoration: none;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #666666;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-transform: capitalize;
	padding-top: 0.4em;
	padding-right: 1.2em;
	padding-bottom: 0.5em;
	padding-left: 1.2em;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #666666;
	color: #999999;
}


/* MOUSEOVER CONDITIONS: */


/* On mouse-over, or "focus," buttons change to a grey background and white text. 

The following rule only applies to the IE browser (notice the syntax using the colon): */

 
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	background-color: #200000;
	color: #FFFFFF;
}

/* The next rule set has a group selector, so top-menu and submenu items will have the same background color and font color.  Notice that the font color here overrides the base rule, above. Menu items that are open with submenus are set to MenuBarItemHover with a grey background and white text. */

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
	color: #FFFFFF;
	border: 1px solid #CCCCCC;
	background-color: #200000;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
	background-color: #200000;
	color: #FFF;
	border: 1px solid #CCCCCC;
}


/********************************************************************************

  MENU BUTTONS FINISHING TOUCHES: (styles for indicating that a submenu is under a 
  given menu item, and for the look of those subitems)

 *******************************************************************************/

/* These first rules position arrows on menu buttons when sub-menus exist, and on sub-menu buttons when sub-sub-menus exist, in the default (non-rollover) style.  The two sets below it similarly define the arrows in the hover state. Note that these buttons can either a down arrow OR a right arrow, depending on its position in the tree. */

/* This selector works only on 2nd-level buttons, therefore it can be used to differentiate them from the top-level buttons. */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
	background-image: url(../SpryAssets/SpryMenuBarDown.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
	padding-right: 1.5em;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #666666;
	border-bottom-color: #000000;
	border-left-color: #666666;
	border-right-style: solid;
	border-right-color: #000000;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	background-image: url(../SpryAssets/SpryMenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
	padding-right: 1.5em;
	background-color: #330000;
	width: auto;
}


/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	background-image: url(../SpryAssets/SpryMenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
	background-color: #200000;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-image: url(../SpryAssets/SpryMenuBarRightHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
	background-color: #200000;
}