/* beginning of color.css former file */

html {

  background-color: #f5f4fa;

 background-image: url(images/texture_9.jpg);


}

body {

background-color: #0d0d0d;

}

.nav_main {

background-color: #0d0d0d;

}

#occ_home .nav_main {


background-color: #0d0d0d;
}



.nav_main li:hover {
  background-color: #3f3f3f;

}



.nav_main li.active {

background-color: #f5f4fa;

}

.nav_main_notat {

/* border-top: 1px solid #74737f; */
background-color: #0d0d0d;


}





div#content_supp {
background-color: #e9ebf7;
background-image: url(images/grad300.jpg);
background-repeat: repeat-x;
/* border: 1px solid #8273e5; */
border-bottom: solid 2px #a6a6a6;
border-right: solid 1px #a6a6a6;
border-left: solid 1px #d9d9d9;
border-top: solid 1px #d9d9d9;
}

div#content_thumbs {
background-image: url(images/grad300.jpg);
background-color: #e9ebf7;
background-repeat: repeat-x;
border-bottom: solid 2px #a6a6a6;
border-right: solid 1px #a6a6a6;
border-left: solid 1px #d9d9d9;
border-top: solid 1px #d9d9d9;
}





.nav_second .nav_main_notat {

background-image: url(images/side_tab.jpg);
border-right: 10px solid #868686;
border-left: 1px solid #b8c2db;
overflow: hidden;
}

.nav_second li:hover {
background-image: url(images/side_tab_hover.jpg);
border-right: 10px solid #c2c2c2;
}

ul.nav_second li.active, ul.nav_second li.active:hover {
background-image: none;
background-color: #f5f4fa;
border-top: 1px solid #f5f4fa;  /* #8273e5; */
border-left: 1px solid #f5f4fa;         /* #b8c2db; */
border-bottom: 1px solid #f5f4fa;       /* #8273e5;     */
border-right: 10px solid #f5f4fa;
}

ul.nav_second ul.nav_second li.nav_main_notat{
  background-image: none;
  background-color: #f5f4fa;
  border: none;
}


/* #example-one a img, #example-one a           { border: none; overflow: hidden; float: left; }
#example-one a:hover                         { border: 3px solid black; }
#example-one a:hover img                     { margin: -3px; }
*/

.even {
background-image: url(images/grad300.jpg);
/* background-image: url(images/bd_grad4.jpg); */
background-repeat: repeat-x;
/* border: 1px solid #8273e5; */
background-color: #e9ebf7;
padding-right: 5px;
border-bottom: solid 2px #a6a6a6;
border-right: solid 1px #a6a6a6;
border-left: solid 1px #d9d9d9;
border-top: solid 1px #d9d9d9;
}

.evenlite {

padding-right: 5px;
border-bottom: solid 2px #a6a6a6;
border-right: solid 1px #a6a6a6;
border-left: solid 1px #d9d9d9;
border-top: solid 1px #d9d9d9;
}





.dropshad {
/* border: solid 1px #a091ff; */
border-bottom: solid 2px #a6a6a6;
border-right: solid 1px #a6a6a6;
border-left: solid 1px #d9d9d9;
border-top: solid 1px #d9d9d9;
background-color: #f5f4fa;
padding: 9px;

}



#map {
border-bottom: solid 2px #a6a6a6;
border-right: solid 1px #a6a6a6;
border-left: solid 1px #d9d9d9;
border-top: solid 1px #d9d9d9;
}
 /* end of color.css former file */

 /* beginning of typography.css former file */
 body {
font-size : small;
font-family: "Trebuchet MS",  "Lucida Sans Unicode", Verdana, sans-serif;

line-height: 1.6em;
}

/* font-family: "Trebuchet MS",  "Lucida Sans Unicode", Verdana, sans-serif; */

h1 {
font-family: "Trebuchet MS", "Lucida Sans Unicode", Verdana, sans-serif;


font-size: 170%;

}


h2 { font-size: 150%;
font-family: "Trebuchet MS",  "Lucida Sans Unicode", Verdana, sans-serif;

}
h3 { font-size: 120%;
font-family: "Trebuchet MS",  "Lucida Sans Unicode", Verdana, sans-serif;

}
h4 { font-size: 110%;
font-family: "Trebuchet MS",  "Lucida Sans Unicode", Verdana, sans-serif;

}

h1, h2 {
font-weight: normal;
letter-spacing: -1px;
}

h3, h4 {
font-weight: normal;
}

h1, h2 {
 border-bottom: 1px solid #cab214;
}


h1.title, h2.subtitle {
border-style: none;
text-align: center;
}

h2.title {
border-style: none;
text-align: center;
font-size: 170%;
}


h1+h1.title {
margin-top: 30px;
}

h1+h2 {
	margin-top: 20px;
}



#nav li {
/*font-size: 100%;
letter-spacing: -1.0px;
font-style: italic;
text-transform: uppercase;*/
}

/* #nav li.nav_ter_at */
#nav ul.nav_second ul.nav_second li.active {
font-style: normal;
text-transform: Capitalize;
color: #0d0d0d;
font-size: 12px;
}


/* #nav li.nav_ter_notat {*/

#nav ul.nav_second ul.nav_second li.nav_main_notat, #nav ul.nav_second ul.nav_second li.nav_main_notat:hover   {

color: #FF0000;
font-style: normal;
text-transform: Capitalize;
font-size: 12px;
}





li > h4 {margin-left: 0;}

p {
font-size: 105%;

}

/* #content p {
padding-left: 5px;
} */




#content a:link{
font-weight: bold;
text-decoration: underline;
/* color: #2c14ca; */
color: #7d6e06;
}


#content a:visited{
font-weight: bold;
text-decoration: underline;
/* color: #495a61; */
color: #190b73;
}

#content a:hover{
font-weight: bold;
text-decoration: underline;
/* color: #023c70; */
color: #2c14ca;
}

#content h2.subtitle > a:link, #content h2.subtitle > a:hover, #content h2.subtitle > a:visited {
font-weight: normal;
text-decoration: none;
}


li > p {margin-left: 0;}



/* text colors */

body {
color: #0d0d0d;
}

h1 {
color: #190b73;
}

h2 {
color: #2c14ca;
}
h3 {
color: #190b73;
}

h4 {
color: #7d6e06;
}

.prep{
  color: #BF3000;
}
.cherub {
  color: #A6A600;
}

.inter {
color: #023C70;
}

.senior {

color: #AA002B;
}

.chamber {
  color: #495A61;
}

.boy {
  color: #10074B;
}

.indigo {
  color: #6633CC;
}



#welcome .opener {
font-size: 110%;
line-height: 1.5em;
/* color: #495a61; */
color: #0d0d0d;
}

#welcome .openercen {
font-size: 110%;
line-height: 1.6em;
color: #190b73;
}

.italics {
font-style: italic;
}

.italbold {
font-style: italic;
 font-weight: bold;
}

.bold {
font-weight: bold;

}

.emphasis {
font-size: 110%;
line-height: 1.6em;
}

h2 > .italics, li > .italics {
font-size: 80%;
color: #495a61;
}


div#footer {
font-size: 80%;
color: #f1f2d8;}

#footer_links li {
/* border-right: solid 1px #035aa6; */
}



a:hover {
color: #035aa6;
}

.nav_main_at a {

color: #495A61;
/*font-weight: bold;   */
text-decoration: none;
font-size: 12px;
}




.nav_main li.nav_main_notat a{

color: #f1f2d8;
/*font-weight: bold;*/
text-decoration: none;
font-size: 12px;
}


  /* just added Feb 2010 to make wayfinder work--active is what nav_main_at, nav_sec_at, and nav_ter_at used to be*/
.nav_main li.active a{
  color: #495A61;
/*font-weight: bold;*/
text-decoration: none;
font-size: 12px;
}



.nav_second li.nav_main_notat a{
color: #3f3f3f;

/*font-weight: bold;*/
text-decoration: none;
font-size: 12px;
}

.nav_second li.active a{

 color: #0d0d0d;

/*font-weight: bold; */
text-decoration: none;
font-size: 12px;
}


ul.nav_second ul.nav_second li.nav_main_notat a {

color: #3f3f3f;
/* color: #686a70; */
/*font-weight: bold; */
text-decoration: none;
font-size: 12px;
}

.nav_second li.nav_main_notat a:hover, .nav_second ul.nav_second li.nav_main_notat a:hover, .nav_second ul.nav_second li.active a {
text-decoration: underline;
 color: #0d0d0d;
 font-size: 12px;
}



#benefits_table th {
font-size: 80%;
}

#benefits_table th.colfirstbig {
font-size: 100%;
}


#donor_form th {

font-size: 105%
}

#donation_form_div p.fine_print {
text-align: center;
padding: 10px 30px 10px 30px;
font-size: 95%;
letter-spacing: -1px;

}

p.address {
padding-left: 10px;
font-size: 120%;
font-weight: normal;
letter-spacing: -1px;
color: #0d0d0d;
}

caption {

font-size: 120%;
font-weight: bold;
color: #2c14ca;
padding: 20px 0px 5px 0px;
}

.uniform_table caption{
width: 70%;
margin-left: auto;
margin-right: auto;
}



h2.noteworthy {
color: #f5f4fa;
background-color: #c9d2f4;
background-image: url(images/grad30med.jpg);
 background-repeat: repeat-x;
}
 /* end of typography.css former file */

/*  @import url(color.css); */
/* @import url(typography.css);  */

/* Normalizes margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form fieldset, blockquote, input, p, th, td {
margin: 0; padding: 0;}


/* Removes list-style from lists */
ol, ul {
list-style: none; }

/* Removes table style from tables */
table {
border-collapse: collapse;
border-spacing: 0;
}

/* Removes border from fieldset and img */
fieldset, img {border: 0;}

/* from Pro CSS and HTML Design Patterns--how to style inline quotes
	HTML 
<span class="quote">
  "QUOTE" (<cite><a href="URL"> SOURCE </a></cite>)</span>
CSS 
*.quote { STYLES }
*.quote cite { STYLES }
*/	



/* whole screen */

html {
 text-align : center; 
}


/* the main content--this is fixed width */
body {

width : 770px;
margin-top: 10px;
margin-bottom: 10px;
 margin-left: auto; 
 margin-right: auto; 
text-align : left;

}

#login_holder {
background-image: url(images/The_OCC.jpg); 
background-position: center;
background-repeat: no-repeat;
padding-top: 100px;
padding-bottom: 100px;
}

#login {

padding: 10px;
text-align: left;
background-color: #f5f4fa;
width: 400px;
margin-left: auto;
margin-right: auto;

}

#login h1 {
text-align: left;
}

q:before, q:after { content: ""; }






/* blockquote in general for now*/

blockquote.centtext {
margin: 10px 30px 10px 30px;
text-align: center;
}

/* centered text--same as blockquote, but just a paragraph */
p.centtext {
margin: 10px 30px 10px 30px;
text-align: center;
}

/* centered text--same as blockquote, but just a span */
span.centtext{
margin: 10px 30px 10px 30px;
text-align: center;
}
.padd_left {
padding-left: 15px;
}


/* blockquote, but not centred */
blockquote.noncenttext {
margin: 10px 80px 10px 80px;
text-align: left;
}




/* header portion */
div#header {
margin: 0 auto;

border-top: 10px solid #0d0d0d;
border-left: 10px solid #0d0d0d;
border-right: 10px solid #0d0d0d;
}

#header img {
vertical-align: bottom;

}

#homeheader {
width: 150px;
float: left;
border-top: 10px solid #0d0d0d;
border-left: 10px solid #0d0d0d;

}



#fadeshow1 {

border-top: 10px solid #0d0d0d;
border-right: 10px solid #0d0d0d;

}



/* the content on the off-white page */
div#content {
background-color: #f5f4fa;
position: relative;
width: 730px;
/* so the width is from one edge of the writing to the other--the padding gives the cream padding between the writing and the border
					and the "border" is actually the margin */

margin: 0px 10px 10px 10px;
padding: 10px 10px 10px 10px;
overflow: auto;
min-height: 500px;

}


/* navigation section */
/* 1st: main navigation */

#nav {
position: relative;
z-index: 500;
}




.nav_main{

width: 730px;


border-top: 10px solid #0d0d0d;
border-right: 10px solid #0d0d0d;
border-left: 10px solid #0d0d0d;
padding-top: 7px;
}




.nav_main li {
display: inline;

padding: 7px 10px 0px 10px;
margin-right: 1px;

}
.nav_main li.active {
padding-bottom: 3px;
}


/* 2nd: secondary navigation */

.nav_second {
margin-top: 50px;
/* this is where I changed it */
position: absolute;
 width: 126px;
/* left: 760px; */
 left: -115px;
text-align: right;
}

.nav_second .nav_second {

position: relative;
left: -35px;

}


/* marker */

.nav_second ul{
margin: 10px 0px 5px 20px;
text-align: right;
}



.nav_second li {
display: block;
/* padding: 5px 0 5px 5px; */
padding: 10px 5px 5px 5px;
margin-bottom: 2px;
}
/* marker */

#nav ul.nav_second ul.nav_second li {
padding: 4px 20px 4px 0px;

}


/* doesn't show yet */
#nav ul.nav_second ul.nav_second li.active, #nav ul.nav_second ul.nav_second li:hover {
background-image: url(images/pointer.jpg);
background-position: right;
background-repeat: no-repeat;
}





/* .nav_second li.active */
/* ul.nav_second li.active{    */
/* width: 125px; */
/* margin-left: -10px; */
/* padding-left: 10px; */
/* padding-right: 15px; */
/* }    */


div#content h2, h3 {
padding-top: 10px;
}

/* the welcome text introduces the content of the page--is full width even when sections below divide */
div#welcome {
padding: 10px 0px 5px 0px;

}

div#welcome h1 {
  margin: 0px 10px 0px 0px;
}


#welcome .opener {
/* margin: 30px; */
margin: 20px 30px 20px 30px;
text-align: left;
}
#welcome .openercen {
/* margin: 30px; */
margin: 10px 30px 10px 30px;
text-align: center;
}

/* when the content below the welcome must be divided, main is to the left and ~2/3 of the total width */
div#content_main {
width: 480px;
padding: 5px 5px 5px 0px;
float: left;
margin-top: 10px;
}

/* supplemental--in a different coloured box */
div#content_supp {

margin: 10px 0px 10px 500px;
padding: 5px 5px 5px 5px;
clear: right;
}

/* supplemental--in a different coloured box --for thumbnails */
div#content_thumbs {
margin: 15px 0px 10px 520px;
/* padding: 5px 5px 5px 5px; */
}


ul.buttons {

padding-top: 30px;
padding-right: 50px;
padding-bottom: 10px;
float: right;
clear: both;
}

.buttons li {
margin: 5px 0px 0px 10px;

}


div#content_thumbs ul.gallery_thumbs {
height: 365px;
overflow: auto;
text-align: center;
}

div#content_thumbs ul.gallery_thumbs320 {
height: 335px;
overflow: auto;
text-align: center;
}



/* this is for the corporate and government logos */
div.content_adds {
width: 730px;
padding: 10px 0 10px 0;
overflow: auto;
margin: 0 auto;
clear: both;

}

 .corp_adds {
width: 630px;
margin: 0 auto;

}

.corp_adds li {

float: left;
padding: 10px;
margin: 10px;
border-bottom: solid 2px #a6a6a6;
border-right: solid 1px #a6a6a6;
border-left: solid 1px #d9d9d9;
border-top: solid 1px #d9d9d9;

}

/* to center the stray add */
.corp_adds li.stray {
margin-left: 215px;
}



 .govt_adds {
width: 730px;
margin: 0 auto;

}

.govt_adds li {

float: left;
padding: 10px;
margin: 10px;
border-bottom: solid 2px #a6a6a6;
border-right: solid 1px #a6a6a6;
border-left: solid 1px #d9d9d9;
border-top: solid 1px #d9d9d9;
}

/* to center the stray add */
.govt_adds li.stray {
margin-left: 65px;
}



/* this is for the list of supporters */
/* allow room for 2 columns */
/* separate div for the columned list */
 div#supporter_list {
width: 730px;


 }

.list_left {
width: 280px;
float: left;

}

 .list_left li{
  padding-left: 10px;
  }

.list_right {
width: 360px;
float: right;
padding-left: 10px;
}
.list_right li{
padding-left: 10px;
}


h2+p {
padding: 5px 0 0px 0px;
}
p {
padding: 5px 10px 5px 10px;
}

div.evenlite+div.even, div.even+div.even, div.evenlite+div.even {
margin-top: 20px;
}

div#footer {
padding: 5px;
text-align: center;
margin: 5px;
clear: left;
}

#footer_links li {
display: inline;
padding: 5px;
color: #f5f4fa;
}

#footer_links li a{
color: #f5f4fa;
}
#footer_links li a:hover{
color: #a190ff;
}


/* this may be unnecessary--superfluous--not used--denegrated */
/* this is a "generic" unordered list with bullets--may contain text and images--stretches accross the full width--first used for donate now page */
ol.full_ol {
list-style: decimal inside;
padding-left: 10px;
line-height: 1.7em;
font-style: italic;
font-weight: bold;
font-size: 110%;
}

/* thumbnails as bullets--photos page */
.thumb_list_big li {
padding: 5px 0 5px 5px;
list-style-type: disc;
list-style-position: inside;
line-height: 1.7em;
font-style: italic;
font-size: 110%;
}


ul.thumb_list_big li p {
text-align: center;
}



#donor_form {
margin: 10px;
width: 95%;

}



#donor_form td{
border-bottom-width: 1px;
border-bottom-style: solid;
padding-top: 10px;
border-bottom-color: #0d0d0d;
}

#donor_form th {

padding-top: 20px;
padding-left: 0;
}

td.lastcol {
width: 40px;
}

tr.classindent {
padding-left: 10px;
}


div.phototext_list {
padding-bottom: 50px;
/* clear: both; */
}


.phototext_list > li {
clear: both;
overflow: auto;
padding: 10px 0px 10px 0px;
}

.phototext_list h2 {
margin-bottom: 10px;
margin-left: 10px;
}

 .phototext_list h3 {
padding-left: 5px;
}
 .phototext_list h4 {
padding-left: 5px;
}

.phototext_list  img {
float: left;
width: 200px;
margin: 0px 20px 0px 10px;
}

.phototext_list li p.details {
text-align: center;
margin: 5px 20px 0px 210px;
padding: 10px 15px 10px 0px;
}


.phototext_list form {
text-align: center;
}

.phototext_list + h2 {
margin-top: 30px;
}

ul.text_list {
padding: 0 0 0 5px;

}


.text_list li {
padding-left: 10px;
}

ul.text_list_bull {
padding: 0 0 5px 30px;
list-style-type: disc;
list-style-position: outside;
}

h2 + ul.text_list_bull{
padding-top: 20px;
}

h2.wmpage + ul.text_list_bull{
padding-top: 5px;
}



/* this is just the link to further details page */
p.more {
color: #1e67d9;
text-align: right;
padding-right: 10px;
}

p.tenindent_top {
padding: 20px 10px 5px 10px;

}
p.tenindent {
padding: 5px 10px 5px 10px;
}

/* this is a span to decorate the first few words of a paragraph */
.first_dec {
color: #2c14ca;
font-size: 110%;
font-weight: bold;
}



/* thumbnails as bullets--photos page */
.thumb_list li {
padding: 5px 0 5px 5px;
list-style-type: disc;
list-style-position: inside;
}

.corp_list li {
padding: 5px 0 5px 20px;
width: 160px;
/* list-style-type: disc; */
/* list-style-position: inside; */
}



/* photo gallery pages--thumbnails */

ul.gallery_thumbs {
text-align: center;
padding-top: 10px;
}

.gallery_thumbs li {
/* padding: 5px; */
text-align: center;

}

.gallery_thumbs li img {


background-color: #f5f4fa;

}

/* uniform table styling */



.uniform_table {
text-align: left;
border-bottom: solid 2px #a6a6a6;
border-right: solid 1px #a6a6a6;
border-left: solid 1px #d9d9d9;
border-top: solid 1px #d9d9d9;
background-color: #e9ebf7;
background-image: url(images/grad300.jpg);

width: 70%;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.even .uniform_table {
  background-color: #f5f4fa;
  background-image: none;
}



.uniform_table th {
background-color: #606060;
border: 1px solid #afacbf;
padding: 0 5px 0 5px;
color: #f5f4fa;
text-align: center;
}

.uniform_table td {
padding: 0 5px 0 5px;
border: 1px solid #afacbf;
}

.even .uniform_table {
  background-color: #f5f4fa;
  background-image: none;
}




/* this is the benefits table styling--challenging table--unlikely to be repeated */

table#benefits_table {

margin: 0 5px 15px 5px;
text-align: center;
border-bottom: solid 2px #a6a6a6;
border-right: solid 1px #a6a6a6;
border-left: solid 1px #d9d9d9;
border-top: solid 1px #d9d9d9;
background-color: #e9ebf7;
background-image: url(images/grad300.jpg);
/* background-image: url(images/bd_grad4.jpg); */
background-repeat: repeat-x;
}


/* first column of the benefits table */
#benefits_table th.colfirst {
width: 20%;
text-align: left;
}

/* bigger first column of the benefits table */
#benefits_table th.colfirstbig {
width: 50%;
text-align: left;
}


#benefits_table th {
background-color: #606060;
color: #f5f4fa;
border: 1px solid #afacbf;
padding: 0 5px 0 5px;
}
#benefits_table td {

padding-left: 3px;
border: 1px solid #afacbf;
}

#my_month ol.li {


margin-top: 20px;

}

#my_month li div.details {

min-height: 150px;
padding-bottom: 30px;
background-image: url(images/spacer.jpg);
background-repeat: no-repeat;
background-position: bottom;
}



#my_month table {
text-align: left;
width: 730px;
border-bottom: solid 2px #a6a6a6;
border-right: solid 1px #a6a6a6;
border-left: solid 1px #d9d9d9;
border-top: solid 1px #d9d9d9;
background-color: #e9ebf7;
background-image: url(images/grad300.jpg);
/* background-image: url(images/bd_grad4.jpg); */
background-repeat: repeat-x;

}

#my_month table th {
/* background-color: #bdc7f2; */
background-color: #606060;
width: 10%;
text-align: center;
color: #f5f4fa;
}




#my_month th {
border: 1px solid #afacbf;
padding-left: 3px;
}

#my_month td {
font-size: 0.9em;
vertical-align: text-top;
border: 1px solid #afacbf;
padding-left: 3px;
}

#my_month span.date {
font-size: 1.1em;
color: #7d6e06;
text-align: left;
padding-right: 5px;
}

/* for the calendar stuff */
ol#months_tag {
padding-top: 20px;

}

/* for the calendar stuff */
ol#months_tag li{
display: inline;
padding-left: 10px;

}
ol.prev_top_next {
text-align: right;
float: right;
width: 300px;
padding-top: 10px;

}

ol.prev_top_next li {
display: inline;
padding-left: 10px;

}



 div#my_month table.calendar_pages a{
    color: #606060;

 }
div#my_month table.calendar_pages a:hover{
    color: #190b73;
 }

 div#my_month table.calendar_pages span.prevmonth{
   padding-right: 250px;

 }

  div#my_month table.calendar_pages span.nextmonth{
   padding-left: 250px;
   font-size: 100%;
 }



iframe {
width: 730px;
height: 400px;
}

#my_month table.orderform {
width: 95%;
margin-left: auto;
margin-right: auto;
}


#my_month table.orderform th{
width: 20%;
padding: 5px;
border-bottom: 2px solid #afacbf;
}

#my_month table.orderform tr.section{

border-bottom: 2px solid #afacbf;
}

#viewcart {
margin-top: 20px;
text-align: center;
}



.lefty {
float: left;
width: 200px;
margin: 20px 20px 0px 10px;
}

ol.cdcontents {
list-style: decimal outside;
padding-left: 30px;
line-height: 1.5em;
}

ol.cdcontents h3 {
padding-bottom: 10px;
}

dl.privacy_list {
padding-left: 10px;
}

dl.privacy_list dd {
padding-left: 10px;
}

dl.privacy_list ul {
padding: 0 0 5px 15px;
list-style-type: disc;
list-style-position: outside;
}

.no_wrap {
margin-left: 215px;
}

.rhsphotos {
float: right;
border-bottom: solid 2px #a6a6a6;
border-right: solid 1px #a6a6a6;
border-left: solid 1px #d9d9d9;
border-top: solid 1px #d9d9d9;
background-color: #f5f4fa;
padding: 9px;
margin: 5px 0px 5px 5px;
}

.big_photo {
text-align: center;
padding: 10px;

}

table.basic td {
 padding: 10px 10px 0px 10px;
}
/* styling of the container. */

li.videoholder{
  height: 400px;
}


li a.myPlayer {
	display:block;
	width: 425px;
	height:300px;
	text-align:center;
	margin:0 15px 15px 5px;
	float:left;
	border:1px solid #999;


}


li a#Liftthineeyes {
  background-image: url(images/Liftthineeyes_bg_425.jpg);

}
li a#AveMaria {
  background-image: url(images/AveMaria_bg_425.jpg);

}

li a#Logdrivers {
  background-image: url(images/Logdrivers_bg_425.jpg);

}

li a#AveMariaApril {
  background-image: url(images/AveMariaApril_bg_425.jpg);

}

li a#LiftthineeyesApril {
  background-image: url(images/LiftthineeyesApril_bg_425.jpg);

}





 /* play button */
li a.myPlayer img {
	margin-top:70px;
    margin-left:95px;

}

/* when container is hovered we alter the border color */
li a.myPlayer:hover {


	border:1px solid #000;


}