/* Typography and general styles */

/* Body styles */

* {
   margin: 0;
   padding: 0;
}

body {
   border:0;            /* This removes the border around the viewport in old versions of IE */
   width:100%;
   min-width:958px;     /* Minimum width of layout - remove line if not required */
   font: 100%/1.5 "Arial Unicode MS", "Lucida Sans Unicode", "MS Sans Serif", sans-serif;
   /* Note on fonts: Arial Unicode MS comes with Windows XP and works perfectly with the Kabyle characters, but on Mac or Windows Vista we can use regular Arial, so override this with javascript based on OS detection */
}

.light, body {          /* "light" is the default style for body */
   background: white;
   color: black;
}

.dark {                 /* "dark" can be applied to the body or to divs for a light-text on dark-background */
   background:#333;
   color: #ccc;
}

/* Header styles */

h1, h2, h3, h4, h5, h6 {
   font-family: Gentium, "Arial Unicode MS", "Lucida Sans Unicode", "Times New Roman", serif; /* Times New Roman doesn't work for Kabyle characters on base Windows XP installation, should use Arial Unicode MS instead, or embed Gentium. */
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   clear: left;
}

h1 {
   font-size: 2em;
   line-height: 1.5;
   margin-top: 0;
   margin-bottom: 0;
}

h1.componentheading {
	text-align: center;
}

h2 {
   font-size: 1.5em;
   line-height: 1em;
   margin-top: 1em;
   margin-bottom: 1em;
}

h3 {
   margin-top: 1.25em;
   margin-bottom: 1.25em;
   font-size: 1.2em;
   line-height: 1.25;
}

/*h3:first-child { margin-top: 0.625em; }*/

h4, h2.section-title {
   margin-top: 1.3636em;
   margin-bottom: 1.3636em;
   font-size: 1.1em;
   line-height: 1.3636;
   font-weight: bold;
}

h2.section-title { margin-top: 0.6818em; margin-bottom: 0.6818em; }

h5, h2.contentheading {
   font-size: 1em;
   line-height:1.5;
   margin-top: 1.5em;
   margin-bottom: 0;
   font-weight: bold;
}

h6 {
   font-size:0.9em;
   line-height:1.666;
   margin: 1.5em 0 0;
   font-weight: bold;
}

/* Lists */

ul, ol, dl {
   margin: 0 0 1.5em 0;
}

li ul, li ol, ul ul, ol ol {
   margin-top: 0;
   margin-bottom: 0;
}

ul {
   list-style-image: none;
   list-style-position: outside;
   list-style-type: disc;
}

ul.pagination {
   list-style-type: none;
}

ul.pagination li {
   float:left;
   color: #888;
}

ul.pagination a {
   font-weight: bold;
}

/* Block elements */

p.noindent, p.byline, p.pageinfo, p.buttonheading, p.readmore {
   margin-top: 0;
   text-indent: 0;
}

p.pageinfo + p, p.byline + p {
   margin-top: -1.5em;
}

p.pageinfo + p.byline {
   margin-top: 0;
}

p + p.readmore  {
   margin-top: -1.5em;
}

p.byline, p.pageinfo, p.buttonheading {
   margin-bottom: 0 !important;
}

/* don't indent initial paragraphs, or paragraphs after certain specially styled paragraphs */
p, p.noindent + p, p.byline + p, p.pageinfo + p, p.buttonheading + p {
   margin-top: 0;
   margin-bottom: 1.5em;
   text-indent: 0;
}

p:not(.noindent):not(.byline):not(.pageinfo):not(.buttonheading):not(.readmore) + p:not(.noindent):not(.byline):not(.pageinfo):not(.buttonheading):not(.readmore) {
   text-indent: 1em;
   margin-top: -1.5em;
}

p + p.poetry {
   text-indent: 0;
}

img {
   margin:10px 0 5px;
}

.inset {
   width: 40%;
   float: left;
   margin: 0 1.5em 0 0;
   padding: 0.75em;
}

.left {
   float: left;
   margin-right: 1.5em;
}

.right {
   float: right;
   margin-left: 1.5em;
}

.margin p, .sidenote p {
   font-size: 0.75em;
   line-height: 2;
}

.sidenote ul {
   padding: 0;
   margin: 0 0 1.5em 1.5em;
}

.sidenote li {
   font-size: 0.75em;
}

blockquote {
   margin-top: 1.5em;
   margin-bottom: 1.5em;
   padding: 0 1.5em;
}

blockquote.verse pre {
   font-family: inherit;
   display: table;
   width: auto;
   margin: 0 auto;
}

blockquote.inline-verse {
   margin-top: 0;
   margin-bottom: 1.5em;
}

blockquote.inline-verse + blockquote.inline-verse, p + blockquote.inline-verse {
   margin-top: -1.5em;
}

#page {
   padding-left: 13em;
   padding-right: 2em;
   position:relative;
}

#page p.outset, #page span.outset {
   position:absolute;
   left: 0em;
   width: 12.5em;
}

#page span.outset { text-align: right; }

/* Typographic styles */

blockquote, p, li, dd, dt, h1, h2, h3, h4, h5, h6, fieldset, .jfdefaulttext {
   margin-left: 24px;
   margin-right: 4px;
}

blockquote.inline-verse {
   font-weight: bold;
}

blockquote.inline-verse cite {
   font-weight: normal;
   font-style: normal;
}

a:link, a:visited, a:active {
   color: blue; background: inherit;
}

a:visited {
   color: purple;
   background: inherit;
}

.dark a:link,.dark a:visited, .dark a:active {
   color: #98c0ff;
}

.dark a:visited {
   color: #c0c;
}

h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link, h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
   text-decoration: none;
}

b, strong, thead, th, caption, dt {
   font-weight: bold;
   font-style: inherit;
}

i, em, cite, dfn {
   font-weight: inherit;
   font-style: italic;
}

p.section-citation {
   text-align:right;
}

p.section-citation cite {
   font-weight:bold;
}

code, kbd, samp, pre, tt, var {
   font-style: normal;
   font-family: monospace;
}

ins {
   color: red;
   text-decoration: none;
}

del {
   text-decoration: line-through;
}

address {
   font-style: normal;
}

em.highlight {
   font-style: normal;
   background-color: rgb(255,255,0);
   background: rgba(255, 255, 0, 0.4) none repeat scroll 0 0;
   padding: 0 0.25em;
}

small {
   font-size: 0.8em;
   line-height: 1.875em;
}

sup, sub {
   font-size: 80%;
   line-height: 0;
}

abbr[title], acronym[title], dfn[title] {
   border-bottom: 1px dotted black;
   cursor: help;
}

abbr, acronym {
   font-size: 0.85em;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   line-height: 1.7647;
}

hr {
   background:#9ab none repeat scroll 0 0;
   border: none;
   height: 0.25em;
   margin: 1.5em 0 1.25em;
}

.fancy {       /* Meant for ampserands, perhaps other "special" characters. */
   font-family: Baskerville, Palatino, "Book Antiqua", serif;
   font-style: italic;
}

.byline, .pageinfo, .readmore {
   font-size: 0.75em;
   line-height: 2;
   color: #666;
}


/* Tables */

table {
   border-top: 0.2em solid black;
   margin: 0 0 1.5em 0;
   width: 100%;
   border-collapse: collapse;
}

caption {
   margin: 1.5em 0 1.2em;
   text-align: left;
}

th, td {
   border-top: 0.0625em solid black;
   padding: 0.75em 1em 0.6875em 0;
}

th:first-child, td:first-child {
   padding-left: 0;
}

tr:nth-child(odd), tr:nth-child(even) td {
   background:white none repeat scroll 0 0;
}

tr:nth-child(even), tr:nth-child(odd) td {
   background:#F6F6F6 none repeat scroll 0 0;
}

/* Forms */

fieldset {
   border: none;
   display: block;
   width: 100%;
}   

legend {
   font-weight: bold;
   font-style: normal;
   padding-bottom: 1.5em;
}

label {
   display: block;
   /*margin-top: 1.5em;*/
}

label input, label select, label textarea {
   width: 100%;
}

label.radio, label.checkbox {
   position: relative;
}

label.radio input, label.checkbox input {
   position: absolute;
   left: -24px;
   top: 0.5em;
   width: 24px;
}

.dark input[type=text], .dark textarea {
   background: #d2d2d2;
   border-style: solid;
   border-color: #555;
}

.new-section {
   margin-top: 1.5em;
}
   
.section-reference {
   margin-top: -0.75em;
   margin-bottom: 0.75em;
}

.section-reference + p { margin-top: 0; text-indent: 0; }


/* Page header styles */


.header {
   clear:both;
   float:left;
   width:100%;
   background: white url(../images/header-background.png) no-repeat right 2em;
   border-bottom: 0.0625em solid black;
}

/*.header.dark, .dark .header {
   background-color: #474747;
} */
   
.logo {
   background: transparent url(../images/tamusni-logo.png) no-repeat 1em center; 
   margin: 0;
   height: 3em;
   display:block;
   width: 300px;
}

.logo a, .logo a:visited, .logo a:active, .logo a:focus, .logo a:hover {
   height: 100%;
   display:block;
   text-indent: -9999px;
   text-align: left;
   direction: ltr;
   background: transparent;
}

/*.logo.dark, .dark .logo {
   background: transparent url(../images/logo-dark.png) no-repeat 1em center;
}*/

.header .searchbox {
   position:absolute;
   top: 0.2em;
   right: 0em;
}

form.search {
   display:block;
   float:left;
   margin: 0 0.5em;
}

.search button {
   background: #f0f0f0 !important;
   padding: 0 1em;
}

ul.language-selection {
   display:block;
   float:left;
   margin: 0.3em 0.5em 0;
   font-size: 0.8em;
}

.language-selection li {
   display: block;
   float: left;
   margin: 0 0.25em;
}

.language-selection li img {
   float:left;
   margin: 0.3em 0.1em 0 0;
}

p.outset {
   font-size: 0.75em;
   line-height: 2;
}
   
/* Top tab navigation */

.main-navigation {
   margin-top: 1.875em;
   width:100%;
   background:transparent;
   border-bottom:0.25em solid black;
   position:relative;
}

.main-navigation .inner {
   position: relative;
   overflow:hidden;
   margin-bottom: -0.25em
}

.main-navigation ul {
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   text-align:center;
   width: 97%;
   left: 1.5%;
}

.main-navigation li {
   display:block;
   float:left;
   list-style:none;
   margin:0 0;
   padding:0;
   width: 12.5%;
   overflow: hidden;
   white-space: nowrap;
}

.main-navigation a:link, .main-navigation a:visited, .main-navigation a:active, .main-navigation a:hover {
   display:block;
   margin:0 0.0625em;
   padding:0.1em 0.6875em 0.1em;
   background:#ddd;
   color:white;
   text-decoration:none;
   line-height:1.3em;
   margin-bottom: 0.3125em;
   bottom: 0.25em;
   margin-top: 0.75em;
}

.main-navigation a:hover {
   background:#369;
   color:white;
   height: 100%;
   margin-bottom: 0.25em;
   padding-bottom: 0.0625em;
}

.main-navigation li.active a:link,
.main-navigation li.active a:visited,
.main-navigation li.active a:hover,
.main-navigation li.active a:active,
.cs1 .main-navigation li.cs1 a:link,
.cs1 .main-navigation li.cs1 a:visited,
.cs1 .main-navigation li.cs1 a:hover,
.cs1 .main-navigation li.cs1 a:active,
.cs2 .main-navigation li.cs2 a:link,
.cs2 .main-navigation li.cs2 a:visited,
.cs2 .main-navigation li.cs2 a:hover,
.cs2 .main-navigation li.cs2 a:active,
.cs3 .main-navigation li.cs3 a:link,
.cs3 .main-navigation li.cs3 a:visited,
.cs3 .main-navigation li.cs3 a:hover,
.cs3 .main-navigation li.cs3 a:active,
.cs4 .main-navigation li.cs4 a:link,
.cs4 .main-navigation li.cs4 a:visited,
.cs4 .main-navigation li.cs4 a:hover,
.cs4 .main-navigation li.cs4 a:active,
.cs5 .main-navigation li.cs5 a:link,
.cs5 .main-navigation li.cs5 a:visited,
.cs5 .main-navigation li.cs5 a:hover,
.cs5 .main-navigation li.cs5 a:active,
.cs6 .main-navigation li.cs6 a:link,
.cs6 .main-navigation li.cs6 a:visited,
.cs6 .main-navigation li.cs6 a:hover,
.cs6 .main-navigation li.cs6 a:active,
.cs7 .main-navigation li.cs7 a:link,
.cs7 .main-navigation li.cs7 a:visited,
.cs7 .main-navigation li.cs7 a:hover,
.cs7 .main-navigation li.cs7 a:active,
.cs8 .main-navigation li.cs8 a:link,
.cs8 .main-navigation li.cs8 a:visited,
.cs8 .main-navigation li.cs8 a:hover,
.cs8 .main-navigation li.cs8 a:active
{
   color: black;
   background: white;
   font-weight: bold;
   font-style: italic;
   border-style: solid;
   border-color: black;
   border-width: 0.25em 0.25em 0;
   padding: 0.5em 0 0.5em;
   /*position: relative;*/
   bottom: -0.25em;
   margin: 0;
}

/* Section Navigation */
.section-navigation {
   border-bottom: 0.125em solid black;
   background: #d4d4d4;
   clear: both;
   padding: 0.75em 0;
   position: relative;
   float: left;
   width: 100%;
}

.section-navigation p, .section-navigation label {
   margin-bottom: 0;
}
/* Page layouts */


/* Column Container */

.colmask {
   position:relative;	/* This fixes the IE7 overflow hidden bug */
   clear:both;
   float:left;
   width:100%;          /* width of whole page */
   overflow:hidden;     /* This chops off any overhanging divs */
   border-bottom: 0.125em solid black;
}

/* Common Column Settings */

.colright,
.colmid,
.colleft {
   float:left;
   width:100%;			/* width of page */
   position:relative;
}

.col1,
.col2,
.col3 {
   float:left;
   position:relative;
   padding:1.5em 0 1.375em 0;	/* no left and right padding on columns, we just make them narrower instead.
                                 only padding top and bottom is included here, make it whatever value you need */
   overflow:hidden;
}

/* Three column "blog style" settings - i.e. two secondary columns on right */
.blogstyle {
   background:#eee;		/* right column background colour */
}

.blogstyle .colmid {
   right:25.000%;       /* width of the right secondary column */
   background:#f4f4f4;  /* left secondary column background colour */
}

.blogstyle .colleft {
   right:25.000%;			/* width of the left secondary column */
   background:#fff;     /* content column background colour */
}

.blogstyle .col1 {
   width:49.167%;        /* width of content column content (column width minus padding on either side) */
   left:50.417%;         /* (100 - width of main content column) plus left padding of content column */
}

.blogstyle .col2 {
   width:24.167%;       /* Width of left secondary column content (column width minus padding on either side) */
   left:51.250%;        /* (100 - width of content column) plus left and right padding of content column plus left padding of left secondary column */
}

.blogstyle .col3 {
   width:24.167%;			/* Width of right column content (column width minus padding on either side) */
   left:52.083%;			/* Please make note of the brackets here:
						(100% - content column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

/* Inverted three column "blog style" settings - i.e. left and right column reversed */
.blogstyle-inverse {
   background:#eee;		/* right column background colour */
}

.blogstyle-inverse .colmid {
   right:25.000%;       /* width of the right secondary column */
   background:#f4f4f4;  /* left secondary column background colour */
}

.blogstyle-inverse .colleft {
   right:25.000%;			/* width of the left secondary column */
   background:#fff;     /* content column background colour */
}

.blogstyle-inverse .col1 {
   width:49.167%;        /* width of content column content (column width minus padding on either side) */
   left:50.417%;         /* (100 - width of main content column) plus left padding of content column */
}

.blogstyle-inverse .col2 {
   width:24.167%;       /* Width of left secondary column content (column width minus padding on either side) */
   left:76.250%;        /* (100 - width of content column) plus left and right padding of content column plus left padding of left secondary column */
}

.blogstyle-inverse .col3 {
   width:24.167%;			/* Width of right column content (column width minus padding on either side) */
   left:27.083%;			/* Please make note of the brackets here:
						(100% - content column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}


/* Left menu settings */

.leftmenu {
   background:#fff;     /* right column background colour */
}

.leftmenu .colleft {
   right:75.000%;       /* right column width */
   background:#f4f4f4;	/* left column background colour */
}

.leftmenu .col1 {
   width:74.167%;       /* right column content width */
   left:100.417%;       /* 100% plus right column left padding */
}

.leftmenu .col2 {
   width:24.167%;        /* left column content width (column width minus left and right padding) */
   left:1.250%;			/* (right column left and right padding) plus (left column left padding) */
}

.leftmenu .col3 {
   display:none;        /* There is no third column in the leftmenu layout; if one is present in the code, hide it. */
}

/* Right menu settings */

.rightmenu {
   background:#eee;     /* right menu background colour */
}

.rightmenu .colleft {
   right:25.000%;        /* right column width */
   background:white;     /* left column background colour */
}

.rightmenu .col1 {
   width:74.167%;        /* left column content width (left column width minus left and right padding) */
   left:25.417%;         /* (right column width) plus (left column left padding) */
}

.rightmenu .col2 {
   width:24.167%;        /* right column content width (right column width minus left and right padding) */
   left:26.250%;         /* (right column width) plus (left column left and right padding) plus (right column left padding) */
}

.rightmenu .col3 {
   display:none;        /* There is no third column in the rightmenu layout; if one is present in the code, hide it. */
}

/* Three column "Holy Grail" settings */

.threecol {
   background:#eee;		/* right column background colour */
}

.threecol .colmid {
   right:25.000%;			/* width of the right column */
   background:white;		/* center column background colour */
}

.threecol .colleft {
   right:50.000%;       /* width of the middle column */
   background:#f4f4f4;	/* left column background colour */
}

.threecol .col1 {
   width:49.167%;       /* width of center column content (column width minus padding on either side) */
   left:100.417%;			/* 100% plus left padding of center column */
}

.threecol .col2 {
   width:24.167%;       /* Width of left column content (column width minus padding on either side) */
   left:26.250%;        /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
   width:24.167%;			/* Width of right column content (column width minus padding on either side) */
   left:77.083%;			/* Please make note of the brackets here:
                           (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

/* Double page with right margin settings */

.doublerightmargin {
   background:#eee;		/* right column background colour */
}

.doublerightmargin .colmid {
   right:16.667%;			/* width of the right column */
   background:white;		/* center column background colour */
}

.doublerightmargin .colleft {
   right:41.667%;			/* width of the middle column */
   background:#f4f4f4;	/* left column background colour */
}

.doublerightmargin .col1 {
   width:40.833%;			/* width of center column content (column width minus padding on either side) */
   left:100.417%;			/* 100% plus left padding of center column */
}

.doublerightmargin .col2 {
   width:40.833%;       /* Width of left column content (column width minus padding on either side) */
   left:17.917%;        /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.doublerightmargin .col3 {
   width:15.833%;			/* Width of right column content (column width minus padding on either side) */
   left:60.417%;			/* Please make note of the brackets here:
                           (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

/* 2 Column (right menu) settings */

.rightmargin {
   background:#eee;     /* right margin background colour */
}

.rightmargin .colleft {
   right:16.667%;        /* right column width */
   background:white;     /* left column background colour */
}

.rightmargin .col1 {
   width:82.500%;        /* left column content width (left column width minus left and right padding) */
   left:17.083%;         /* (right column width) plus (left column left padding) */
}

.rightmargin .col2 {
   width:15.833%;        /* right column content width (right column width minus left and right padding) */
   left:17.917%;         /* (right column width) plus (left column left and right padding) plus (right column left padding) */
}

/* 2 Column (double page) settings */
.doublepage {
   background:#eee;     /* right column background colour */
}

.doublepage .colleft {
   right:49.167%;        /* right column width */
   background:white;     /* left column background colour */
}

.doublepage .col1 {
   width:49.167%;        /* left column content width (column width minus left and right padding) */
   left:49.583%;         /* right column width plus left column left padding */
}

.doublepage .col2 {
   width:49.167%;        /* right column content width (column width minus left and right padding) */
   left:50%;         /* (right column width) plus (left column left and right padding) plus (right column left padding) */
}

.doublepage .col3 {
   display:none;        /* There is no third column in the double page view; if one is present in the code, hide it. */
}

/* Full page */

.fullpage {
   background:#fff;		/* page background colour */
}
.fullpage .col1 {
   width:99.167%;			/* page width minus left and right padding */
   left:0.417%;			/* page left padding */
}

.fullpage .col2, .fullpage .col3 {
   display: none;
}


   /* 1 column full page fixed width for video settings */
   dl.videonav {
      width: 162px;
      float: left;
   } 
   .gallery.info h2, .videonav dt {
      font-family:inherit;
      color: #fff !important;
      text-transform: uppercase;
      font-weight: normal;
      font-size: 0.75em;
      line-height: 2em;
   }
   .videonav dt {
      margin-top: 2em;
   }
   .videonav dd {
      border-bottom: 1px dotted #ccc;
      font-size: 0.75em;
      line-height: 2em;
      padding-right:20px;
      text-align: right;
   }
   .videonav dd.active {
      background: #4a4949;
      color: white;
   }
   .videonav dd a:link, .videonav dd a:visited, .videonav dd a:active, .videonav dd a:hover {
      display:block;
      padding: 1em 0;
      color: inherit;
   }

   .videonav dd.active a:link {
      text-decoration: none;
   }

   .videolist {
      height:600px;
      width:780px;
      padding-left:18px;
      background:#4a4949;
      float:left;
   }

   .gallery.info {
      background:#3b3b3b;
      width:456px;
      height:384px;
      float:left;
      margin-left:18px;
   }

   .videolayout {
   }
   .videolayout .col1 {
      float: none;
      margin:0 auto;
      width: 960px;
   }
   .videoTitle { float: left; width: 572px; margin-left:0; margin-right:0; }
   .buttonLink { font-size: 2em; line-height: 1; margin-top: 0.5em; margin-bottom: 0; margin-right: 0; padding-right: 0; width: 40px; float:left; text-align: right; color: #ff5131 }
   .buttonLink a:link, .buttonLink a:visited, .buttonLink a:active { color:inherit; text-decoration: none; }
   .video-info { float: right; width: 330px;}
   .video-info h2 { margin: 0; }
   .video-info div { background: #4a4949; margin: 0 0 1.5em; }
   .video-info div.playlist { height: 336px; overflow: auto; }
   .video-info div.similar-videos { height: 400px; overflow: auto; }
   .info p { margin: 0 1em 0em 3em; font-size: 0.75em; line-height: 3em; text-indent: -2em; }
   .info p.title { font-weight: bold; letter-spacing: 0.05em;}
   .comments { float: left; width: 612px; margin-top: 0; clear: left; }
   .comments dd {color:#cbcbcb;} .comments dt {color:#595a5a; font-variant:small-caps;}
   .comments dd { margin-bottom: 1.5em; }

   .playlist ol, .playlist ul {
      margin: 0.75em 0;
      margin-left: 0em;
      list-style-position: outside;
      list-style-type: none;
   } 

   .playlist li {
      clear: both;
      min-height: 4.5em;
      padding: 12px 16px 11px 8px;
      border-bottom: 1px dotted #999;
   }
   .playlist li:last-child {
      border-bottom: 0;
   }

   .playlist li.nowPlaying {
      background: #333;
      border: 2px solid #ff5131;
      border-width: 2px 0;
      padding: 10px 16px 9px;
      color: #ff5131;
   }
   .playlist li.nowPlaying p {
      color: #ccc;
   }
   .playlist li.nowPlaying a:link {
      color: #ccc;
      font-weight: bold;
      text-decoration: none;
   }

   .playlist p {
      text-align: left;
      font-size: 0.75em;
      line-height: 1.5em;
      text-indent: 0 !important;
      margin: 0 !important;
   }

   .videoThumbnail {
      width: 92px;
      height: 68px;
      background: #333;
      display: block;
      float: left;
      margin: 0 0.5em;
      padding: 0;
      /*position: relative;*/
      background: #333;
      padding: 1px;
      border: 1px solid black;
   }
   .videoThumbnail img { border: 0; margin:0; padding: 0;}

   .videoThumbnail .duration {
      background: #000;
      color: #fff;
      font-weight: bold;
      opacity: 0.7;
      bottom: 0em;
      right: 0em;
      position: absolute;
   }

   .videoplayer {
      height: 384px; 
      width: 480px;
      text-align: center;
      margin-bottom:1.5em;
      position:relative;
      float: left;
   }

   .videoplayer.size640x480 {
      height: 480px;
      width: 612px;
   }

   .videoplayer img {
      margin-top: 198px;
   }

   .videoplayer .info {
      position: absolute;
      bottom: 0;
      left: 0;
      background:#000 url(/img/global/gradient/h80.png) repeat-x;
      opacity:0.7;
      color:#fff;
      text-align:left;
      padding:5px 0; 
      font-family:"bitstream vera sans","trebuchet ms";
      font-size:12px;
      border-top:1px solid #ccc;
      width: 100%;
   }
   .videoplayer .info p { margin: 0 1em 0 1.5em; text-indent: 0; }

   .videoplayer .info .duration {
      text-indent: 0 !important;
      /*text-transform:lowercase;*/
      color:#99ff99;
      font-weight: bold;
   }
 
	/* Footer styles */
	.footer {
		clear:both;
		float:left;
		width:100%;
		border-top:1px solid black;
	}
   .dark .footer { background: #2a2a2a; }
	.footer p, #footer p + p {
      text-indent: 0;
	}

   /* Colour Schemes */
   
   /* Color scheme one (Green) */
   .main-navigation li.cs1 a:link, .main-navigation li.cs1 a:visited { background:#45ca60 !important; }
   .main-navigation li.cs1 a:active, .main-navigation li.cs1 a:hover, .main-navigation li.cs1 a:focus { background:#b2e5b2 !important; }
   .cs1 table, .cs1 th, .cs1 td, .cs1 .header, .cs1 .main-navigation, .cs1 .section-navigation, .cs1 .colmask, .cs1 li.nowPlaying { border-color: #27a73b !important; }
   .cs1 .buttonLink, .cs1 .videoplayer .info .duration, .cs1 .chapter-num, .cs1 .verse-num, .cs1 h1, .cs1 h2, .cs1 h3, .cs1 h4, .cs1 h5, .cs1 h6, .cs1 h1 a:link, .cs1 h2 a:link, .cs1 h3 a:link, .cs1 h4 a:link, .cs1 h5 a:link, .cs1 h6 a:link { color: #27a73b; }
   .cs1 h1 a:visited, .cs1 h2 a:visited, .cs1 h3 a:visited, .cs1 h4 a:visited, .cs1 h5 a:visited, .cs1 h6 a:visited { color: #45ca60; }
   .cs1 .main-navigation li.cs1 a, .cs1 .main-navigation li.cs1 a:hover { border-color: #27a73b !important; background: #b2e5b2 !important; }
   .cs1 em.highlight, .cs1 hr, .cs1 .section-navigation{ background-color: #b2e5b2 !important; }

   /* Colour scheme two (Purple) */
   .main-navigation li.cs2 a:link,   .main-navigation li.cs2 a:visited { background:#a70098 !important; }
   .main-navigation li.cs2 a:active, .main-navigation li.cs2 a:hover, .main-navigation li.cs2 a:focus { background:#cc99cc !important; }
   .cs2 table, .cs2 th, .cs2 td, .cs2 .header, .cs2 .main-navigation, .cs2 .section-navigation, .cs2 .colmask, .cs2 li.nowPlaying { border-color: #a70098 !important; }
   .cs2 .buttonLink, .cs2 .videoplayer .info .duration, .cs2 .chapter-num, .cs2 .verse-num, .cs2 h1, .cs2 h2, .cs2 h3, .cs2 h4, .cs2 h5, .cs2 h6, .cs2 h1 a:link, .cs2 h2 a:link, .cs2 h3 a:link, .cs2 h4 a:link, .cs2 h5 a:link, .cs2 h6 a:link { color: #a70098; }
   .cs2 h1 a:visited, .cs2 h2 a:visited, .cs2 h3 a:visited, .cs2 h4 a:visited, .cs2 h5 a:visited, .cs2 h6 a:visited { color: #cc99cc; }
   .cs2 .main-navigation li.cs2 a, .cs2 .main-navigation li.cs2 a:hover { border-color: #a70098 !important; background: #cc99cc !important; }
   .cs2 em.highlight, .cs2 hr, .cs2 .section-navigation{ background-color: #cc99cc !important; }

   /* Colour scheme three (Red) */
   .main-navigation li.cs3 a:link,   .main-navigation li.cs3 a:visited { background:#db0021 !important; }
   .main-navigation li.cs3 a:active, .main-navigation li.cs3 a:hover, .main-navigation li.cs3 a:focus { background:#e59999 !important; }
   .cs3 table, .cs3 th, .cs3 td, .cs3 .header, .cs3 .main-navigation, .cs3 .section-navigation, .cs3 .colmask, .cs3 li.nowPlaying { border-color: #db0021 !important; }
   .cs3 .buttonLink, .cs3 .videoplayer .info .duration, .cs3 .chapter-num, .cs3 .verse-num, .cs3 h1, .cs3 h2, .cs3 h3, .cs3 h4, .cs3 h5, .cs3 h6, .cs3 h1 a:link, .cs3 h2 a:link, .cs3 h3 a:link, .cs3 h4 a:link, .cs3 h5 a:link, .cs3 h6 a:link { color: #db0021; }
   .cs3 h1 a:visited, .cs3 h2 a:visited, .cs3 h3 a:visited, .cs3 h4 a:visited, .cs3 h5 a:visited, .cs3 h6 a:visited { color: #e59999; }
   .cs3 .main-navigation li.cs3 a, .cs3 .main-navigation li.cs3 a:hover { border-color: #db0021 !important; background: #e59999 !important; }
   .cs3 em.highlight, .cs3 hr, .cs3 .section-navigation{ background-color: #e59999 !important; }

   /* Colour scheme four (Dark blue) */
   .main-navigation li.cs4 a:link,   .main-navigation li.cs4 a:visited { background:#3b60b1 !important; }
   .main-navigation li.cs4 a:active, .main-navigation li.cs4 a:hover, .main-navigation li.cs4 a:focus { background:#99b2cc !important; }
   .cs4 table, .cs4 th, .cs4 td, .cs4 .header, .cs4 .main-navigation, .cs4 .section-navigation, .cs4 .colmask, .cs4 li.nowPlaying { border-color: #3b60b1 !important; }
   .cs4 .buttonLink, .cs4 .videoplayer .info .duration, .cs4 .chapter-num, .cs4 .verse-num, .cs4 h1, .cs4 h2, .cs4 h3, .cs4 h4, .cs4 h5, .cs4 h6, .cs4 h1 a:link, .cs4 h2 a:link, .cs4 h3 a:link, .cs4 h4 a:link, .cs4 h5 a:link, .cs4 h6 a:link { color: #3b60b1; }
   .cs4 h1 a:visited, .cs4 h2 a:visited, .cs4 h3 a:visited, .cs4 h4 a:visited, .cs4 h5 a:visited, .cs4 h6 a:visited { color: #99b2cc; }
   .cs4 .main-navigation li.cs4 a, .cs4 .main-navigation li.cs4 a:hover { border-color: #3b60b1 !important; background: #99b2cc !important; }
   .cs4 em.highlight, .cs4 hr, .cs4 .section-navigation{ background-color: #99b2cc !important; }

   /* Colour scheme five (Light blue) */
   .main-navigation li.cs5 a:link,   .main-navigation li.cs5 a:visited { background:#0099ce !important; }
   .main-navigation li.cs5 a:active, .main-navigation li.cs5 a:hover, .main-navigation li.cs5 a:focus { background:#99cce5 !important; }
   .cs5 table, .cs5 th, .cs5 td, .cs5 .header, .cs5 .main-navigation, .cs5 .section-navigation, .cs5 .colmask, .cs5 li.nowPlaying { border-color: #008bc4 !important; }
   .cs5 .buttonLink, .cs5 .videoplayer .info .duration, .cs5 .chapter-num, .cs5 .verse-num, .cs5 h1, .cs5 h2, .cs5 h3, .cs5 h4, .cs5 h5, .cs5 h6, .cs5 h1 a:link, .cs5 h2 a:link, .cs5 h3 a:link, .cs5 h4 a:link, .cs5 h5 a:link, .cs5 h6 a:link { color: #008bc4; }
   .cs5 h1 a:visited, .cs5 h2 a:visited, .cs5 h3 a:visited, .cs5 h4 a:visited, .cs5 h5 a:visited, .cs5 h6 a:visited { color: #99cce5; }
   .cs5 .main-navigation li.cs5 a, .cs5 .main-navigation li.cs5 a:hover { border-color: #008bc4 !important; background: #99cce5 !important; }
   .cs5 em.highlight, .cs5 hr, .cs5 .section-navigation{ background-color: #99cce5 !important; }

   /* Colour scheme six (Turquoise) */
   .main-navigation li.cs6 a:link,   .main-navigation li.cs6 a:visited { background:#009399 !important; }
   .main-navigation li.cs6 a:active, .main-navigation li.cs6 a:hover, .main-navigation li.cs6 a:focus { background:#7fcccc !important; }
   .cs6 table, .cs6 th, .cs6 td, .cs6 .header, .cs6 .main-navigation, .cs6 .section-navigation, .cs6 .colmask, .cs6 li.nowPlaying { border-color: #009399 !important; }
   .cs6 .buttonLink, .cs6 .videoplayer .info .duration, .cs6 .chapter-num, .cs6 .verse-num, .cs6 h1, .cs6 h2, .cs6 h3, .cs6 h4, .cs6 h5, .cs6 h6, .cs6 h1 a:link, .cs6 h2 a:link, .cs6 h3 a:link, .cs6 h4 a:link, .cs6 h5 a:link, .cs6 h6 a:link { color: #009399; }
   .cs6 h1 a:visited, .cs6 h2 a:visited, .cs6 h3 a:visited, .cs6 h4 a:visited, .cs6 h5 a:visited, .cs6 h6 a:visited { color: #7fcccc; }
   .cs6 .main-navigation li.cs6 a, .cs6 .main-navigation li.cs6 a:hover { border-color: #009399 !important; background: #7fcccc !important; }
   .cs6 hr, .cs6 .section-navigation{ background-color: #7fcccc !important; }
   .cs6 em.highlight { background-color: #a4c7ed; }

   /* Colour scheme seven (Orange) */
   .main-navigation li.cs7 a:link,   .main-navigation li.cs7 a:visited { background:#ff5131 !important; }
   .main-navigation li.cs7 a:active, .main-navigation li.cs7 a:hover, .main-navigation li.cs7 a:focus { background:#ffb299 !important; }
   .cs7 table, .cs7 th, .cs7 td, .cs7 .header, .cs7 .main-navigation, .cs7 .section-navigation, .cs7 .colmask, .cs7 li.nowPlaying { border-color: #ff5131 !important; }
   .cs7 .buttonLink, .cs7 .videoplayer .info .duration, .cs7 .chapter-num, .cs7 .verse-num, .cs7 h1, .cs7 h2, .cs7 h3, .cs7 h4, .cs7 h5, .cs7 h6, .cs7 h1 a:link, .cs7 h2 a:link, .cs7 h3 a:link, .cs7 h4 a:link, .cs7 h5 a:link, .cs7 h6 a:link { color: #ff5131; }
   .cs7 h1 a:visited, .cs7 h2 a:visited, .cs7 h3 a:visited, .cs7 h4 a:visited, .cs7 h5 a:visited, .cs7 h6 a:visited { color: #ffb299; }
   .cs7 .main-navigation li.cs7 a, .cs7 .main-navigation li.cs7 a:hover { border-color: #ff5131 !important; background: #ffb299 !important; }
   .cs7 em.highlight, .cs7 hr, .cs7 .section-navigation{ background-color: #ffb299 !important; }

   /* Colour scheme eight (Yellow) */
   .main-navigation li.cs8 a:link,   .main-navigation li.cs8 a:visited { background:#f5f200 !important; color: black !important; }
   .main-navigation li.cs8 a:active, .main-navigation li.cs8 a:hover, .main-navigation li.cs8 a:focus { background:#ffff7f !important; }
   .cs8 .header, .cs8 .main-navigation, .cs8 .section-navigation, .cs8 .colmask, .cs8 li.nowPlaying, .cs8 table, .cs8 tr, .cs8 td { border-color: #b5a500 !important; }
   .cs8 .buttonLink, .cs8 .videoplayer .info .duration, .cs8 .chapter-num, .cs8 .verse-num, .cs8 h1, .cs8 h2, .cs8 h3, .cs8 h4, .cs8 h5, .cs8 h6 { color: #b5a500; }
   .cs8 .main-navigation li.cs8 a, .cs8 .main-navigation li.cs8 a:hover { border-color: #b5a500 !important; background: #ffff7f !important; }
   .cs8 em.highlight, .cs8 hr, .cs8 .section-navigation{ background-color: #ffff7f !important; }

   /* Dark colour scheme eight (Yellow) - since I had to darken the yellow for a light background, this makes it normal brightness for a dark background */
   .cs8.dark li.nowPlaying, .cs8.dark table, .cs8.dark tr, .cs8.dark td { border-color: #f5f200 !important; }
   .cs8.dark .buttonLink, .cs8.dark .videoplayer .info .duration, .cs8.dark .chapter-num, .cs8 .verse-num, .cs8.dark h1, .cs8.dark h2, .cs8.dark h3, .cs8.dark h4, .cs8.dark h5, .cs8.dark h6 { color: #f5f200; }