/* Reset all styles ********************** */
* { margin: 0; padding: 0; } 

hr {
display: none;
}

body {
background: #adafa7;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
color: #d7d8cc;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

/* The main panels *********************************************************/

#page {
width: 970px;
margin: 0 auto;
/* margin auto centers the page */
background: #adafa7 url(gfx/bg_xnet.gif);
padding: 0px 0px 0px 0px;
z-index: 1;
}

/* top, right, bottom, left */

#branding {
width: 100%;
height: 50px;
margin: 0;
padding: 0px 0px 0px 0px;
background: #adafa7 url(gfx/logo.gif) no-repeat;
z-index: 2;
}

/* In general, do not use width 100% with the combination of side padding */

#navPanel {
float: left;
width: 210px;
margin: 0px 0px 0px 0px;
padding: 10px 0px 10px 10px;
z-index: 2;
}

#contentPanel {
float: right;
width: 720px;
margin: 0px 0px 0px 0px;
padding: 0px 15px 20px 0px;
z-index: 2;
}

#footer {
clear: both;
width: 100%;
font-size: 10px;
margin: 0;
text-align: left;
padding: 6px 0px 6px 0px;
background: #adafa7;
z-index: 2;
color: #d7d8cc;
}
#footer a:visited {color: #D6CCC4; text-decoration: none}
#footer a:link {color: #D6CCC4; text-decoration: none}
#footer a:hover {color: #ffff66; text-decoration: underline}

/* IDs within main panels ******************************/

#passcodeLabel {
clear: both;
display: block;
width: 100%;
margin: 0px 0px 2px 0px;
padding: 0px 0px 0px 0px;
border: 0;
}

#passcodeField {
clear: both;
display: block;
width: 100%;
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
border: 0;
}

#logout {
clear: both;
display: block;
width: 75px;
text-align: center;
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
border: 1px solid #d7d8cc;
background: #adafa7;
}
#logout a:visited {color: #000000; text-decoration: none}
#logout a:link {color: #000000; text-decoration: none}
#logout a:hover {color: #990000; text-decoration: underline}

#errorMsg {
clear: both;
display: block;
width: 100%;
text-align: left;
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
border: 0;
}

#pageTitle {
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
font-size: 12px;
color: #696a6c;
width: 720px;
margin: 28px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-bottom: 0px solid #caccc1;
}

/* top, right, bottom, left */

/* Class *********************************************************/

p {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
color: #696a6c;
/* line-height: 11px; */
}
p a:visited {color: #ffffff; text-decoration: none}
p a:link {color: #ffffff; text-decoration: none}
p a:hover {color: #990000; text-decoration: underline}

/* binder list menu **************************************/

#binderListArea {
width: 210px;
padding: 0px 0px 0px 0px;
}

#binderListArea a {
display: block;
margin-bottom: 5px;
}

#binderListArea a:visited, #binderListArea a:link, #binderListArea a:hover {
color: #000000; 
text-decoration: none; 
cursor: default;
}

ul#binderList {
margin: 0;
padding: 0;
width: 210px;
list-style: none;
}

#binderList li {
clear: both;
display: block; 
text-align: left;
width: 205px;
color: #000000;
border: 0;
margin: 0;
padding: 6px 0px 6px 5px;
border-bottom: 1px solid #cccccc;
}
#binderList li a:visited {color: #990000; text-decoration: none}
#binderList li a:link {color: #990000; text-decoration: none}
#binderList li a:hover {color: #990000; text-decoration: underline}

#binderList li.selected {
color: #ffffff;
background: #aeaeae;
}
#binderList li.selected a:visited {color: #ffffff;}
#binderList li.selected a:link {color: #ffffff;}
#binderList li.selected a:hover {color: #ffffff;}

#binderList li a {
}

#binderList li a:hover {
}

#binderList li#first {
border-top: 1px solid #cccccc;
}

#binderList li#last {
}

/* Viewing mode menu **************************************/

#viewMode {
width: 720px;
height: 30px;
padding: 0px 0px 0px 0px;
}

#viewMode a {
display: block;
float: left;
padding: 2px 5px 2px 0px;
}

#viewMode a:visited, #viewMode a:link, #viewMode a:hover {
color: #000000; 
text-decoration: none; 
cursor: default;
}

ul#viewModeList {
margin: 0;
padding: 0;
list-style: none;
float: left;
/* background: #e6e6e6 url(gfx/button_inactive.gif) no-repeat top left; */
}

#viewModeList li {
float: left;
display: block; 
border-right: 1px solid #e6e6e6;
}
#viewModeList li a:visited {color: #ffffff; text-decoration: none}
#viewModeList li a:link {color: #ffffff; text-decoration: none}
#viewModeList li a:hover {color: #990000; text-decoration: underline}

#viewModeList li a {
display: block;
padding: 2px 5px 2px 5px;
text-decoration: none;
float: left; /* to fix Mac IE 5.2 bug */
}

#viewModeList li a.selected:visited {color: #000000; text-decoration: none; cursor: default}
#viewModeList li a.selected:link {color: #000000; text-decoration: none; cursor: default}
#viewModeList li a.selected:hover {color: #000000; text-decoration: none; cursor: default}

#viewModeList li a:hover {
}

#viewModeList li.first {
}

#viewModeList li.last {
border-right: 0;
}

/* slide navigation bar *************************/

div.slideshowNav {
clear: both;
display: block;
width: 720px;
text-align: left;
border: 0;
margin: 0px 0px 10px 0px; 
padding: 3px 0px 4px 0px; 
background: url(gfx/dots_lite.gif) repeat-x bottom left;
}

p.firstNav {
float: left;
display: block;
margin: 0px 5px 0px 0px; 
padding: 0px 0px 0px 0px; 
border: 0; 
width: 34px;
text-align: left;
border-right: 1px solid #cccccc;
}

p.prevNav {
float: left;
display: block;
margin: 0px 0px 0px 0px; 
padding: 0px 0px 0px 0px; 
border: 0; 
width: 100px;
text-align: left;
font-weight: bold;
}

p.nextNav {
float: left;
display: block;
margin: 0px 0px 0px 0px; 
padding: 0px 0px 0px 0px; 
border: 0; 
width: 100px;
text-align: right;
font-weight: bold;
}

p.lastNav {
float: left;
display: block;
margin: 0px 0px 0px 5px; 
padding: 0px 0px 0px 0px; 
border: 0; 
width: 34px;
text-align: right;
border-left: 1px solid #cccccc;
}

p.counterNav {
float: left;
display: block;
margin: 0px 0px 0px 0px; 
padding: 0px 10px 0px 0px; 
border: 0; 
width: 210px;
text-align: right;
}

p.playNav {
float: left;
display: block;
margin: 0px 0px 0px 0px; 
padding: 0px 0px 0px 10px; 
border: 0; 
width: 210px;
text-align: left;
}


/* text views **********************************/
div.textList {
clear: both;
display: block;
width: 100%;
padding: 3px 0px 4px 0px;
margin: 0;
border: 0;
text-align: left;
background: url(gfx/dots_lite.gif) repeat-x bottom left;
}

div.textList div.mainData {
float: left;
clear: both;
/* width 100%; is necessary to get around the IE bug. */
width: 100%;
}

div.textList p.title {
float: left;
font-weight: bold;
margin: 0px 0px 3px 0px; 
}
div.textList p.projectCode {
float: left;
margin: 0px 5px 0px 0px; 
padding: 0px 5px 0px 0px; 
border-right: 1px solid #cccccc;
}
div.textList p.assetID {
float: left;
margin: 0px 5px 0px 0px; 
padding: 0px 5px 0px 0px; 
border-right: 1px solid #cccccc;
}
div.textList p.dimension {
float: left;
margin: 0px 5px 0px 0px; 
padding: 0px 5px 0px 0px; 
border-right: 1px solid #cccccc;
}
div.textList p.client {
float: left;
margin: 0px 5px 0px 0px; 
padding: 0px 5px 0px 0px; 
border-right: 1px solid #cccccc;
}
div.textList p.project {
float: left;
margin: 0px 5px 0px 0px; 
padding: 0px 5px 0px 0px; 
border-right: 1px solid #cccccc;
}
div.textList p.download {
float: left;
margin: 0px 5px 0px 0px; 
padding: 0px 5px 0px 0px; 
}

div.textList div.subData {
float: right;
}

div.textList p.fileSize {
float: left;
}
div.textList p.date {
float: left;
margin: 0px 0px 0px 6px; 
padding: 0px 0px 0px 5px; 
border-left: 1px solid #cccccc;
}

/* thumbnail views *****************************************/

div.thumbnailList {
clear: both;
display: block;
width: 100%;
padding: 4px 0px 5px 0px;
margin: 0;
border: 0;
text-align: left;
background: url(gfx/dots_lite.gif) repeat-x bottom left;
}

div.thumbnailIcon {
float: left;
margin: 0;
padding: 2px;
border: 0;
width: 70px;
height: 70px;
text-align: center;
background: #666666;
}

div.thumbnailList div.dataArea {
float: right;
width: 635px;
}

div.thumbnailList p.title {
float: left;
font-weight: bold;
margin: 0px 0px 3px 0px; 
}

div.thumbnailList div.mainData {
float: left;
clear: both;
/* width 100%; is necessary to get around the IE bug. */
width: 100%;
}

div.thumbnailList p.projectCode {
clear: both;
float: left;
margin: 0px 5px 3px 0px; 
padding: 0px 5px 0px 0px; 
border-right: 1px solid #cccccc;
}
div.thumbnailList p.assetID {
float: left;
margin: 0px 5px 3px 0px; 
padding: 0px 5px 0px 0px; 
border-right: 1px solid #cccccc;
}
div.thumbnailList p.dimension {
float: left;
margin: 0px 5px 3px 0px; 
}
div.thumbnailList p.clientProject {
clear: both;
float: left;
}
div.thumbnailList p.client {
float: left;
clear: both;
margin: 0px 5px 3px 0px; 
padding: 0px 5px 0px 0px; 
border-right: 1px solid #cccccc;
}
div.thumbnailList p.project {
float: left;
margin: 0px 5px 3px 0px; 
}
div.thumbnailList p.download {
clear: both;
float: left;
margin: 0px 5px 3px 0px; 
}

div.thumbnailList div.subData {
float: right;
}

div.thumbnailList p.fileSize {
float: left;
margin: 0px 0px 3px 0px; 
}
div.thumbnailList p.date {
float: left;
margin: 0px 0px 3px 6px; 
padding: 0px 0px 0px 5px; 
border-left: 1px solid #cccccc;
}

/* medium views *****************************************/
/* width 100%; is necessary to get around the IE bug. */

div.mediumSlideshow, div.mediumStoryboard {
clear: both;
display: block;
width: 100%;
padding: 6px 0px 6px 0px;
margin: 0;
border: 0;
text-align: left;
}

div.mediumStoryboard {
background: url(gfx/dots_lite.gif) repeat-x bottom left;
}

div.mediumSlideshow div.mediumImg, div.mediumStoryboard div.mediumImg  {
width: 400px;
float: left;
margin: 0px 0px 0px 0px; 
padding: 0px 0px 0px 0px;
border: 0; 
}

div.mediumSlideshow div.dataArea, div.mediumStoryboard div.dataArea {
width: 310px;
float: right;
margin: 0px 0px 0px 0px; 
padding: 0px 0px 0px 0px;
border: 0; 
}

div.mediumSlideshow p.title, div.mediumStoryboard p.title {
float: left;
font-weight: bold;
line-height: 16px;
}

div.mediumSlideshow div.mainData, div.mediumStoryboard div.mainData {
float: left;
clear: both;
width: 100%;
}

div.mediumSlideshow p.projectCode, div.mediumStoryboard p.projectCode {
clear: both;
float: left;
line-height: 16px;
width: 100%;
}
div.mediumSlideshow p.assetID, div.mediumStoryboard p.assetID {
clear: both;
float: left;
line-height: 16px;
width: 100%;
}
div.mediumSlideshow p.dimension, div.mediumStoryboard p.dimension {
clear: both;
float: left;
line-height: 16px;
width: 100%;
}
div.mediumSlideshow p.clientProject, div.mediumStoryboard p.clientProject {
clear: both;
float: left;
width: 100%;
}
div.mediumSlideshow p.client, div.mediumStoryboard p.client {
clear: both;
float: left;
line-height: 16px;
width: 100%;
}
div.mediumSlideshow p.project, div.mediumStoryboard p.project {
clear: both;
float: left;
line-height: 16px;
width: 100%;
}
div.mediumSlideshow p.download, div.mediumStoryboard p.download {
clear: both;
float: left;
line-height: 16px;
width: 100%;
}

div.mediumSlideshow div.subData, div.mediumStoryboard div.subData {
clear: both;
float: left;
width: 100%;
}

div.mediumSlideshow p.fileSize, div.mediumStoryboard p.fileSize {
clear: both;
float: left;
line-height: 16px;
width: 100%;
}
div.mediumSlideshow p.date, div.mediumStoryboard p.date {
clear: both;
float: left;
line-height: 16px;
width: 100%;
}

div.mediumSlideshow p.descr, div.mediumStoryboard p.descr, div.largeSlideshow p.descr, div.largeStoryboard p.descr {
clear: both;
float: left;
line-height: 16px;
margin: 10px 0px 0px 0px; 
width: 100%;
}

/* Large view *********************************/

div.largeSlideshow, div.largeStoryboard {
clear: both;
display: block;
width: 100%;
padding: 10px 0px 10px 0px;
margin: 0;
border: 0;
text-align: left;
}

div.largeStoryboard {
background: url(gfx/dots_lite.gif) repeat-x bottom left;
}

div.largeStoryboard div.dataArea, div.largeSlideshow div.dataArea {
width: 720px;
clear: both;
float: left;
margin: 0px 0px 0px 0px; 
padding: 5px 0px 0px 0px;
border: 0; 
}

div.largeImg {
clear: both;
width: 100%;
margin: 0px 0px 0px 0px; 
padding: 0px 0px 0px 0px;
border: 0; 
text-align: left;
}

div.largeSlideshow div.mainData, div.largeStoryboard div.mainData {
float: left;
clear: both;
/* width 100%; is necessary to get around the IE bug. */
width: 100%;
}

div.largeSlideshow p.title, div.largeStoryboard p.title {
float: left;
font-weight: bold;
margin: 0px 0px 3px 0px; 
}
div.largeSlideshow p.projectCode, div.largeStoryboard p.projectCode {
float: left;
margin: 0px 5px 0px 0px; 
padding: 0px 5px 0px 0px; 
border-right: 1px solid #cccccc;
}
div.largeSlideshow p.assetID, div.largeStoryboard p.assetID {
float: left;
margin: 0px 5px 0px 0px; 
padding: 0px 5px 0px 0px; 
border-right: 1px solid #cccccc;
}
div.largeSlideshow p.dimension, div.largeStoryboard p.dimension {
float: left;
margin: 0px 5px 0px 0px; 
padding: 0px 5px 0px 0px; 
border-right: 1px solid #cccccc;
}
div.largeSlideshow p.client, div.largeStoryboard p.client {
float: left;
margin: 0px 5px 0px 0px; 
padding: 0px 5px 0px 0px; 
border-right: 1px solid #cccccc;
}
div.largeSlideshow p.project, div.largeStoryboard p.project {
float: left;
margin: 0px 5px 0px 0px; 
padding: 0px 5px 0px 0px; 
border-right: 1px solid #cccccc;
}
div.largeSlideshow p.download, div.largeStoryboard p.download {
float: left;
margin: 0px 5px 0px 0px; 
padding: 0px 5px 0px 0px; 
}

div.largeSlideshow div.subData, div.largeStoryboard div.subData {
float: right;
}

div.largeSlideshow p.fileSize, div.largeStoryboard p.fileSize {
float: left;
}
div.largeSlideshow p.date, div.largeStoryboard p.date {
float: left;
margin: 0px 0px 0px 6px; 
padding: 0px 0px 0px 5px; 
border-left: 1px solid #cccccc;
}

/* Play movie view *******************************/

div.playMovie {
clear: both;
display: block;
width: 100%;
padding: 3px 0px 3px 0px;
margin: 0;
border: 0;
text-align: left;
}

/* forms ************************************/

input {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
margin: 0px 0px 0px 0px;
}

input.passcodeSubmit {
float: left;
margin: 0;
padding: 0;
}

input.passcode {
float: left;
width: 170px;
border: 1px solid #d7d8cc;
color: #adafa7;
margin: 0px 0px 0px 0px;
}

p.notice {
float: left;
border: 1px solid #d7d8cc;
padding: 5px 5px 5px 30px; 
margin: 10px 0px 10px 0px;
color: #d7d8cc; 
line-height: 16px;
background: #adafa7 url(gfx/info_sign.gif) no-repeat top left;
}


/*
P.I.E. FLOAT CLEARING
See http://www.positioniseverything.net/easyclearing.html 

DYSKE:
Use this on the container block, not in the content block.
You can apply multiple classes to an element by separating them with a space.
E.g. class="clearfix anotherClass"
clearfix must come first.
*/

.clearfix:after {
content: ".";
clear: both;
height: 0;
visibility: hidden;
display: block;
}

.clearfix {
display: inline-block; /* Fixes IE/Mac */
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */