/*
demidec-web.css
General website styling.
*/

/*** undo default browser styles - see undohtml.css by Tantek Celik for more details. http://tantek.com */
ul,ol { list-style:none; }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input { margin:0; padding:0; }
fieldset { border:0; }
a img,:link img,:visited img { border:none }
address { font-style:normal }
body { background-color:white; }

/*** This is a hack for IE 5.5+, it is understood it will not pass validation */
img.transparent { behavior: url("css/pngbehavior.htc"); }

/*
debugging/notes styles 
*/
.note-for-tom {
display:none;
background-color:#FFFF99;
border:1px solid #FF9900;
color:black;
}
div.note-for-tom {
padding:5px 15px;
width:86%;
}
.debug img { border:1px dotted green; }
.debug li { border:1px dotted #999; }
.debug ul, .debug ol { border:1px solid #666; }
.debug div { border:1px solid lime; }

.hidden  {display:none;}

div.boxed {
display:block;
margin:10px;
padding:10px;
background-color:#FFFF99;
border:1px solid #BADFFC;
}

/* 
layout styles
*/
#container {
width:761px;
margin:10px auto 0 auto;
}
#header {
position:relative;
background:#2989CF url(../images/demidec-banner.png) no-repeat top left;
width:760px;
height:90px;
}
#header #demi-logo {
position:absolute;
top:13px;
left:80px;
width: 174px;
height: 38px;
}
#header #global-nav {
position:absolute;
top:15px;
left:300px;
width:445px;
text-align:right;
}
#header #primary-nav {
position:absolute;
top:65px;
left:15px;
width:730px;
text-align:center;
}
#content {
min-height:100px;
background:white url(../images/content-repeat-x.png) repeat-x top left;
width:inherit;
clear:none;
float:none;
}
#content div.whole {
clear:both;
width:730px;
padding:0 15px;
float:left;
}
#content div.left
{
    clear: left;
    padding: 15px 0 0 15px;
    width: 355px;
    float: left;
}
#content div.right
{
    padding: 15px 15px 0 0;
    width: 355px;
    float: right;
}


/*
Login box
*/
#login{
border:1px solid #72B812;
background:url(../images/material-repeat-x-even.gif) repeat-x top left;
display:block;
padding:10px;
margin:0 15% 1em 15%;
}
#login h4 {
margin:-10px;
margin-bottom:10px;
display:block;
text-align:center;
width:auto;
padding:.5em;
color:white;
background-color:#72B812;
font-weight:bold;
}
/*
image alignment text 
*/
#content img.right {
margin:0 0 15px 15px;
float:right;
clear:right;
}
#content img.left {
margin:0 15px 15px 0;
float:left;
clear:left;
}
/*
specific section markup, e.g. the sample material area of index
*/
#sample-material img {
margin:10px 10px 0 0;
}

/*
Materials Info Hide/Show
*/
#materials-ccs { display:block; }
#materials-flash { display:none; }
#materials-booster { display:none; }
/*
materials listing
*/
div#materials-ccs, div#materials-flash, div#materials-booster {
/*border:1px solid #BADFFC;
background:url(../images/yellow-repeatX.png) top repeat-x;
float:left;*/
}
#materials-info .unit {
clear:left;
}
#materials-info .third {
border:1px solid #BADFFC;
/*border-bottom:0;*/
background:white url(../images/material-repeat-x-even.gif) top left repeat-x;
float:left;
width:230px;
margin:0 4px 0 0;
}
#materials-info a:hover {
cursor:pointer;
}
#materials-nav .unit {
display:block;
padding:.5em 1em;
height:17em;
}

/*
Materials navigation styles, used on materialInfo.asp
*/
#materials-info .third.selected {
background:white url(../images/material-repeat-x.gif) top left repeat-x;
}
#materials-nav a {
text-decoration:none;
}
#materials-info img {
margin-right:8px;
}
#materials-info .nav-link {
display:block;
}
#materials-info .third span.nav-title {
display:block;
border-bottom:1px solid #BADFFC;
padding:.5em;
font-weight:bold;
text-align:center;
text-decoration:none;
}
#materials-info a .unselected .nav-title{
background:#D6F8A8 url(../images/material-list-repeat-x-full.gif) repeat-x top left; 
color:#54870E;
}
#materials-info a:hover .unselected .nav-title {
background:#72B812 none; 
color:white;
}
#materials-info a:hover div.unselected {
background:url(../images/material-repeat-x-over.gif) repeat-x top left;
}
#materials-info a .selected .nav-title {
background:#2989CC none; 
color:white;
}

#materials-list li a{
color:#aaa;
display:block;
width:45%;
border:1px solid #EEE;
margin:.2em 1em;
padding:.2em 1em;
text-decoration:none;
}
#materials-list li a:hover { 
color:#999;
border-color:#CCC;
background:#FAFAFA none; 
}
#materials-list li.full a {
color:#333;
border-color:#72B812;
background:#D6F8A8 url(../images/material-list-repeat-x-full.gif) repeat-x top left; 
}
#materials-list li.full a:hover { 
border-color:#4F800D;
background:#72B812 none;
color:white; 
}
#materials-list li.current a, #materials-list li.current a:hover {
color:white;
font-weight:bold;
border-color:#2989CC;
background:#2989CC none; 
}
#materials-list li.part a { 
color:#333;
border-color:#FF9900;
background:#F8E0A9 url(../images/material-list-repeat-x-part.gif) repeat-x top left; 
}
#materials-list li.part a:hover { 
border-color:#C67700;
background:#FF9900 none;
color:white; 
}
#materials-list ul {
padding-bottom:1em;
}
/*
Materials info/download
*/
#materials-info li {
list-style-position:inside;
list-style-type:none;
padding:0;
}
#materials .materialName {
font-weight:normal;
width:59%;
display:block;
float:left;
}
#materials div.odd, #materials div.even {
padding:8px;
position:relative;
}
#materials .materialDownload {
width:40%;
height:20px;
float:left;
}
#materials .materialDownload a {
color:#666;
background-color:#FFFFFF;
text-decoration:none;
border:1px solid #CCC;
padding:2px 6px;
margin:1px;
}
#materials .materialDownload a:hover {
color:#333;
background-color:#FFFF99;
text-decoration:none;
border:1px solid #999;
}
/** odd, even allow stripping */
#materials .odd {
float:left;
width:100%;
border-top:1px solid #eee;
border-bottom:1px solid #64B5F8;
border-right:1px solid #64B5F8;
border-left:1px solid #99CFFB;
background:#E6EFF6 url(../images/material-repeat-x.gif) top left repeat-x;
}
#materials .even {
float:left;
width:100%;
border-top:1px solid #ccc;
border-bottom:1px solid #CCC;
border-right:1px solid #CCC;
border-left:1px solid #EEE;
background:#FFF url(../images/material-repeat-x-even.gif) top left repeat-x;
}

/*
story content
*/
#story-contents {
padding:2em 0;
}

/*
team profiles
*/
#demidec-team li li {
margin-left:2em;
}
.team-profile img {
margin:0 15px 5px 0;
}

/*****
 Download form version 2. Based on Order form version 2 which follows.
 *****/
div#materials-list a.current { font-weight:bold; }
div#materials-list p { font-size:110%; }
div#materials-list h3 { border-bottom:1px solid #BADFFC; padding-bottom:.25em; }
div.downloadType {
position:relative;
float:none;
width:auto;
margin:0 auto 10px auto;
border:1px solid #BADFFC;
padding:0;
}
div.downloadType div.description {
display:block;
padding:10px;
width:auto;
background-color:#FFFF99;
border-bottom:solid 1px #BADFFC;
}
div.downloadType span.item-odd {
position:relative;
display:block;
padding:5px 10px;
background-color:#EDF4F9;
width:auto;
border-bottom:solid 1px #BADFFC;
}
div.downloadType span.item-even {
position:relative;
padding:5px 10px;
display:block;
width:auto;
border-bottom:solid 1px #BADFFC;
}

div.downloadType a.download-answers {
position:absolute;
right:2em;
font-size:80%;
color:#7777CC;
padding-left:10px;
}
div.downloadType div.boxed {
display:block;
margin:10px auto;
padding:10px;
width:90%;
background-color:#FFFF99;
border:1px solid #BADFFC;
}

div.downloadType img.icon {
margin-right:10px;
margin-bottom:0;
}

div.downloadType span.nav-title {
display:block;
width:auto;
color:white;
background-color:#2989CC;
font-weight:bold;
padding:.5em;
}

div.downloadType span.nav-title a {
color:white;
}


/*****
 Order form version 2. Old stuff left in just in case 
 *****/
div.orderPackage {
position:relative;
float:none;
width:75%;
margin:0 auto 10px auto;
border:1px solid #BADFFC;
padding:10px;
}

div.orderPackage div.boxed {
display:block;
margin:10px auto;
padding:10px;
width:90%;
background-color:#FFFF99;
border:1px solid #BADFFC;
}

div.orderPackage img.icon {
margin-right:10px;
margin-bottom:0;
}

div.orderPackage span.nav-title {
display:block;
width:auto;
color:white;
background-color:#2989CC;
font-weight:bold;
padding:.5em;
margin:-10px;
margin-bottom:10px;
}

/* Order Form, three steps */
.orderSteps div{
float:left;
display:block;
width:25%;
margin:2px 4px 0 0;
padding:.5em 1em;
font-weight:bold;
text-align:center;
text-decoration:none;
border:1px solid #BADFFC;
border-bottom:none;
background:#D6F8A8 url(../images/material-list-repeat-x-full.gif) repeat-x top left; 
color:#54870E;
}
.orderSteps.bottom div {
border:1px solid #BADFFC;
border-top:none;
margin:0 4px 2px 0;
}
.orderSteps div:hover {
background:#72B812 none; 
color:white;
}
.orderSteps div.current, .orderSteps div.current:hover {
background:#70BDF9 none; 
color:white;
}
/** currently all hidden, maybe they aren't needed? */
.orderLinks div{
display:none;
}
.orderLinks div.current{
clear:left;
display:block;
width:730px;
text-align:right;
display:none;
}
div#orderChart,  div#orderSpecify, div#orderAdditional {
border:1px solid #BADFFC;
background:url(../images/material-repeat-x.gif) top repeat-x;
}

/*
Order chart, and mouseovers!
*/
#orderChart .third {
float:left;
display:block;
width:235px;
margin:0 4px;
}
#orderChart h4 {
margin-top:1em;
display:block;
padding:.25em;
background-color:#2989CC;
color:white;
}
#orderChart h5 {
font-weight:normal;
}
#orderChart .unit { 
border-top:solid 1px #2989CC;
display:block; 
 
 
padding:0 .5em;
cursor:default;
}
#orderChart div.unit.selectedComponent {
background:#C7FF5E;
}
#orderChart div.unit.hover {
cursor:pointer;
background:#FFDF2B;
}
#orderChart div.unit.hoverComponent {
background:#ff9;
}
/* selected gets darker when hovered */
#orderChart div.unit.hover.selected {
background:#55890E;
}
/* when hovering doesn't change components of selected */
#orderChart div.unit.hoverComponent.selectedComponent {
background:#C7FF5E;
}
/* when a redundant selection is made, it's clearly marked */
#orderChart div.unit.selected.selectedComponent, #order div.unit.hover.selected.selectedComponent {
background:#72B812 url(../images/redundantBlack.png);
color:white;
}
/* when hovering over something already included, marked as included */
#orderChart div.unit.hover.selectedComponent {
background:#C7FF5E url(../images/includedBlack.png);
}
#orderChart div.unit.selected {
background:#72B812;
color:white;
}
#orderChart ul {
height:4em;
}
#orderChart li {
display:block;
float:left;
height:3em;
width:85px;
padding:.25em 0 .25em 1.75em;
background-position:top left;
}
#orderChart li.rec { font-weight:bold; font-size:110%; }
/* MSIE needs to support pngs... */
#orderChart li.www { background:url(../images/orderWWW.gif) center left no-repeat; }
body > * #orderChart li.www { background:url(../images/orderWWW.png) center left no-repeat; }
#orderChart li.tree { background:url(../images/orderTree.gif) center left no-repeat; }
body > * #orderChart li.tree { background:url(../images/orderTree.png) center left no-repeat; }
#orderChart li.tree-90 { padding-left:3.5em; height:1.5em;  width:auto; background:url(../images/orderTree90.gif) center left no-repeat; }
body > * #orderChart li.tree-90 { padding-left:3.5em; height:1.5em;  width:auto; background:url(../images/orderTree90.png) center left no-repeat; }
#orderChart li.cd { background:url(../images/orderCd.gif) center left no-repeat; }
body > * #orderChart li.cd { background:url(../images/orderCd.png) center left no-repeat; }
#orderChart li.cd-tree { padding-left:3.5em; background:url(../images/orderCdTree.gif) center left no-repeat; }
body > * #orderChart li.cd-tree { padding-left:3.5em; background:url(../images/orderCdTree.png) center left no-repeat; }

#orderChartKey {
padding-top:1em;
}
#orderChartKey h4 {
background-color:#72B812;
}

/* Order Specification */

#orderSpecify ol {
list-style-position:inside;
list-style-type:decimal;
}

/* Material table styles */
#materialTable {
width:100%;
font-size:10pt;
border-collapse:collapse;
}
#materialTable th, #materialTable td {
padding:.25em;
}
#materialTable th {
text-align:center;
font-weight:bold;
background-color:#2989CC;
border-right:2px solid #E0F1FE;
color:white;
}
#materialTable .even td {
background-color:#D3EAFD;
}
#materialTable .total {
background-color:#ffc;
font-weight:bold;
}

/* Ordering table */
#orderTable {
width:100%;
font-size:10pt;
border-collapse:collapse;
}
#orderTable th, #orderTable td {
padding:.25em;
}
#orderTable th {
text-align:center;
font-weight:bold;
background-color:#2989CC;
border-right:2px solid #E0F1FE;
color:white;
}
/*
footer
*/
#footer {
background:url(../images/footer-repeat-x.gif) repeat-x bottom left;
padding:100px 15px 20px 15px;
clear:both;
text-align:center;
font-size:80%;
}

/*
Map on home.htm, key on materials. describes little boxes that are colored
*/
div.color-box {
margin:1px;
font-size:0;
clear:left;
display:block;
position:relative;
float:left;
width:8px;
height:8px;
border:1px solid #27517A;
}
div.color-box#demidec { background-color:#66C3FF; }
div.color-box#nodemidec { background-color:#FFF; }
div.color-box#noacadec { background-color:#D1D1D1; }
div.color-box#allmat { background-color:#72B812; }
div.color-box#partmat { background-color:#FF9900; }
div.color-box#nomat { background-color:white; }

/* floats on top of other stuff. see the order page */
.floater {
filter:alpha(opacity=90);
	opacity: 0.9;
	-moz-opacity:0.9; padding:20px; position:absolute; top:12px; left:-42px; z-index:100; width:605px; background-color:#ffe; border:3px solid #999;
	}