/*----- Global reset ---------------------------------------------------------------*/ html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, label, p, blockquote, th, td { margin:0;padding:0; } table { border-collapse:collapse;border-spacing:0; } fieldset, img { border:0; } address, caption, cite, code, dfn, em, strong, th, var { font-style:normal;font-weight:normal; } strong { font-weight:bold; } ol, ul { list-style:none; } caption, th { text-align:left; } h1, h2, h3, h4, h5, h6 { font-size:100%;font-weight:normal; } q:before, q:after { content:''; } abbr, acronym { border:0; } /*----- Clearfix ------------------------------------------------------------------*/ .clearfix:after, .section:after, .fixed:after, .row:after { content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0; } .clearfix, .section, .fixed, .row { display: inline-block; } html[xmlns] .clearfix, html[xmlns] .section, html[xmlns] .fixed, html[xmlns] .row { display: block; } * html .clearfix, * html .section, * html .fixed, * html .row { height: 1%; } * { outline: none; } h1, h1 span { font-size:22px;line-height:28px; } h2, h2 span { font-size:18px;line-height:26px; } h3, h3 span { font-size:16px;line-height:24px; } h4, h4 span { font-size:14px;line-height:22px; } h5, h5 span { font-size:13px;line-height:20px; } h6, h6 span { font-size:10px;line-height:18px; } blockquote, blockquote p { font-size:24px;line-height:26px; } h1 span, h2 span, h3 span, h4 span, h5 span, h6 span { color:#858585; } h1, h1 span, h2, h2 span, h3,h3 span, h4, h4 span, h5, h5 span, h6, h6 span, blockquote, blockquote p, blockquote span, #header .nav { font-family: 'Open Sans', sans-serif; } h1, h1 span, h2, h2 span, h3,h3 span, h4, h4 span, h5, h5 span, h6, h6 span { margin-bottom:10px; } body, p, span, div { font-family: 'Open Sans', sans-serif;font-size:12px;line-height:18px;color:#1e1b1b; } p { margin-bottom:15px;color:#666565;font-weight:300;font-size:13px; } a { color:#383838;text-decoration:none; } a:link { } a:visited { } a:hover { text-decoration:none; } a:active { color:#383838; } ul li { color:#666565;font-size:13px;margin-bottom:5px; } /*----- General ----------------------------------------------------------------*/ body { background:url('images/back-body.png'); } .last { margin-right:0 !important; } .col-340 { width:340px;float:left;margin-right:20px; } .col-360 { width:360px;float:left;margin-right:20px; } .col-320 { width:320px;float:left;margin-right:30px; } .col-210 { width:210px;float:left;margin-right:20px; } .col-420 { width:420px;float:left;margin-right:50px; } .col-520 { width:520px;float:left;margin-right:50px; } .col-200 { width:200px;float:left;margin-right:20px; } .col-255 { width:255px;float:left;margin-right:20px; } .col-110 { width:110px;float:left;margin-right:20px; } .m-bot-30 { margin-bottom:30px !important; } .m-bot-20 { margin-bottom:20px !important; } .m-bot-10 { margin-bottom:10px !important; } .m-top-30 { margin-top:30px !important; } .m-top-20 { margin-top:20px !important; } .m-top-10 { margin-top:10px !important; } .m-top-50 { margin-top:50px !important; } .m-top-60 { margin-top:60px !important; } .p-top-30 { padding-top:30px !important; } .p-top-35 { padding-top:35px !important; } .p-top-40 { padding-top:40px !important; } .p-top-45 { padding-top:45px !important; } .p-top-20 { padding-top:20px !important; } .p-top-10 { padding-top:10px !important; } .p-top-50 { padding-top:50px !important; } .p-top-60 { padding-top:60px !important; } .hr { background:#ececec;margin:30px 0;height:1px; } /*----- Content ----------------------------------------------------------------*/ #layout { position:relative;width:970px;margin:50px auto 0 auto;height:750px; } .content { background-color: #fefefe;padding:30px;height:530px;width:910px;margin:auto; } .page-wrapper { position:absolute;top:50px;left:0;opacity:0;z-index:90;width:970px;height:590px;-webkit-box-shadow: 0 0 10px rgba(0,0,0,.05);-moz-box-shadow: 0 0 10px rgba(0,0,0,.05);box-shadow: 0 0 10px rgba(0,0,0,.05);-webkit-transition: all 750ms cubic-bezier(0.785, 0.135, 0.150, 0.860); -moz-transition: all 750ms cubic-bezier(0.785, 0.135, 0.150, 0.860);-ms-transition: all 750ms cubic-bezier(0.785, 0.135, 0.150, 0.860);-o-transition: all 750ms cubic-bezier(0.785, 0.135, 0.150, 0.860);transition: all 750ms cubic-bezier(0.785, 0.135, 0.150, 0.860);-webkit-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);-moz-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);-ms-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);-o-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); } .page-wrapper.active { display:block;top:0;opacity:1;z-index:100; } .title { font-size:28px;font-weight:300;margin-bottom:18px; } .navigation { -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;background-color: #57617e;-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.35), inset 0 1px #2f3f57;-moz-box-shadow: 0 1px 3px rgba(0,0,0,.35), inset 0 1px #2f3f57;box-shadow: 0 1px 3px rgba(0,0,0,.35), inset 0 1px #2f3f57;background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.5), rgba(76,110,169,0));background-image: -moz-linear-gradient(bottom, rgba(0,0,0,.5), rgba(76,110,169,0));background-image: -o-linear-gradient(bottom, rgba(0,0,0,.5), rgba(76,110,169,0));background-image: -ms-linear-gradient(bottom, rgba(0,0,0,.5), rgba(76,110,169,0));background-image: linear-gradient(to top, rgba(0,0,0,.5), rgba(76,110,169,0));height:50px;text-align:center;position:Absolute;left:20px;top:565px;width:930px;z-index:999; } .navigation ul { margin:auto;width:500px; } .navigation li { display:block;height:50px;border-left:1px solid rgba(50, 50, 50, 0.3);float:left; } .navigation li a { min-width:60px;display:block;height:50px;line-height:50px;padding:0 15px;text-transform:uppercase;font-size:12px;color:#fff;font-weight:bold;text-shadow:0 1px #101319;text-decoration:none;border-left:1px solid rgba(255, 255, 255, 0.1);-webkit-transition: all 0.385s;-moz-transition: all 0.385s;-o-transition: all 0.385s;transition: all 0.385s; } .navigation li:first-child { border:none; } .navigation li:first-child a { border:none; } .navigation li a:hover, .navigation li a.active { background:rgba(0, 0, 0, 0.2);-webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.2);-moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.2);box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.2); } .button:active { color:#fff; } .button:hover { text-decoration:none; } .button { display:block;float:right;border:1px solid #1C6AAD;padding:0 20px;height:35px;line-height:35px;text-align:center;font-family:"Open Sans", Arial, Verdana;font-weight:400;font-size:14px;text-shadow:1px 1px #27557D;color:#fff;border-radius:3px;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.3); background: #5ca3df; background: -moz-linear-gradient(top, #5ca3df 6%, #297ac0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(6%,#5ca3df), color-stop(100%,#297ac0));background: -webkit-linear-gradient(top, #5ca3df 6%,#297ac0 100%); background: -o-linear-gradient(top, #5ca3df 6%,#297ac0 100%);background: -ms-linear-gradient(top, #5ca3df 6%,#297ac0 100%);background: linear-gradient(to bottom, #5ca3df 6%,#297ac0 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ca3df', endColorstr='#297ac0',GradientType=0 );-webkit-transition: all 0.385s;-moz-transition: all 0.385s;-o-transition: all 0.385s;transition: all 0.385s;opacity:1; } .button:focus, .button:hover { -webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;border: solid 1px #0d5a9d;background-image: -webkit-linear-gradient(bottom, #1c609c, #5ca3df 97%, #9bcdf8);background-image: -moz-linear-gradient(bottom, #1c609c, #5ca3df 97%, #9bcdf8);background-image: -o-linear-gradient(bottom, #1c609c, #5ca3df 97%, #9bcdf8);background-image: -ms-linear-gradient(bottom, #1c609c, #5ca3df 97%, #9bcdf8);background-image: linear-gradient(to top, #1c609c, #5ca3df 97%, #9bcdf8);opacity:0.85; } /*----- About Page ----------------------------------------------------------------*/ .content .about-img { margin-right:40px;float:left;margin-top:5px; } .break-news { font-size:12px;color:#f48822;font-weight:bold;text-transform:uppercase;margin-bottom:15px; } .page-about { display:none; } /*----- Contact Page ----------------------------------------------------------------*/ #contact-form { padding-top:50px;position:relative; } #contact-form label { display:none;font-family:"Open Sans", Arial, Verdana;padding-bottom:2px; } #contact-form textarea, #contact-form input { border:1px solid #E1DFD9;border-radius:2px;box-shadow:inset 0 2px 6px 0 rgba(0,0,0,0.09);padding:8px 10px;display:block;width:250px;height:20px;line-height:20px;font-family:"Open Sans", Arial, Verdana;font-weight:300;font-style:italic;color:#B2B2B2;-webkit-transition: all 0.385s;-moz-transition: all 0.385s;-o-transition: all 0.385s;transition: all 0.385s; } #contact-form input:focus { border:1px solid #9DCBF7; } #contact-form textarea { height:90px;color:#B2B2B2;font-size:13px;-webkit-transition: all 0.385s;-moz-transition: all 0.385s;-o-transition: all 0.385s;transition: all 0.385s; } #contact-form textarea:focus { border:1px solid #9DCBF7; } #contact-form div { padding-bottom:25px;padding-left:48px; } #contact-form .no-value { } #contact-form .error { border-color:red; } .frm-state { color:green;display:block;position:absolute;left:10px;bottom:0px; } .contact-info { margin-top:30px; } .contact-info ul img { float:left;vertical-align:text-top;display:block;margin-top:2px;margin-right:6px; } .contact-info ul li { margin-bottom:5px; } .contact-info ul span { color:#959494;font-size:13px; } /*----- Scrollbar ----------------------------------------------------------------*/ .content.scroll-pane { } .scroll-pane { position:relative } .scroll-content { position:absolute;top:0;left:0;padding-left:30px;padding-top:25px;width:900px;height:auto; } .slider-wrap { position:absolute;right:15px;top:0;width:8px;margin-top:40px; } .slider-vertical { position:relative;height:100%;background:transparent; } .ui-slider-handle { width:6px;height:10px;margin:0 auto;display:block;position:absolute;background:#6883b9; } .ui-slider-handle img { border:none; } .scrollbar-top { position:absolute;top:0; } .scrollbar-bottom { position:absolute;bottom:0; } .scrollbar-grip { position:absolute;top:50%;margin-top:-6px; } .ui-slider-range { position:absolute;width:100%; } .ui-state-active { background:#D0D0D0; } /*----- Portfolio Page ----------------------------------------------------------------*/ #work-portfolio-wrapper { width:680px;overflow:hidden; } .work-portfolio { width:730px; } .work-portfolio.hidden-list { display:none; } .work-portfolio li { float:left;margin-right:23px;text-align:center;margin-bottom:23px;position:relative;height:140px;width:208px;background:#ccc; } .work-portfolio li > a { display:block;font-family:arial, verdana, trebuchet ms;font-weight:bold;font-size:12px;margin-top:10px;color:#484848;-webkit-transition: all 0.2s ease-in;-moz-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;transition: all 0.2s ease-in; } .work-portfolio li > a:hover { text-decoration:underline;color:#f25f2b; } .work-portfolio li:hover > a { color:#f25f2b; } .work-portfolio li img { display:block; } .work-portfolio li div { overflow:hidden;width:208px;height:140px;background:url('images/gallery-overlay.png');position:absolute;top:0;left:0;display:block;opacity:0;-webkit-transition: all 0.2s ease-in;-moz-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;transition: all 0.2s ease-in;opacity:0;filter:alpha(opacity = 0); } .work-portfolio li:hover div { opacity:1;filter:alpha(opacity = 70); } .work-portfolio div a { display:block;width:208px;height:140px;-webkit-transition: all 0.2s ease-in;-moz-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;transition: all 0.2s ease-in;line-height:140px;font-size:40px;color:#fff;font-weight:300; } .work-portfolio li:hover div a { bottom:25px; } .work-nav { width:570px;margin:auto;text-align:right;margin:0 0 15px 0; } .work-nav li { color:#959494;position:relative;display:inline-block;min-width:30px;height:30px;padding:0 8px;-webkit-transition: all 0.6s ease-in;-moz-transition: all 0.6s ease-in;-o-transition: all 0.6s ease-in;transition: all 0.6s ease-in; } .work-nav li a { font-size:13px;color:#959494;line-height:30px; } .work-nav li:hover, .work-nav li.active { background:url("images/tooltip-background.png") center top no-repeat;background:url("images/tooltip-bottom-left.png") left 19px no-repeat,url("images/tooltip-bottom-right.png") right 19px no-repeat, url("images/tooltip-background.png") center top no-repeat; } .work-nav li:hover { opacity:0.8; } .work-nav li:hover a { color:#000; } .work-nav li.active a { color:#000; } .work-nav li:hover span { display:block; } .work-nav li.active span { display:block; } .portfolio-nav ul { float:left; } .portfolio-nav h2 { float:left; } .portfolio-nav { } /*----- Resume Page ----------------------------------------------------------------*/ .highlight-orange { background:orange;color:#fff; } .highlight-blue { background:#387bcb;color:#fff; } .highlight-red { background:#dc4229;color:#fff; } .text-italic { font-style:italic; } h4.resume { font-size:22px;border-top: medium none;margin-bottom:5px;padding-bottom:7px;font-weight:300; } h5 > span { color:#a8a8a8;font-size:13px;font-weight:300;margin-left:40px; } .work-exp h5 { margin-bottom:0;line-height:15px; } .work-exp p { font-size:13px; } .item-skills { position:relative;margin-bottom:2px; } .item-skills span { display:block;position:absolute;right:0;top:0;height:10px;padding:6px 5px;width:35px;} .item-skills span strong { float:left;margin-right:2px;background:#BDE2F6;width:5px;height:10px; } .item-skills span strong.grey { background:#E5E5E5; } .item-experience { font-size:13px; } .item-experience strong { display:block; } .button.resume { margin-top:50px; } .resume-info img { float:left;margin-right:15px; } .resume-info h3 { font-size:18px;font-weight:bold;margin-bottom:0;line-height:17px; } .resume-info span { font-size:13px;font-style:italic;color:#858585;margin-right:-2px;margin-bottom:20px;display:block; } .resume-cv { background:#f3f9fc;padding:10px; } .resume-cv p>span { color:#4893d3; } .resume-cv .button { padding:0 45px; } .resume-info-wrap { margin-bottom:30px;border-bottom:2px solid #f2f2f2;padding-bottom:30px; } a.ref { color:#227cad;font-weight:bold;font-size:13px; } a.ref>span { font-size:10px; } .hr.resume { margin:15px 0 30px 0; } /*----- Home Page ----------------------------------------------------------------*/ .social { margin-top:40px; } .social li { border-bottom:1px solid #f1f1f1;height:30px; } .social a { font-size:13px;color:#959494;height:30px;line-height:30px;padding-left:25px; -webkit-transition: all 0.385s;-moz-transition: all 0.385s;-o-transition: all 0.385s;transition: all 0.385s;opacity:1; } .social a.facebook { background:url('images/facebook-icon.png') no-repeat left top; } .social a.gplus { background:url('images/gplus-icon.png') no-repeat left top; } .social a.twitter { background:url('images/twitter-icon.png') no-repeat left top; } .social a.skype { background:url('images/skype-icon.png') no-repeat left top; } .social a.dribbble { background:url('images/dribbble-icon.png') no-repeat left top; } .social a:hover { opacity:0.80; } /*----- Typogaprhy ----------------------------------------------------------------*/ .quote { padding:25px;border-top:1px solid #ececec;border-bottom:1px solid #ececec;margin:30px 0 30px 0; } .quote > h2 { font-size:26px;font-style:italic;font-weight:300;background:url('images/back-quote.png') no-repeat 6px 8px;padding:20px; } .quote > h4 { margin:-35px 35px 0 0;padding:0;float:right;font-size:12px;font-weight:bold;background:url('images/back-quote-line1.png') no-repeat 1px bottom; } .typo-f { background:url('images/back-quote-line2.png') no-repeat left bottom;padding-bottom:15px; } .typo-f h3 { padding-left:50px;margin-bottom:10px; } .typo-f p { padding-left:50px; } .typo-f .left { background:url('images/icon-typo1.png') no-repeat left top; } .typo-f .right { background:url('images/icon-typo2.png') no-repeat left top; } .rounded li { background:url('images/rounded-bullet.png') no-repeat left 8px;padding-left:10px; }