/************************************************************************************************************************* Screen smaller than 680px *************************************************************************************************************************/ @media all and (max-width: 680px) { #howto-wrap section.head_logoArea { width: auto; } #howto-wrap p.head_text{position: static;} /* Overall */ #howto-wrap .container {margin: 0 auto; width: 90%; overflow: hidden; background: #fff;} #howto-wrap .header {position: relative; width: 100%; margin: 0 auto; border-bottom: 1px solid #ffecec;} #howto-wrap .section, #howto-wrap .aside, #howto-wrap .section-wide {clear: both; width: 94%; margin: 3%;} /*.footer {clear: both; overflow: hidden; margin: 0 auto; width: 100%; border-top: 10px solid #ffecec;}*/ /* .header */ #howto-wrap .header-icons {clear: both; width: 100%; overflow: hidden; padding: 10px 0; border-bottom: 1px solid #efefef;} #howto-wrap ul.header-icons-list {float: right; list-style: none;} #howto-wrap ul.header-icons-list li {float: left;} #howto-wrap ul.header-icons-list li a {padding: 0;} #howto-wrap ul.header-icons-list li .nav-twitter, #howto-wrap ul.header-icons-list li .nav-facebook, #howto-wrap ul.header-icons-list li .nav-pinterest, #howto-wrap ul.header-icons-list li .nav-instagram, #howto-wrap ul.header-icons-list li .nav-google, #howto-wrap ul.header-icons-list li .nav-flickr, #howto-wrap ul.header-icons-list li .nav-linkedin, #howto-wrap ul.header-icons-list li .nav-youtube, #howto-wrap ul.header-icons-list li .nav-vimeo, #howto-wrap ul.header-icons-list li .nav-bloglovin, #howto-wrap ul.header-icons-list li .nav-tumblr, #howto-wrap ul.header-icons-list li .nav-rss, #howto-wrap ul.header-icons-list li .nav-email {display: block; width: 24px; height: 24px; margin: 5px; text-indent: -9999em;} #howto-wrap ul.header-icons-list li .nav-twitter {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: 0 0;} #howto-wrap ul.header-icons-list li .nav-facebook {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -34px 0;} #howto-wrap ul.header-icons-list li .nav-pinterest {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -68px 0;} #howto-wrap ul.header-icons-list li .nav-instagram {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -102px 0;} #howto-wrap ul.header-icons-list li .nav-google {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -137px 0;} #howto-wrap ul.header-icons-list li .nav-flickr {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -179px 0;} #howto-wrap ul.header-icons-list li .nav-linkedin {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -221px 0;} #howto-wrap ul.header-icons-list li .nav-youtube {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -262px 0;} #howto-wrap ul.header-icons-list li .nav-vimeo {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -304px 0;} #howto-wrap ul.header-icons-list li .nav-bloglovin {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -344px 0;} #howto-wrap ul.header-icons-list li .nav-tumblr {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -466px 0;} #howto-wrap ul.header-icons-list li .nav-rss {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -386px 0;} #howto-wrap ul.header-icons-list li .nav-email {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -427px 0;} /* .header */ #howto-wrap .header h1, #howto-wrap .header h5 {font: 400 2.6em 'Playfair Display', Georgia, Times, Serif; text-transform: uppercase; text-align: center; margin: 40px 0 0 0;} #howto-wrap .header-title {display: block; margin: 0 auto;} #howto-wrap .header-title:hover {text-decoration: none;} #howto-wrap .header-desc {font-size: 0.9em; text-align: center; text-transform: uppercase; letter-spacing: .1em; color: #ccc; margin-bottom: 40px;} #howto-wrap section.head_logoArea .logoHead{max-width: 50%;} /* .nav */ #howto-wrap .tinynav {display: block; width: 96%; margin: 0 auto;} #howto-wrap .nav {padding: 2%; text-transform: uppercase; background: #ffecec; margin-bottom: 5px; position: relative; display: inline-block; text-align: center; width: 96%; clear: both; line-height: 1em; font-weight: 400;} #howto-wrap .nav ul {list-style: none; display: none; text-align: left;} #howto-wrap .nav a {display: block; padding: 15px 10px; color: #343434;} #howto-wrap .nav a:hover {color: #222;} /* .flexslider */ #howto-wrap .flexslider {width: 94%; margin: 3% auto; padding: 0; clear: both;} #howto-wrap .flexslider .flexslides > li {list-style: none; display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ #howto-wrap .flexslider .flexslides img {display: block; width: 100%; height: auto;} #howto-wrap .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ #howto-wrap .flexslides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .flexslides {display: block;} * html .flexslides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ #howto-wrap .no-js .flexslides > li:first-child {display: block;} /* .flexslider theme */ #howto-wrap .flexslider {background: #fff; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;} #howto-wrap .flexslider .flexslides {zoom: 1;} #howto-wrap .flexslider .flexslides > li {position: relative; overflow: hidden;} #howto-wrap .flexslider .flexslides li img {width: 100%; height: auto;} #howto-wrap .flex-container {zoom: 1; position: relative;} #howto-wrap .flex-caption {display: none; background: #000; zoom: 1;} #howto-wrap .flex-caption {position: absolute; bottom: 0; background: rgba(0,0,0,.9); color: #fff; width: 97%; z-index: 8; padding: 2%; opacity: .8; text-align: left !important;} #howto-wrap .flex-caption h3 {font-weight :700; text-transform: uppercase; color: #fff; margin: 0;} #howto-wrap .flex-caption p {margin: 0;} #howto-wrap .flex-caption a, #howto-wrap .flex-caption a:hover {color: #fff;} #howto-wrap .flex-direction-nav {display: block; list-style: none;} #howto-wrap .flex-direction-nav li a.flex-next {position: absolute; right: 0; top: 30%; display: block; z-index: 100; width: 64px; height: 64px; background: #000 url('images/slide_nav.png') no-repeat -64px 0; opacity: .8; filter: alpha(opacity=80); text-indent: -9999px; cursor: pointer;} #howto-wrap .flex-direction-nav li a.flex-prev {position: absolute; left: 0; top: 30%; display: block; z-index: 100; width: 64px; height: 64px; background: #000 url('images/slide_nav.png') no-repeat 0 0; opacity: .8; filter: alpha(opacity=80); text-indent: -9999px; cursor: pointer;} /* .article */ #howto-wrap .article-list {} #howto-wrap .article-list:nth-child(2n+1) {} /* .article misc */ #howto-wrap .breadcrumb {width: 92%; padding: 1%; margin: 20px auto; font-size: .85em; background: #fafafa; border: 1px solid #eee;} /* .footer */ #howto-wrap .footer-inner {overflow: hidden; line-height: 1.8em;} #howto-wrap .footer-widget {clear: both; display: block; padding: 1% 3%; margin-bottom: 30px;} #howto-wrap p.footer-copy {background: #efefef; width: 90%; clear: both; text-align: center; font-size: .9em; overflow: hidden; padding: 20px; margin: 0 auto;} #howto-wrap p.footer-copy .footer-credit {} /* Shortcodes */ #howto-wrap .left, #howto-wrap .right, #howto-wrap .col1, #howto-wrap .col2, #howto-wrap .col3, #howto-wrap .col3-2, #howto-wrap .col3-1, #howto-wrap .col4-1, #howto-wrap .col4-2, #howto-wrap .col4-3, #howto-wrap .col4-4, #howto-wrap .col5-1, #howto-wrap .col5-2, #howto-wrap .col5-3, #howto-wrap .col5-4, #howto-wrap .col5-5 {clear: both; line-height: 1.8em;} #howto-wrap .pullquote {width: 85% !important;} #howto-wrap .sc-slide {position: relative; overflow: hidden; width: 100% !important; height: auto !important; margin: 0 0 20px 0; padding: 0;} /* WooCommerce */ #howto-wrap .col2-set {} #howto-wrap .col2-set .col-1 {clear: both; width: 100% !important;} #howto-wrap .col2-set .col-2 {clear: both; width: 100% !important;} #howto-wrap .product .images, #howto-wrap .product .summary {clear: both; width: 100% !important;} #howto-wrap div.product .woocommerce_tabs ul.tabs li a, #howto-wrap #content div.product .woocommerce_tabs ul.tabs li a, #howto-wrap div.product .woocommerce_tabs ul.tabs li.active a, #howto-wrap #content div.product .woocommerce_tabs ul.tabs li.active a {font-size: 0.8em;} #howto-wrap .woocommerce ul.products li, #howto-wrap .woocommerce-page ul.products li {clear: both !important; width: 100% !important;} #howto-wrap .woocommerce table.cart .product-thumbnail, #howto-wrap .woocommerce-page table.cart .product-thumbnail, #howto-wrap .woocommerce #content table.cart .product-thumbnail, #howto-wrap .woocommerce-page #content table.cart .product-thumbnail {display: none;} #howto-wrap .woocommerce table.cart .product-remove, #howto-wrap .woocommerce-page table.cart .product-remove, #howto-wrap .woocommerce #content table.cart .product-remove, #howto-wrap .woocommerce-page #content table.cart .product-remove {display: none;} #howto-wrap .woocommerce table.cart td.actions .button.alt, #howto-wrap .woocommerce-page table.cart td.actions .button.alt, #howto-wrap .woocommerce #content table.cart td.actions .button.alt, #howto-wrap .woocommerce-page #content table.cart td.actions .button.alt {margin-top: 10px;} .category-image { float: left; width: 25% !important; height: auto !important; margin: 0 15px 15px 0; border: 3px solid rgb(252, 226, 229);} } /************************************************************************************************************************* Screen between 681px and 980px *************************************************************************************************************************/ @media all and (min-width: 681px) and (max-width: 980px) { /* Overall */ #howto-wrap .container {margin: 0 auto; width: 90%; overflow: hidden; background: #fff;} #howto-wrap .header {position: relative; width: 100%; margin: 0 auto; border-bottom: 1px solid #ffecec;} #howto-wrap .section {float: left; width: 60%; margin: 3% 0 3% 3%;} #howto-wrap .section-wide {clear: both; width: 94%; margin: 3%;} #howto-wrap .aside {float: right; width: 30%; margin: 3% 3% 3% 0;} #howto-wrap .footer {clear: both; overflow: hidden; margin: 0 auto; width: 100%; border-top: 10px solid #ffecec;} /* .header */ #howto-wrap .header-icons {clear: both; width: 100%; overflow: hidden; padding: 10px 0; border-bottom: 1px solid #efefef;} #howto-wrap ul.header-icons-list {float: right; list-style: none;} #howto-wrap ul.header-icons-list li {float: left;} #howto-wrap ul.header-icons-list li a {padding: 0;} #howto-wrap ul.header-icons-list li .nav-twitter, #howto-wrap ul.header-icons-list li .nav-facebook, #howto-wrap ul.header-icons-list li .nav-pinterest, #howto-wrap ul.header-icons-list li .nav-instagram, #howto-wrap ul.header-icons-list li .nav-google, #howto-wrap ul.header-icons-list li .nav-flickr, #howto-wrap ul.header-icons-list li .nav-linkedin, #howto-wrap ul.header-icons-list li .nav-youtube, #howto-wrap ul.header-icons-list li .nav-vimeo, #howto-wrap ul.header-icons-list li .nav-bloglovin, #howto-wrap ul.header-icons-list li .nav-tumblr, #howto-wrap ul.header-icons-list li .nav-rss, #howto-wrap ul.header-icons-list li .nav-email {display: block; width: 24px; height: 24px; margin-right: 10px; text-indent: -9999em;} #howto-wrap ul.header-icons-list li .nav-twitter {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: 0 0;} #howto-wrap ul.header-icons-list li .nav-facebook {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -34px 0;} #howto-wrap ul.header-icons-list li .nav-pinterest {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -68px 0;} #howto-wrap ul.header-icons-list li .nav-instagram {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -102px 0;} #howto-wrap ul.header-icons-list li .nav-google {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -137px 0;} #howto-wrap ul.header-icons-list li .nav-flickr {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -179px 0;} #howto-wrap ul.header-icons-list li .nav-linkedin {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -221px 0;} #howto-wrap ul.header-icons-list li .nav-youtube {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -262px 0;} #howto-wrap ul.header-icons-list li .nav-vimeo {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -304px 0;} #howto-wrap ul.header-icons-list li .nav-bloglovin {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -344px 0;} #howto-wrap ul.header-icons-list li .nav-tumblr {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -466px 0;} #howto-wrap ul.header-icons-list li .nav-rss {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -386px 0;} #howto-wrap ul.header-icons-list li .nav-email {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -427px 0;} /* .header */ #howto-wrap .header h1, #howto-wrap .header h5 {font: 400 3.4em 'Playfair Display', Georgia, Times, Serif; text-transform: uppercase; text-align: center; margin: 40px 0 0 0;} #howto-wrap .header-title {display: block; margin: 0 auto;} #howto-wrap .header-title:hover {text-decoration: none;} #howto-wrap .header-desc {font-size: 1em; text-align: center; text-transform: uppercase; letter-spacing: .1em; color: #ccc; margin-bottom: 40px;} section.head_logoArea .logoHead{max-width: 50%;} /* .nav */ #howto-wrap .tinynav {display: none;} #howto-wrap .nav {text-transform: uppercase; background: #ffecec; margin-bottom: 5px; position: relative; display: inline-block; text-align: center; width: 100%; clear: both; line-height: 1em; font-weight: 400; font-size: .95em;} #howto-wrap .nav ul {list-style: none; display: inline-block; text-align: left;} #howto-wrap .nav a {display: block; padding: 15px 10px; color: #343434;} #howto-wrap .nav a:hover {color: #222;} /* .flexslider */ #howto-wrap .flexslider {width: 94%; margin: 3% auto; padding: 0; clear: both;} #howto-wrap .flexslider .flexslides > li {list-style: none; display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ #howto-wrap .flexslider .flexslides img {display: block; width: 100%; height: auto;} #howto-wrap .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ #howto-wrap .flexslides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] #howto-wrap .flexslides {display: block;} * html #howto-wrap .flexslides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ #howto-wrap .no-js .flexslides > li:first-child {display: block;} /* .flexslider theme */ #howto-wrap .flexslider {background: #fff; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;} #howto-wrap .flexslider .flexslides {zoom: 1;} #howto-wrap .flexslider .flexslides > li {position: relative; overflow: hidden;} #howto-wrap .flexslider .flexslides li img {width: 100%; height: auto;} #howto-wrap .flex-container {zoom: 1; position: relative;} #howto-wrap .flex-caption {background: #000; zoom: 1;} #howto-wrap .flex-caption {position: absolute; bottom: 0; background: rgba(0,0,0,.9); color: #fff; width: 97%; z-index: 8; padding: 2%; opacity: .8; text-align: left !important;} #howto-wrap .flex-caption h3 {font-weight :700; text-transform: uppercase; color: #fff; margin: 0;} #howto-wrap .flex-caption p {margin: 0;} #howto-wrap .flex-caption a, #howto-wrap .flex-caption a:hover {color: #fff;} #howto-wrap .flex-direction-nav {display: block; list-style: none;} #howto-wrap .flex-direction-nav li a.flex-next {position: absolute; right: 0; top: 45%; display: block; z-index: 100; width: 64px; height: 64px; background: #000 url('images/slide_nav.png') no-repeat -64px 0; opacity: .8; filter: alpha(opacity=80); text-indent: -9999px; cursor: pointer;} #howto-wrap .flex-direction-nav li a.flex-prev {position: absolute; left: 0; top: 45%; display: block; z-index: 100; width: 64px; height: 64px; background: #000 url('images/slide_nav.png') no-repeat 0 0; opacity: .8; filter: alpha(opacity=80); text-indent: -9999px; cursor: pointer;} /* .article */ #howto-wrap .article-list {width: 48%; float: left; clear: none !important;} #howto-wrap .article-list:nth-child(2n+1) {margin-right: 3%;} /* .article misc */ #howto-wrap .breadcrumb {width: 92%; padding: 1%; margin: 20px auto; font-size: .85em; background: #fafafa; border: 1px solid #eee;} /* .footer */ #howto-wrap .footer-inner {overflow: hidden; line-height: 1.8em;} #howto-wrap .footer-widget {float: left; display: block; width: 27%; padding: 1% 3%;} #howto-wrap p.footer-copy {background: #efefef; width: 90%; clear: both; text-align: center; font-size: .9em; overflow: hidden; padding: 20px; margin: 0 auto;} #howto-wrap p.footer-copy .footer-credit {} /* Shortcodes */ #howto-wrap .left {width: 49%; float: left; line-height: 1.8em;} #howto-wrap .right {width: 49%; float: right; line-height: 1.8em;} #howto-wrap .col1 {width: 32%; float: left; line-height: 1.8em;} #howto-wrap .col2 {width: 32%; padding: 0 2%; float: left; line-height: 1.8em;} #howto-wrap .col3 {width: 32%; float: right; line-height: 1.8em;} #howto-wrap .col3-2 {width: 64%; float: left; line-height: 1.8em;} #howto-wrap .col3-1 {width: 32%; float: right; line-height: 1.8em;} #howto-wrap .col4-1 {width: 24%; float: left; line-height: 1.8em;} #howto-wrap .col4-2, #howto-wrap .col4-3 {width: 24%; padding: 0 0 0 2%; float: left; line-height: 1.8em;} #howto-wrap .col4-4 {width: 24%; float: right; line-height: 1.8em;} #howto-wrap .col5-1 {width: 18%; float: left; line-height: 1.8em;} #howto-wrap .col5-2, #howto-wrap .col5-3, #howto-wrap .col5-4 {width: 18%; padding: 0 0 0 2%; float: left; line-height: 1.8em;} #howto-wrap .col5-5 {width: 18%; float: right; line-height: 1.8em;} .pullquote {width: 85% !important;} .sc-slide {position: relative; overflow: hidden; width: 100% !important; height: auto !important; margin: 0 0 20px 0; padding: 0;} /* WooCommerce */ #howto-wrap .col2-set {} #howto-wrap .col2-set .col-1 {clear: both; width: 100% !important;} #howto-wrap .col2-set .col-2 {clear: both; width: 100% !important;} #howto-wrap .product .images, #howto-wrap .product .summary {clear: both; width: 100% !important;} #howto-wrap div.product .woocommerce_tabs ul.tabs li a, #howto-wrap #content div.product .woocommerce_tabs ul.tabs li a, #howto-wrap div.product .woocommerce_tabs ul.tabs li.active a, #howto-wrap #content div.product .woocommerce_tabs ul.tabs li.active a {font-size: 0.8em;} } /************************************************************************************************************************* Screen larger than 981px *************************************************************************************************************************/ @media all and (min-width: 981px) { /* Overall */ #howto-wrap .container {margin: 0 auto; width: 1020px; overflow: hidden; background: #fff;} #howto-wrap .header {position: relative; width: 1020px; margin: 0 auto; border-bottom: 1px solid #ffecec;} #howto-wrap .section {float: left; width: 640px; margin: 20px 0 20px 20px;} #howto-wrap .section-wide {clear: both; width: 980px; margin: 20px;} #howto-wrap .aside {float: right; width: 300px; margin: 20px 20px 20px 0;} /*.footer {clear: both; overflow: hidden; margin: 0 auto; width: 1020px; border-top: 10px solid #ffecec;}*/ /* .header */ #howto-wrap .header-icons {clear: both; width: 100%; overflow: hidden; padding: 10px 0; border-bottom: 1px solid #efefef;} #howto-wrap ul.header-icons-list {float: right; list-style: none;} #howto-wrap ul.header-icons-list li {float: left;} #howto-wrap ul.header-icons-list li a {padding: 0;} #howto-wrap ul.header-icons-list li .nav-twitter, #howto-wrap ul.header-icons-list li .nav-facebook, #howto-wrap ul.header-icons-list li .nav-pinterest, #howto-wrap ul.header-icons-list li .nav-instagram, #howto-wrap ul.header-icons-list li .nav-google, #howto-wrap ul.header-icons-list li .nav-flickr, #howto-wrap ul.header-icons-list li .nav-linkedin, #howto-wrap ul.header-icons-list li .nav-youtube, #howto-wrap ul.header-icons-list li .nav-vimeo, #howto-wrap ul.header-icons-list li .nav-bloglovin, #howto-wrap ul.header-icons-list li .nav-tumblr, #howto-wrap ul.header-icons-list li .nav-rss, #howto-wrap ul.header-icons-list li .nav-email {display: block; width: 24px; height: 24px; margin-right: 10px; text-indent: -9999em;} #howto-wrap ul.header-icons-list li .nav-twitter {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: 0 0;} #howto-wrap ul.header-icons-list li .nav-facebook {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -34px 0;} #howto-wrap ul.header-icons-list li .nav-pinterest {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -68px 0;} #howto-wrap ul.header-icons-list li .nav-instagram {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -102px 0;} #howto-wrap ul.header-icons-list li .nav-google {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -137px 0;} #howto-wrap ul.header-icons-list li .nav-flickr {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -179px 0;} #howto-wrap ul.header-icons-list li .nav-linkedin {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -221px 0;} #howto-wrap ul.header-icons-list li .nav-youtube {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -262px 0;} #howto-wrap ul.header-icons-list li .nav-vimeo {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -304px 0;} #howto-wrap ul.header-icons-list li .nav-bloglovin {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -344px 0;} #howto-wrap ul.header-icons-list li .nav-tumblr {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -466px 0;} #howto-wrap ul.header-icons-list li .nav-rss {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -386px 0;} #howto-wrap ul.header-icons-list li .nav-email {background-color: #fce2e5; background-image: url('images/nav_icons.png'); background-repeat: no-repeat; background-position: -427px 0;} /* .header */ #howto-wrap .header h1, #howto-wrap .header h5 {font: 400 4em 'Playfair Display', Georgia, Times, Serif; text-transform: uppercase; text-align: center; margin: 40px 0 0 0;} #howto-wrap .header-title {display: block; margin: 0 auto;} #howto-wrap .header-title:hover {text-decoration: none;} #howto-wrap .header-desc {font-size: 1.2em; text-align: center; text-transform: uppercase; letter-spacing: .1em; color: #ccc; margin-bottom: 40px;} /* .nav */ #howto-wrap .tinynav {display: none;} #howto-wrap .nav {text-transform: uppercase; background: #ffecec; margin-bottom: 5px; position: relative; display: inline-block; text-align: center; width: 100%; clear: both; line-height: 1em; font-weight: 400; font-size: .95em;} #howto-wrap .nav ul {list-style: none; display: inline-block; text-align: left;} #howto-wrap .nav a {display: block; padding: 15px; color: #888;} #howto-wrap .nav a:hover {color: #000;} /* .flexslider */ #howto-wrap .flexslider {width: 980px; min-height: 480px; margin: 30px auto; padding: 0; clear: both;} #howto-wrap .flexslider .flexslides > li {list-style: none; display: none; -webkit-backface-visibility: hidden;} #howto-wrap .flexslider .flexslides img {display: block; width: 100%; height: auto;} #howto-wrap .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ #howto-wrap .flexslides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] #howto-wrap .flexslides {display: block;} * html #howto-wrap .flexslides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ #howto-wrap .no-js .flexslides > li:first-child {display: block;} /* .flexslider theme */ #howto-wrap .flexslider {background: #fff; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;} #howto-wrap .flexslider .flexslides {zoom: 1; position: relative; width: 100%;} #howto-wrap .flexslider .flexslides > li {position: relative; overflow: hidden;} #howto-wrap .flexslider .flexslides li img {width: 100%; height: auto;} #howto-wrap .flex-container {zoom: 1; position: relative;} #howto-wrap .flex-caption {background: #000; zoom: 1;} #howto-wrap .flex-caption {position: absolute; bottom: 0; background: rgba(0,0,0,.9); color: #fff; width: 97%; z-index: 8; padding: 2%; opacity: .8; text-align: left !important;} #howto-wrap .flex-caption h3 {font-weight :700; text-transform: uppercase; color: #fff; margin: 0;} #howto-wrap .flex-caption p {margin: 0;} #howto-wrap .flex-caption a, #howto-wrap .flex-caption a:hover {color: #fff;} #howto-wrap .flex-direction-nav {display: block; list-style: none;} #howto-wrap .flex-direction-nav li a.flex-next {position: absolute; right: 0; top: 45%; display: block; z-index: 100; width: 64px; height: 64px; background: #000 url('images/slide_nav.png') no-repeat -64px 0; opacity: .8; filter: alpha(opacity=80); text-indent: -9999px; cursor: pointer;} #howto-wrap .flex-direction-nav li a.flex-prev {position: absolute; left: 0; top: 45%; display: block; z-index: 100; width: 64px; height: 64px; background: #000 url('images/slide_nav.png') no-repeat 0 0; opacity: .8; filter: alpha(opacity=80); text-indent: -9999px; cursor: pointer;} /* .article */ #howto-wrap .article-list {width: 300px; float: left; clear: none !important;} #howto-wrap .article-list:nth-child(2n+1) {margin-right: 30px;} /* .article misc */ #howto-wrap .breadcrumb {width: 980px; margin: 20px auto; font-size: .85em;} /* .footer */ #howto-wrap .footer-inner {overflow: hidden; line-height: 1.8em;} #howto-wrap .footer-widget {float: left; display: block; width: 300px; padding: 20px;} #howto-wrap p.footer-copy {background: #efefef; width: 980px; clear: both; font-size: .9em; overflow: hidden; padding: 20px; margin: 0 auto;} #howto-wrap p.footer-copy .footer-credit {display: block; float: right; width: 55px; height: 11px; background: url('images/footer_credit.png') no-repeat 0 0; margin: 5px 0 0 0; text-indent: -9999px;} /* Shortcodes */ #howto-wrap .left {width: 49%; float: left; line-height: 1.8em;} #howto-wrap .right {width: 49%; float: right; line-height: 1.8em;} #howto-wrap .col1 {width: 32%; float: left; line-height: 1.8em;} #howto-wrap .col2 {width: 32%; padding: 0 2%; float: left; line-height: 1.8em;} #howto-wrap .col3 {width: 32%; float: right; line-height: 1.8em;} #howto-wrap .col3-2 {width: 64%; float: left; line-height: 1.8em;} #howto-wrap .col3-1 {width: 32%; float: right; line-height: 1.8em;} #howto-wrap .col4-1 {width: 24%; float: left; line-height: 1.8em;} #howto-wrap .col4-2, #howto-wrap .col4-3 {width: 24%; padding: 0 0 0 2%; float: left; line-height: 1.8em;} #howto-wrap .col4-4 {width: 24%; float: right; line-height: 1.8em;} #howto-wrap .col5-1 {width: 18%; float: left; line-height: 1.8em;} #howto-wrap .col5-2, #howto-wrap .col5-3, #howto-wrap .col5-4 {width: 18%; padding: 0 0 0 2%; float: left; line-height: 1.8em;} #howto-wrap .col5-5 {width: 18%; float: right; line-height: 1.8em;} #howto-wrap .sc-slide {position: relative; overflow: hidden; width: 100%; margin: 0 0 20px 0; padding: 0;} } /* Overall */ body #howto-wrap {font: 400 .85em 'Lato', Lucida Sans Unicode, Lucida Grande, Verdana, Tahoma, Arial, Sans-serif; color: #666;} body #howto-wrap p {margin-bottom: 20px; line-height: 1.8em; word-wrap: break-word;} /* hgroup */ #howto-wrap h1, #howto-wrap h2, #howto-wrap h3, #howto-wrap h4, #howto-wrap h5, #howto-wrap h6 {line-height: 1.2em; margin-bottom: 15px; font-weight: 400;} #howto-wrap h1 {font-size: 2em; color: #fc7988;} #howto-wrap h2 {font-size: 1.8em; color: #fc7988 !important;} #howto-wrap h3 {font-size: 1.6em; color: #fc7988;} #howto-wrap h4 {font-size: 1.4em; color: #333;} #howto-wrap h5 {font-size: 1.2em; color: #555;} #howto-wrap h6 {font-size: 1em; color: #555;} /* Links */ #howto-wrap a {color: #fc7988; text-decoration: none; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;} #howto-wrap a:active {color: #000;} #howto-wrap a:hover {color: #333;} /* .nav */ #howto-wrap .nav .current-menu-item > a, #howto-wrap .nav .current-menu-ancestor > a, #howto-wrap .nav .current_page_item > a, #howto-wrap .nav .current_page_ancestor > a {text-decoration: underline;} #howto-wrap .nav li {display: inline-block; float: left; position: relative; z-index: 100;} #howto-wrap .nav ul li.has-sub > a {background-image: url('images/menu_down.gif'); background-repeat: no-repeat; background-position: right center;} #howto-wrap .nav ul ul li.has-sub > a {background-image: url('images/menu_right.gif'); background-repeat: no-repeat; background-position: right center;} #howto-wrap .nav ul ul a {} #howto-wrap .nav ul ul {position: absolute; width: 200px; background: #ffecec; z-index: 1000;} #howto-wrap .nav ul ul li {display: block; float: none;} #howto-wrap .nav ul ul ul {position: absolute; left: 200px; top: 0;} #howto-wrap .nav li:hover > ul { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); zoom: 1; visibility: visible; height: auto; z-index: 9999; /* -webkit-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; */} #howto-wrap .nav ul ul { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); /* -webkit-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; */ zoom: 0; visibility: hidden; height: 0; } /* .article */ #howto-wrap .sticky {} #howto-wrap .article {margin-bottom: 50px; overflow: hidden; clear: both;} #howto-wrap .article .post-thumb {padding: 2px; border: 1px solid #ddd;} #howto-wrap .article .post-thumbnail {border: 0; display: block; margin-bottom: 8px;} #howto-wrap .article .post-header {margin-bottom: 20px;} #howto-wrap .article .post-title {font-size: 1.4em; font-weight: 700; text-transform: uppercase; color: #333; margin-bottom: 5px; line-height: 1.2em; letter-spacing: 1px;} #howto-wrap .article .post-title a {color: #333;} #howto-wrap .article .post-title a:hover {color: #fc7988;} #howto-wrap .article .post-category {display: inline-block; background: #fde3e6; color: #666; padding: 5px 10px; font-size: .85em; margin-bottom: 15px;} #howto-wrap .article .post-category a {color: #666;} #howto-wrap .article .post-meta {clear: both; border-top: 1px solid #fde3e6; border-bottom: 1px solid #fde3e6; font-size: .85em; text-transform: uppercase; padding: 8px 0; color: #7a7a7a;} #howto-wrap .article .archives {overflow: hidden; clear: both; padding: 10px 0;} #howto-wrap .article .archives .archives-box {width: 45%; float: left; padding: 2px;} /* .article misc */ #howto-wrap .article blockquote {display: block; clear: both; margin: 20px 0; padding: 0 20px 0 40px; background: url('images/blockquote.png') no-repeat 0 0; font-style: italic; color: #888;} #howto-wrap .article blockquote p {padding: 0;} #howto-wrap .article ul {margin: 0 0 20px 25px; list-style: circle outside;} #howto-wrap .article ol {margin: 0 0 20px 25px; list-style: decimal outside;} #howto-wrap .article li {margin: 3px 0; line-height: 1.8em;} #howto-wrap .article .post-author-bio {line-height: 1.8em; clear: both; overflow: hidden; background: #f9f9f9; border: 1px solid #ddd; padding: 20px; margin-bottom: 20px;} #howto-wrap .category-header {margin: 0 0 60px 0;} #howto-wrap .category-header.cat {border-bottom: 1px solid rgb(253, 227, 230);} /*.pagetitle {padding: 20px 0; font-size: 1em; color: #999; text-transform: uppercase; letter-spacing: .2em;}*/ .pagetitle {margin-bottom: 30px; padding: 10px 20px; font-size: 1.6em; color: #4d4646; text-transform: uppercase; letter-spacing: .2em; background: #ffecec;} #howto-wrap .category-summary { overflow: hidden; padding: 0 20px 10px;} #howto-wrap .category-image { float: left; width: 180px; height: auto; margin: 0 15px 15px 0; border: 3px solid rgb(252, 226, 229);} #howto-wrap .category-text { margin: 0; font-size: 1.1em; color: #7a7a7a;} #howto-wrap .page-pagination {clear: both; padding: 5px 0; line-height: 1em;} #howto-wrap .page-pagination .page-pagination-title {font-weight: bold;} #howto-wrap .page-pagination .page-pagination-number {display: inline-block; border: 1px solid #ccc; padding: 5px 8px;} #howto-wrap .page-pagination a .page-pagination-number {} #howto-wrap .page-pagination a .page-pagination-number:hover {} #howto-wrap .pagination {clear: both; font-weight: 700; text-transform: uppercase; padding: 10px; margin: 20px 0 40px 0; overflow: hidden; list-style: none; border: 5px solid #efefef;} #howto-wrap .pagination p {margin: 0;} #howto-wrap .pagination a:hover, #howto-wrap .pagination .current {padding: 5px 10px; background: #efefef;} #howto-wrap .pagination a {padding: 5px 10px;} #howto-wrap .post-footer {clear: both; padding: 10px 0;} #howto-wrap .post-footer p {margin-bottom: 10px;} #howto-wrap .post-footer h5 {margin-top: 20px; font-size: 1.3em; text-transform: uppercase; text-align: center;} #howto-wrap .post-footer ul.post-related {margin: 0; padding: 10px 0 20px 0; list-style: none; overflow: hidden; border-bottom: 1px solid #ddd;} #howto-wrap .post-footer ul.post-related li {float: left; width: 108px; margin: 0 10px; text-align: center; font-size: .8em;} #howto-wrap .post-footer ul.post-related li img {padding: 3px; border: 1px solid #ddd;} #howto-wrap .post-footer ul {margin: 0; list-style: none;} #howto-wrap .post-footer ul li {margin: 5px 0;} #howto-wrap ul.post-related {list-style: none;} #howto-wrap ul.post-info-meta {color: #888; padding: 0;} #howto-wrap ul.post-info-meta li {list-style: none; float: left;} #howto-wrap ul.post-info-meta li .post-print {display: block; width: 55px; height: 20px; background: url('images/post_print.gif') no-repeat 0 0; text-indent: -9999em;} #howto-wrap .footer-navi {clear: both; overflow: hidden; padding: 0 0 15px 0; border-bottom: 1px solid #ddd;} #howto-wrap .footer-navi li.previous {float: left;} #howto-wrap .footer-navi li.next {float: right;} /* .gallery */ #howto-wrap .gallery {clear: both; overflow: hidden;} #howto-wrap .gallery .gallery-item {margin-top: 0 !important;} #howto-wrap .gallery dl {margin: 0;} #howto-wrap .gallery a {padding: 5px; display: block;} #howto-wrap .gallery a img {max-width: 100%; height: auto;} #howto-wrap .gallery-caption {font-size: .9em;} /* .side-widget */ #howto-wrap .side-widget {border: 5px solid #fce2e5; padding: 40px 20px 20px 20px; margin-bottom: 40px; overflow: hidden; clear: both;} #howto-wrap .textwidget {overflow: hidden; margin-bottom: 10px; clear: both;} #howto-wrap .side-widget h3 {font-size: 1.1em; font-weight: 400; color: #7a7a7a; letter-spacing: 1px; text-transform: uppercase; text-align: center;} #howto-wrap .side-widget select {width: 90%;} #howto-wrap .side-widget ol, #howto-wrap .side-widget ul {clear: both; list-style: none;} #howto-wrap .side-widget ol.children, #howto-wrap .side-widget ul.children {clear: both; list-style: none; margin-left: 20px;} #howto-wrap .side-widget ol li, #howto-wrap .side-widget ul li {margin: 5px 0; padding: 5px 0; line-height: 1.8em; border-bottom: 1px solid #efefef;} /* .sideform */ #howto-wrap .sideform {clear: both; overflow: hidden; text-align: center;} #howto-wrap .sidetext {width: 90%; margin: 2px auto; color: #888; border: 1px solid #bbb;} /***** WIDGET *****/ /* .location */ #howto-wrap .location {} #howto-wrap .location li {} #howto-wrap .location li.address {background: url('images/info_icons.png') no-repeat 0 -91px; border-bottom: none; padding-left: 30px;} #howto-wrap .location li.email {background: url('images/info_icons.png') no-repeat 0 10px; border-bottom: none; padding-left: 30px;} #howto-wrap .location li.phone {background: url('images/info_icons.png') no-repeat 0 -23px; border-bottom: none; padding-left: 30px;} #howto-wrap .location li.fax {background: url('images/info_icons.png') no-repeat 0 -55px; border-bottom: none; padding-left: 30px;} /* .social-icons */ /* ul.social-icons li {float: left; border-bottom: none;} .social-twitter, .social-facebook, .social-email, .social-rss, .social-google, .social-flickr, .social-linkedin, .social-youtube, .social-vimeo, .social-instagram, .social-pinterest, .social-bloglovin {display: block; width: 48px; height: 48px; float: left; background: url('images/social_icons.png') no-repeat; text-indent: -9999px;} .social-twitter {background-position: 0 0; margin-right: 10px;} .social-facebook {background-position: 0 -68px; margin-right: 10px;} .social-email {background-position: 0 -136px; margin-right: 10px;} .social-rss {background-position: 0 -204px;} .social-google {background-position: 0 -272px; margin-right: 10px;} .social-flickr {background-position: 0 -340px; margin-right: 10px;} .social-linkedin {background-position: 0 -408px; margin-right: 10px;} .social-youtube {background-position: 0 -476px; margin-right: 10px;} .social-vimeo {background-position: 0 -544px; margin-right: 10px;} .social-instagram {background-position: 0 -612px; margin-right: 10px;} .social-bloglovin {background-position: 0 -680px; margin-right: 10px;} .social-pinterest {background-position: 0 -749px; margin-right: 10px;} */ /* .social-icons */ #howto-wrap ul.social-icons li {float: left; border: none !important; list-style: none;} #howto-wrap .social-twitter, #howto-wrap .social-facebook, #howto-wrap .social-email, #howto-wrap .social-rss, #howto-wrap .social-google, #howto-wrap .social-flickr, #howto-wrap .social-linkedin, #howto-wrap .social-youtube, #howto-wrap .social-vimeo, #howto-wrap .social-instagram, #howto-wrap .social-pinterest, #howto-wrap .social-bloglovin, #howto-wrap .social-tumblr {display: block; width: 48px; height: 48px; float: left; background: url('images/social_icons.png') no-repeat; text-indent: -9999px;} #howto-wrap .social-twitter {background-position: 0 0; background-color: #ccc; margin-right: 10px;} #howto-wrap .social-facebook {background-position: 0 -68px; margin-right: 10px;} #howto-wrap .social-email {background-position: 0 -136px; margin-right: 10px;} #howto-wrap .social-rss {background-position: 0 -204px;} #howto-wrap .social-google {background-position: 0 -272px; margin-right: 10px;} #howto-wrap .social-flickr {background-position: 0 -340px; margin-right: 10px;} #howto-wrap .social-linkedin {background-position: 0 -408px; margin-right: 10px;} #howto-wrap .social-youtube {background-position: 0 -476px; margin-right: 10px;} #howto-wrap .social-vimeo {background-position: 0 -544px; margin-right: 10px;} #howto-wrap .social-instagram {background-position: 0 -612px; margin-right: 10px;} #howto-wrap .social-bloglovin {background-position: 0 -680px; margin-right: 10px;} #howto-wrap .social-pinterest {background-position: 0 -749px; margin-right: 10px;} #howto-wrap .social-tumblr {background-position: 0 -807px; margin-right: 10px;} /* .footer */ #howto-wrap .footer-widget h4 {font-size: 1.1em; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: #7a7a7a;} #howto-wrap .footer-widget ol, #howto-wrap .footer-widget ul {clear: both; list-style: none;} #howto-wrap .footer-widget ol li, #howto-wrap .footer-widget ul li {margin: 5px 0; padding: 5px 0; line-height: 1.8em; border-bottom: 1px solid #efefef;} #howto-wrap .footer-widget select {width: 98%; color: #888; margin: 5px 0; padding: 3px;} #howto-wrap .footer-widget p {margin-bottom: 10px; line-height: 1.8em;} /* .comment-box */ #howto-wrap comment-box {clear: both; margin-top: 20px; padding: 0 10px; overflow: hidden;} #howto-wrap .comment-box h4 {font-size: 1.4em; margin: 10px 0;} #howto-wrap #commentform label {display: inline-block; width: 80px; margin: 0; vertical-align: top;} #howto-wrap #respond {padding: 10px; background: #fff;} #howto-wrap p.comment-inputs {margin-bottom: 0;} #howto-wrap .required-input {color: #f00;} #howto-wrap .comment-input {width: 50%;} #howto-wrap .comment-textarea {width: 95%; height: 80px;} #howto-wrap .comment-input, #howto-wrap .comment-textarea {border: 1px solid #ccc; padding: 5px; color: #999; font: normal .85em Verdana, Tahoma, Arial, San-serif;} #howto-wrap .avatar {margin-right: 20px; float: left; border: 1px solid #999;} #howto-wrap .comment-meta {clear: both; overflow: hidden;} #howto-wrap .comment-meta h6 {font-size: 1em; margin-bottom: 3px;} #howto-wrap .comment-meta small {font-style: italic; color: #999; font-size: .85em;} #howto-wrap ol.commentlist {margin: 0;} #howto-wrap ol.commentlist li {border-bottom: 1px solid #ddd; margin-bottom: 20px; list-style: none;} #howto-wrap ol.commentlist li p {padding: 5px 0; margin: 0 0 10px 55px; line-height: 1.8em;} #howto-wrap ol.commentlist li ul {padding: 0;} #howto-wrap ol.commentlist li ul.children li {border: none; border-left: 1px solid #ddd; padding: 0 0 0 30px; margin: 0; list-style: none;} #howto-wrap ol.commentlist li ul.children li.alt {} #howto-wrap ol.commentlist li ul.children li.byuser {} #howto-wrap ol.commentlist li ul.children li.comment {} #howto-wrap ol.commentlist li ul.children li.bypostauthor {} #howto-wrap ol.commentlist li ul.children li.comment-author-admin {} #howto-wrap ol.commentlist .parent {} #howto-wrap ol.commentlist .comment-content {overflow: hidden;} #howto-wrap ol.commentlist .comment {overflow: hidden; padding: 10px 0;} #howto-wrap ol.commentlist .children {} #howto-wrap ol.commentlist .pingback {} #howto-wrap ol.commentlist .bypostauthor {} #howto-wrap ol.commentlist .comment-author {} #howto-wrap ol.commentlist .comment-author-admin {} #howto-wrap ol.commentlist .alt {} #howto-wrap ol.commentlist .odd {} #howto-wrap ol.commentlist .even {} #howto-wrap ol.commentlist .thread-alt {} #howto-wrap ol.commentlist .thread-odd {} #howto-wrap ol.commentlist .thread-even {} #howto-wrap ol.commentlist li ul.children .alt {} #howto-wrap ol.commentlist li ul.children .odd {} #howto-wrap ol.commentlist li ul.children .even {} #howto-wrap ol.commentlist .vcard {} #howto-wrap ol.commentlist .vcard cite.fn {} #howto-wrap ol.commentlist .vcard span.says {} #howto-wrap ol.commentlist .vcard img.photo {} #howto-wrap ol.commentlist .vcard img.avatar {} #howto-wrap ol.commentlist .vcard cite.fn a.url {} #howto-wrap a.comment-reply-link {background: #fc7988; color: #fff; padding: 2px 5px; font: normal .75em Verdana, Tahoma, Arial, San-serif;} #howto-wrap a#cancel-comment-reply-link {background: #fc7988; color: #fff; padding: 2px 5px; font: normal .5em Verdana, Tahoma, Arial, San-serif;} #howto-wrap a.comment-reply-link {float: right;} #howto-wrap .comment-pagination {clear: both; overflow: hidden; margin: 10px 0;} /* #wp-calendar */ #howto-wrap #wp-calendar {text-align: center; width: 100%; font-size: .9em; background: #fff;} #howto-wrap #wp-calendar caption {font-weight: bold; background: #fff; text-align: center; padding: 5px 0; border-top: 1px solid #eee; border-left: 1px solid #eee; border-right: 1px solid #eee;} #howto-wrap #wp-calendar th {font-style: normal; text-transform: capitalize; padding: 2px; border-right: 1px solid #eee;} #howto-wrap #wp-calendar td {font-style: normal; padding: 2px; border-right: 1px solid #eee;} #howto-wrap #wp-calendar tr {border-top: 1px solid #eee; border-left: 1px solid #eee;} #howto-wrap #wp-calendar tfoot td {border-bottom: 1px solid #eee;} /* img */ #howto-wrap img {max-width: 100%; height: auto;} #howto-wrap img.aligncenter {display: block; margin: 0 auto 10px auto;} #howto-wrap img.alignright {display: inline; margin: 0 0 10px 20px;} #howto-wrap img.alignleft {display: inline; margin: 0 20px 10px 0;} #howto-wrap .aligncenter, #howto-wrap .centered {display: block; margin: 0 auto 10px auto;} #howto-wrap .alignleft {float: left; margin: 0 20px 10px 0;} #howto-wrap .alignright {float: right; margin: 0 0 10px 20px;} #howto-wrap .attachment-caption {text-align: center; font-weight: 700;} #howto-wrap .attachment-desc {text-align: center;} /* .wp-caption */ #howto-wrap .aligncenter, #howto-wrap div.aligncenter {display: block; margin-left: auto; margin-right: auto;} #howto-wrap .wp-caption {border: 1px solid #ccc; background: #efefef; padding: 1%; text-align: center; max-width: 96%;} #howto-wrap .wp-caption img {border: 0;} #howto-wrap .wp-caption p.wp-caption-text {font-size: 0.85em; line-height: 1.2em; padding: 3px 0; margin: 0;} /* Input and label */ #howto-wrap select:focus, #howto-wrap textarea:focus, #howto-wrap input:focus {border: 1px solid #888; -webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, .2); box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, .2);} #howto-wrap label {display: inline-block; margin-right: 20px; vertical-align: top;} #howto-wrap select, #howto-wrap textarea, #howto-wrap input {border: 1px solid #ccc; color: #888; padding: 8px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;} input[type=submit] {border: 1px solid #ddd; color: #555; cursor: pointer; padding: 8px 10px; background: #eeeeee; /* Old browsers */ background: -moz-linear-gradient(top, #eeeeee 0%, #ffffff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #eeeeee 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #eeeeee 0%,#ffffff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 100%); /* IE10+ */ background: linear-gradient(to bottom, #eeeeee 0%,#ffffff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ } #howto-wrap input[type=submit]:hover {border: 1px solid #aaa; -webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, .2); box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, .2); background: #fff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #eeeeee 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#eeeeee 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#eeeeee 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */ } #howto-wrap .input-button {border: 1px solid #ccc; color: #555; cursor: pointer; background: #eee; padding: 4px 10px 6px 10px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;} #howto-wrap .input-button:hover {border: 1px solid #aaa; background: #ccc;} #howto-wrap .postBox .input-button {background: #D01A19;display: block;font-size: 16px;font-weight: bold;text-align: center;color: white;border-radius: 5px;} #howto-wrap .row-input-button{overflow: hidden;margin-bottom: 40px;} #howto-wrap .double-width{padding: 0 5px;margin-bottom: 5px;} #howto-wrap .half-width{width: 50%;float: left;padding: 5px;} /* Misc */ #howto-wrap .side-widget ul:last-child, #howto-wrap .side-widget ol:last-child, #howto-wrap .side-widget dl:last-child {margin: 0;} #howto-wrap .hidden {display: none;} #howto-wrap .success {color: #159776;} #howto-wrap .error {color: #d70a16;} #howto-wrap .require {color: #d70a16; } #howto-wrap .focused {border: 1px solid #888; -webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, .2); box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, .2);} #howto-wrap .highlight {background: #efefef; padding: 0 2px;} #howto-wrap .button {padding: 1px 5px;} #howto-wrap .fade {filter: alpha(opacity=50); opacity: .5;} #howto-wrap .clearfix {clear: both; height: 10px;} #howto-wrap .split-columns {overflow: auto; width: 100%; margin-bottom: 15px;} #howto-wrap .shadow {-webkit-box-shadow: 0 0 5px 0 #aaa; box-shadow: 0 0 5px 0 #aaa;} #howto-wrap .transparency {background-color: rgba(255, 255, 255, .8);} #howto-wrap .noborder, #howto-wrap .noborder tbody, #howto-wrap .noborder thead, #howto-wrap .noborder tfoot, #howto-wrap .noborder tr, #howto-wrap .noborder td, #howto-wrap .noborder th {border: none;} #howto-wrap .radius-50 {-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;} #howto-wrap .radius-30 {-moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px;} #howto-wrap .radius-20 {-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;} #howto-wrap .radius-10 {-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;} #howto-wrap .radius-8 {-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;} #howto-wrap .radius-4 {-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;} #howto-wrap .radius-2 {-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;} #howto-wrap .width-100 {width: 100%;} #howto-wrap .width-95 {width: 95%;} #howto-wrap .width-90 {width: 90%;} #howto-wrap .width-85 {width: 85%;} #howto-wrap .width-80 {width: 80%;} #howto-wrap .width-75 {width: 75%;} #howto-wrap .width-70 {width: 70%;} #howto-wrap .width-65 {width: 65%;} #howto-wrap .width-60 {width: 60%;} #howto-wrap .width-55 {width: 55%;} #howto-wrap .width-50 {width: 50%;} #howto-wrap .width-45 {width: 45%;} #howto-wrap .width-40 {width: 40%;} #howto-wrap .width-35 {width: 35%;} #howto-wrap .width-30 {width: 30%;} #howto-wrap .width-25 {width: 25%;} #howto-wrap .width-20 {width: 20%;} #howto-wrap .width-15 {width: 15%;} #howto-wrap .width-10 {width: 10%;} /* Shortcodes */ #howto-wrap .tooltip {cursor: pointer; border-bottom: 1px dashed #ccc;} #howto-wrap .tooltip:hover span.tip {margin-left: 20px; opacity: 1; display: inline-block; border: 1px solid #ddd; background: #fff; padding: 5px 10px; color: #333; font-size: .9em;} #howto-wrap .tip {position: absolute; margin-left: -9999em; opacity: 0; max-width: 300px; z-index: 1000;} #howto-wrap .tip:before {position: absolute; top: 5px; display: inline-block; border-top: 6px solid transparent; border-right:6px solid #555; border-bottom: 6px solid transparent; left: -6px; content: '';} #howto-wrap .tip:after {position: absolute; top: 5px; display: inline-block; border-top: 6px solid transparent; border-right: 6px solid #fff; border-bottom: 6px solid transparent; left: -6px; content: '';} #howto-wrap .accordion-wrap {position: relative;} #howto-wrap .accordion-title {padding: 10px 10px 10px 30px; font-weight: 400; background: #fce2e5 url('images/accordion_closed.gif') no-repeat 10px 12px; color: #333; cursor: pointer; margin-bottom: 5px; line-height: 1em;} #howto-wrap .accordion-open {background: #888 url('images/accordion_opened.gif') no-repeat 10px 15px; color: #fff;} #howto-wrap .accordion-content {padding-bottom: 15px; width: 100%; line-height: 1.8em;} #howto-wrap .post-button {display: inline-block; line-height: 1em; padding: 8px 10px; color: #333; background: #fce2e5;} #howto-wrap .post-button:hover {background: #888; color: #fff;} #howto-wrap #contact-form {overflow: hidden;} #howto-wrap .contact-form-text {width: 90%; margin-bottom: 10px;} #howto-wrap .contact-form-textarea {width: 90%; height: 150px; margin-bottom: 10px;} #howto-wrap .notification_error {font-size: .9em; border: 1px solid #ffe432; background: #fff3a0; padding: 5px;} .contact-form-sending {display: inline-block; width: 16px; height: 16px; background: url('images/loading.gif') no-repeat 0 0; text-indent: -9999em;} #howto-wrap .pullquote {font-size: 1.4em;} #howto-wrap .warning, #howto-wrap .question, #howto-wrap .disclaim {display: block; padding: 10px 10px 10px 30px; overflow: hidden; line-height: 1.8em;} #howto-wrap .warning {border: 1px solid #eed3d7; background: #f2dede url('images/warning.png') no-repeat 5px 12px; color: #b94a48;} #howto-wrap .question {border: 1px solid #bce8f1; background: #d9edf7 url('images/question.png') no-repeat 5px 12px; color: #3a87ad;} #howto-wrap .disclaim {border: 1px solid #fbeee0; background: #fcf8e3 url('images/disclaim.png') no-repeat 5px 12px; color: #c09853;} #howto-wrap .warning p:last-child, #howto-wrap .question p:last-child, #howto-wrap .disclaim p:last-child, #howto-wrap .warning ul:last-child, #howto-wrap .question ol:last-child, #howto-wrap .disclaim dl:last-child {margin: 0;} #howto-wrap .rslides {position: relative; overflow: hidden; width: 100%; padding: 0; margin: 0 !important; list-style: none !important;} #howto-wrap .rslides li {-webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0;} #howto-wrap .rslides li:first-child {position: relative; display: block; float: left;} #howto-wrap .rslides li p.caption {background: #000; zoom: 1;} #howto-wrap .rslides li p.caption {text-align: center; font-size: .9em; margin: 0; position: absolute; bottom: 0; background: rgba(0,0,0,.5); color: #fff; width: 96%; z-index: 8; padding: 2%; opacity: .8; text-align: left !important;} .rslides img {display: block; height: auto; float: left; width: 100%; border: 0;} #howto-wrap .sc-slide .rslides_tabs {list-style: none; margin: 0; text-align: center;} #howto-wrap .sc-slide .rslides_tabs li {display: inline-block; line-height: 1em; zoom: 1; *display: inline;} #howto-wrap .sc-slide .rslides_tabs li a {display: block; width: 12px; height: 12px; background: #ccc; margin: 0 2px; text-indent: -9999em; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;} #howto-wrap .sc-slide .rslides_tabs li.rslides_here a {background: #a00000;} #howto-wrap .sc-slide .next {display: block; z-index: 10; float: right; width: 24px; height: 23px; background: url('images/sc_slide_nav.png') no-repeat -24px 0; text-indent: -9999px; cursor: pointer;} #howto-wrap .sc-slide .prev {display: block; z-index: 10; float: left; width: 24px; height: 23px; background: url('images/sc_slide_nav.png') no-repeat 0 0; text-indent: -9999px; cursor: pointer;} #howto-wrap table.variations tr, #howto-wrap table.variations td {border: 1px solid transparent !important;} /* Add SUBLIME 2015 */ #howto-wrap .post-content ul li{ padding-left: 18px; background: url(images/list.gif) left 3px no-repeat scroll; list-style: none !important; } #howto-wrap .post-content h2 {color: #fc7988 !important;} #howto-wrap .post-content h3 {color: #fc7988 !important;} #howto-wrap .post-content .b{ font-weight: bold !important; } #howto-wrap .post-content span.marker{ background: linear-gradient(transparent 40%, #fffb65 40%) !important; display: inline-box; } #howto-wrap .post-content .feature{ background: linear-gradient(transparent 40%, #feade9 40%) !important; display: inline-box; font-weight: bold; } #howto-wrap a.btn_kazoku{ width: 95%; margin-left: auto; margin-right: auto; margin-bottom: 20px; margin-top: 10px; display: block; } /*李追記*/ #howto-wrap #mariageFund{margin: 30px 0; } #howto-wrap #mariageFund .table_collapsed{ margin: 0; min-height: 250px;} #howto-wrap #mariageFund .table_total{min-height: 0;} #howto-wrap #mariageFund table th{ width: 45%;} #howto-wrap #mariageFund table td{ width: 55%; text-align: right; vertical-align: middle;} #howto-wrap .spKazokuNav{text-align: center;padding: 10px 0; display: none;} #howto-wrap .spKazokuNavTit{display: block; margin-top: 10px; background: #f5f5f5; color: #333333; padding:5px 0;} #howto-wrap #spNavToggleBtn{ position: absolute; top: -1px; right: 10px; width: 120px;} #howto-wrap #spNavCloseBtn{text-align: right; display: block; margin-right: 5%;} #howto-wrap .spKazokuNav > ul > li >a{display: inline-block; margin: 10px 0; padding: 10px 20px; font-size: 12px; font-weight: bold; color: #fff; text-shadow: 0px -1px 0px rgba(000, 000, 000, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.3); background: url(./_images/arrowR_white.png), -moz-linear-gradient(top, #2278b2 0%, #2783c2); background: url(./_images/arrowR_white.png), -webkit-gradient(linear, left top, left bottom, from(#2278b2), to(#2783c2)); background-repeat: no-repeat; background-position: right center; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border: 1px solid #1f6ea3; width: 90%;} @media(max-width: 480px) { #howto-wrap .half-width{width: 100%;float: none;} }