/* * Author: Umair Khan * Company: PixelArtInc. * Website: http://www.pixelartinc.com/ */ /*******************************************/ /** 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1;} ol, ul { list-style: none;color: #CFD9E2; font: 13px/21px "RobotoRegular",Arial,Helvetica,sans-serif; margin-left:30px;} blockquote, q { quotes: none;} blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*******************************************/ /** FONTS **/ /*******************************************/ @font-face { font-family: 'RobotoRegular'; src: url('fonts/Roboto-Regular-webfont.eot'); src: url('fonts/Roboto-Regular-webfont.eot@#iefix') format('embedded-opentype'), url('fonts/Roboto-Regular-webfont.woff') format('woff'), url('fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'RobotoBold'; src: url('fonts/Roboto-Bold-webfont.eot'); src: url('fonts/Roboto-Bold-webfont.eot@#iefix') format('embedded-opentype'), url('fonts/Roboto-Bold-webfont.woff') format('woff'), url('fonts/Roboto-Bold-webfont.ttf') format('truetype'), url('fonts/Roboto-Bold-webfont.svg#RobotoBold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'RobotoLight'; src: url('fonts/Roboto-Light-webfont.eot'); src: url('fonts/Roboto-Light-webfont.eot@#iefix') format('embedded-opentype'), url('fonts/Roboto-Light-webfont.woff') format('woff'), url('fonts/Roboto-Light-webfont.ttf') format('truetype'), url('fonts/Roboto-Light-webfont.svg#RobotoLight') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'RobotoMedium'; src: url('fonts/Roboto-Medium-webfont.eot'); src: url('fonts/Roboto-Medium-webfont.eot@#iefix') format('embedded-opentype'), url('fonts/Roboto-Medium-webfont.woff') format('woff'), url('fonts/Roboto-Medium-webfont.ttf') format('truetype'), url('fonts/Roboto-Medium-webfont.svg#RobotoMedium') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'RobotoItalic'; src: url('fonts/Roboto-Italic-webfont.eot'); src: url('fonts/Roboto-Italic-webfont.eot@#iefix') format('embedded-opentype'), url('fonts/Roboto-Italic-webfont.woff') format('woff'), url('fonts/Roboto-Italic-webfont.ttf') format('truetype'), url('fonts/Roboto-Italic-webfont.svg#RobotoItalic') format('svg'); font-weight: normal; font-style: normal; } /*******************************************/ /** BASIC **/ /*******************************************/ /** Body **/ body{ min-width: 1070px; background:#fff; color:#000; font:14px Arial, Helvetica, "Trebuchet MS", sans-serif;} /** Heading **/ h1{ font-size:36px;} h2{ font-size:30px;} h3{ font-size:24px;} h4{ font-size:19px;} h5{ font-size:13px;} h6{ font-size:11px;} /** Selection **/ ::-moz-selection { background: #24305d; color: #fff; text-shadow: none; } ::selection { background: #24305d; color: #fff; text-shadow: none; } /** Links **/ a { color: #24a9d0; text-decoration: none; } a:hover { text-decoration: underline; } a:hover, a:active { outline: 0; } /** Clearfix**/ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /*******************************************/ /** HEADER **/ /*******************************************/ .header-wrapper { min-height: 90px; width: 100%; } .header-wrapper header { width: 940px; padding: 0px 10px; margin: 0px auto; } .header-wrapper header .logo { float: left; display: inline-block; margin: 10px 0px 0px; } .header-wrapper header nav { float: right; margin: 39px 0px 0px; } .header-wrapper header nav ul {list-style:none;} .header-wrapper header nav li { margin: 0px 0px 0px 29px; float: left; font: 15px "RobotoLight", Arial, Helvetica, sans-serif; line-height: 20px; } .header-wrapper header nav li a { color: #282828; } .header-wrapper header nav li a:hover, .header-wrapper header nav li a.active { color: #24a9d0; text-decoration: none; } /*******************************************/ /** SLIDER **/ /*******************************************/ .slider-wrapper { height: 400px; width: 100%; position: relative; } .slider-wrapper #slider { height: 400px; width: 100%; overflow: hidden; } .slider-wrapper #slider article { width: 100%; height: 100%; } .slider-wrapper #slider article img { width: 100%; height: 100%; } .slider-wrapper #slider article .caption { position: relative; width: 100%; height: 400px; margin: -400px auto 0px; overflow: hidden; } .slider-wrapper #slider article .caption > div { background: url(images/description-bg.png); float: right; padding: 45px 45px; width: 50%; position: absolute; top: 135px; right: 0px; } .slider-wrapper #slider article .caption > div div { width: 360px; float: left; } .slider-wrapper #slider article .caption h2 { text-shadow: 1px 1px 0px #31373f; color: #fff; font-family: "RobotoLight", Arial, Helvetica, sans-serif; margin: 0px 0px 15px; } .slider-wrapper #slider article .caption p { text-shadow: 1px 1px 0px #31373f; color: #cfd9e2; font: "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 21px; } .slider-wrapper .slider-nav { height: 400px; position: relative; width: 940px; margin: -400px auto 0px; } .slider-wrapper .slider-nav div { background: #fff; width: 70px; height: 180px; position: absolute; top: 138px; right: 0px; z-index: 100; } .slider-wrapper .slider-nav .next { height: 50%; width: 100%; background: url(images/slider-arrow-right.png) center no-repeat; display: block; border-bottom: 1px solid #cfd9e2; } .slider-wrapper .slider-nav .prev { height: 50%; width: 100%; background: url(images/slider-arrow-left.png) center no-repeat; display: block; } .slider-wrapper .slider-nav .next:hover { text-decoration: none; background-position: 53% center; } .slider-wrapper .slider-nav .prev:hover { text-decoration: none; background-position: 47% center; } /*******************************************/ /** HOME CONTENT **/ /*******************************************/ .col-left { width: 60%; float: left; } .col-left .top { background: #fff; border-bottom: 1px solid #e1e6ec; overflow: hidden; } .col-left .bottom { background: #f6f8fa; overflow: hidden; padding: 0px 0px 0px; } .col-left .bottom article { width: 595px; float: right; padding: 45px 45px 30px 0px; } .col-left .top > div { width: 640px; float: right; } .col-left .top article.left-box { width: 254px; border-right: 1px solid #e7eaec; float: left; padding: 40px 45px 40px 0px; } .col-left .top article.right-box { width: 255px; float: right; padding: 40px 45px 40px 0px; } .col-left .top h4 { color: #313e4b; font: 19px "RobotoRegular", Arial, Helvetica, sans-serif; background: url(images/heading-bg.png) left bottom no-repeat; padding: 0px 0px 14px 0px; margin: 0px 0px 14px 0px; } .col-left .top p { margin: 0px 0px 15px; color: #627281; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 21px; } .col-left .top p strong { font-family: "RobotoMedium"; } .col-left .top a { color: #2fb2d8; font: 12px "RobotoMedium", Arial, Helvetica, sans-serif; line-height: 20px; } .col-left .bottom h3 { color: #313e4b; font: 24px "RobotoRegular", Arial, Helvetica, sans-serif; margin: 0px 0px 20px 0px; } .col-left .bottom p { margin: 0px 0px 20px; color: #627281; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 21px; } .col-left .bottom p strong { font-family: "RobotoMedium"; } .col-left .bottom a { color: #2fb2d8; font: 12px "RobotoMedium", Arial, Helvetica, sans-serif; line-height: 20px; } .col-right { width: 40%; float: right; background: #f7f8fa; padding: 0px 0px 30px; } .col-right .top { background: #333c4d url(images/home-tab-bg.png) repeat-x; margin: 0px 0px 10px; height:410px; } .col-right .top article { padding: 30px 10px 30px 44px; width: 350px; min-height: 266px; height:285px; } .col-right .top h4 { text-shadow: 1px 1px 0px #29303c; color: #fff; font: 19px "RobotoRegular", Arial, Helvetica, sans-serif; background: url(images/heading-bg.png) left bottom no-repeat; padding: 0px 0px 14px 0px; margin: 0px 0px 14px 0px; } .col-right .top span { text-shadow: 1px 1px 0px #29303c; color: #bac6d2; font: 11px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 20px; } .col-right .top h5 { text-shadow: 1px 1px 0px #29303c; color: #fff; font: 13px "RobotoMedium", Arial, Helvetica, sans-serif; line-height: 20px; } .col-right .top p { text-shadow: 1px 1px 0px #29303c; color: #cfd9e2; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 21px; } .col-right .top article div { background: url(images/heading-bg.png) bottom left no-repeat; padding: 0px 0px 20px 0px; margin: 0px 0px 20px 0px; } .col-right .top article div:last-child { background: none; margin: 0; } .col-right .top .tabs { height: 55px; background: #252c39; padding: 0px 0px 0px 30px; } .col-right .top .tabs h5 { text-shadow: 1px 1px 0px #29303c; cursor: pointer; color: #a0a7b4; float: left; padding: 22px 10px 20px 0px; margin: 0px 10px 0px 0px; background: url(images/separator.png) right center no-repeat; } .col-right .top .tabs h5.current { color: #fff; } .col-right .top .tabs h5:last-child { background: none; } .col-right .top .tweet_list li { text-shadow: 1px 1px 0px #29303c; padding: 0px 0px 15px; margin: 0px 0px 15px; background: url(images/heading-bg.png) left bottom no-repeat; } .col-right .top .tweet_time { display: block; } .col-right .top .tweet_time a { color: #a2abba; font-size: 11px; } .col-right .top .tweet_text { text-shadow: 1px 1px 0px #282f3b; color: #cfd9e2; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 21px; } .col-right .top .tweet_text a { color: #88caed; } .col-right .bottom { background: #4bbcdd; min-height: 175px; } .col-right .bottom article { background: #4bbcdd; padding: 27px 10px 19px 44px; width: 315px; background: url(images/home-catalog-box-bg.png) left center no-repeat; } .search-2{background: #4bbcdd; min-height: 175px;} .search-2 .col-right{float: left; width: 100%;} .col-right .bottom article h3 { margin: 0px 0px 20px; font: 22px "RobotoMedium", Arial, Helvetica, sans-serif; color: #fff; text-shadow: 1px 1px 0px #2e7286; } .col-right .bottom article p { margin: 0px 0px 20px; font: 14px "RobotoRegular", Arial, Helvetica, sans-serif; color: #fff; text-shadow: 1px 1px 0px #2e7286; } .col-right .bottom article a.download { display: block; width: 135px; height: 35px; background: url(images/download.png) no-repeat; } .col-right .logos {background-color:#F6F8FA;} #home-cols { width: 940px; padding: 40px 10px; margin: 0px auto; overflow: hidden; } #home-cols article { float: left; width: 300px; margin-right: 20px; } #home-cols article h4 { color: #313e4b; font: 19px "RobotoRegular", Arial, Helvetica, sans-serif; background: url(images/heading-bg.png) left bottom no-repeat; padding: 0px 0px 14px 0px; margin: 0px 0px 14px 0px; } #home-cols article p { margin: 0px 0px 15px; color: #627281; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 21px; } #home-cols article p strong { font-family: "RobotoMedium"; color: #475664; } #home-cols article a { color: #2fb2d8; font: 12px "RobotoMedium", Arial, Helvetica, sans-serif; line-height: 20px; } #home-cols article:last-child { margin-right: 0px; } /*******************************************/ /** PAGE HEADER **/ /*******************************************/ .page-header-wrapper { width: 100%; overflow: hidden; height: 160px; background: url(images/page-header.png); margin: 0px 0px 40px; } .page-header-wrapper_about { width: 100%; overflow: hidden; height: 160px; background: url(images/page-header2.jpg); margin: 0px 0px 40px; } .page-header-wrapper_contact { width: 100%; overflow: hidden; height: 160px; background: url(images/page-header3.jpg); margin: 0px 0px 40px; } #page-header { width: 44%; height: 160px; background: url(images/description-bg.png); } #page-header div { width: 380px; float: right; } #page-header h1 { color: #fff; font: 30px "RobotoLight", Arial, Helvetica, sans-serif; line-height: 160px; } /*******************************************/ /** CONTENT **/ /*******************************************/ .content-left-wrapper { width: 60%; float: left; } #content { width: 585px; padding: 0px 45px 0px 10px; float: right; } #content article { border-bottom: 1px solid #eff2f5; padding: 0px 0px 35px; margin: 0px 0px 35px; } #content article:last-child { border-bottom: 0; } #content article .post-title { color: #313e4b; font: 19px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 30px; } #content article .post-title a { color: #313e4b; } #content article .post-title a:hover { text-decoration: none; } #content article .post-meta { padding: 0px 0px 15px; margin: 0px 0px 15px; background: url(images/heading-bg.png) left bottom no-repeat; color: #627281; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; } #content article .post-meta a { color: #24a9d0; } #content article .post-content p { margin: 0px 0px 25px; color: #627281; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 22px; } #content article .post-content p a { color: #24a9d0; } #content article .post-content strong { font-family: "RobotoMedium"; color: #475664; } #content article .post-content em { font-family: "RobotoItalic"; color: #919191; } #content article .post-content h4 { color: #313e4b; margin: 0px 0px 25px; font: 15px "RobotoRegular", Arial, Helvetica, sans-serif; } #content article .post-content a.alignleft { line-height: 0px; padding: 6px; border-right: 1px solid #e5e8ee; border-left: 1px solid #e5e8ee; border-bottom: 2px solid #e5e8ee; float: left; margin: 0px 20px 18px 0px; } #content article .post-content a.alignright { line-height: 0px; padding: 6px; border-right: 1px solid #e5e8ee; border-left: 1px solid #e5e8ee; border-bottom: 2px solid #e5e8ee; float: right; margin: 0px 0px 18px 20px; } #content article .post-content a.noalign { line-height: 0px; padding: 6px; border-right: 1px solid #e5e8ee; border-left: 1px solid #e5e8ee; border-bottom: 2px solid #e5e8ee; } #content article .read-more { color: #24a9d0; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; } .content-right-wrapper { width: 40%; float: right; } /*******************************************/ /** AUTHOR **/ /*******************************************/ #author { overflow: hidden; width: 100%; background: url(images/author-bg.png); margin: 0px 0px 35px; } #author article { width: 550px; padding: 25px 80px 25px 0px; height: 142px; float: right; } #author article h4 { color: #313e4b; text-shadow: 1px 1px 0px #fff; margin: 0px 0px 20px; font: 17px "RobotoRegular", Arial, Helvetica, sans-serif; } #author article .avatar { margin: 0px 22px 0px 0px; width: 103px; height: 103px; display: block; float: left; } #author article .avatar img { width: 93px; height: 93px; border: 4px solid #fff; outline: 1px solid #e5e8ee; } #author article .bio { width: 415px; float: right; } #author article .bio h5 { color: #1f9bbf; text-shadow: 1px 1px 0px #fff; font: 15px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 22px; } #author article .bio h5 a { color: #1f9bbf; } #author article .bio p { color: #627281; text-shadow: 1px 1px 0px #fff; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 22px; margin: 0px 0px 17px; } #author article .bio .author-social { display: block; } #author article .bio .author-social a.fb { background: url(images/author-social.png) -29px center no-repeat; width: 19px; height: 17px; display: inline-block; margin-right: 10px; } #author article .bio .author-social a.tw { background: url(images/author-social.png) left center no-repeat; width: 19px; height: 17px; display: inline-block; margin-right: 10px; } #author article .bio .author-social a.su { background: url(images/author-social.png) right center no-repeat; width: 17px; height: 17px; display: inline-block; } /*******************************************/ /** COMMENTS **/ /*******************************************/ #comments { width: 550px; padding: 0px 80px 0px 0px; float: right; margin: 0px 0px 40px; } #comments h4 { color: #313e4b; font: 16px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 24px; margin: 0px 0px 25px; } #comments > ul { border-bottom: 1px solid #e9ebed; margin: 0px 0px 25px; } #comments > ul li { margin: 0px 0px 25px; overflow: hidden; } #comments ul li .comment a.avatar { float: left; width: 60px; height: 60px; margin-right: 20px; padding: 4px; background: #fff; border-right: 1px solid #e5e8ee; border-left: 1px solid #e5e8ee; border-bottom: 2px solid #e5e8ee; } #comments ul li .comment a.avatar img { width: 100%; height: 100%; } #comments ul li .comment div.text { float: right; position: relative; width: 450px; } #comments ul li .comment h5 { font: 15px "RobotoMedium", Arial, Helvetica, sans-serif; color: #24a9d0; } #comments ul li .comment p { font: 12px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 20px; color: #555555; } #comments ul li .comment span { font: 12px "RobotoBold", Arial, Helvetica, sans-serif; line-height: 24px; } #comments ul li .comment .reply { color: #24a9d0; position: absolute; top: 0px; right: 0px; } #comments > ul {} #comments > ul > li {} #comments > ul > li .comment { position: relative; } #comments > ul .line-1 { height: 100%; background: #fff; border-left: 1px solid #dedede; width: 10px; position: absolute; top: 80px; left: 30px; } #comments > ul .children { position: relative; padding-left: 20px; margin-left: 30px; border-left: 1px solid #dedede; } #comments > ul .children .line { height: 100%; background: #fff; border-top: 1px solid #dedede; width: 10px; position: absolute; top: 65px; left: -1px; } #comments > ul .children .comment { padding: 30px 0px 0px; } #comments > ul .children .comment div.text { width: 399px; } #comments form {} #comments form fieldset { margin: 0px 0px 20px; overflow: hidden; } #comments form .field { font: 12px "RobotoRegular", Arial, Helvetica, sans-serif; color: #627281; border: 1px solid #caced3; background: #fff; outline: none; width: 180px; float: left; margin-right: 20px; padding: 10px; line-height: 18px; } #comments form textarea { font: 12px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 18px; color: #627281; border: 1px solid #caced3; background: #fff; outline: none; width: 515px; padding: 10px; height: 100px; resize: none; } #comments form .submit { color: #fff; text-shadow: 1px 1px 0px #0e7fc1; cursor: pointer; background: url(images/blue-btn-big.png) center top no-repeat; width: 209px; height: 53px; margin-right: 10px; border: none; float: right; } #comments form .submit:hover { background-position: center bottom; } /*******************************************/ /** SIDEBAR **/ /*******************************************/ .sidebar-wrapper { width: 38%; float: right; } .search-wrapper { margin: 0px 0px 35px; } .search-wrapper form { width: 244px; float: left; margin: 35px 0px 0px 30px; } .search-wrapper form fieldset { position: relative; } .search-wrapper form .field { width: 199px; background: url(images/searc-field.png) no-repeat; height: 22px; padding: 10px 25px 10px 10px; line-height: 22px; border: none; outline: none; color: #fff; font: 12px "RobotoRegular", Arial, Helvetica, sans-serif; } .search-wrapper form .search-btn { cursor: pointer; top: 13px; right: 20px; position: absolute; width: 17px; height: 17px; background: url(images/search-btn.png) no-repeat; border: none; outline: none; } #sidebar { width: 275px; float: left; } #sidebar > div { margin: 0px 0px 40px; } #sidebar h4 { color: #313e4b; margin: 0px 0px 20px; font: 18px "RobotoRegular", Arial, Helvetica, sans-serif; } #sidebar address { color: #627281; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 22px; background: url(images/heading-bg.png) left bottom no-repeat; padding: 0px 0px 15px; margin: 0px 0px 15px; } #sidebar p { color: #627281; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 22px; } #sidebar p strong { font-family: "RobotoMedium"; color: #3a4754; } #sidebar p a { color: #24a9d0; } #sidebar ul {} #sidebar ul li { background: url(images/sidebar-bullets.png) left center no-repeat; padding: 0px 0px 0px 25px; margin: 0px 0px 20px; color: #54515c; font: 15px "RobotoRegular", Arial, Helvetica, sans-serif; } #sidebar ul li a { color: #54515c; } #sidebar ul li a:hover { color: #24a9d0; text-decoration: none; } #sidebar ul li span { color: #928e8e; font: 11px "RobotoLight", Arial, Helvetica, sans-serif; display: inline-block; margin: 0px 0px 0px 5px; vertical-align: 5px; } #sidebar .flickr a { display: inline-block; width: 63px; height: 63px; margin: 0px 14px 15px 0px; padding: 6px; border-left: 1px solid #e5e8ee; border-bottom: 2px solid #e5e8ee; border-right: 1px solid #e5e8ee; } #sidebar .flickr a img { width: 100%; height: 100%; } /*******************************************/ /** MAP **/ /*******************************************/ #map { width: 100%; overflow: hidden; } #map_canvas { width: 100%; height: 500px; } /*******************************************/ /** ABOUT **/ /*******************************************/ #about {} #about h4 { color: #313e4b; font: 19px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 20px; background: url(images/heading-bg.png) left bottom no-repeat; padding: 0px 0px 15px; margin: 0px 0px 15px; } #about p { margin: 0px 0px 25px; color: #475664; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 22px; } #about p a { color: #24a9d0; } #about strong { font-family: "RobotoMedium"; color: #475664; } #about em { font-family: "RobotoItalic"; color: #919191; } #about a.alignleft { display: block; padding: 6px; border-right: 1px solid #e5e8ee; border-left: 1px solid #e5e8ee; border-bottom: 2px solid #e5e8ee; float: left; margin: 0px 20px 15px 0px; } #about ul li { background: url(images/sidebar-bullets.png) left center no-repeat; padding: 0px 0px 0px 25px; margin: 0px 0px 20px; color: #54515c; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; } #about .content-right-wrapper { width: 50%; float: right; } #about .content-left-wrapper { width: 50%; float: left; } #about-right { width: 435px; float: left; padding: 0px 10px 0px 45px; } #about-right-b { width: 455px; float: left; padding: 25px 10px 0px 25px; position: relative; } #about-right-b h4 { color: #fff; text-shadow: 1px 1px 0px #15181e; padding: 0; background: none; } #about-left { width: 435px; float: right; padding: 0px 45px 0px 10px; } #about .test-wrapper { height: 179px; background: url(images/test-bg.png); overflow: hidden; margin: 0px 0px 50px 45px; } #testimonial p { margin: 0px 0px 15px; color: #cfd9e2; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; text-shadow: 1px 1px 0px #15191f; line-height: 22px; padding: 0px 0px 0px 20px; background: url(images/qoute.png) left top no-repeat; } #testimonial span { float: right; color: #a2abba; text-shadow: 1px 1px 0px #15191f; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 22px; } #testimonial article { padding: 0px 120px 0px 0px; } .test-arrows { background: #fff; width: 70px; height: 179px; position: absolute; top: 0px; right: 0px; z-index: 100; } .test-arrows .next { height: 50%; width: 100%; background: url(images/slider-arrow-right.png) center no-repeat; display: block; border-bottom: 1px solid #cfd9e2; } .test-arrows .prev { height: 50%; width: 100%; background: url(images/slider-arrow-left.png) center no-repeat; display: block; } /*******************************************/ /** JOIN **/ /*******************************************/ #join { width: 100%; min-height: 150px; border-top: 1px solid #e9ebed; border-bottom: 1px solid #e9ebed; } #join section { width: 960px; padding: 50px 0px; margin: 0px auto; } #join section h3 { margin: 0px 0px 10px; color: #313e4b; font: 24px "RobotoRegular", Arial, Helvetica, sans-serif; } #join section p { color: #627281; font: 14px "RobotoRegular", Arial, Helvetica, sans-serif; } #join section p em { font-family: "RobotoItalic"; } #join section a.joinus { display: block; background: url(images/blue-btn-small.png) center top; width: 174px; height: 61px; text-align: center; font: 16px "RobotoBold", Arial, Helvetica, sans-serif; line-height: 61px; float: right; color: #fff; text-shadow: 1px 1px 0px #1183c2; } #join section a.joinus:hover { background-position: center bottom; } #join section div { float: left; } /*******************************************/ /** OUR TEAM **/ /*******************************************/ #our-team { background: #f0f3f6; } #our-team section { width: 960px; min-height: 445px; padding: 40px 0px 0px; margin: 0px auto; } #our-team h4 { color: #313e4b; font: 19px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 20px; background: url(images/heading-bg.png) left bottom no-repeat; padding: 0px 0px 15px; margin: 0px 0px 15px; } #our-team ul li { width: 425px; float: left; margin: 0px 90px 50px 0px; overflow: hidden; } #our-team ul li:nth-child(2n) { margin-right: 0; } #our-team h5 { color: #313e4b; font: 14px "RobotoMedium", Arial, Helvetica, sans-serif; line-height: 22px; } #our-team span { color: #3f4a60; font: 12px "RobotoItalic", Arial, Helvetica, sans-serif; line-height: 12px; margin: 0px 0px 15px; display: block; } #our-team p { color: #4e5c6a; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 21px; } #our-team a.avatar { line-height: 0px; background: #fff; display: block; padding: 6px; border-left: 1px solid #d7dde5; border-right: 1px solid #d7dde5; border-bottom: 2px solid #d7dde5; float: left; margin: 0px 20px 0px 0px; } #our-team .text { float: left; width: 285px; } /*******************************************/ /** PORTFOLIO HEADER **/ /*******************************************/ #portfolio-header { height: 110px; border-bottom: 1px solid #dde3e8; margin: -40px 0px 0px; } #portfolio-header section { width: 940px; padding: 27px 10px; margin: 0px auto; } #portfolio-header h4 { color: #394755; font: 19px "RobotoRegular", Arial, Helvetica, sans-serif; float: left; line-height: 60px; } #portfolio-header .portfolio-arrows { width: 100px; height: 50px; border: 1px solid #e5e8ee; float: right; margin: 1px 0px 0px; } #portfolio-header .portfolio-arrows span { background: url(images/separatoe-light.png) right center no-repeat; display: inline-block; } #portfolio-header .portfolio-arrows .next { width: 46px; height: 50px; display: inline-block; background: url(images/portfolio-arrows2.png) center 18px no-repeat; } #portfolio-header .portfolio-arrows .next:hover { background-position: center -19px; text-decoration: none; } #portfolio-header .portfolio-arrows .prev { width: 50px; height: 50px; display: inline-block; background: url(images/portfolio-arrows.png) center 18px no-repeat; } #portfolio-header .portfolio-arrows .prev:hover { background-position: center -19px; text-decoration: none; } #portfolio-header .portfolio-menu { border: 1px solid #e5e8ee; float: left; } #portfolio-header .portfolio-menu a { padding: 0px 15px; background: url(images/separatoe-light.png) right center no-repeat; color: #636169; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 50px; } #portfolio-header .portfolio-menu a:hover, #portfolio-header .portfolio-menu a.selected, #portfolio-header .portfolio-menu a.active { color: #24a9d0; text-decoration: none; } #portfolio-header .portfolio-menu a:last-child { background: none; } #portfolio-header .portfolio-view { width: 100px; height: 50px; border: 1px solid #e5e8ee; float: right; } #portfolio-header .portfolio-view span { background: url(images/separatoe-light.png) right center no-repeat; display: inline-block; } #portfolio-header .portfolio-view .list { width: 46px; height: 50px; display: inline-block; background: url(images/list-view.png) center 19px no-repeat; } #portfolio-header .portfolio-view .grid { width: 48px; height: 50px; display: inline-block; background: url(images/grid-view.png) center 17px no-repeat; } #portfolio-header .portfolio-view .list:hover, #portfolio-header .portfolio-view .list.active { background-position: center -30px; text-decoration: none; } #portfolio-header .portfolio-view .grid:hover, #portfolio-header .portfolio-view .grid.active { background-position: center -29px; text-decoration: none; } /*******************************************/ /** PORTFOLIO SINGLE **/ /*******************************************/ #portfolio { width: 100%; background: #e9edf0; padding: 40px 0px; } #portfolio section { width: 940px; padding: 0px 10px; margin: 0px auto; } #portfolio section.list-view article { overflow: hidden; padding: 0px 0px 35px; margin: 0px 0px 35px; border-bottom: 1px solid #dbdddf; } #portfolio section.list-view article:last-child { border-bottom: 0px; margin: 0; } #portfolio section.list-view article figure { float: left; width: 620px; padding: 6px; background: #fff; border-left: 1px solid #e5e8ee; border-right: 1px solid #e5e8ee; border-bottom: 2px solid #e5e8ee; height: 380px; margin-right: 36px; } #portfolio section.list-view article figure img { width: 100%; height: 100%; } #portfolio section.list-view article div { float: right; width: 270px; } #portfolio section.list-view article div h4 { color: #313e4b; font: 19px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 20px; background: url(images/heading-bg.png) left bottom no-repeat; padding: 0px 0px 15px; margin: 0px 0px 15px; } #portfolio section.list-view article div p { text-shadow: 1px 1px 0px #fff; color: #4e5c6a; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 21px; margin: 0px 0px 25px; } #portfolio section.list-view article div a.more-detail { background: url(images/button-gray.png) center top no-repeat; width: 204px; height: 53px; display: block; text-align: center; text-shadow: 1px 1px 0px #1f2022; font: 14px "RobotoBold", Arial, Helvetica, sans-serif; color: #fff; line-height: 53px; } #portfolio section.list-view article div a.more-detail:hover { text-decoration: none; background-position: center bottom; } #portfolio section.grid-view { overflow: hidden; } #portfolio section.grid-view article { /*float: left;*/ width: 220px; height: 220px; margin: 0px 10px 20px 5px; } /*#portfolio section.grid-view article:nth-child(4n) { margin-right: 0; }*/ #portfolio section.grid-view article figure { width: 206px; height: 206px; background: #fff; border-left: 1px solid #d3d9e1; border-right: 1px solid #d3d9e1; border-bottom: 2px solid #d3d9e1; padding: 6px; } #portfolio section.grid-view article figure img { height: 100%; width: 100%; } #portfolio section.grid-view article div { display: none !important; } #portfolio-pagination { height: 85px; } #portfolio-pagination section { width: 940px; padding: 0px 10px; margin: 0px auto; } #portfolio-pagination ul { text-align: center; line-height: 85px; } #portfolio-pagination ul li { display: inline; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; color: #636169; line-height: 13px; } #portfolio-pagination ul li a { color: #636169; border-right: 1px solid #e4e4e4; padding: 0px 20px; } #portfolio-pagination ul li a:hover, #portfolio-pagination ul li a.active { color: #24a9d0; text-decoration: none } /*******************************************/ /** PORTFOLIO SINGLE **/ /*******************************************/ #portfolio-single { width: 100%; background: #e9edf0; padding: 40px 0px; } #portfolio-single .project-image { width: 936px; height: 536px; margin: 0px auto; padding: 6px; background: #fff; border-right: 1px solid #e5e8ee; border-bottom: 2px solid #e5e8ee; border-left: 1px solid #e5e8ee; } #portfolio-single .project-image img { width: 100%; height: 100%; } #portfolio-single .content-right-wrapper { background: #fff; margin: 25px 0px 0px; } #project-detail { width: 585px; padding: 25px 45px 25px 10px; float: right; } #project-detail h4 { color: #313e4b; font: 19px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 20px; background: url(images/heading-bg.png) left bottom no-repeat; padding: 0px 0px 15px; margin: 0px 0px 15px; } #project-detail article { width: 270px; float: left; margin-right: 20px; } #project-detail article p { margin: 0px 0px 25px; color: #475664; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 22px; } #project-detail article p a { color: #24a9d0; } #project-detail article strong { font-family: "RobotoMedium"; color: #475664; } #project-detail article em { font-family: "RobotoItalic"; color: #919191; } #project-detail article:last-child { margin-right: 0; } #author-detail { overflow: hidden; } #author-detail article { padding: 40px 10px 40px 40px; width: 290px; float: left; } #author-detail article div { overflow: hidden; } #author-detail p { color: #627281; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 28px; width: 220px; float: right; } #author-detail strong { color: #384756; font: 13px "RobotoMedium", Arial, Helvetica, sans-serif; float: left; display: inline-block; width: 70px; line-height: 28px; } #author-detail p a { color: #24a9d0; } #related-project { width: 940px; padding: 35px 10px 0px; margin: 0px auto; border-top: 1px solid #dbdddf; } #related-project h4 { color: #313e4b; font: 19px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 20px; background: url(images/heading-bg.png) left bottom no-repeat; padding: 0px 0px 15px; margin: 0px 0px 15px; } #related-project li { width: 220px; float: left; margin-right: 20px; height: 220px; } #related-project li:last-child { margin-right: 0; } #related-project li a { line-height: 0px; display: block; padding: 6px; background: #fff; border-right: 1px solid #e5e8ee; border-bottom: 2px solid #e5e8ee; border-left: 1px solid #e5e8ee; } #related-project img { width: 206px; height: 206px; } /*******************************************/ /** BOTTOM **/ /*******************************************/ .bottom-wrapper { background: #333c4d url(images/home-tab-bg.png) repeat-x; min-height: 300px; width: 100%; overflow: hidden; } #bottom { width: 960px; margin: 0px auto; } #bottom article { float: left; padding: 45px 0px; min-height: 212px; } #bottom article.bottom-text-widget { width: 300px; margin: 0px 20px 0px 0px; } #bottom article.bottom-tweet-widget { width: 300px; padding-right: 35px; margin: 0px 54px 0px 0px; background: url(images/bottom-separator.png) right center repeat-y; } #bottom article.bottom-subscribe-widget { width: 230px; } #bottom article h4 { text-shadow: 1px 1px 0px #282f3b; color: #fff; font: 16px "RobotoRegular", Arial, Helvetica, sans-serif; background: url(images/heading-bg.png) left bottom no-repeat; padding: 0px 0px 14px 0px; margin: 0px 0px 14px 0px; } #bottom article p { text-shadow: 1px 1px 0px #282f3b; color: #cfd9e2; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 21px; margin: 0px 0px 20px 0px; } #bottom article p strong { font-family: "RobotoMedium"; color: #fff; } #bottom article fieldset { position: relative; margin: 0px 0px 10px; } #bottom article input.feild { outline: none; color: #a5acb8; font: 12px "RobotoRegular", Arial, Helvetica, sans-serif; background: url(images/subscribe-fields.png) no-repeat; width: 169px; height: 23px; padding: 10px 51px 10px 10px; line-height: 23px; border: none; } #bottom article input.ok-btn { outline: none; position: absolute; top: 0px; right: 0px; cursor: pointer; background: url(images/subscribe-btn.png) no-repeat; width: 41px; height: 41px; line-height: 41px; border: none; color: #fff; text-shadow: #1685bb; } #bottom article .tweet_list li { padding: 0px 0px 15px; margin: 0px 0px 15px; background: url(images/heading-bg.png) left bottom no-repeat; } #bottom article .tweet_list li:last-child { background: none; } #bottom article .tweet_time { display: block; text-shadow: 1px 1px 0px #282f3b; } #bottom article .tweet_time a { color: #a2abba; font-size: 11px; } #bottom article .tweet_text { text-shadow: 1px 1px 0px #282f3b; color: #cfd9e2; font: 13px "RobotoRegular", Arial, Helvetica, sans-serif; line-height: 21px; } #bottom article .tweet_text a { color: #88caed; } /*******************************************/ /** FOOTER **/ /*******************************************/ .footer-wrapper { background: #202732; padding: 10px 0px; overflow: hidden; border-top: 1px solid #3d495d; } .footer-wrapper footer { width: 960px; padding: 0px 0px; margin: 0px auto; } .footer-wrapper footer p { color: #cfd9e2; font: 13px "RobotoMedium", Arial, Helvetica, sans-serif; line-height: 20px; text-shadow: 1px 1px 0px #101319; } .footer-wrapper footer .right p {font-size:13px; padding-top:42px;} .footer-wrapper footer .right p A { text-decoration:underline;} .footer-wrapper footer a { color: #cfd9e2; } .footer-wrapper footer p.copyright-text { margin: 0px 0px 20px; } .footer-wrapper footer p.copyright-text a.logo { border-right: 1px solid #555d67; margin-right: 15px; } .footer-wrapper footer p.copyright-text a.logo img { margin-right: 15px; vertical-align: middle; } .footer-wrapper footer .footer-nav { list-style:none;} .footer-wrapper footer .footer-nav li { float: left; padding: 0px 15px 0px 0px; margin: 0px 15px 0px 0px; background: url(images/separator.png) right center no-repeat; } .footer-wrapper footer .footer-nav li:last-child { padding: 0; margin: 0; background: none; } .footer-wrapper footer .social { margin: 0px 0px 20px; overflow: hidden; } .footer-wrapper footer .social li { display: inline; margin-left: 15px; } .footer-wrapper footer .social li a { font-size: 0; line-height: 0; display: inline-block; width: 19px; height: 19px; } .footer-wrapper footer .social li a:hover { text-decoration: underline; } .footer-wrapper footer .social li a.fb { background: url(images/social.png) right center no-repeat; } .footer-wrapper footer .social li a.tw { background: url(images/social.png) -35px center no-repeat; } .footer-wrapper footer .social li a.vm { background: url(images/social.png) left center no-repeat; } .footer-wrapper footer div.left { float: left; width: 470px; } .footer-wrapper footer div.right { float: right; width: 470px; text-align: right; } /*******************************************/ /** ISOTOPE **/ /*******************************************/ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; } .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; }