body {
color: #fff;
background-color: #000;
font-family: arial, helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-variant: normal;
font-weight: 400;
word-spacing: normal;
letter-spacing: normal;
line-height: 1.2em;
margin: 0 0;
padding: 0 0;
}

#canvas {
width: 860px;
margin: 20px auto;
padding: 20px;
color: #000;
background-color: #fef200;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}

#header {
margin-bottom: 1em;
background: url("../images/logo-header.jpg") no-repeat 0% 50%; /* options logo-red.png logo-black.png logo-dkgreen.png logo-ltgreen.png */
height: 150px;
}

#playbutton {
float: right;
}

/* begin menu style */

ul#menu {
list-style: none;
margin: 0 0 2em 0;
padding: 0;
color: #000;
background-color: #fef200;
}

ul#menu li {
display: inline;
position: relative;
margin: 1em;
padding: 0;
color: #000;
background-color: #fef200;
}

ul#menu li ul {
position: absolute;
list-style: none;
margin: 0;
padding: 0;
left: 0;
top: 1em;
display: none;
color: #000;
background-color: #fef200;
width: 300px;
}

ul#menu li ul li {
margin: 0;
padding: 0;
}

ul#menu li:hover ul {
display: block;
}

ul#menu li a {
text-decoration: none;
margin: 0;
padding: 0;
color: #000;
background-color: #fef200;
}

ul#menu li a:hover {
}

ul#menu li ul li a {
display: block;
text-decoration: none;
margin: 0;
padding: 0.5em;
color: #000;
background-color: #fef200;
border-bottom: 1px solid #fff;
}

ul#menu li ul li a:hover {
font-weight: 700;
}

/* end menu style */

.article {
color: #000;
background-color: #fff;
padding: 2em;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid #333;
margin-bottom: 1em;
}

.twocolumn {
text-align: justify;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
column-gap: 2em;
-moz-column-rule: 1px solid #ccc;
-webkit-column-rule: 1px solid #ccc;
column-rule: 1px solid #ccc;
margin-bottom: 1em;
}

.articlebox {
min-height: 300px;
width: 350px;
color: #000;
background-color: #fff;
padding: 2em;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid #333;
margin-bottom: 1em;
}

h1 {
color: #060;
background-color: inherit;
}

h2 {
color: #030;
background-color: inherit;
font-size: 1.4em;
margin: 0 0 1em 0;
padding: 0;
}

h3 {
color: #060;
background-color: inherit;
font-size: 1.2em;
margin: 0 0 1em 0;
padding: 0;
}

h4 {
color: #000;
background-color: inherit;
font-size: 1.1em;
margin: 0 0 0 0;
padding: 0;
}

h5 {
color: #000;
background-color: inherit;
font-size: 1em;
margin: 0 0 1em 0;
padding: 0;
}

a {
}

img {
border: none;
}

.shadow {
box-shadow: 10px 10px 10px #333;
-webkit-box-shadow: 10px 10px 10px #333;
margin-bottom: 0.5em;
}

.leftfloat {
float: left;
margin: 0 3em 1em 0;
}

.rightfloat {
float: right;
margin: 0 1em 1em 2em;
}

fieldset {
border: none;
margin: 0;
padding: 0;
}

hr {
margin: 2em 0;
}

.bold {
font-weight: 700;
}

.italic {
font-style: italic;
}

.linethrough {
text-decoration: line-through;
}

.underline {
text-decoration: underline;
}

.center {
text-align: center;
}

.blockquote {
margin: 1em 3em 1em 3em;
font-style: italic;
text-align: justify;
}

.bgoffset {
color: inherit;
background-color: #ffc;
border-top: 1px dotted #666;
border-bottom: 1px dotted #666;
padding: 1em;
}

button.general {
min-width: 160px;
margin: 0;
padding: 0.4em 1em;
color: #fff;
background-color: #360;
cursor: pointer;
font-size: 0.8em;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
box-shadow: 5px 5px 5px #333;
-webkit-box-shadow: 5px 5px 5px #333;
margin-bottom: 0.5em;
}

button.general:hover {
color: #fef200;
background-color: #360;
}

/* begin style information for feature section */

div.feature {
/*border-right: 20px solid #333;
border-left: 20px solid #333;*/
padding: 0 2em;
margin-bottom: 20px;
text-align: center;
}

form.feature {
margin: 1em;
padding: 0;
display: inline;
}

fieldset.feature {
margin: 0;
padding: 0;
display: inline;
}

/* having an equal amount of text lines triggers an uneven vertical alignment of buttons with some browsers */
/* do not have an unequal amount of text lines */

button.feature {
display: inline;
overflow: hidden;
color: #fef200;
background-color: #000;
margin: 0;
padding: 1em;
width: auto;
height: 100px;
cursor: pointer;
border: none;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 5px 5px 5px #fff;
-webkit-box-shadow: 5px 5px 5px #fff;
}

button.feature:hover {
color: #fff;
background-color: #000;
}

/* end style information for feature section */

/* begin of styles for the program grid page */

table#grid {
table-layout: auto;
border-collapse: collapse;
font-size: 0.9em;
}

#grid tr {
}

#grid tr.header {
border-bottom: 2px solid #000;
border-top: 2px solid #000;
}

#grid td {
border: 1px solid #ccc;
vertical-align: top;
text-align: center;
}

#grid td.yellowbg {
color: inherit;
background-color: #fef200;
}

#grid td.greybg {
color: inherit;
background-color: #eee;
}

/* end of styles for the program grid page */

/* begin of styles for other tables */

table#other {
table-layout: auto;
border-collapse: collapse;
font-size: 1em;
}

#other tr {
}

#other td {
border: 1px solid #ccc;
padding: 0.5em;
vertical-align: top;
text-align: left;
}

/* end of styles for other tables */

/* begin of styles for the podcasts page */

form.podcastmenu {
line-height: 1.2em;
}

div.podcastitem {
margin: 0 0 1em 0;
padding: 0 0 1em 0;
border-bottom: 1px dashed #666;
}

/* end of styles for the podcasts page */

#footer {
width: 860px;
margin: -15px auto 20px auto;
padding: 1em;
color: #fff;
background-color: #000;
text-align: center;
font-size: 0.9em;
}

#footer a {
color: inherit;
background-color: inherit;
text-decoration: underline;
}