/* Theme Name: SNIPPER | Landign page SEO optimized with rich snippet Theme URI: http://www.ansonika.com/snipper/ Description: SNIPPER is created by Ansonika. Version: 1.0.0 Author: Ansonika Author URI: http://themeforest.net/user/Ansonika/ CSS STRUCTURE: 1. SITE STRUCTURE 2. CONTENT 3. MISC 4. MEDIA QUERIES /*============================================================================================*/ /* 1. SITE STRUCTURE */ /*============================================================================================*/ /* #Site Header ================================================ */ header{background:#ffb505 url(../img/bg_header.png) repeat-x 0 0; width:100%; padding:15px 0 6px 0; } #logo { padding-top:10px;} #top-nav ul{ float:right; margin-top:18px; margin-right:-10px; font-size:14px; margin-bottom:4px; font-weight:600; letter-spacing:-1px; } #top-nav ul a { color:#ccc; text-decoration:none;} #top-nav ul a:hover, #top-nav ul a#active{ color:#fff;} #top-nav ul li {background:url(../img/menu_footer_divider.png) left center no-repeat; float:left; padding-left:10px; margin-right:10px; margin-bottom:0; } #top-nav ul li:first-child{ background:none;} #shadow {background: url(../img/shadow_bottom.png) repeat-x 0 0; height:4px; width:100%; position:absolute; left: 0; bottom:0; z-index:99} .ribbon {background:url(../img/ribbon.png) no-repeat 0 0;width:96px;height:57px;position:absolute;top:-3px;right:17px;z-index:100;} #top-nav ul li a#purchase { color: #6dcff6;} #top-nav ul li a#purchase:hover { color:#fff;} /* Button Responsive Menu*/ .btn-responsive-menu{display: none;float: right;padding:5px;cursor:pointer;margin: 0px 0 0 0;color: #ffffff;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);background:#212327;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;} .icon-bar {display: block;width: 18px;height: 2px;margin:5px;background-color: #f5f5f5;-webkit-border-radius: 1px;-moz-border-radius: 1px;border-radius: 1px;-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);} .show{display:block!important} #bg{ background:url(../img/bg_top_2.png) no-repeat center bottom;} #display { position:relative; padding:40px 0;} #apps {position:absolute; width:205px; height:30px; right:10px; top:20px; text-align:right;} /* Rating*/ #rating{ border-top: 1px solid #cf9d0b; border-bottom: 1px solid #cf9d0b; text-transform:uppercase; padding:5px 0; margin:10px 0; color:#333;} .stars { float:left; width:205px; text-align:left} .count { float:right; width:80px; text-align:right; margin-top:3px; } .star-1,.star-2, .star-3, .star-4, .star-5 {text-indent:-9999px; width:105px; height:18px; display:inline-block;} .star-5 {background:url(../img/sprite-rate.png) no-repeat 0 0; } .star-4 {background:url(../img/sprite-rate.png) no-repeat 0 -22px;} .star-3 {background:url(../img/sprite-rate.png) no-repeat 0 -44px;} .star-2 {background:url(../img/sprite-rate.png) no-repeat 0 -65px;} .star-1 {background:url(../img/sprite-rate.png) no-repeat 0 -87px;} /* #Site Footer ================================================ */ footer {padding:50px 0 25px; background-color:#111111; } footer hr {border:solid #343434; border-width:1px 0 0; clear:both; height:0; margin:30px 0 25px;} .copy { font-size:11px; padding-top:20px;} address { text-align:center;} address strong {display:block;} #tweets { padding-bottom:20px;} #tweets ul li { background:url(../img/tweet.png) no-repeat left top; padding-left:25px; text-align:left} #tweets ul li p { line-height:16px;} #share{width:285px; margin:auto; margin-bottom:30px;} .fb-like { width:105px; float:left; margin-top:0; margin-bottom:5px;} .twitter{width:90px;float:left; margin-bottom:5px;} .g-plusone {width:65px; float:left;margin-bottom:5px; } /*============================================================================================*/ /* 2. CONTENT */ /*============================================================================================*/ #main-top {background: #ffd00e url(../img/bg_top.png) repeat-x center top; position:relative;} #product-img { text-align:center; } #product-short-info { color:#fff; padding-top:40px;} p.description { margin-bottom:20px;} .info ul{ float:left; width:200px; color:#111;} .info ul li {padding-left:20px; text-align:left;} .info ul li.author {background:url(../img/author.png) no-repeat center left; } .info ul li.author a:hover { color: #111} .info ul li.cat {background: url(../img/category.png) no-repeat center left;} .info ul li.downloads {background: url(../img/downloads.png) no-repeat center left;} .info ul li.date {background: url(../img/calendar.png) no-repeat center left;} .info ul li.operating {background: url(../img/operating.png) no-repeat center left;} .info ul li.filesize {background: url(../img/filesize.png) no-repeat center left;} #feat { background:#000 url(../img/pattern-2.png) repeat-x 0 0;} #feat article { text-align:center; margin-bottom:25px; color:#CCC} #feat article span { background:url(../img/shadow_small.png) no-repeat bottom center; padding-bottom:10px; margin-bottom:5px; display:block; margin:0 10px;} .pic_border {-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;border:#252525 10px solid;} #feat-2{ padding: 50px 0 0px 0;} #feat-2 article{ -moz-box-shadow:0px 0px 4px #000; -webkit-box-shadow:0px 0px 4px #000; box-shadow:0px 0px 4px #000; background:#000 url(../img/gradient-box.jpg) no-repeat bottom right; margin-bottom:25px; } .ie8 #feat-2 article{ background-color:#000; margin-bottom:25px; min-height:180px; border-bottom:1px solid #dcdcdc; } #feat-2 article div{ padding:20px 100px 25px 20px; margin:1px; border-top: 3px solid #ffb104;} #feat-2 article div#bg-1{background:url(../img/bg-1.png) no-repeat bottom right;} #feat-2 article div#bg-2{background:url(../img/bg-2.png) no-repeat bottom right;} #feat-2 article div#bg-3{background:url(../img/bg-3.png) no-repeat bottom right;} #feat-2 article div#bg-4{background:url(../img/bg-4.png) no-repeat bottom right;} #feat-3 article { margin-bottom:25px; margin-top:10px;} article.banner{ background:none; } article.banner img{ margin-bottom:-5px; -moz-box-shadow:0px 0px 4px #000; -webkit-box-shadow:0px 0px 4px #000; box-shadow:0px 0px 4px #000; } /* Newsletter*/ #subscribe{ background: #f6ab04; border-top: 5px solid #26292b; border-bottom: 5px solid #26292b; padding:30px 0 10px 0 ;} #newsletter { position:relative;} #newsletter input {border:none; background:#fff; -webkit-box-shadow: inset 2px 2px 2px 0px #555;-moz-box-shadow: inset 2px 2px 2px 0px #555; box-shadow: inset 2px 2px 2px 0px #555; width:440px; height:48px; outline:none; padding: 0 15px; color:#444; font-size:14px; font-weight:600; font-family:Arial, Helvetica, sans-serif; float:left;} #message-newsletter {position:relative; color:#fff; font-size:16px; text-shadow: 1px 1px 1px rgba(0,0,0,.4); } .error_message {display: block; color:#fff;position:absolute; top:-20px;width:250px; margin:0; padding:0; font-size:12px; } .error_message_contact { display: block; height: 22px; line-height: 22px; background: #ed1c24 url(../img/allert.png) no-repeat 10px center; padding: 3px 10px 3px 35px; color:#fff;border: 1px solid #f26c4f; margin-bottom:10px; } #reviews { padding-bottom:20px; background:#000 url(../img/pattern-2.png) repeat-x 0 0; } /* quotes*/ .review {text-align:center;margin-bottom:30px;} .review-box {background-color:#1a1a1a;text-align:left;padding:40px 30px 30px 20px;margin:auto;min-height:110px; color:#7d7d7d} .ie8 .review-box {background-color:#fff;text-align:left;padding:40px 30px 30px 20px;border:1px solid #dcdcdc; margin:auto;min-height:110px;} blockquote {background: url('../img/quote.png') no-repeat top left;padding-left: 45px; margin-bottom:30px;} .review-box cite {float: right;font-weight: bold; margin-right:10px; font-style:italic;} #review-2 { text-align:center;} #review-2 ul li { font-weight:700; color:#999; } #review-2 ul li blockquote { background:none; margin-bottom:10px; font-style:italic; font-size:14px; padding:0; } #review-2 cite{ font-weight: normal;} button.qr_previous, button.qr_next{ background: no-repeat 0 0; width:42px; height:42px; text-indent:-9999px; border:none; cursor:pointer; margin-top:10px;} button.qr_previous{ background:url(../img/button-prev-quote.png); } button.qr_next{ background: url(../img/button-next-quote.png);} /*============================================================================================*/ /* 3. MISC */ /*============================================================================================*/ ul.list_3 li{background:url(../img/tick_1.png) no-repeat left center;padding-left:40px; min-height:23px; font-size:13px; padding-top:7px; text-align:left} #toTop {width:100px;border:1px solid #ccc;background:#f7f7f7;text-align:center;padding:5px;position:fixed; bottom:10px;right:10px;cursor:pointer; display:none;color:#333;font-size:11px;} .picture{ position:relative; margin-bottom:30px;} .magnify{ background:url(../img/zoom_1.png) no-repeat 10px 10px; display:none; height:92%; left:0; position:absolute; top:0; width:100%; z-index:999;} /* Fix for IE10 border radius */ .ie10 .button_1, .ie10 .button_2, .ie10 .button_3, .ie10 .button_news, .ie10 .button_contact, .pic_border, .ie10 input[type="text"], .ie10 input[type="password"], .ie10 input[type="email"], .ie10 textarea,select {border-radius: 0;} /*============================================================================================*/ /* 4. MEDIA QUERIES */ /*============================================================================================*/ /* Tablet Portrait size to standard 960 (devices and browsers) ================================== */ @media only screen and (min-width: 768px) and (max-width: 959px) { #product-short-info { padding-top:40px;} #offer-valid{ margin-top:30px; } #product-img img { margin-bottom:-70px;} #newsletter input { width:319px; } .review {background:url(../img/shadow_big_2.png) no-repeat center bottom;} #feat article span img { max-width:90%; height:auto; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { header{ padding:15px 0 7px 0; } #apps {position:relative; width:100%; height:30px; right:0; top:0; text-align:center; margin-bottom:20px;} #display { padding-top:20px;} #top-nav {width:100%;float:left;} #top-nav {display:none;} #top-nav ul {float: none; padding:25px 0 10px 0; margin:0; } #top-nav ul li {float: none; font-size:14px; padding:0; margin:0;margin-bottom:1px;} #top-nav ul li a { display:block; padding:5px; color:#222; background-color:#ffce0d } #top-nav ul li a:hover{ background-color:#333;} #top-nav ul a#active{ color:#fff; background-color:#333;} .btn-responsive-menu{display:block; } .error_message {display: block; color:#fff;position:relative; top:0;width:100%; margin:0; padding:0; font-size:12px; text-align:center; } #message-newsletter { text-align:center;} #product-img img { margin-bottom:-20px;} #display {text-align:center;} #offer-valid{ margin-top:20px; } #feat { padding-top:0px;} #newsletter input {width:320px; float:none; margin:auto; } #share{width:285px; margin-bottom:30px; margin-left:0;} address { text-align:left} } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { header{ padding:15px 0 7px 0; } #apps {position:relative; width:100%; height:30px; right:0; top:0; text-align:center; margin-bottom:20px;} #display { padding-top:20px;} #top-nav {width:100%;float:left;} #top-nav {display:none;} #top-nav ul {float: none; padding:25px 0 10px 0; margin:0;} #top-nav ul li {float: none; font-size:14px; padding:0; margin:0;margin-bottom:1px;} #top-nav ul li a { display:block; padding:5px; color:#222; background-color:#ffce0d } #top-nav ul li a:hover{ background-color:#333;} #top-nav ul a#active{ color:#fff; background-color:#333;} .btn-responsive-menu{display:block; } #product-img img { margin-bottom:-20px;} #feat { padding-top:0px;} #display {text-align:center;} #offer-valid{ margin-top:10px; } #newsletter input {width:270px; float:none; margin:auto; } #message-newsletter {text-align:center;} .error_message {display: block; color:#fff;position:relative; top:0;width:100%; margin:0; padding:0; font-size:12px; text-align:center; } #share{ width:100%;margin-left:0; } address { text-align:left} }