/* 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: #5a0a4d; } 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: #ffff40; 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: #4da9ff; } #header-01 { width: 320px; height: 139px; margin: 0 auto; background: url('../images/low-header-01.jpg') no-repeat center center; } #header-02 { width: 320px; height: 159px; margin: 0 auto; background: url('../images/low-header-02.jpg') no-repeat center center; } .menu { width: 320px; height: 68px; margin: 0 auto; } .menu-01 { width: 106px; height: 68px; display: block; float: left; background: url('../images/low-menu_01.gif') no-repeat center center; } .menu-02 { width: 108px; height: 68px; display: block; float: left; background: url('../images/low-menu_02.gif') no-repeat center center; } .menu-03 { width: 106px; height: 68px; display: block; float: left; background: url('../images/low-menu_03.gif') no-repeat center center; } .menu-join { width: 320px; height: 68px; display: block; float: left; background: url('../images/low-menu-join.gif') no-repeat center center; } .menu-welcome { width: 320px; height: 68px; display: block; float: left; background: url('../images/low-menu-welcome.gif') no-repeat center center; } .longtext { width: 300px; padding: 10px; background: #459ef2 url('../images/longtext.gif') no-repeat center top; color: #fff;} .longtext p { font-size: 13px; text-align: justify; color: #fff; } #mainad-01 { width: 320px; height: 84px; margin: 0 auto; background: url('../images/low-mainad-01.jpg') no-repeat center center; } #mainad-02 { width: 320px; height: 125px; margin: 0 auto; background: url('../images/low-mainad-02.jpg') no-repeat center center; } #mainad-03 { width: 320px; height: 65px; margin: 0 auto; background: url('../images/low-mainad-03.jpg') no-repeat center center; } #mainad2-01 { width: 320px; height: 116px; margin: 0 auto; background: url('../images/low-mainad2-01.jpg') no-repeat center center; } #mainad2-02 { width: 320px; height: 83px; margin: 0 auto; background: url('../images/low-mainad2-02.jpg') no-repeat center center; } #mainad2-03 { width: 320px; height: 75px; margin: 0 auto; background: url('../images/low-mainad2-03.jpg') no-repeat center center; } a.joinlink:link, a.joinlink:visited { width: 320px; display: block; padding: 7px 0 14px 0; color: #fff; font-size: 23px; line-height: 29px; font-weight: bold; text-align: center; letter-spacing: -1px; } a.joinlink:active, a.joinlink:hover { color: #d0d0ff; } a.banner-taphere { width: 320px; height: 104px; display: block; margin: 0; background: url('../images/low-banner-taphere.gif') no-repeat center center; } a.banner-premium { width: 320px; height: 104px; display: block; margin: 0; background: url('../images/low-banner-premium.gif') no-repeat center center; } .title-hottestvideos { width: 320px; height: 62px; display: block; margin-top: 20px; background: url('../images/low-title-hottestvideos.gif') no-repeat center center; } .title-latestupdates { width: 320px; height: 62px; display: block; margin-top: 20px; background: url('../images/low-title-latestupdates.gif') no-repeat center center; } .title-morevideos { width: 320px; height: 62px; display: block; margin-top: 20px; background: url('../images/low-title-morevideos.gif') no-repeat center center; } .episode { width: 320px; height: 256px; display: block; position: relative; } .episode-desc { margin: 6px; padding: 10px; background: #246db3; color: #fff; font-size: 13px; 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; } #footerframe { margin-top: 3px; } #footerframe-01 { width: 320px; height: 241px; display: block; background: url('../images/low-footerframe-01.gif') no-repeat center center; } #footerframe-02 { width: 320px; height: 218px; display: block; background: url('../images/low-footerframe-02.jpg') no-repeat center center; } #footer-copyright { padding: 10px 0; 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: #4da9ff; } #header-01 { width: 480px; height: 139px; margin: 0 auto; background: url('../images/med-header-01.jpg') no-repeat center center; } #header-02 { width: 480px; height: 159px; margin: 0 auto; background: url('../images/med-header-02.jpg') no-repeat center center; } .menu { width: 480px; height: 68px; margin: 0 auto; } .menu-01 { width: 160px; height: 68px; display: block; float: left; background: url('../images/med-menu_01.gif') no-repeat center center; } .menu-02 { width: 160px; height: 68px; display: block; float: left; background: url('../images/med-menu_02.gif') no-repeat center center; } .menu-03 { width: 160px; height: 68px; display: block; float: left; background: url('../images/med-menu_03.gif') no-repeat center center; } .menu-join { width: 480px; height: 68px; display: block; float: left; background: url('../images/med-menu-join.gif') no-repeat center center; } .menu-welcome { width: 480px; height: 68px; display: block; float: left; background: url('../images/med-menu-welcome.gif') no-repeat center center; } .longtext { width: 440px; padding: 10px 20px; margin: 1px 0; background: #459ef2 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: 84px; margin: 0 auto; background: url('../images/med-mainad-01.jpg') no-repeat center center; } #mainad-02 { width: 480px; height: 125px; margin: 0 auto; background: url('../images/med-mainad-02.jpg') no-repeat center center; } #mainad-03 { width: 480px; height: 65px; margin: 0 auto; background: url('../images/med-mainad-03.jpg') no-repeat center center; } #mainad2-01 { width: 480px; height: 116px; margin: 0 auto; background: url('../images/med-mainad2-01.jpg') no-repeat center center; } #mainad2-02 { width: 480px; height: 83px; margin: 0 auto; background: url('../images/med-mainad2-02.jpg') no-repeat center center; } #mainad2-03 { width: 480px; height: 75px; margin: 0 auto; background: url('../images/med-mainad2-03.jpg') no-repeat center center; } a.joinlink:link, a.joinlink:visited { width: 480px; display: block; padding-bottom: 7px; color: #fff; font-size: 20px; line-height: 40px; font-weight: bold; text-align: center; letter-spacing: -1px; } a.joinlink:active, a.joinlink:hover { color: #d0d0ff; } a.banner-taphere { width: 480px; height: 104px; display: block; margin: 0; background: url('../images/med-banner-taphere.gif') no-repeat center center; } a.banner-premium { width: 480px; height: 104px; display: block; margin: 0; background: url('../images/med-banner-premium.gif') no-repeat center center; } .title-hottestvideos { width: 480px; height: 62px; display: block; margin-top: 20px; background: url('../images/med-title-hottestvideos.gif') no-repeat center center; } .title-latestupdates { width: 480px; height: 62px; display: block; margin-top: 20px; background: url('../images/med-title-latestupdates.gif') no-repeat center center; } .title-morevideos { width: 480px; height: 62px; display: block; margin-top: 20px; background: url('../images/med-title-morevideos.gif') no-repeat center center; } .episode { width: 480px; height: 341px; display: block; position: relative; } .episode-desc { margin: 6px; padding: 6px; background: #246db3; color: #fff; font-size: 13px; 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; } #episode-07 { background: url('../images/med-episode-07.jpg') no-repeat center top; } #episode-08 { background: url('../images/med-episode-08.jpg') no-repeat center top; } .tour-updates { } .tour-iframe-updates { width: 480px; height: 1400px; display: block; margin: 10px auto; } #footerframe { margin-top: 3px; } #footerframe-01 { width: 480px; height: 241px; display: block; background: url('../images/med-footerframe-01.gif') no-repeat center center; } #footerframe-02 { width: 480px; height: 253px; display: block; background: url('../images/med-footerframe-02.jpg') no-repeat center center; } #footer-copyright { padding: 10px 0; 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: #4da9ff; } #header-01 { width: 768px; height: 139px; margin: 0 auto; background: url('../images/high-header-01.jpg') no-repeat center center; } #header-02 { width: 768px; height: 159px; margin: 0 auto; background: url('../images/high-header-02.jpg') no-repeat center center; } .menu { width: 768px; height: 68px; margin: 0 auto; } .menu-01 { width: 256px; height: 68px; display: block; float: left; background: url('../images/high-menu_01.gif') no-repeat center center; } .menu-02 { width: 256px; height: 68px; display: block; float: left; background: url('../images/high-menu_02.gif') no-repeat center center; } .menu-03 { width: 256px; height: 68px; display: block; float: left; background: url('../images/high-menu_03.gif') no-repeat center center; } .menu-join { width: 768px; height: 68px; display: block; float: left; background: url('../images/high-menu-join.gif') no-repeat center center; } .menu-welcome { width: 768px; height: 68px; 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: #459ef2 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: 84px; margin: 0 auto; background: url('../images/high-mainad-01.jpg') no-repeat center center; } #mainad-02 { width: 768px; height: 125px; margin: 0 auto; background: url('../images/high-mainad-02.jpg') no-repeat center center; } #mainad-03 { width: 768px; height: 65px; margin: 0 auto; background: url('../images/high-mainad-03.jpg') no-repeat center center; } #mainad2-01 { width: 768px; height: 116px; margin: 0 auto; background: url('../images/high-mainad2-01.jpg') no-repeat center center; } #mainad2-02 { width: 768px; height: 83px; margin: 0 auto; background: url('../images/high-mainad2-02.jpg') no-repeat center center; } #mainad2-03 { width: 768px; height: 75px; margin: 0 auto; background: url('../images/high-mainad2-03.jpg') no-repeat center center; } a.joinlink:link, a.joinlink:visited { width: 768px; display: block; padding-bottom: 7px; color: #fff; font-size: 25px; line-height: 40px; font-weight: bold; text-align: center; letter-spacing: -1px; } a.joinlink:active, a.joinlink:hover { color: #d0d0ff; } a.banner-taphere { width: 768px; height: 104px; display: block; margin: 0; background: url('../images/high-banner-taphere.gif') no-repeat center center; } a.banner-premium { width: 768px; height: 104px; display: block; margin: 0; background: url('../images/high-banner-premium.gif') no-repeat center center; } .title-hottestvideos { width: 768px; height: 62px; display: block; margin-top: 20px; background: url('../images/high-title-hottestvideos.gif') no-repeat center center; } .title-latestupdates { width: 768px; height: 62px; display: block; margin-top: 20px; background: url('../images/high-title-latestupdates.gif') no-repeat center center; } .title-morevideos { width: 768px; height: 62px; display: block; margin-top: 20px; background: url('../images/high-title-morevideos.gif') no-repeat center center; } .episode { width: 768px; height: 341px; display: block; position: relative; } .episode-desc { margin: 6px; padding: 10px; background: #246db3; 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; } #episode-07 { background: url('../images/high-episode-07.jpg') no-repeat center top; } #episode-08 { background: url('../images/high-episode-08.jpg') no-repeat center top; } .tour-updates { } .tour-iframe-updates { width: 640px; height: 1040px; display: block; margin: 10px auto; } #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; } }