/* Template Name: Universal Description: A site template for any website Version: 1.0 URL: - Author: enstyled URL: http://themeforest.net/user/enstyled */ * { padding: 0; margin: 0; } html { font-size: 100%; -webkit-text-size-adjust: 100%; } body { background: #111; font-family: "Helvetica Neue", sans-serif; font-size: 14px; color: #333; line-height: 1.5em; } .clear { clear: both; } img, a img { border: 0; } ul li { list-style: none; } p { padding-bottom: 1.5em; } hr { height: 1px; line-height: 1px; font-size: 1px; border: 0; background: #ddd; color: #ddd; margin: 30px 0 60px; clear: both; } a { color: #1084dd; text-decoration: underline; word-wrap: break-word; transition: 0.3s color; -moz-transition: 0.3s color; -webkit-transition: 0.3s color; -o-transition: 0.3s color; } a:hover { color: #42c2ec; text-decoration: none; } .wrapper { width: 960px; margin: 0 auto; } /* Header */ header { background: #666 url(../img/head.jpg) top center no-repeat; height: 400px; width: 100%; position: fixed; } header.about { background: #666 url(../img/head2.jpg) top center no-repeat; } header.gallery { background: #666 url(../img/head3.jpg) top center no-repeat; } header.blog { background: #666 url(../img/head4.jpg) top center no-repeat; } header .wrapper { padding: 40px 0 0; } /* Logo */ header h1 { float: left; font-size: 36px; color: #fff; text-shadow: 0 2px 8px #000; line-height: 1em; } header h1 a { color: #fff; text-decoration: none; } header h1 a:hover { color: #fff; } header h1 a img { display: block; } /* Navigation */ header ul { float: right; overflow: hidden; } header ul li { float: left; padding-left: 10px; } header ul li a { display: block; padding: 8px 15px; color: #fff; text-decoration: none; font-size: 15px; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 4px #000; border-radius: 5px; transition: 0.2s all; -moz-transition: 0.2s all; -webkit-transition: 0.2s all; -o-transition: 0.2s all; } header ul li.active a { background: rgba(255,255,255,0.4); } header ul li a:hover { color: #fff; background: rgba(0,0,0,0.2); box-shadow: inset 0 1px 3px rgba(0,0,0,0.4); } header hr { clear: both; height: 3px; background: #fff; border: 0; margin-top: 70px; margin-bottom: 35px; opacity: 0.4; -moz-opacity: 0.4; filter: alpha(opacity=40); } /* Page title */ header h2 { font-size: 36px; color: #fff; text-shadow: 0 2px 8px #000; line-height: 1.2em; } header h2.huge { font-size: 60px; } header h2 a, header h2 a:hover { text-decoration: none; color: #fff; } /* Content */ #content-main { position: relative; top: 400px; background: #fff; box-shadow: 0 -2px 30px rgba(0,0,0,0.5); width: 100%; } /* Features */ .features { background: #eee; border-bottom: 1px solid #ccc; } .features ul { position: relative; top: -60px; } .features ul li { text-align: center; text-shadow: 0 1px 0 #fff; } .features ul li img { margin-bottom: -4em; animation: feature_glide 1s; -moz-animation: feature_glide 1s; -webkit-animation: feature_glide 1s; -o-animation: feature_glide 1s; } .features ul li h3 { font-size: 24px; text-align: center; line-height: 1.2em; padding: 7px 0; animation: feature_glide 0.6s; -moz-animation: feature_glide 0.6s; -webkit-animation: feature_glide 0.6s; -o-animation: feature_glide 0.6s; } .features ul li p { padding: 0 25px; font-size: 15px; color: #666; } /* Features animation */ @keyframes feature_glide { 0% { margin-left: -120px; opacity: 0; } 100% { margin-left: 0px; opacity: 1; } } @-moz-keyframes feature_glide { 0% { margin-left: -180px; opacity: 0; } 100% { margin-left: 0px; opacity: 1; } } @-webkit-keyframes feature_glide { 0% { margin-left: -120px; opacity: 0; } 100% { margin-left: 0px; opacity: 1; } } @-o-keyframes feature_glide { 0% { margin-left: -120px; opacity: 0; } 100% { margin-left: 0px; opacity: 1; } } /* Big bold */ .bigbold { font-size: 20px; line-height: 1.6em; color: #666; } .bigbold p { padding-bottom: 2em; } /* Page body */ .pagebody { padding: 50px 0; overflow: hidden; } .pagebody h1, .pagebody h2 { font-size: 48px; line-height: 1em; padding-bottom: 50px; } .pagebody h3 { font-size: 30px; color: #454545; line-height: 1.5em; padding-bottom: 30px; } .pagebody h4 { font-size: 18px; color: #333; line-height: 1em; padding-bottom: 1em; } .pagebody blockquote { font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-style: italic; color: #888; line-height: 1.5em; padding: 15px 40px 0; border-left: 3px solid #ddd; margin-bottom: 15px; } .pagebody .one blockquote { padding: 0; border: 0; } .pagebody ul.list, .pagebody ol.list { padding-left: 30px; padding-bottom: 30px; } .pagebody ul.list li { list-style: circle; padding-bottom: 1em; } .pagebody ol.list li { padding-bottom: 1em; } .pagebody table { margin-bottom: 50px; } .pagebody table th, .pagebody table td { text-align: left; border-bottom: 1px solid #ddd; padding: 15px; } .pagebody table .alt th, .pagebody table .alt td { background: #f9f9f9; } .pagebody table th { font-size: 16px; } .pagebody table td { color: #666; } .pagebody fieldset { border: 0; } /* Forms */ .pagebody form input.text { border: 1px solid #ccc; font-family: "Helvetica Neue", sans-serif; font-size: 14px; color: #333; padding: 11px; border-radius: 3px; width: 92%; -webkit-appearance: none; } .pagebody form input.text.error { border: 1px solid #e2300d; color: #e3302c; } .pagebody form input.radio, .pagebody form input.checkbox { vertical-align: text-bottom; position: relative; top: -2px; } .pagebody form label { display: block; font-family: "Helvetica Neue", sans-serif; font-size: 14px; color: #757575; font-weight: bold; padding-bottom: 5px; } .pagebody form span { padding-right: 15px; } .pagebody form input.submit { background: #1084dd; color: #fff; font-family: "Helvetica Neue", sans-serif; font-size: 14px; font-weight: bold; border: 1px solid #555; border: 1px solid rgba(0,0,0,0.3); padding: 10px 20px; border-radius: 3px; text-shadow: 0 1px 1px rgba(0,0,0,0.7); cursor: pointer; margin: 0 5px 5px 0; transition: 0.3s all; -moz-transition: 0.3s all; -webkit-transition: 0.3s all; -o-transition: 0.3s all; -webkit-appearance: none; } .pagebody form input.submit:hover { background: #10aadd; } .pagebody form input.submit.green { background: #6eb010; } .pagebody form input.submit.green:hover { background: #83c623; } .pagebody form input.submit.red { background: #ca2c0d; } .pagebody form input.submit.red:hover { background: #e2300d; } .pagebody form input.submit.disabled { background: #aaa; cursor: default; opacity: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50); } /* Full width page */ .pagebody h1, .pagebody h2, .pagebody h3, .pagebody h4 { text-align: center; } /* Grid, Columns */ .column { padding: 10px; } .one { width: 300px; } .two { width: 600px; } .three { width: 940px; clear: both; } .half { width: 450px; } .column.left { float: left; } .column.right { float: right; } .column h1, .column h2, .column h3, .column h4 { text-align: left; } /* Gallery */ ul.gallery { overflow: hidden; } ul.gallery li { width: 300px; padding: 30px 10px; float: left; text-align: center; } ul.gallery.photos li a strong { background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,0.5); display: block; margin-bottom: 30px; width: 280px; margin: 0 auto 15px; } ul.gallery.photos li a img { border: 5px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,0.7); width: 280px; position: relative; transform: rotate(2deg); -moz-transform: rotate(2deg); -webkit-transform: rotate(2deg); transition: 0.3s all; -moz-transition: 0.3s all; -webkit-transition: 0.3s all; -o-transition: 0.3s all; } ul.gallery.photos li a:hover img { transform: rotate(-1deg); -moz-transform: rotate(-1deg); -webkit-transform: rotate(-1deg); } ul.gallery li a p { font-weight: bold; padding-bottom: 0; } /* Icon list */ ul.iconlist { overflow: hidden; } ul.iconlist h4 { font-size: 16px; text-transform: uppercase; line-height: 2em; padding-left: 42px; } ul.iconlist p { color: #666; padding-left: 42px; } ul.iconlist img { float: left; width: 32px; height: 32px; } /* Logo list */ ul.logos { clear: both; overflow: hidden; } ul.logos li { text-align: center; } ul.logos li img { opacity: 0.3; -moz-opacity: 0.3; filter: alpha(opacity=30); } /* Blog */ .blog_post { padding: 0 120px 50px; border-bottom: 1px solid #ddd; margin-bottom: 50px; } .blog_post h4 { color: #bbb; padding-bottom: 10px; text-transform: uppercase; } /* Blog comments */ .blog_comments ul { padding: 0 120px; margin-bottom: 30px; } .blog_comments ul li { padding-bottom: 15px; } .blog_comments ul li .avatar { float: left; width: 64px; border-radius: 64px; } .blog_comments ul li .author { padding-left: 86px; display: block; font-size: 13px; line-height: 2.5em; color: #999; font-weight: normal; } .blog_comments ul li .author a { font-size: 16px; font-weight: bold; margin-right: 8px; } .blog_comments ul li p { padding-left: 86px; padding-bottom: 25px; color: #666; } .blog_comments ul li ul { border: 0; margin: 0; padding-left: 86px; } .blog_comments ul li ul li { padding: 0; margin: 0; } .blog_comments ul li ul li .avatar { float: left; width: 48px; border-radius: 48px; } .blog_comments ul li ul li .author, .blog_comments ul li ul li p { padding-left: 64px; } /* Pagination */ .pagination { text-align: center; font-size: 18px; font-weight: bold; color: #333; line-height: 1em; padding: 1em 0; } .pagination a { margin: 0 15px; } /* Image slider */ .img_slider img { display: block; width: 100%; margin: 0 auto 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); } .img_slider ul { overflow: hidden; margin: 0 auto; } .img_slider ul li { list-style: none; float: left; text-align: center; padding: 0 10px; } .img_slider ul li a { padding: 5px; display: block; background: #ccc; border-radius: 5px; } .img_slider ul li a.active { background: #1084dd; } /* Messages */ .message { padding: 15px 15px 15px 40px; margin-bottom: 20px; font-weight: bold; overflow: hidden; line-height: normal; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .message p { padding: 0; width: 95%; float: left; } .message.errormsg { border: 1px solid #e9c59b; background: #ffecce url(../img/error.gif) 15px 16px no-repeat; color: #e3302c; } .message.success { border: 1px solid #bfde84; background: #edfbd8 url(../img/success.gif) 15px 16px no-repeat; color: #508600; } .message.info { border: 1px solid #bbdbe0; background: #ecf9ff url(../img/info.gif) 15px 16px no-repeat; color: #0888c3; } .message.warning { border: 1px solid #e5e181; background: #fefde2 url(../img/warning.gif) 15px 16px no-repeat; color: #666; } .message .close { display: block; float: right; width: 16px; height: 16px; background: url(../img/close.png) 0 0 no-repeat; cursor: pointer; opacity: 0.7; -moz-opacity: 0.7; } .message .close:hover { opacity: 1; -moz-opacity: 1; } /* Wide gray */ .wide_gray { background: #eee; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 50px 0; margin: 50px 0; text-shadow: 0 1px 0 #fff; } .wide_gray h2 { color: #454545; } .wide_gray form input.text, .wide_gray form textarea { border: 1px solid #bbb; box-shadow: 0 1px 0 #fff; } .wide_gray form input.submit { box-shadow: 0 1px 0 #fff; } /* Social */ aside { clear: both; background: #222; padding: 50px 0; color: #999; overflow: hidden; } aside h4 { color: #fff; font-size: 18px; line-height: 1em; padding-bottom: 15px; } /* Testimonials */ aside blockquote { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 16px; line-height: 1.5em; color: #aaa; padding-bottom: 15px; } aside cite { color: #fff; font-weight: bold; font-style: normal; } /* Twitter badge */ #twitter_update_list { background: #111; padding: 10px 15px; font-family: Georgia, "Times New Roman", serif; font-size: 14px; font-style: italic; color: #aaa; border-radius: 5px; } #twitter_update_list li { padding: 0; margin: 0; background: 0; } #twitter_update_list li.loading img { width: 16px; height: 16px; vertical-align: text-bottom; margin-right: 5px; } #twitter_update_list li a { color: #ccc; } #twitter .twt { background: url(../img/tw.gif) 15px 0 no-repeat; padding: 5px 0 0 45px; font-size: 12px; font-weight: bold; color: #999; overflow: hidden; } #twitter .twt a { color: #aaa; } #twitter .twt a:hover { color: #ccc; } #twitter .twt a img { width: 16px; height: 16px; vertical-align: middle; margin: 0 5px; } #twitter .twt a span { display: none; } /* Footer */ footer { background: #111; color: #555; padding: 25px 0; font-size: 12px; font-weight: bold; line-height: normal; } footer .wrapper { overflow: hidden; } footer a { color: #666; } footer a:hover { color: #ccc; } .foor-right {text-align:right;} /* Social links */ .social_links a img { vertical-align: middle; margin-left: 6px; margin-top: -5px; width: 24px; height: 24px; opacity: 0.4; -moz-opacity: 0.4; filter: alpha(opacity=40); transition: 0.3s all; -moz-transition: 0.3s all; -webkit-transition: 0.3s all; -o-transition: 0.3s all; } .social_links a:hover img { opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); position: relative; top: -5px; } /* IE7 */ .ie7 header hr { margin: 25px 0; } .ie7 .pagebody form input.submit { padding: 10px 5px; vertical-align: middle; } .ie7 .pagebody form input.radio, .ie7 .pagebody form input.checkbox { top: 2px; } .ie7 .blog_comments ul li .author { margin-top: -24px; }