@import url(/inc/forms.css);
@import url(/inc/calendar.css);

.expired, .expired * {
    color: orange !important;
}
.unpublished, .unpublished * {
    color: red !important;
}
#main .expired {
    background-image: url(/chrome/expired.png);
    background-repeat: no-repeat;
    background-position: 460px 10px;
}
#main .unpublished {
    background-image: url(/chrome/unpublished.png);
    background-repeat: no-repeat;
    background-position: 400px 10px;
}


html {
    margin: 0;
    padding: 0;
}
body {
    background-color:  #ffffff; /* Old color: #f7f8f8 */
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 70%;
    color: #504e53;
}
a:link {
    text-decoration: none;
    color: #CC0000; /* #e16048 */
    font-weight: bold;
}
a:visited {
    text-decoration: none;
    color: #CC0000; /* #9c4332 */
    font-weight: bold;
}
a:hover {
    text-decoration: underline;
}
img { border: none; }
.hide { display: none; }

hr {
    border: none;
    border-bottom: 1px dashed #CC0000; /* #DB604A */
    height: 0;
    margin-bottom: 1em;
}
.hr {
    height: 0;
    overflow: hidden;
    padding-bottom: 1px;
    margin-bottom: 1em;
	border-bottom: 1px dashed #CC0000;	
/*    background: url(/chrome/dashed.horizontal.red.png) repeat-x top left; */
}


/** text sizing **/
.size2 {
    font-size: 90%;
}
.size3 {
    font-size: 110%;
}


.text a:link, .text a:visited {
    color: #003366;  /*     color: #e16048; */
    text-decoration: underline;
    font-weight: normal;
}


#page {
    width: 985px;
}
#header {
    border-left: 10px solid #CC0000;  /*#e16048;*/
    background: #003366;
    /* No image in the header for the package. url(/chrome/molecules.gif) top right no-repeat; */
    position: relative;
    height: 55px;
}
#printlogo { display: none; }

#content-container {
    overflow: hidden;
    width: 960px;
    padding: 0 15px 0 10px;
    line-height: 140%;
    background: url(/chrome/navigation.bg.gif) repeat-y #cccccc;
    border-bottom: 10px solid #fff;
}
#navigation {
    width: 175px;
    float: left;
    background-color: #cccccc;
    overflow: hidden;
}
#page-functions {
    height: 3em;
    position: relative;
    width: 785px; /* 600+175+10 */
    float: left;
}
#page-functions ul {
    position: absolute;
    bottom: .8em;
    right: 185px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#page-functions li {
    display: block;
    float: left;
    padding: 0;
    margin: 0;
}
#page-functions a {
    display: block;
    margin: 0 5px 0 0;
    float: left;
    background-position: top left;
    background-repeat: no-repeat;
    height: 15px;
    overflow: hidden;
    text-indent: -100em;
}
#page-functions a:hover {
    text-decoration: none;
    background-position: -30px -30px;
}
#page-functions-home        { width: 17px; background: url(/chrome/icon.home.png) no-repeat top left; }
#page-functions-sitemap     { width: 19px; background: url(/chrome/icon.sitemap.png) no-repeat top left; }
#page-functions-tip         { width: 26px; background: url(/chrome/icon.tip.png) no-repeat top left; }
#page-functions-subscribe   { width: 16px; background-image: url(/chrome/icon.subscribe.png); }
#page-functions-textsize    { width: 23px; background-image: url(/chrome/icon.textsize.png); }
#page-functions-contact     { width: 14px; background-image: url(/chrome/icon.contact.png); }


#maincontent {
    width: 600px;
    float: left;
    background-color: #ffffff;
    overflow: hidden;
    border-left: 10px solid #fff; /* don't want yet another container, så simulate padding with borders. */
    border-right: 10px solid #fff;
}
#subcontent {
    width: 165px;
    float: left;
    height: 35em;
    font-size: 90%;
    line-height: 140%;
    color: #687a7f;
	/* added */ 
	background-color: #ffffff;    
}
#subcontent[id] {
    height: auto;
    min-height: 35em;
}


#shortcuts {
    margin: 2em 20px 1em 20px;
}
#shortcuts select {
    width: 135px;
    wid\th: 100%;
}
#shortcuts p {
    margin: 0 0 1em 0;
}


#mainimage {
    position: relative;
    border: 1px solid #666666; 
    width: 598px;
    color: #4f5e62;
    margin-bottom: 1em;
}
#mainimage img {
    width: 598px;
    display: block;
}
#mainimage p {
    position: absolute;
    font-weight: bold;
    left: 0;
    bottom: 0;
    padding: .5em 19px;
    margin: 0;
    width: 560px;
    background: url(/chrome/a75.png);
}

#mainhead {
    padding: 0 20px;
    height: 3em;
	border-bottom: 1px dashed #003366;
/*    background: url(/chrome/dashed.horizontal.grey.png) repeat-x bottom left; */
}

#mainhead .date {
    padding: 1em 0 0 0;
    margin: 0;
    line-height: normal;
}

#main {
    width: 560px;
    padding: 0 20px;
    height: 32em;
}
#main[id] {
    height: auto;
    min-height: 32em;
}
#main h1 {
    font-size: 120%;
    font-weight: bold;
    margin: 2em 0 1em 0;
    color: #CC0000;
}
#main h2 {
    font-size: 110%;
    color: #003366;
    margin: 2em 0 1em 0;
    font-weight: bold;
}
#main h3 {
    color: #687a7f;
    font-size: 100%;
    font-weight: bold;
}
#main .intro {
   color: #003366;
}
#main .block {
    overflow: hidden;
    width: 100%;
}
#main .text {
    width: 368px;
    position: relative;
     color: #666666;
}
#main .text  a {
    color: #CC0000;
}
.image {
    position: relative;
    overflow: hidden;
}
#main .image {
    width: 174px;
    overflow: hidden;
    padding-top: 3px; /* Align text with image */
}
#main .PEwi .image {
    width: 560px;
}
#main .image img {
    display: block;
    border: 1px solid #666666; /* #c3c5c8 */
}
#main .image p {
    margin: 1em 0 0 0;
    padding: 0 5px 0 5px;
/*    background: url(/chrome/image.caption.molecules.png) no-repeat 2px 0; */
    font-style: italic;
    font-size: 90%;
    height: 33px;
    color: #666666; /* #687A7F */
}
/*
#main .image p.caption1 { background-image: url(/chrome/image.caption.molecules1.png); }
#main .image p.caption2 { background-image: url(/chrome/image.caption.molecules2.png); }
#main .image p.caption3 { background-image: url(/chrome/image.caption.molecules3.png); }
*/
#main[id] .image p {
    height: auto;
    min-height: 33px;
}
#main .imageleft .image {
    float: left;
}
#main .imageleft .text {
    float: right;
}
#main .text > p:first-child {
    margin-top: 0;
}
#main .imageright .image {
    float: right;
}

.calendar-month-arrows a {
    text-decoration: none;
    margin-top: 1px;
    margin-right-value: 1px;
    margin-bottom: 1px;
    margin-left-value: 1px;
    display: block;
    width: 21px;
    color: #ffffff;
/*    background-color: #003366;  */
}




.columns {
    overflow: hidden;
    width: 560px;
}
.columns .column {
    float: left;
    width: 176px;
    margin-right: 16px;
}
.columns .column.last {
    margin-right: 0;
}
#main .columns .text {
    margin-top: 1em;
    width: 176px;
}

#breadcrumb {
/*    background: url(/chrome/dashed.horizontal.red.png) repeat-x top left; */
    border-top: 1px dashed #CC0000;
    color: #003366;
    border-bottom: 1px solid #CC0000;
    padding: .5em 20px;
    margin-top: 1em;
}
#breadcrumb ul, #breadcrumb li {
    margin: 0;
    padding: 0;
    list-style: none;
}
#breadcrumb li {
    margin: 0;
    display: inline;
    padding-left: 10px;
/*	background: url(/chrome/breadcrumb.pil.png) no-repeat 0 .45em;   */	
}
#breadcrumb a {
    font-weight: normal;
    color: #003366;
}
#breadcrumb .active a {
    font-weight: bold;
}
#information {
    margin: .5em 20px;
	color: #003366;	    
}

#information p,
#information-print p {
    margin: 0;
}
#information p .color_separator {
    color: #CC0000; 
}
#information-print p a {
    color: #CC0000;	
}
#information span,
#information-print span {
/*    background: url(/chrome/circle.red.png) center center no-repeat; */
    padding-left: 15px;
}
#information-print span a {
    color: #CC0000;	
}
#information-print {
    display: none;
}

#subcontent .block {
    margin-bottom: 1.5em;
    width: 165px;
    overflow: hidden;
/* Are not going to have background. /DO	background-color: #003366;	    */
}    

#subcontent h2 {
/*    background-color: #687a7f; */
	background-color: #003366;
    border-left: 10px solid #CC0000;
    padding: .3em 5px;
    font-size: 100%;
    font-weight: bold;
	color: #ffffff;	
/*    color: #fff;*/
    margin: 0;
}    
#subcontent h2 a {
    color: #ffffff;
}
#subcontent h3 {
    font-weight: bold;
    font-size: 100%;
    margin: 0;
}
#subcontent .image {
    border: 1px solid #c3c5c8;
    margin-top: .3em;
    width: 163px;
}
#subcontent .image p {
    padding: 1em 15px;
    margin: 0;
    background: #edeff0;
}
#subcontent .image img {
    display: block;
}
#subcontent .text {
    border: 1px solid  #666666; /* #c3c5c8; */  
    padding: 0 15px;
    margin-top: .3em;
	/* added */
    background-color:  #cccccc;
	color:  #003366;	 
}
#subcontent .block ul, #subcontent .block ol {
    margin: 1em 0;
    padding: 0;
    list-style: none;
}
#subcontent .block li {
    margin-bottom: .5em;
}
#subcontent .block ol {
    padding-left: 20px;
    list-style: decimal;
}



#subcontent .list  .listimage {
    position: relative;
    left: -15px;
    margin-bottom: .2em;
}
#main .list {
    overflow: visible;
}
#main .list ul {
    width: 560px;
}
#main .list li {
    overflow: hidden;
    width: 540px;
}
#main .list .listimage {
    position: relative;
    float: right;
    width: 176px;
    overflow: hidden;
}
#main .list .listtext {
    width: 348px; /* (176*2+16) - padding(20) */
}

/*
.PElist td, .PElist th,
.PEti td, .PEti th,
.PEform td, .PEform th,
.PEcal td, .PEcal th*/
/*
#main .text th, #main .text td {
    text-align: right;
}
*/



.block ul {
    margin: 1em 0;
    padding: 0;
    list-style: circle;
    position: relative;
}
.block ul li {
/*  TO DO: differnet color for circle and anoteher color for text  */
    margin: 1em 0;
    padding: 0 0 0 20px;
	list-style: circle;
	color:#000;
/*    background: url(/chrome/circle.red.png) 0px .55em no-repeat; */
}
.block ul li h3 {
    margin: 0;
    font-weight: bold;
    font-size: 100%;
}
.block ul li p {
    margin: 0;
}
.date {
    color: #CC0000;	
}
#subcontent div.PElist ul li, #subcontent div.PEcal ul li {
    padding: 0;
    background: none;
}
div.PElist ul li h3 a, div.PEcal ul li h3 a {
    color: #CC0000 !important;
}    


#navigation ul {
    margin: 3em 0 0 0;
    padding: 0;
    list-style: none;
/*    border-top: 1px solid #C3C5C8;*/
    border-top: 1px solid #003366;	
}
#navigation ul a {
    font-weight: normal;
    display: block;
	color: #003366;
    margin: 0;
    padding: .4em 20px;
    background-color: #cccccc;
}
#navigation li {
    border-bottom: 1px solid #003366;	
}
#navigation ul a.selected {
    background-color: #003366;
    color: #fff !important;
}

#navigation ul a.selected:hover {
    color: #003366 !important;
}

#navigation ul ul a.selected {
    color: #CC0000 !important; /* #e16048  */
    background-color: transparent !important;
}
#navigation ul a:hover {
    background-color:  #ffffff;
    text-decoration: none;
}
#navigation ul ul a:hover {
    background-color: #cccccc;
}
#navigation ul ul a.selected:hover {
   background-color:  #cccccc;	
}

#navigation ul ul a {
   background-color:  #ffffff;
}


#navigation li a { padding-left: 20px; }
#navigation li li a { padding-left: 35px; }
#navigation li li li a { padding-left: 50px; }
#navigation li li li li a { padding-left: 65px; }
#navigation ul ul {
    margin: 0;
    border: none;
    background-color: #ffffff;
}

#navigation li li {
    border: none;   
}

#footer {
    color: #003366;
    padding-top: 4em;
    clear: both;
    font-size: 90%;
}



/** Search **/
#main .listing-pages {
    margin: 0;
    padding: 0;
    list-style: none;
    height: 3em;
}
#main .listing-pages li {
    display: block;
    margin: 0;
    padding: 0;
    background: #e8ebec;
    float: left;
    width: 1.5em;
    height: 1em;
    margin-right: 3px;
}
#main .listing-pages a {
    display: block;
    text-align: center;
    margin: 0;
    text-decoration: none;
    background: #e8ebec;
    border: 1px solid #ccc;
}
#main .listing-pages li.selected {
    background: none;
}
#main .listing-pages li.selected a {
    background: none;
}

#search .search-highlight {
    font-weight: bold;
}


#search-box {
    position: absolute;
    bottom: 10px;
    right: 15px;
    margin: 0;
    padding: 0;
}
#search-box input {
    margin: 0;
    padding: .1em 5px;
    width: 155px;
    color: #666666;
    
}



/**sitemap **/
#main #sitemap {
    width: 560px;
}
#sitemap ul {
    margin: 0;
    padding: 0;
}
#sitemap ul ul ul ul {
    margin-left: 20px;
}
#sitemap li {
    padding: 0;
    margin: .3em 0 2em 0;
    background: none;
}
#sitemap li li {
    margin: .2em 0;
}
#sitemap li a {
    display: block;
    padding: 0 0 .5em 0;
    margin-bottom: .5em;
    border-bottom: 1px solid #E16048;
    text-decoration: none;
    font-size: 110%;
    color: #44565c;
    font-weight: bold;
}
#sitemap li li a {
    border: none;
    color: #CC0000; /* #687a7f */
    padding: 0;
    margin: 0;
}
#sitemap li li li a {
    color: #CC0000; /* #504e53 */
    padding-left: 13px;
/*    background: url(/chrome/circle.red.png) 0 center no-repeat;      */
    font-weight: normal;
}
#sitemap li li li a:hover {
/*    background-image: url(/chrome/circle.red.filled.png);     */
}
#sitemap li li li li a {
    background: none;
}
#sitemap li li li li a:hover {
    background: none;
}
#sitemap li a:hover {
/* Removed by DO    color: #E16048; */
}




/** Width of PEs **/
#main .w3 {
    clear: both;
    width: 560px;
}
#main .w1 {
    float: left;
    width: 176px;
    margin-right: 16px;
}
#main .w2 {
    float: left;
    width: 368px;
    margin-right: 16px;
}
#main .w1 .text {
    width: 176px;
    float: none;
    margin-top: 1em;
}
#main .w1 .image {
    float: none;
    margin: 1em 0;
}
#main[id] .imageright.w2 .text,
#main[id] .imageleft.w2 .text {
    width: 176px;
}
#main .last {
    margin-right: 0;
}
#main .first {
    clear: both;
}
#main .PEseparator {
    width: 560px;
    clear: both;
    height: 1px;
    line-height: 1%;
}



/** Course listings **/
.courses-categories {
    margin: 1em 0;
    padding: 0;
    list-style: none;
    font-weight: bold;
    font-size: 110%;
}
.courses-categories li {
    margin: 1em 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    width: 560px;
    border: 1px solid black;
}
.courses-categories img {
    border: none;
    display: block;
}
.courses-categories span {
    display: block;
    position: absolute;
    top: 0;
    left: 20px;
    padding-top: .6em;
}
.courses-list {
    margin: 1em 0;
    padding: 0;
    list-style: none;
}
.courses-list li {
    margin: 1em 0;
    padding: 0;
}
#course-information h3 {
    margin-bottom: 0;
}
#course-information p {
    margin-top: 0;
}



.zebra-alternate {
    background-color: #e8ebec !important;
}