/*
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;
}
/*
debugging/notes styles 
*/
.debug .note-for-tom {
	display:none;
	background-color:#FFFF99;
	border:1px solid #FF9900;
	color:black;
}
.debug 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:810px;
	margin:0 auto 0 auto;
}
#header {
	position:relative;
	background:#fff url(../images/header-repeat-x.png) repeat-x bottom left;
	height:178px;
}
#header #demi-logo {
	position:absolute;
	top:4px;
	left:10px;
	width: 375px;
	height: 129px;
	background:url(../images/demidec-logo.png) no-repeat top left;
}  
#header #primary-nav {
    top:85px;
    left:79px;
    width:510px;
}
#header #primary-nav li {
    margin:0;
}
#header #subscriber-box { 
    position:absolute;
    width:200px;
    right:10px;
    top:10px;
}
#header #login-box {
    background:#e9e9e9;
    border:1px solid #eee;
    margin-bottom:10px;
    height:123px;
    overflow:hidden;
}
#header #subscribe-box {
    border:1px solid #7A7A7A;
    background:#FFA51D url(../images/order-repeat-x.png) repeat-x top; 
}
#content { 
	padding-top:1em;
	background:#fff url(../images/header-shadow-repeat-x.png) repeat-x top left;
	width:inherit;
	clear:none;
	float:none;
}
#content div.whole {
	clear:both;
	width:100%;
	padding:0 10px; 
	overflow:visible;
}
#content div.left {
	clear:left;
	padding:10px 0 0 10px;
	width:47%;
	float:left;
}
#content div.right {
	padding:10px 10px 0 0;
	width:47%;
	float:right;
}
#content div.left66 {
    clear:left;
    width:64.4%;
    float:left; 
    padding:10px 0 0 10px;
}
#content div.right33 {
    float:right;
    width:31.4%; 
    padding:10px 10px 0 0;
}
#content div.left66 img.whole {
    margin-left:-10px;
} 
#content div.right33 img.whole {
    margin-right:-10px;
} 
/*
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-x2.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;
}
/* horizontal list. nested list, parent lists align left */
.horiz-list li {
    float:left;
}
.horiz-list li li {
    clear:left;   
}


/* email strip for home pages, asking people to sign up */
#emailStrip {
    color:#387493;
    background:#FEFEF0 url(../images/header-email-repeat-x.png) bottom repeat-x;
    text-align:center;
    padding:.5em;
    border-top:1px solid #CFCFCB;
}

/* grid for ul */
 
ul.grid3 li {
    text-align:center;
    width:33%;
    float:left;
    padding:1em 0;
}

.nopadding { padding:0 !important;  }
.nopaddingtop { padding-top:0 !important;  }
.nomargin { margin:0 !important; }
.mb_medium { margin-bottom:10px; }
.scup-reg-gray-band { 
    padding:0 10px 0;
    margin-left:-10px;
    background:url(../images/home/welcome-to-the-world-scup3-repeat.png);
    color:#fff;
    height:33px;
}
p.left { 
    width:50%;
    text-align:left;
    float:left;
}
p.right { 
    width:50%;
    text-align:right;
    float:right;
}
img.left {
    float:left;
    margin-right:10px;
}
img.right {
    float:right;
    margin-left:10px;
}
.scup-reg-gray-band a { color:#fff; }