* {margin:0;padding:0}
		
		body {color:#000; font: normal 100% 'open_sansregular', Arial, Helvetica, sans-serif; text-align:center;background: #cbcbcb url(../pics/extra_clean_paper.png) repeat left top;
}

a:link { color: #348b3c; text-decoration: none;}

a:visited  { color: #348b3c }

a:hover {color: #000;}
		
		#container { margin:0 auto; width:100%;  max-width: 1000px;}
		
		#head { height:100px;background:#333;}
		
		#nav { background:#b3bed4 url(../pics/head-back.png) repeat left top; border-top: .5em solid #8a94ad;}
		
		#content {  width:100%;}
		
		#content img {width:100%; border: none; }
		
		 #navlist {padding: 1em 0 1em 0;width: 100%;}
   
   #navlist li {list-style: none; display: inline; margin:0 1.5em; line-height: 1.5em;}

#navlist li a { text-decoration: none; text-shadow:0 0 1px #fff; }

#navlist li a:link { color: #348b3c; }

#navlist li a:visited  { color: #348b3c }

#navlist li a:hover {color: #000;}
   
h2.solo {color: #4d5361; font-size:2.2em; font-weight: normal; width:100%; margin: 0.5em 0;text-shadow:0 0 1px #fff;}
		
		
			 #right {
    	
    	clear:both;
        width:100%;
    }
    
    #right p {color: #c73acc; font-size:2.2em;width:100%; margin: 0 0 0.5em 0;text-shadow:0 0 1px #fff;}
     
        
     #right p a:link { color: #c73acc; text-decoration: none;}

#right p a:visited  { color: #c73acc }

#right p a:hover {color: #000;}
     
     

    #left {
    	clear:both;
        width:100%;
    }
    
    
    
     #left p {font-size:2.2em; color: #4d5361; font-family: 'nexa_rust_slabblack_shadow_01', Arial, Helvetica, sans-serif; width:100%;text-shadow:0 0 1px #fff;}
     
     
   
   
   #intro-top {float:left; width: 50%;}
   
     #intro-top p {color: #4d5361; font-size:1.5em; margin: 0 0 0.5em 0; width:100%;background: #eee url(../pics/extra_clean_paper.png) repeat left top; text-shadow:0 0 1px #fff;}
   
    #intro-bottom {float:left; width: 50%;}
   
    #intro-bottom p {color: #4d5361; font-size:1.5em; margin: 0 0 0.5em 0; width:100%; background: #eee url(../pics/extra_clean_paper.png) repeat left top; text-shadow:0 0 1px #fff;}
    
     #subject {float:left; width: 100%;}
   
     #subject p {color: #4d5361; text-align:left; font-size:1.5em; margin: 0 0 0.5em 0; width:100%;background: #eee url(../pics/extra_clean_paper.png) repeat left top; text-shadow:0 0 1px #fff;}
    
        

				
				@media only screen and (max-width: 768px) {
					
					
	h2.solo {font-size:2em;width:100%;}
					
					
    #right {
    	
    	clear:both;
        width:100%;
    }
    
    #right p {font-size:2em;width:100%;}

    #left {
    	clear:both;
        width:100%;
    }
    
    #left p {font-size:2em;width:100%;}
    
     #intro-top {float:none; width: 100%;}
     
      #intro-bottom {float:none; width: 100%;}
    
     #intro-top p {font-size:1.2em;width:100%; background: #eee url(../pics/extra_clean_paper.png) repeat left top;}
     
     #intro-bottom p {font-size:1.2em;width:100%; background: #eee url(../pics/extra_clean_paper.png) repeat left top;}
     
     #subject p {font-size:1.2em;width:100%; background: #eee url(../pics/extra_clean_paper.png) repeat left top;}

    #navlist li a { font-size:1.5em; display: block; line-height: 2em; }

#navlist li a:link { font-size:1.5em; display: block; }

#navlist li a:visited  { font-size:1.5em;display: block;  }

#navlist li a:hover {font-size:1.5em;display: block; }



}



@media only screen and (max-width: 868px) {
	
	h2.solo {font-size:2em;width:100%;}
	
	
    #right {
    	
    	clear:both;
        width:100%;
    }
    
    #right p {font-size:2em;width:100%;}

    #left {
    	clear:both;
        width:100%;
    }
    
    #left p {font-size:2em;width:100%;}
    
     #intro-top p {font-size:1.2em;width:100%; background: #eee url(../pics/extra_clean_paper.png) repeat left top;}
     
     #intro-bottom p {font-size:1.2em;width:100%; background: #eee url(../pics/extra_clean_paper.png) repeat left top;}
     
     #subject p {font-size:1.2em;width:100%; background: #eee url(../pics/extra_clean_paper.png) repeat left top;}

    #navlist li a { font-size:1.5em; display: block;  }

#navlist li a:link { font-size:1.5em; display: block; }

#navlist li a:visited  { font-size:1.5em;display: block;  }

#navlist li a:hover {font-size:1.5em;display: block; }



}


@media only screen and (max-width: 895px) {
	
	
	h2.solo {font-size:2em;width:100%;}
	
	
    #right {
    	
    	clear:both;
        width:100%;
    }
    
    #right p {font-size:2em;width:100%;}
    
    
   

    #left {
    	clear:both;
        width:100%;
    }
    
    #left p {font-size:2em;width:100%;}
    
     #intro-top p {font-size:1.2em;width:100%; background: #eee url(../pics/extra_clean_paper.png) repeat left top;}
     
     #intro-bottom p {font-size:1.2em;width:100%; background: #eee url(../pics/extra_clean_paper.png) repeat left top;}
     
     #subject p {font-size:1.2em;width:100%; background: #eee url(../pics/extra_clean_paper.png) repeat left top;}

    #navlist li a { font-size:1.5em; display: block;  }

#navlist li a:link { font-size:1.5em; display: block; }

#navlist li a:visited  { font-size:1.5em;display: block;  }

#navlist li a:hover {font-size:1.5em;display: block; }



}



@media only screen and (min-width: 900px) {
	
	h2.solo {font-size:3.2em;width:100%;}
	
	
    #right {
    	
    	clear:both;
        width:100%;
    }
    
    #right p {font-size:3.2em;width:100%;text-align:center;}
    
  

    #left {
    	clear:both;
        width:100%;
    }
    
     #left p {font-size:3.2em;width:100%;text-align:center;}
     
      #intro-top p {font-size:2.2em;width:100%; background: #eee url(../pics/extra_clean_paper.png) repeat left top;}
     
     #intro-bottom p {font-size:2.2em;width:100%; background: #eee url(../pics/extra_clean_paper.png) repeat left top;}
     
     #subject p {font-size:1.7em;width:100%; background: #eee url(../pics/extra_clean_paper.png) repeat left top;}
     
     
#navlist li a { font-size:2.2em;  }

#navlist li a:link { font-size:2.2em; }

#navlist li a:visited  { font-size:2.2em; }

#navlist li a:hover {font-size:2.2em;}


    
}



	#footer { background:transparent;clear:both;}
		
		#footer p {color: #333; font-size:1.2em; width:100%;padding: 1em 0 1em 0; }
		
		
		@font-face {
    font-family: 'nexa_rust_slabblack_shadow_01';
    src: url('NexaRustSlab-BlackShadow01-Free-webfont.eot');
    src: url('NexaRustSlab-BlackShadow01-Free-webfont.eot?#iefix') format('embedded-opentype'),
         url('NexaRustSlab-BlackShadow01-Free-webfont.woff2') format('woff2'),
         url('NexaRustSlab-BlackShadow01-Free-webfont.woff') format('woff'),
         url('NexaRustSlab-BlackShadow01-Free-webfont.ttf') format('truetype'),
         url('NexaRustSlab-BlackShadow01-Free-webfont.svg#nexa_rust_slabblack_shadow_01') format('svg');
    font-weight: normal;
    font-style: normal;

}

	
	
	@font-face {
    font-family: 'open_sansregular';
    src: url('opensans-regular-webfont.eot');
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-regular-webfont.woff') format('woff'),
         url('opensans-regular-webfont.ttf') format('truetype'),
         url('opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.audiojs { width:100% !important; }

.audiojs .play { background: url("../audiojs/player-graphics.gif") -2px -1px no-repeat !important; }

.audiojs .loading { background: url("../audiojs/player-graphics.gif") -2px -31px no-repeat !important; } 

.audiojs .error { background: url("../audiojs/player-graphics.gif") -2px -61px no-repeat !important; }

.audiojs .pause { background: url("../audiojs/player-graphics.gif") -2px -91px no-repeat !important; }