/* css clear */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td  { margin: 0; padding: 0; }
table  { border-collapse: collapse; border-spacing: 0; }
fieldset,img  { border: 0; }
ul  { list-style: none; }
caption,th  { text-align: left; }
h1,h2,h3,h4,h5,h6  { font-size: 100%; font-weight: normal; }
q:before,q:after  { content:''; }
abbr,acronym  { border: 0; }
b, strong  { font-weight: bold; }
address,caption,cite,code,dfn,em,strong,th,var  { font-style: normal; font-weight: normal; }


/* general definitions */

body  { margin: 0; padding: 0; position: relative; background: #000 url('../images/bgd.jpg'); }
body, td, p  { font-family: Arial, Helvetica, sans-serif; }
.clear  { clear: both; }
.center  { margin: 0 auto; display: block; }
.fl  { float: left; }
.fr  { float: right; }
.block  { display: block; }
.inline  { display: inline; }
a:link, a:visited  { color: #ffdd77; text-decoration: underline; }
a:hover, a:active  { color: #fff; text-decoration: underline; }
strong, b  { font-weight: bold; }
u  { text-decoration: underline; }
i, em  { font-style: italic; }
p  { padding: 0.5em 0; }
hr { height: 1px; margin: 10px 0; padding: 0;  background-color: #d0d0d0; color: #d0d0d0; border: none; }


/* smartphones portrait */

@media only screen and (max-width: 479px) {

	body  { }
	body, td, p  { font-size: 12px; line-height: 1.5em; color: #303030; text-align: left; }

	.content-wrapper  { width: 320px; margin: 0 auto; background: #79004a; }

	#header-01  { width: 320px; height: 36px; margin: 0 auto; background: url('../images/low-header-01.gif') no-repeat center center; }
	#header-02  { width: 320px; height: 192px; margin: 0 auto; background: url('../images/low-header-02.jpg') no-repeat center center; }
	#header-03  { width: 320px; height: 102px; margin: 0 auto; background: url('../images/low-header-03.jpg') no-repeat center center; }

	.menu  { width: 320px; height: 82px; margin: 0 auto; }
	.menu-01  { width: 107px; height: 82px; display: block; float: left; background: url('../images/low-menu_01.gif') no-repeat center center; }
	.menu-02  { width: 106px; height: 82px; display: block; float: left; background: url('../images/low-menu_02.gif') no-repeat center center; }
	.menu-03  { width: 107px; height: 82px; display: block; float: left; background: url('../images/low-menu_03.gif') no-repeat center center; }
	.menu-join  { width: 320px; height: 82px; display: block; float: left; background: url('../images/low-menu-join.gif') no-repeat center center; }
	.menu-welcome  { width: 320px; height: 82px; display: block; float: left; background: url('../images/low-menu-welcome.gif') no-repeat center center; }

	.longtext  { width: 300px; padding: 10px 10px; margin: 1px 0; background: #79004a url('../images/longtext.gif') no-repeat center top; color: #fff;}
	.longtext p  { font-size: 1.1em; text-align: justify; color: #fff; }
	
	#mainad-01  { width: 320px; height: 161px; margin: 0 auto; background: url('../images/low-mainad-01.jpg') no-repeat center center; }
	#mainad-02  { width: 320px; height: 91px; margin: 0 auto; background: url('../images/low-mainad-02.jpg') no-repeat center center; }
	#mainad2-01  { width: 320px; height: 161px; margin: 0 auto; background: url('../images/low-mainad2-01.jpg') no-repeat center center; }
	#mainad2-02  { width: 320px; height: 91px; margin: 0 auto; background: url('../images/low-mainad2-02.jpg') no-repeat center center; }
	
	a.banner-taphere  { width: 320px; height: 75px; display: block; margin: 0; background: url('../images/low-banner-taphere.gif') no-repeat center center; }
	a.banner-premium  { width: 320px; height: 75px; display: block; margin: 0; background: url('../images/low-banner-premium.gif') no-repeat center center; }
	
	.episode  { width: 320px; height: 424px; display: block; position: relative; margin: 12px 0 0 0; }
	.episode-title  { width: 320px; position: absolute; top: 18px; color: #fff; font-size: 15px; line-height: 22px; font-weight: bold; text-align: center;  }
	.episode-desc  { width: 300px; position: absolute; top: 340px; left: 10px; color: #fff; font-size: 12px; line-height: 18px; text-align: justify; }
	
	#episode-01  { background: url('../images/low-episode-01.jpg') no-repeat center top; }
	#episode-02  { background: url('../images/low-episode-02.jpg') no-repeat center top; }
	#episode-03  { background: url('../images/low-episode-03.jpg') no-repeat center top; }
	#episode-04  { background: url('../images/low-episode-04.jpg') no-repeat center top; }
	#episode-05  { background: url('../images/low-episode-05.jpg') no-repeat center top; }
	#episode-06  { background: url('../images/low-episode-06.jpg') no-repeat center top; }

	.tour-updates  { }
	.tour-iframe-updates  { width: 320px; height: 2100px; display: block; margin: 10px auto; }
	
	a.footerbanner  { width: 320px; height: 170px; display: block; margin: 10px 0; background: url('../images/low-footerbanner.gif') no-repeat center center; }

	#footer-copyright  { padding: 10px 0; background: #459ef2 url('../images/longtext.gif') no-repeat center top; color: #fff; text-align: center; font-weight: bold; }

	#join-form-wrapper  { width: 320px; padding: 15px 0; background: #606060 url('../images/low-join-form-wrapper.gif') repeat-x center top; }
	#join-form  { width: 260px; padding: 10px; margin: 0 auto; background: #fff; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; color: #303030; }
	#join-intro { padding: 10px 15px; font-size: 14px; line-height: 18px; text-align: justify; }
	
	#signupform  { width: 250px; margin: 0 auto; font-size: 14px; line-height: 18px; font-weight: bold; text-align: left; }
	#signupform .form-section  { padding: 3px 0; }
	#signupform .form-optiondesc  { }
	#signupform input.textfield  { width: 248px; height: 20px; border: 1px solid #a0a0a0; background: #fff; font-size: 14px; line-height: 20px; }
	#signupform select  { width: 250px; }
	#signupform input.join_button  { padding: 1px 5px; margin-top: 8px; font-size: 14px; font-weight: bold; line-height: 20px; }
	#signupform span.join_error  { font-weight: bold; color: #f07040; }

	#join-slogans  { width: 250px; margin: 10px auto 0 auto; color: #f0f0f0; font-size: 14px; line-height: 18px; font-weight: bold; }
	#join-slogans ul  { }
	#join-slogans ul li  { display: block; padding: 8px 0; border-bottom: 1px dashed #808080; }
	#join-slogans ul li:last-child  { border: 0; }

}


/* smartphones landscape */

@media only screen and (min-width: 480px) and (max-width: 767px) {

	body  { }
	body, td, p  { font-size: 12px; line-height: 1.5em; color: #303030; text-align: left; }

	.content-wrapper  { width: 480px; margin: 0 auto; background: #79004a; }

	#header-01  { width: 480px; height: 36px; margin: 0 auto; background: url('../images/med-header-01.gif') no-repeat center center; }
	#header-02  { width: 480px; height: 192px; margin: 0 auto; background: url('../images/med-header-02.jpg') no-repeat center center; }
	#header-03  { width: 480px; height: 102px; margin: 0 auto; background: url('../images/med-header-03.jpg') no-repeat center center; }

	.menu  { width: 480px; height: 82px; margin: 0 auto; }
	.menu-01  { width: 160px; height: 82px; display: block; float: left; background: url('../images/med-menu_01.gif') no-repeat center center; }
	.menu-02  { width: 160px; height: 82px; display: block; float: left; background: url('../images/med-menu_02.gif') no-repeat center center; }
	.menu-03  { width: 160px; height: 82px; display: block; float: left; background: url('../images/med-menu_03.gif') no-repeat center center; }
	.menu-join  { width: 480px; height: 82px; display: block; float: left; background: url('../images/med-menu-join.gif') no-repeat center center; }
	.menu-welcome  { width: 480px; height: 82px; display: block; float: left; background: url('../images/med-menu-welcome.gif') no-repeat center center; }

	.longtext  { width: 460px; padding: 10px 10px; margin: 1px 0; background: #79004a url('../images/longtext.gif') no-repeat center top; color: #fff;}
	.longtext p  { font-size: 1.3em; text-align: justify; color: #fff; }
	
	#mainad-01  { width: 480px; height: 161px; margin: 0 auto; background: url('../images/med-mainad-01.jpg') no-repeat center center; }
	#mainad-02  { width: 480px; height: 91px; margin: 0 auto; background: url('../images/med-mainad-02.jpg') no-repeat center center; }
	#mainad2-01  { width: 480px; height: 161px; margin: 0 auto; background: url('../images/med-mainad2-01.jpg') no-repeat center center; }
	#mainad2-02  { width: 480px; height: 91px; margin: 0 auto; background: url('../images/med-mainad2-02.jpg') no-repeat center center; }
	
	a.banner-taphere  { width: 480px; height: 75px; display: block; margin: 0; background: url('../images/med-banner-taphere.gif') no-repeat center center; }
	a.banner-premium  { width: 480px; height: 75px; display: block; margin: 0; background: url('../images/med-banner-premium.gif') no-repeat center center; }
	
	.episode  { width: 480px; height: 336px; display: block; position: relative; margin: 12px 0 0 0; }
	.episode-title  { width: 480px; position: absolute; top: 18px; color: #fff; font-size: 18px; line-height: 24px; font-weight: bold; text-align: center;  }
	.episode-desc  { width: 190px; position: absolute; top: 200px; left: 280px; color: #fff; font-size: 12px; line-height: 18px; text-align: justify; }
	
	#episode-01  { background: url('../images/med-episode-01.jpg') no-repeat center top; }
	#episode-02  { background: url('../images/med-episode-02.jpg') no-repeat center top; }
	#episode-03  { background: url('../images/med-episode-03.jpg') no-repeat center top; }
	#episode-04  { background: url('../images/med-episode-04.jpg') no-repeat center top; }
	#episode-05  { background: url('../images/med-episode-05.jpg') no-repeat center top; }
	#episode-06  { background: url('../images/med-episode-06.jpg') no-repeat center top; }

	.tour-updates  { }
	.tour-iframe-updates  { width: 480px; height: 1400px; display: block; margin: 10px auto; }
	
	a.footerbanner  { width: 480px; height: 170px; display: block; margin: 10px 0; background: url('../images/med-footerbanner.gif') no-repeat center center; }

	#footer-copyright  { padding: 10px 0; background: #459ef2 url('../images/longtext.gif') no-repeat center top; color: #fff; text-align: center; font-weight: bold; }

	#join-form-wrapper  { width: 480px; padding: 15px 0; background: #606060 url('../images/low-join-form-wrapper.gif') repeat-x center top; }
	#join-form  { width: 350px; padding: 10px; margin: 0 auto; background: #fff; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; color: #303030; }
	#join-intro { padding: 10px 25px; font-size: 14px; line-height: 18px; text-align: justify; }
	
	#signupform  { width: 300px; margin: 0 auto; font-size: 14px; line-height: 18px; font-weight: bold; text-align: left; }
	#signupform .form-section  { padding: 3px 0; }
	#signupform .form-optiondesc  { }
	#signupform input.textfield  { width: 298px; height: 20px; border: 1px solid #a0a0a0; background: #fff; font-size: 14px; line-height: 20px; }
	#signupform select  { width: 300px; }
	#signupform input.join_button  { padding: 1px 5px; margin-top: 8px; font-size: 17px; font-weight: bold; line-height: 22px; }
	#signupform span.join_error  { font-weight: bold; color: #f07040; }
	
	#join-slogans  { width: 340px; margin: 10px auto 0 auto; color: #f0f0f0; font-size: 13px; line-height: 18px; font-weight: bold; }
	#join-slogans ul  { }
	#join-slogans ul li  { display: block; padding: 8px 0; border-bottom: 1px dashed #808080; }
	#join-slogans ul li:last-child  { border: 0; }

}


/* tablets */

@media only screen and (min-width: 768px) {

	body  { }
	body, td, p  { font-size: 12px; line-height: 1.5em; color: #303030; text-align: left; }

	.content-wrapper  { width: 768px; margin: 0 auto; background: #79004a; }

	#header-01  { width: 768px; height: 36px; margin: 0 auto; background: url('../images/high-header-01.gif') no-repeat center center; }
	#header-02  { width: 768px; height: 192px; margin: 0 auto; background: url('../images/high-header-02.jpg') no-repeat center center; }
	#header-03  { width: 768px; height: 102px; margin: 0 auto; background: url('../images/high-header-03.jpg') no-repeat center center; }

	.menu  { width: 768px; height: 82px; margin: 0 auto; }
	.menu-01  { width: 256px; height: 82px; display: block; float: left; background: url('../images/high-menu_01.gif') no-repeat center center; }
	.menu-02  { width: 256px; height: 82px; display: block; float: left; background: url('../images/high-menu_02.gif') no-repeat center center; }
	.menu-03  { width: 256px; height: 82px; display: block; float: left; background: url('../images/high-menu_03.gif') no-repeat center center; }
	.menu-join  { width: 768px; height: 82px; display: block; float: left; background: url('../images/high-menu-join.gif') no-repeat center center; }
	.menu-welcome  { width: 768px; height: 82px; display: block; float: left; background: url('../images/high-menu-welcome.gif') no-repeat center center; }

	.longtext  { width: 728px; padding: 10px 20px; margin: 1px 0; background: #79004a url('../images/longtext.gif') no-repeat center top; color: #fff;}
	.longtext p  { font-size: 1.3em; text-align: justify; color: #fff; }
	
	#mainad-01  { width: 768px; height: 161px; margin: 0 auto; background: url('../images/high-mainad-01.jpg') no-repeat center center; }
	#mainad-02  { width: 768px; height: 91px; margin: 0 auto; background: url('../images/high-mainad-02.jpg') no-repeat center center; }
	#mainad2-01  { width: 768px; height: 161px; margin: 0 auto; background: url('../images/high-mainad2-01.jpg') no-repeat center center; }
	#mainad2-02  { width: 768px; height: 91px; margin: 0 auto; background: url('../images/high-mainad2-02.jpg') no-repeat center center; }
	
	a.banner-taphere  { width: 768px; height: 75px; display: block; margin: 0; background: url('../images/high-banner-taphere.gif') no-repeat center center; }
	a.banner-premium  { width: 768px; height: 75px; display: block; margin: 0; background: url('../images/high-banner-premium.gif') no-repeat center center; }
	
	.episode  { width: 768px; height: 336px; display: block; position: relative; margin: 12px 0 0 0; }
	.episode-title  { width: 768px; position: absolute; top: 18px; color: #fff; font-size: 18px; line-height: 24px; font-weight: bold; text-align: center;  }
	.episode-desc  { width: 300px; position: absolute; top: 220px; left: 455px; color: #fff; font-size: 13px; line-height: 18px; text-align: justify; }
	
	#episode-01  { background: url('../images/high-episode-01.jpg') no-repeat center top; }
	#episode-02  { background: url('../images/high-episode-02.jpg') no-repeat center top; }
	#episode-03  { background: url('../images/high-episode-03.jpg') no-repeat center top; }
	#episode-04  { background: url('../images/high-episode-04.jpg') no-repeat center top; }
	#episode-05  { background: url('../images/high-episode-05.jpg') no-repeat center top; }
	#episode-06  { background: url('../images/high-episode-06.jpg') no-repeat center top; }

	.tour-updates  { }
	.tour-iframe-updates  { width: 640px; height: 1040px; display: block; margin: 10px auto; }
	
	a.footerbanner  { width: 768px; height: 170px; display: block; margin: 10px 0; background: url('../images/high-footerbanner.gif') no-repeat center center; }

	#footer-copyright  { padding: 10px 0; background: #459ef2 url('../images/longtext.gif') no-repeat center top; color: #fff; text-align: center; font-weight: bold; }

	#join-form-wrapper  { width: 768px; padding: 15px 0; background: #606060 url('../images/low-join-form-wrapper.gif') repeat-x center top; }
	#join-form  { width: 450px; padding: 10px; margin: 0 auto; background: #fff; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; color: #303030; }
	#join-intro { padding: 10px 25px; font-size: 14px; line-height: 18px; text-align: justify; }
	
	#signupform  { width: 300px; margin: 0 auto; font-size: 14px; line-height: 18px; font-weight: bold; text-align: left; }
	#signupform .form-section  { padding: 3px 0; }
	#signupform .form-optiondesc  { }
	#signupform input.textfield  { width: 298px; height: 20px; border: 1px solid #a0a0a0; background: #fff; font-size: 14px; line-height: 20px; }
	#signupform select  { width: 300px; }
	#signupform input.join_button  { padding: 1px 5px; margin-top: 8px; font-size: 17px; font-weight: bold; line-height: 22px; }
	#signupform span.join_error  { font-weight: bold; color: #f07040; }

	#join-slogans  { width: 400px; margin: 10px auto 0 auto; font-size: 14px; line-height: 20px; font-weight: bold; }
	#join-slogans ul  { }
	#join-slogans ul li  { display: block; padding: 8px 0; border-bottom: 1px dashed #a0a0a0; color: #c0c0c0; }
	#join-slogans ul li:last-child  { border: 0; }

}