@import url(reset.css);

body {
background: #999 url(../images/locker_bg.gif) repeat-x;
font-family: Verdana, Helvetica,Arial, sans-serif; 
color: #245624;
font-size: 1em;}

img, #container, #masthead, #branding, #nav_main, h1, #sidebarg, h2, #sidebarw, #sidebarm, #sample, #copy { behavior: url(http://www.describe.org/projects/describe/styles/iepngfix.htc); }

#container {
width: 994px;
height: 667px;
background: #999 url(../images/locker_container_bg.gif) repeat-y;
}

/* 'margin: 0 auto' is necessary so the layout stays centered on screen when browser width is more than 1200px */
#container,#site_info {
	margin: 0 auto; 
	/*min-width: 800px;
	max-width: 75em;  1200px/16=75*/
}

#masthead, #nav_main, #branding {
margin:0;
}


a:link, a:active, a:visited {
color: #245624;
position: relative;
}

a img {position: relative;}
img a {position: relative;}


/*************************Branding********************/
/*#branding, #nav_main, #site_info, #content {
width:100%;
}*/

#masthead {
position: relative;
background: #ccc url(../images/locker_top.gif) no-repeat;
height: 9.06em;
width: 994px;
height: 92px;
}


#branding {
height: 63px;
position: relative;
top: 23%;
left: 25%;
z-index: 10;
background: url(../images/faceplate_500.png) no-repeat 0 center;}

#branding p {
position: absolute;
top: -9999px;
}

#branding a {
position: relative;}

#nav_main, #site_info {
margin: 0;
}

h1 a {
display: block;
height: 55px;
background: url(../images/branding_crop.png) no-repeat center;
position: relative;
}

h1 {
position: absolute;
top: 8%;
left: 15%;
width: 214px;
text-indent: -9999px;
}


/*************************Navigation********************/

#nav_main {
position: relative;
height: 50px;
background: url(../images/masking_tape.png) no-repeat top center;
width:880px;
margin:auto;
}

#nav_main h2 {
text-indent:-9999px;
z-index: 6;
height: 63px;
}

ul#nav_features {
/* position: absolute;
top: 17px;
left: 15%;
height: 50px;
*/
margin: -50px auto;
width: 80%;
}

#nav_features li {
display: inline;
}

ul#nav_features li a {
margin-right: 10px;
padding-right: 10px;
text-decoration: none;
font-weight:bold;}

ul#nav_features li a:hover {
	color: #990000; 
}
li#nav_motion a, li#nav_contact a {
margin-right: 0;
padding-right: 0;
}

li#nav_about a {
position: absolute;
right: 165px;
}

li#nav_contact a {
position: absolute;
right: 70px;
}

/*************************Content********************/

#sidebarg {
float: left;
width: 21% !important;
width: 20.9%;
margin: 0 10px 0 63px;
position: relative;
top: -.67em;
z-index: 40;
background: url(../images/logo_notepad.png) no-repeat top center;
height: 432px;
display:inline;
}

#sidebarg h2 {
text-indent: -9999px;
background: url(../images/content_graphics.png) no-repeat;
width: 120px;
height: 118px;
z-index: 15;
}

#sidebarg ul {
padding: 0 0 0 15px;}

#sidebarg li {
display: inline;
margin: 0 5% 0 0;
line-height: 2.5em;
}

#thumbs {
clear: both;
position: absolute;
width: 200px;
margin: 110px 10px 0 63px;
z-index: 65;}

#thumbs ul {padding: 0 0 0 15px;}

#thumbs li {
display: inline;
margin: 0 5% 0 0;
line-height: 2.5em;
}

#thumbs li img {
border: 1px solid #990000;
padding: 2px;
width: 40px;
height: 40px;
}

#sidebarg li a {position: relative;}
li#sidebarg a {position: relative;}

#sidebarg li img {
border: 1px solid #990000;
padding: 2px;
width: 40px;
height: 40px;
}

#sidebarw {
float: left;
width: 21% !important;
width: 20.9%;
margin: 0 10px 0 63px;
position: relative;
top: -.67em;
z-index: 40;
background: url(../images/logo_notepad.png) no-repeat top center;
height: 432px;
display:inline;
}

#sidebarw h2 {
text-indent: -9999px;
background: url(../images/content_words.png) no-repeat;
width: 120px;
height: 118px;
z-index: 15;
}

#sidebarw ul {
padding: 0 0 0 15px;}

#sidebarw li {
display: inline;
margin: 0 5% 0 0;
line-height: 2.5em;
}

/*#g1 li {margin-left: .6em;}*/

#sidebarw li img {
border: 1px solid #990000;
padding: 2px;
width: 40px;
height: 40px;
}

#sidebarm {
float: left;
width: 21% !important;
width: 20.9%;
margin: 0 10px 0 63px;
position: relative;
top: -.67em;
z-index: 40;
background: url(../images/logo_notepad.png) no-repeat top center;
height: 432px;
display:inline;
}

#sidebarm h2 {
text-indent: -9999px;
background: url(../images/content_motion.png) no-repeat;
width: 120px;
height: 118px;
z-index: 15;
}

#sidebarm ul {
padding: 0 0 0 15px;}

#sidebarm li {
display: inline;
margin: 0 5% 0 0;
line-height: 2.5em;
}

/*#g1 li {margin-left: .6em;}*/

#sidebarm li img {
border: 1px solid #990000;
padding: 2px;
width: 40px;
height: 40px;
}

/* #lock {
background: url(../images/builtin_combo_lock.png) no-repeat;
width: 106px;
height: 151px;
z-index: 0;
margin: 0 0 0 63px;
} */

#content {
float: left;
width: 71%;
margin: 0 ;
padding: 0;
}

#sample {
background: url(http://www.describe.org/projects/describe/images/backdrop.png) no-repeat;
width: 500px;
height: 386px;
display: table-cell;
text-align: center;
vertical-align: middle;
width: ...;
height: ...;}

/**hack for centering an image vertically and horizontally in a div when you know the dimensions of the background but not the img. Involves table cell and vertical and text align and ... dimensions in previous rule. **/

#sample * {
 vertical-align: middle;}

/*\*//*/
#sample {
    display: block;
}
#sample span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/

#copy {
float: right;
z-index: 30;
background: url(../images/card_bolts_hinge.png) no-repeat;
width: 395px;
height:383px;
margin: -15.6em 0 0 0;}

#copy h2 {
font-size: .9em;
margin: 14.5em 0px 0 7px;}

#copy p {
font-size: .8em;
background: #fff;
margin: 0 115px 4px 7px;
}

/*************************Site Info********************/

#site_info {
clear: both;
width: 994px;
height: 32px;
z-index: 11;
font-size: .8em;
/*margin: 0 5px 0 5px;*/
background: url(../images/locker_bottom.gif) no-repeat;
margin: 0 auto;}

#site_info h4 {
margin: 0 628px 0 60px;
display: inline;}

#site_info p {
display: inline;
}

#site_info a {
text-decoration: none;}

#site_info a:hover {
color: #990000;}