/* Theme Name: Travel Theme URI: http://www.uiueux.com Author: UXteam / Bwsm Author URI: http://www.uiueux.com Description: Travel Fullscreen Responsive WordPress Theme. Version: 1.6.2 License: GNU General Public License License URI: license.txt Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready Change log: 1.0 Initial release 20120803 1.1 20120813 1.2 20120822 1.3 20120906 1.4 20120923 1.5 20140309 1.6 20141022 ----------------------------------------------------------------------------------- 1. CSS Reset & Clearfix - http://meyerweb.com/eric/tools/css/reset/ ----------------------------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; font-family:Arial, Helvetica, sans-serif;} ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hide from IE Mac \*/ .clearfix { display: block; } /* End hide from IE Mac */ .none { display: none; } /* End Clearfix */ img,iframe,object,embed{ margin-bottom:-6px; max-width:100%;} .clear{ clear:both} a{ text-decoration:none;color: #FFF;} input,select,textarea{ -webkit-appearance: none;-moz-border-radius: 0px; -webkit-border-radius:0px; border-radius:0px;font-family:Arial, Helvetica, sans-serif;} /* ------------------------------------------- 2. general ------------------------------------------- */ /*css3*/ .social_a, #navi a, .gallery_toolbar>a, .closeBtn:before, .sub-menu, .caption-text, .contactform input.idi_send, .gallery dl dt, a.btn { -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } html{ min-height:101%;overflow-y:auto;overflow-x:hidden;} body {font-family: Arial, sans-serif; font-weight: normal;font-size:12px;line-height:20px;margin: 0;padding: 0;height:100%; } html>body { font-size:12px;line-height:20px;} #wrap{ width:100%; height:100%;margin:0 auto;text-align:left;} #logo{ position:fixed; left:40px; top:40px; z-index:999;} #foot{ z-index:4; position:fixed; left:0; bottom:0; height: 50px; -webkit-overflow-scrolling: touch; width:100%;} #logo img{ height: auto; } .logo_retina{display: none;} .foot_bg { z-index:3; position:fixed; bottom:0; left:0; width:100%; height:50px; opacity: .95; -webkit-overflow-scrolling: touch; } /* social */ #social_foot { display:inline-block; margin-left:40px; padding-top: 10px; font-size: 0; } .social_a, .search-icon-wrap { display:inline-block; position: relative; width: 30px; height: 30px; border-radius: 15px; text-align: center; margin: 0 5px; background-color: #999; } #social_foot .social_a { opacity:0.3; } .social_a .fa { font-size: 18px; line-height: 30px; } #social_foot .social_a:hover { opacity: 1; } /* search */ #social_foot a.search_active { display:inline-block; min-width:30px; height:30px; margin-right: 10px; cursor: pointer; opacity: .4; } #social_foot a.search_active:hover { opacity: 1; } .search-icon-wrap { position: absolute; z-index: -1; font-size: 15px; line-height: 30px; opacity: .9; } #search_form { width:28px; height: 30px; opacity: 0; border-color:#9d9d9d; border-style:solid; } #search_form.formcss{ background-color:#2f2f2f; opacity: 1; } input.textboxsearch{ border:none; position:relative; top:-3px; left:3px; width:30px; height:30px; cursor: pointer; color:#999; background-color: rgba(244,244,244,0);} input.submitsearch{ display:none; width:17px; height:17px; margin-top:5px; border:0 none;text-indent:-5000px; overflow:hidden; cursor:pointer; background: url(img/search_submit.png) no-repeat; } /* Menu */ #navi { display:inline-block; margin-left:40px; } #navi a { display: block; line-height: 50px; font-size: 14px; } #navi div ul { font-size: 0; } #navi>div>ul>li { display:inline-block; position:relative; } #navi>div>ul>li>a { padding: 0 10px; } #navi a { color:rgba(155,155,155,0.6); } #navi a:hover{ color:rgb(155,155,155); } #navi ul li ul.sub-menu li a { white-space: nowrap; padding:5px 10px; line-height: 30px; } #navi ul li .has-sub { display:inline-block; position:absolute; bottom:20px; right: 2px; width:4px; height:4px; border-radius: 2px; background-color:rgba(155,155,155,0.4);} #navi ul li .sub-menu .has-sub { right: auto; margin-left: 4px; bottom: 15px; } #navi .sub-menu { visibility: hidden; opacity: 0; position:absolute; bottom: 50px; left:0; min-width: 120px; max-width: 300px; } #navi li:hover > .sub-menu { opacity: 1; visibility: visible; } #navi .sub-menu .sub-menu { position:absolute; left:100%; top: 0 } #navi .sub-menu li { position:relative; } #navi .sub-menu li { margin-bottom:0\0; } #navi .sub-menu .sub-menu li{ } #navi .sub-menu .sub-menu li{ margin-left:0\0; } .archive_title{ font-size:16px; font-style:normal; font-weight:normal; margin-top:60px; padding-left:32px; color:rgba(255,255,255,0.9); } #copyright{ z-index:4; position: absolute; right:40px; top:0; line-height: 50px; color:rgba(155,155,155,0.4); } #copyright-mobile { position:absolute; bottom:10px; } .mobileMenu{ margin:10px 0 10px; padding:10px; width:75px; text-align:center; font:13px; border:none; color:rgba(255,255,255,0.7); background: rgba(0,0,0,0.8) url(img/icon.png) no-repeat 47px -29px; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; opacity: .8;} /* Foot Layout b*/ #foot.foot_layout2 #social_foot{ float:right; left:auto; margin-right:40px; margin-left:0; } #foot.foot_layout2 #navi{ float:right;margin-right:40px; margin-left:0; } #foot.foot_layout2 #copyright { left:40px; right:auto;} /* ------------------------------------------- 3. Main list （Time line type） ------------------------------------------- */ ul#list_wrap{ z-index:2; display:block; margin-top:60px; margin-bottom:80px; } .line_type_mask{ z-index:-1; position:fixed; left:-1px; top:0; width:80%; min-height:100%; background:url(img/line_bg.png) repeat-y right; } #line_type_wrap{ width:20%;position: absolute;right:0 } li.gallery_unit{ float:left; display:block; margin:0 0 10px 10px;} li.gallery_unit img{ width:80px; height:80px;} li.list_unit{ display:block; width:655px; margin-left:-450px; margin-bottom:60px; } h2.unit_title { float:right; display:inline-block; width:190px; text-shadow:0px 0px 2px rgba(0,0,0,0.7); } h2.unit_title p{ font-style:italic; } h2.unit_title .unit_subtitle{ display:block; font-size:12px; font-style:italic; padding-top:10px; padding-right:10px; color:rgba(255,255,255,0.5); } h2.unit_title,h2.unit_title .tit {font-family:'Asul', sans-serif; font-size:14px; font-weight: 700; color:rgba(255,255,255,0.8);} h2.unit_title a,h2.unit_title .tit{ display:block; padding-left:20px; color:rgba(255,255,255,0.8); } h2.unit_title a:before{ content:""; float:left; display:inline-block; width:20px; height:20px; margin-left:-20px; background:url(img/icon.png) no-repeat -24px -1px; } h2.unit_title a.stand:before{ background-position:-46px -1px; width:15px; } h2.unit_title a.audioico:before{ background-position:-43px -38px; width:25px; } h2.unit_title a.videoico:before{ background-position:-70px -38px; width:25px; } h2.unit_title a.portfolio:before{ background-position:-64px -1px; width:25px; } h2.unit_title a.post-edit-link{ display:inline-clock; font-size:12px; background-image:none; font-style:italic; color:rgba(255,255,255,0.45); } h2.unit_title a.post-edit-link:before{ background:none; } h2.unit_title .unit_subtitle .date{ display:block; font-size:11px; font-style:italic; font-weight: 400; font-family:'Asul', sans-serif; } .unit_gallery_wrap,.unit_stand_wrap{ float:left; width:420px; margin-top:-28px; margin-left:10px; } ul.unit_gallery{ float:right; display:inline-block; width:auto; padding:20px 20px 10px 10px; margin-left:30px; } .unit_excerpt { float:right;width:350px;padding:20px 20px 0px 20px; color:#666; background:#fff; } .unit_excerpt.video_wrap{ padding-bottom:20px; } .unit_excerpt a.more{ display:inline-block; padding-right:15px; margin-bottom:20px; color:#cc3300; } .unit_excerpt p a{ color:#cc3300;} .unit_excerpt a.more .moreicon{ display:inline-block; width:4px; height:4px; margin-left:5px; border-radius:2px; background-color:#cc3300; } .unit_excerpt p.more{ display:inline-block; padding-right:15px; margin-bottom:10px; } ul.unit_gallery,.unit_excerpt{ background:#f3f3f3; } .unit_video{ padding:20px;} .videoWrapper{ position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px;height: 0;} .videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;} .content_wrap .videoWrapper{ margin-bottom:20px; } .arrow_unit_gallery{ z-index:2; display: block; position: relative; left:429px; top:2px; height:0; width: 5px; } .arrow_unit_gallery s{ border-style: solid; border-width:7px 0 6px 7px; display: block;position: relative;top: 1px;border-color: transparent #f3f3f3;} .round_unit_gallery{ position:relative; left:445px; top:6px; width:7px; height:7px;border-radius:3px; background:#fff; } @-moz-document url-prefix() {.round_unit_gallery{ left:446px; }} img.thum_excerpt{ width:100px; height:100px; margin-right:20px; margin-bottom:10px;} img.audio_img { width:60px; height:60px; } .audio_wrap { margin-left:80px; margin-right:-10px; min-height:80px; opacity:0; } .nopost{ padding-bottom:10px; } /* infscr-loading */ #page-nav{ display:none; } @-webkit-keyframes Breathing { from { -webkit-box-shadow: 0 0 9px #dedede; } 50% { -webkit-box-shadow: 0 0 18px #e7e7e7; } to { -webkit-box-shadow: 0 0 9px #dedede; } } #infscr-loading { margin-left:-45px; position:absolute; bottom:56px; } #infscr-loading .infi-dot{ width:6px; height:6px; margin-right:3px; float:left; background: rgba(255,255,255,0.6); -webkit-border-radius:3px; -moz-border-topright:3px; border-radius:3px; -webkit-animation-name: Breathing; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25); } #infscr-loading img { display:none; } /* Full screen slider */ #bigimg_loading{ position:fixed; left:47%; top:50%; font-size:60px;font-style:italic; color:#fff; } .bigimg_loading_p{ font-size:24px; display:inline-block;} #bigimg_toolbar{ position:fixed; right:0; top:50%;} a.bigimg_npbtn{display:inline-block;width:54px; height:54px; font-size:36px; line-height:54px; text-align:center; margin-left:17px; background:#FFCC00} a.bgimg_share,a.bgimg_info,a.bgimg_back{display:inline-block; color:#FFCC00; width:40px;margin-left:17px;} .back_mask{ z-index:-990; position: fixed; left:0; top:0; width:100%; height:100%; background:url(img/bg_mask.png);} /*animate style*/ .transitionSceneID { display: none; } /*animate style*/ .ajaxloading { width:72px!important; height:72px!important; position:fixed!important; left:50%; top:50%; right:auto; bottom:auto; margin-top:-36px!important; margin-left:-36px!important; z-index:999; border-radius:36px; background-color: #333; } .ajaxloading_back_layer{ width:100%; min-height:100%; z-index: 998;position: absolute;top: 0;left: 0; background-color:rgba(0,0,0,.4);} .ajaxloading:before { top: 50%!important; margin-top: -5px; left: 5px!important; } /* Fullscreen background video */ .fullwrap-video { position: fixed; z-index: -991; width: 100%; height: 100%;top: 0px; } .fullwrap-video video { position: absolute; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; } /* ---------------------------------------------------- 4. Content page (Fullcreen Mode/Standard Mode) ----------------------------------------------------- */ .content_wrap { position:relative; width:640px; min-height:100%; display: none;margin-right: auto; margin-left: auto;margin-top: 600px; color:#666;} .content_wrap .entry{ color:#777; padding: 0 30px 30px; } .entry > p { margin-bottom:20px;} .entry > p:last-child { margin-bottom:0;} #galleria_post { background-color: #000; } /* Fullcreen Mode - Tip box */ .display_switch{ left:0 } .display_switch_false{ left:-460px; } #map_canvas { width:460px; height:120px;} #map_canvas img,#map_canvas iframe,#map_canvas object,#map_canvas embed{ margin-bottom:0; max-width:none; } .gallery_tip { position:fixed; top:50%; z-index:3; width:460px; margin-top:-48px; color:#999; } .gallery_tip_wrap{ margin:20px 30px 0 30px; } .gallery_tip_wrap .tip_con{ margin-bottom:20px;} .gallery_tip .close_mobile{ display:none; position:absolute; right:0px; top:0px; width:30px; height:30px; background:url(img/icon.png) no-repeat -83px 3px; } /*ul.like_icon_intip li{ float:left;width:80px; margin-bottom:20px; } ul.like_icon_intip li.facebook{ margin-right:9px; margin-bottom:16px; } ul.like_icon_intip li.tweet{ width:88px;} ul.like_icon_intip li.google{float:left; margin-right:5px; width:75px;position:relative; }*/ /*share icon*/ .social-share-buttons { margin: -13px 0 20px 0; clear: both; } .social-share-button { cursor: pointer; min-width: 62px; height: 30px; font-size: 13px; float: left; padding: 0 10px 0 5px; margin-top: 13px; margin-right: 15px; border:none; border-radius: 2px; background-color: #5975b1; color:#fff; } .social-share-button:hover { opacity: .8; } .social-share-twitter.social-share-button { background-color: #53c3ee; } .social-share-google-plus.social-share-button { background-color: #d54e55; } .social-share-pinterest.social-share-button { background-color: #de4d35; } .social-share-linkedin.social-share-button { background-color: #007bb6; } .social-share-vk.social-share-button { background-color: #45668e; } /* Fullscreen Mode - Toolbar */ .gallery_toolbar{ position:fixed; right:0px; top:50%; height:62px; margin-top:-31px; z-index:9; display: none;} .gallery_toolbar>a { display:inline-block; position:relative; text-indent: -9999px; width:38px; height:38px; margin-left:10px; margin-top:12px; background-image:url(img/btn_tool_fullscreen.png); background-repeat:no-repeat; background-color: rgba(0,0,0,0.6); border-radius:19px;} .gallery_toolbar>a:hover{ background-color:#e73f18; } .gallery_toolbar>a.gallery_play { background-position:-4px -82px; } .gallery_toolbar>a.gallery_play.gallery_pause{ background-position:-7px -13px; } .gallery_toolbar>a.gallery_back, .gallery_toolbar>a.gallery_back_nojax{ position:absolute; right:-172px; background-position:-226px -13px; } .gallery_toolbar>a.gallery_back>span, .gallery_toolbar>a.gallery_back_nojax>span{ background-position:-270px -70px;} .gallery_toolbar>a.gallery_back:hover>span, .gallery_toolbar>a.gallery_back_nojax:hover>span{ opacity:1;} .gallery_toolbar>a.tip{ background-position: -53px -82px;} .gallery_toolbar>a.tip.tip_close{ background-position:-57px -13px;} .galleria-info { padding: 10px 0; } /* Standard Mode */ .four_wrap{ top:30%; min-height:inherit; height:auto; } .content_wrap h1, .gallery_tip h1{ font-size:36px; line-height:40px;padding-bottom:20px; font-weight:400; font-style:normal; font-family:'Asul', sans-serif; color:#000; } .content_wrap h1 { padding:40px 30px; } .closeBtn { display:inline-block; text-indent: -9999px; position:absolute; right:0px; top:0px; width:40px; height:40px; } .closeBtn:before { content: ''; position: absolute; right: -30px; top: -30px; width: 0; height: 0; border:30px solid transparent; border-right-color:#333; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg); } .closeBtn span { position: relative; } .closeBtn span:before, .closeBtn span:after { content: ''; position: absolute; left: 20px; top: 15px; width: 15px; height: 1px; background-color: #ccc; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } .closeBtn span:after{ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } .content_wrap .meta ul.like_icon_instand{ display:block; float:left; } ul.like_icon_instand li{ float:left; width:80px; } ul.like_icon_instand li.post_facebook{ float:left; width:80px; margin-right:5px;} ul.like_icon_instand li.post_tweet{float:left; width:90px; margin-right:1px;} ul.like_icon_instand li.post_googleplus{float:left; margin-left:-4px; margin-right:5px; width:75px;position:relative;} .content_wrap .meta{ margin:0 30px; font-style:italic; color:#666; } .meta .author{ padding:0 10px;} blockquote ul li { list-style: disc; margin-left:20px; } .single-audio { padding:0px 20px 10px 30px; } /* 404 */ #fourofourwrap{ width:380px; padding:40px; margin:60px auto; font-family:'Asul', sans-serif; color:rgba(0,0,0,0.5); } #fourofourwrap h1{ font-size:52px; padding-bottom:40px; font-weight:normal; } /*------------------------------------------- 5. Commnet & Respond area / contact form -------------------------------------------*/ /* Repond comment box */ #comments_box{ margin-top:20px; } span#comments{ font-weight:normal; background-repeat:no-repeat;padding-right:10px; margin-left:30px; } .ico-arrow{background-position:100% 3px;} .ico-arrow-toggle{ background-position:100% -13px;} .avatar{ float:left; margin-right:10px; padding-top:3px;} li.commlist-unit{ margin-top:20px;} .comment-meta .reply{ padding-left:10px;} ol.commentlist{ font-style:italic; margin:0 30px; } .content_wrap ul.children{ margin:0 30px;} #respond{ margin:40px 30px 30px;} #respondwrap{ display:none} .respondbtn{ cursor:pointer;background:url(img/ico-arrow.png) no-repeat 100% 3px; padding-right:10px; } .respondbtn-open{ background-position: 100% -13px; } .respondbtn-close{ background-position: 100% 3px; } #respond textarea { width:561px; height:108px; padding:5px 9px 5px 8px; margin-bottom:11px; margin-top:13px; } #respond #author { width:134px; float:left; margin-right:18px; } #respond #email{ width:134px;float:left; margin-right:18px; } #respond #url{ float:left; width:215px; margin-right:0; } #respond input,.contactform input{ margin-top:10px; margin-right:5px; height:16px; padding:6px 10px 5px 8px; } #respond input#submit{ height:28px; cursor:pointer; line-height:28px; width:auto; float:none;margin-top:0px; padding:0 10px; border-radius:2px;} .sucess-tip{ display:block; margin-top:20px;} #loading{ margin-bottom:10px;} #commentform #error{margin-bottom:10px;} /* Contant form*/ .contactform { margin:0 30px 30px;} .contactform h2{ font-weight:normal; font-size:16px; margin-bottom:20px; margin-top:40px; color:#333; } .contactform #idi_name,.contactform #idi_mail{ width:241px; } .contactform textarea{ width:241px; height:50px;padding:5px 9px 5px 8px;margin-bottom:11px;margin-top:13px;} .contactform input.idi_send{ float: none; width:auto; cursor:pointer; height:28px; line-height:28px; padding:0 10px;border-radius: 2px;} .sending{ float:left; display:block;width:80px ;height:27px;line-height:27px;} /* contact form - repond comment box color */ #respond textarea,#respond input,.contactform input,.contactform textarea{color:#abaaa8; border:1px solid #dfdfdf;background:#eaecee;} #respond input:focus,#respond textarea:focus,.contactform input:focus,.contactform textarea:focus{ color:#666;border:1px solid #e6bcbc; } #respond input#submit,.contactform input.idi_send, .pagination .next,.pagination .pre,.tw_style a{border:1px solid #cb4c29; color:#fff;background-color:#dc5631;} #respond input#submit:hover,.contactform input.idi_send:hover, .pagination .next:hover,.pagination .pre:hover,.tw_style a:hover{border:1px solid #cc3300;background-color:#d84717; color:#fff2ee} #commentform,commentform a{ coloe:#ccc; } #comments_box { color:#666; } .comment-meta, .comment-meta a, .cancel-comment-reply a{ color:#999; } /* link color - hover */ .content_wrap .entry a, .content_wrap .meta a, .gallery_tip a, #respondwrap a, #comments_box a, span#comments, .respondbtn, .sucess-tip a, .comment-author a, .tip_con a, #fourofourwrap a, .toggle h6:hover{ color:#cc3300; } .content_wrap .entry a:hover, .content_wrap .meta a:hover, .gallery_tip a:hover, #respondwrap a:hover, #comments_box a:hover, .respondbtn:hover, .sucess-tip a:hover, .comment-author a:hover, .tip_con a:hover{ color:#333; } /* ------------------------------------------- 6. Shortcodes -------------------------------------------*/ /*coloum*/ .one-third-c {width:30%;float: left;margin-right:3%;} .one-half-c {width:45%;float: left;margin-right:5%;} .one-fourth-c {width:20%;float: left;margin-right:5%;} .one-fifth-c {width:18%;float: left;margin-right:2%;} .one-sixth-c {width:15%;float: left;margin-right:1%;} .five-sixth-c {width:79%;float: left;margin-right:1%;} .two-fifth-c {width:38%;float: left;margin-right:2%;} .three-fifth-c {width:58%;float: left;margin-right:2%;} .four-fifth-c {width:78%;float: left;margin-right:2%;} .three-fourth-c {width:70%;float: left;margin-right:5%;} .two-third-c {width:63%;float: left;margin-right: 3%;} .one-fourth-c.last, .one-third-c.last, .two-third-c.last , .one-half-c.last,.three-fourth-c.last,.one-fifth-c.last,.two-fifth-c.last,.three-fifth-c.last,.four-fifth-c.last,.one-sixth-c.last,.five-sixth-c.last { margin-right:0; margin-bottom:0; } /*buttons*/ a.btn{ display: inline-block; font-size:12px; padding:4px 10px 4px 10px; cursor:pointer; color:#fff; border-style:solid; border-width:1px; margin-bottom:10px; border-radius: 2px;} a.btn.black{ color:#fff; background-color:#333; border-color:#585858; } a.btn.grey{ color:#fff; background-color:#666; border-color:#585858; } a.btn.blue{ color:#fff;background-color:#5e8fe7; border-color:#2f71df; } a.btn.green{ color:#fff;background-color:#00b976; border-color:#009465;} a.btn.pink{ color:#fff;background-color:#f025ab; border-color:#e01b9d;} a.btn.red{ color:#fff;background-color:#e0562f; border-color:#da4319;} a.btn.yellow{ color:#fff;background-color:#daaa1a; border-color:#d37200;} a.btn:hover{ color:#fff;background-color:#717171; border-color:#666;} /*typograph*/ h1.typograph { font-size: 32px; line-height:40px;margin: 0 0 20px 0; font-weight:normal;} h2.typograph { font-size: 28px; line-height:40px;margin: 0 0 20px 0; font-weight:normal;} h3.typograph { font-size: 24px; line-height:20px;margin: 0 0 20px 0; font-weight:normal;} h4.typograph { font-size: 18px; line-height:20px;margin: 0 0 20px 0; font-weight:normal;} h5.typograph { font-size: 16px; line-height:20px;margin: 0 0 20px 0; font-weight:normal;} h6.typograph { font-size: 12px; line-height:20px;margin: 0 0 20px 0; font-weight:normal;} .typograph.grey{ color:#999;} /*hr line*/ .line { clear:both; color:#999; border-bottom-width:1px; height:19px;} .line_solid{ border-bottom-style: solid;} .line_dot{ border-bottom-style:dotted;} .line_dashed{ border-bottom-style: dashed;} .line_double{ border-bottom-style: double;} .line_groove{ border-bottom-style: groove;} .line_red{ border-bottom-color: #cc6666;} .line_pink{ border-bottom-color: #882a7e;} .line_brown{ border-bottom-color: #e3a600;} .line_green{ border-bottom-color: #5bae55;} .line_blue{ border-bottom-color: #4c8ac5;} .line_grey{ border-bottom-color: #ccc;} .line_dark{ border-bottom-color: #666;} .line_black{ border-bottom-color: #000;} .line_blank{ height:20px; clear:both; display:block;} .line_clear{ height:0; clear:both;} p.paragraph{line-height:20px;} /*message box*/ .messagebox_blue{ background-color: #e2f3ff; background-image:url(img/ico_mesg1.png); background-repeat:no-repeat; background-position:20px 20px;border:1px solid #99ccff; color:#005a8e; padding:19px 20px 19px 48px; margin-top:20px; } .messagebox_green{ background-color: #e2f4e3; background-image:url(img/ico_mesg2.png); background-repeat:no-repeat; background-position:20px 20px;border:1px solid #68d86d; color:#009900;padding:19px 20px 19px 48px; margin-top:20px; } .messagebox_orange{ background-color: #f8f3e6; background-image:url(img/ico_mesg3.png); background-repeat:no-repeat; background-position:20px 20px;border:1px solid #e4c28e; color:#c97900;padding:19px 20px 19px 48px;margin-top:20px; } .messagebox_red{ background-color: #f9ebeb; background-image:url(img/ico_mesg4.png); background-repeat:no-repeat; background-position:20px 20px;border:1px solid #edb0b0; color:#ed2700;padding:19px 20px 19px 48px;margin-top:20px; } .messagebox_blue a, .messagebox_green a,.messagebox_orange a,.messagebox_red a{ color:#333; } /*image*/ .imgborder0{ border:none;} .imgborder1{ border:10px solid #ccc; } .imgborder2{ border:5px solid #777; padding:5px;} .imgborder3{ border:1px solid #ccc; padding:9px;} .imgborder4{border:5px solid #d3ddea;} .imgtext img{ margin-bottom:10px;} .imgtextimgleft{ margin-right:20px; float:left } .imgtextimgright{ margin-left:20px; float:right } .imageshover{ position: relative; margin-left:auto; margin-right:auto;} .imageshoverimg{position: absolute;top: 0; left: 0;z-index:98;} .imageshoverp{ text-align:center; height:40px;line-height:40px; font-size:14px; color:#999; background-color:#000; position: absolute;bottom: 0; left: 0; z-index:99; display:none; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter:alpha(opacity=60); opacity: .6;} /*font color*/ .entry black { color:#000;} .entry .dark{ color:#333;} .entry grey { color:#999;} .entry red { color: #CC0000;} .entry green { color: #339933;} .entry yellow { color: #FFCC00;} .entry orange { color: #FF6600;} .entry blue { color: #003399;} .entry brown { color: #CC6600;} .entry pink { color: #FF3399;} /* toggle */ .toggle-title{ cursor:pointer; } .toggle-title:before { display:inline-block; content:""; width:14px; height:10px; background: url("img/icon.png") no-repeat -215px -2px; } .toggle-des{ display:none; margin-top:20px; margin-bottom:20px; padding-left:20px; } .toggle h6{ font-family:Tahoma , arial, serif; } /*border style*/ .border-style1{ border:5px solid #fff; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:0px 2px 5px #a3a3a3; -webkit-box-shadow:0px 2px 5px #a3a3a3; box-shadow: 0px 2px 5px #a3a3a3;} .border-style2{border:10px solid #dadada;} .border-style3{border:1px solid #dadada; padding:10px;} /* face */ .layout-status p{display:inline-block; } .face{ display:inline-block; width:22px; height:22px; margin-top:-2px; margin-bottom:-5px; background-repeat:no-repeat} .face.crying{ background: url(img/face/face-crying.png);} .face.laughing{ background: url(img/face/face-laughing.png);} .face.sleep{ background: url(img/face/face-sleep.png);} .face.wink{ background: url(img/face/face-wink.png);} .face.embarrassed{ background: url(img/face/face-embarrassed.png);} .face.foot-in-mouth{ background: url(img/face/face-foot-in-mouth.png);} .face.kiss{ background: url(img/face/face-kiss.png);} .face.plain{ background: url(img/face/face-plain.png);} .face.surprise{ background: url(img/face/face-surprise.png);} /* social icons*/ a.social_shortcode{ display:inline-block; width:28px; height:28px; margin:-5px 10px -7px 0; -webkit-transition-duration: 0.20s; -webkit-transition-timing-function: ease-out; -moz-transition-duration: 0.20s; -moz-transition-timing-function: ease-out; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter:alpha(opacity=40); opacity: .9;} a.social_shortcode:hover{-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity: .6;} a.social_shortcode.social_shortcode_facebook { background:url(img/icon/facebook.png) no-repeat 0 -30px; } a.social_shortcode.social_shortcode_twitter { background:url(img/icon/twitter.png) no-repeat 0 -30px; } a.social_shortcode.social_shortcode_youtube { background:url(img/icon/youtube.png) no-repeat 0 -30px; } a.social_shortcode.social_shortcode_googleplus { background:url(img/icon/googleplus.png) no-repeat 0 -30px; } a.social_shortcode.social_shortcode_flickr { background:url(img/icon/flickr.png) no-repeat 0 -30px; } a.social_shortcode.social_shortcode_vimeo { background:url(img/icon/vimeo.png) no-repeat 0 -30px; } a.social_shortcode.social_shortcode_linkedin { background:url(img/icon/linkedin.png) no-repeat 0 -30px; } a.social_shortcode.social_shortcode_pinterest { background:url(img/icon/pinterest.png) no-repeat 0 -30px; } a.social_shortcode.social_shortcode_instagram { background:url(img/icon/instagram.png) no-repeat 0 -30px; } a.social_shortcode.social_shortcode_tumblr { background:url(img/icon/tumblr.png) no-repeat 0 -30px; } a.social_shortcode.social_shortcode_skype { background:url(img/icon/skype.png) no-repeat 0 -30px; } a.social_shortcode.social_shortcode_dribbble { background:url(img/icon/dribbble.png) no-repeat 0 -30px; } a.social_shortcode.social_shortcode_forst { background:url(img/icon/forst.png) no-repeat 0 -30px; } a.social_shortcode.social_shortcode_github { background:url(img/icon/github.png) no-repeat 0 -30px; } a.social_shortcode.social_shortcode_rss { background:url(img/icon/rss.png) no-repeat 0 -30px; } /*gallery*/ .gallery { margin-left:-5px; margin-bottom:15px; } .gallery dl { display:inline-block; margin-left:5px; margin-bottom:5px; } .gallery dl dt{ position:relative; } .gallery dl dt:hover { opacity: .6; } .gallery dl dt:hover:before{ display:block; content:""; width:12px; height:12px; position:absolute; left:50%; top:50%; margin-left:-6px; margin-top:-6px; background:url(img/icon.png) no-repeat -236px 0; } /* --------------------------------------------------------------- 7. page transition (the css is not for ajax animation) ------------------------------------------------------------*/ #logo, #line_type_wrap, #foot,.foot_bg, .content_wrap { -webkit-transition: -webkit-transform .5s; -moz-transition: -moz-transform .5s; transition: transform .5s; } .page-loading { -webkit-transition: opacity .5s; -moz-transition: opacity .5s; transition: opacity .5s; } .page-loading { position: fixed; z-index: 9999; opacity: 0; visibility: hidden; left: 0; top: 0px; right: 0px; bottom: 0px; background-color: #333; } .page-loading-inn { position: relative; width: 100%; height: 100%; } .page-loading-transform, .ux-loading-transform { position: absolute; top: 50%; left: 50%; line-height: 36px; text-align: center; margin-left: -50px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); } .page-loading.visible { opacity: 1; visibility:visible; -webkit-transition: all 1s -moz-transition: all 1s; transition: all 1s; } .page-loading .loading-transform { margin-top: 30px; } .page-loading .ux-loading { background-image: url('img/loading.gif'); margin-top: -56px; display: none; } .no-csstransforms .page-loading .ux-loading { display: block; } .page-loading{ left: 0; } .spinner { width: 60px; height: 60px; margin: auto; position: relative; } .ajaxloading:before, .spinner:before { content: ''; width: 6px; height: 6px; background-color: #ccc; position: absolute; left: 0; top:50%; margin-top: -3px; -webkit-animation: rotateplane 1.2s infinite ease-in-out; -moz-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out; } .page-loading.visible .spinner:before, .liquid-loading-wrap .spinner:before { -webkit-animation: rotateplane 1.2s infinite ease-in-out; -moz-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes rotateplane { 0% { -webkit-transform: translateX(20px) scaleX(1); } 40% { -webkit-transform: translateX(40px) scaleX(1);-webkit-transform-origin:right center; } 53% { -webkit-transform: translateX(40px) scaleX(.4); -webkit-transform-origin:right center; } 55% { -webkit-transform: translateX(40px) scaleX(1); } 85% { -webkit-transform: translateX(20px) scaleX(1);-webkit-transform-origin:left center; } 98% { -webkit-transform: translateX(20px) scaleX(.4);-webkit-transform-origin:left center; } 100% { -webkit-transform: translateX(20px) scaleX(1); } } @-moz-keyframes rotateplane { 0% { -moz-transform: translateX(20px) scaleX(1); } 40% { -moz-transform: translateX(40px) scaleX(1); -moz-transform-origin:right center; } 53% { -moz-transform: translateX(40px) scaleX(.4); -moz-transform-origin:right center; } 55% { -moz-transform: translateX(40px) scaleX(1); } 85% { -moz-transform: translateX(20px) scaleX(1); -moz-transform-origin:left center; } 98% { -moz-transform: translateX(20px) scaleX(.4); -moz-transform-origin:left center; } 100% { -moz-transform: translateX(20px) scaleX(1); } } @keyframes rotateplane { 0% { transform: translateX(20px) scaleX(1); } 40% { transform: translateX(40px) scaleX(1); transform-origin:right center; } 53% { transform: translateX(40px) scaleX(.4); transform-origin:right center; } 55% { transform: translateX(40px) scaleX(1); } 85% { transform: translateX(20px) scaleX(1); transform-origin:left center; } 98% { transform: translateX(20px) scaleX(.4); transform-origin:left center; } 100% { transform: translateX(20px) scaleX(1); } } #foot,.foot_bg { -webkit-transform: translateY(50px); -moz-transform: translateY(50px); transform: translateY(50px); } .content_wrap { -webkit-transform: translateY(570px); -moz-transform: translateY(570px); transform: translateY(570px); } body.get-in #foot, body.get-in .foot_bg, body.get-in .content_wrap { -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } #logo { -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); transform: translateX(-100px); } #line_type_wrap { -webkit-transform: translateX(300px); -moz-transform: translateX(300px); transform: translateX(300px); } body.get-in #logo, body.get-in #line_type_wrap { -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } /* ------------------------------------------- 8. Other -------------------------------------------*/ .wp-caption{} .wp-caption-text{} .sticky{} .gallery-caption{} .bypostauthor{} .alignright{ text-align:left; } .alignleft{ text-align:right; } .aligncenter { text-align: center; } .entry img { height: auto; } .entry img.alignleft{ float:left; margin-right:10px; margin-bottom:10px; } .entry img.alignright{ float:right; margin-left:10px; margin-bottom:10px;} .entry img.aligncenter{ margin:0 auto; } .entry img.alignnone,.entry img.alignleft,.entry img.alignright,.entry img.aligncenter{ height:auto; } .ajax_error{ z-index:999; position:fixed; left:50%; top:50%; width:350px; margin-left:-185px; padding:10px; text-align:center; background-color:rgba(25,25,25,0.6); display: none; } .ajax_error a{ text-decoration:underline; } .bs-slides img{ max-width:none; } /* --------------------------------------------- 9. Default color FONT and COLOUR value ---------------------------------------------*/ /* Page Background */ body { background-color: #000; } /*Highlight color*/ .unit_excerpt p a,.unit_excerpt a.more { color:#cc3300;} .gallery_toolbar>a:hover,.galleria-image-nav-right,.unit_excerpt a.more .moreicon { background-color:#cc3300 } ::selection { background:#cc3300;color:#fff; } ::-moz-selection { background:#cc3300;color:#fff; } ::-webkit-selection { background:#cc3300;color:#fff; } .closeBtn:hover:before { border-right-color:#cc3300; } .content_wrap .entry a, .content_wrap .meta a, .gallery_tip a, .respondbtn, .sucess-tip a, .comment-author a, .tip_con a, #fourofourwrap a, .toggle h6:hover{ color:#cc3300; } /* Content page */ .content_wrap, .gallery_tip { background-color:rgba(255,255,255,0.97); } .content_wrap h1, .gallery_tip h1 { color: #000; } .content_wrap .entry,.jp-controls a { color:#777; } .content_wrap .entry a:hover, .content_wrap .meta a:hover, .gallery_tip a:hover, .sucess-tip a:hover, .comment-author a:hover, .tip_con a:hover{ color:#000; } #galleria_post { background-color: #000;} /* Footer & Navigation */ /* submenu background */ #navi .sub-menu li, #foot { background-color: #222; } @media (max-width: 768px) { #navi { background-color: #222; background-color: rgba(34,34,34,0.95); } #navi>div>ul>li { border-bottom: 1px solid rgba(255,255,255,.05); } #navi>div>ul>li:last-child { border-bottom: none;} } /* Social icons */ .social_a:hover { background-color:#3c5a98; } .social_a.social-facebook:hover { background-color:#3c5a98; } .social_a.social-twitter:hover { background-color:#5fafe0; } .social_a.social-google-plus:hover { background-color:#dd4b39; } .social_a.social-pinterest:hover { background-color:#ca262d; } .social_a.social-tumblr:hover { background-color:#529ecc; } .social_a.social-youtube:hover { background-color: #bb0000; } .social_a.social-linkedin:hover { background-color: #007bb6; } .social_a.social-instagram:hover { background-color: #517fa4; } .social_a.social-dribbble:hover { background-color: #ea4c89; } .social_a.social-weibo:hover { background-color: rgb(230, 22, 45); } .social_a.social-flickr:hover { background-color: #ff0084; } .social_a.social-vimeo:hover { background-color: #aad450; } .social_a.social-vk:hover { background-color: #45668e; } .social_a.social-git:hover { background-color: #333; } .social_a.social-skype:hover { background-color:#12A5F4; } .social_a.social-xing:hover { background-color:#1a7576; } .content_wrap .entry .social_a,.content_wrap .entry .social_a:hover { color: #fff; } /* image caption, audio player button, code wrap */ .jp-controls a,.entry pre { background-color: #f0f0f0; } .caption-text { background-color: rgba(34,34,34,0.95); color: #f0f0f0} /* ------------------------------------------- 10. Retina -------------------------------------------*/ /*Social icons*/ @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* Logo */ .logo_normal{ display:none; } .logo_retina{ display:block; text-align:center; margin-bottom:50px; } .mobileMenu,h2.unit_title a:before{ background-image:url(img/icon-retina.png); -webkit-background-size: 276px 80px; -moz-background-size: 276px 80px; -o-background-size: 276px 80px; -ms-background-size: 276px 80px; background-size: 276px 80px; } /* player */ .mejs-controls .mejs-button button{ background-image:url(img/player/controls_retina.png); background-repeat:no-repeat; -webkit-background-size: 15px 32px; -moz-background-size: 15px 32px; -o-background-size: 15px 32px; -ms-background-size: 15px 32px; background-size: 15px 32px; } /* fullscreen mode panel */ .galleria-image-nav-left, .galleria-image-nav-right, .gallery_toolbar>a{ background-image:url(img/btn_tool_fullscreen_retina.png); background-repeat:no-repeat; -webkit-background-size: 256px 128px; -moz-background-size: 256px 128px; -o-background-size: 256px 128px; -ms-background-size: 256px 128px; background-size:256px 128px; } .gallery_toolbar>a.gallery_play.gallery_pause { background-position: -6px -13px; } .gallery_toolbar>a.gallery_play { background-position: -3px -82px; } .gallery_toolbar>a.tip { background-position: -51px -82px; } .gallery_toolbar>a.tip.tip_close { background-position: -54px -13px; } .galleria-image-nav-left { background-position: -104px -12px; } .galleria-image-nav-right { background-position: -150px 0; } .gallery_toolbar>a.gallery_back, .gallery_toolbar>a.gallery_back_nojax{ background-position: -218px -13px; } }