/*
website: www.qrnet.it
version: 5.0
author: Qrnet Media Agency
author website: http://www.qrnet.it				                                                   				
*/	

@import url("reset.css");

body { background: url("../img/bg.png") repeat #F5F5F5; font-family: Arial, Helvetica, sans-serif; color: #66676C; text-shadow: 1px 1px #fff; }
body .clr { clear: both; }
body .dark { position: absolute; margin-left: -9999px; }
body .left { float: left; }
body .right { float: right; }

h1, h2, h3, h4, h5, h6 { color:#334546; font-weight:normal; font-family: Georgia, Times, serif; font-style: italic; }
a { color: #99C330; text-decoration:none; font-weight:normal; }
a:hover { color: #999; }
hr { visibility: hidden; display: none; }
ins { background-color: #F1F1F1; color: #999; text-decoration:none; }
mark { background-color: #F1F1F1; color: #999; font-style:italic; font-weight:bold; }

/* commons */

#container { width:960px; margin: 0 auto; }
#stripe { background: url("../img/stripe.png") repeat-y; width:150px; height: 100%; position: fixed; float: left; }
#tongue { background: url("../img/tongue.png") no-repeat; width:35px; height: 35px; position: absolute; top: 0; left: 0; }
#content { width:810px; float: right; position: relative; }

#header { margin-top: 60px; }
#header #logo { padding: 0 0 59px 90px; background: url("../img/line.png") repeat-x left bottom; }
#header #logo a { background-image: url("../img/qrnet_media_agency.png"); background-position: left top; background-repeat: no-repeat; display:block; width:287px; height:82px; }
#header #logo a:hover { background-position: left bottom; }
#header #nav { background: url("../img/line.png") repeat-x left bottom; padding: 42px 0 42px 90px; }
#header #nav li { list-style: none; padding-right: 110px; display: inline; }
#header #nav li#last { padding-right: 0; }
#header #nav li.active a { color: #99C330; }
#header #nav li a { color: #66676C; font-style: italic; font-size: 15px; } 
#header #nav li a:hover { color: #99C330; } 

.article { background: url("../img/line.png") repeat-x left bottom; padding: 0 0 75px; }
.article p { font-size:13px; line-height:25px; margin-bottom: 10px; }
.article .cap { background: url("../img/line.png") repeat-x left bottom; padding-bottom: 3px; }
.article .cap .title { font-size: 16px; line-height: 35px; padding: 40px 0 40px 90px; background: url("../img/cap.png") repeat-y left top; font-weight: normal; }
.article .cap .subtitle { font-size: 16px; line-height: 35px; padding: 40px 0 0 90px; background: url("../img/cap.png") repeat-y left top; }
.article .cap .intro { font-size: 14px; line-height: 28px; font-style: italic; padding: 10px 0 40px 90px; background: url("../img/cap.png") repeat-y left top; }
.article .cap .intro p { margin-bottom: 5px; }
.article .paragraph { width: 270px; float: right; margin-top: 50px; }
.article .column { width: 330px; margin-top: 15px; }
.article .column .title { font-size: 16px; background: url("../img/line.png") repeat-x left bottom; color: #99C330; padding: 35px 0 15px; margin-bottom: 30px; }
.article .column .subtitle { font-size: 13px; font-weight: bold; font-style: italic; font-family: Arial, Helvetica, sans-serif; margin: 20px 0 3px; }
.article .first { float: left; padding-left: 90px; }
.article .second { float: right; }

/* welcome */

#welcome_slider_box { width: 720px; margin: 50px 0 0 90px; position: relative; overflow: hidden; }
#welcome_slider_box #welcome_slider li { list-style: none; width:720px; text-align: left; }
#welcome_slider_box #welcome_slider .figure { float: left; background: url("../img/line_vert.png") repeat-y right top; width: 340px; height: 260px; padding-right: 40px; }
#welcome_slider_box #welcome_slider .figure img { padding: 5px; border-radius: 5px; -moz-border-radius: 5px; background: url("../img/transparent_bg.png") repeat center center; width: 330px; height: 250px; }
#welcome_slider_box #welcome_slider .description { float: right; width: 305px; }
#welcome_slider_box #welcome_slider .description .title { font-size: 16px; background: url("../img/line.png") repeat-x left bottom; color: #99C330; padding-bottom: 20px; margin-bottom: 20px; }
#welcome_slider_box #welcome_slider .description p { font-size: 13px; margin-bottom: 20px; }
#welcome_slider_box #welcome_slider .description .more { font-size: 12px; font-family: Georgia, Times, serif; font-style: italic; }
#welcome_paragraph { width: 720px; background: url("../img/line.png") repeat-x left top; padding: 40px 0 0 90px; margin-top: 50px; }
#welcome_paragraph p { font-size: 16px; font-family: Georgia, Times, serif; line-height: 35px; font-style: italic; }
#welcome_slider_pager { width: 340px; text-align: center; margin-top: 25px; }
#welcome_slider_pager a { background: url("../img/welcome_slider_pager.png") left top no-repeat; display: inline-block; width: 10px; height: 10px; text-indent:-999em; margin: 0 3px; }
#welcome_slider_pager a.activeSlide { background: url("../img/welcome_slider_pager.png") right top no-repeat; }
#welcome_slider_pager a:hover { background: url("../img/welcome_slider_pager.png") right top no-repeat; }
#welcome_slider_pager a:focus { outline: none; }

/* agency */

#infographic_agency { position: relative; overflow: hidden; width: 375px; float: left; margin-top: 40px; padding: 0 40px 0 90px; background: url("../img/line_vert.png") repeat-y right top; }
#infographic_agency .slider { background: url("../img/pic/agency.png") no-repeat left top; }
#infographic_agency .slider li { padding: 420px 0 0 0; list-style: none; display: inline-block; }
#infographic_agency .slider li .circle { background-repeat: no-repeat; background-position: center top; width: 375px; height: 375px; }
#infographic_agency .slider li.passion .circle { background-image:url("../img/pic/agency_passion.png"); }
#infographic_agency .slider li.creativity .circle { background-image:url("../img/pic/agency_creativity.png"); }
#infographic_agency .slider li.experience .circle { background-image:url("../img/pic/agency_experience.png"); }
#infographic_agency .slider li .label { background-image:url("../img/agency_icons.png"); background-repeat:no-repeat; font-size: 14px; margin-right: 50px; line-height: 22px; color: #ccc; }
#infographic_agency .slider li .label:hover { cursor: pointer; }
#infographic_agency .slider li .last { margin-right: 0; }
#infographic_agency .slider li.active .label { color: #334546; }
#infographic_agency .slider li.passion .label { background-position: 0px 0px; padding-left: 25px; }
#infographic_agency .slider li.creativity .label { background-position: 0px -22px; padding-left: 25px; }
#infographic_agency .slider li.experience .label { background-position: 0px -44px; padding-left: 25px; }

/* solutions */

#infographic { position: relative; overflow: hidden; width: 720px; padding-left: 90px; }
#infographic .slider { background: url("../img/pic/solutions.png") no-repeat left top; }
#infographic .slider li { padding: 410px 0 0 0; list-style: none; display: inline-block; }
#infographic .slider li .circle { background-repeat: no-repeat; background-position: center top; width: 720px; height: 360px; }
#infographic .slider li.strategia .circle { background-image:url("../img/pic/solutions_strategia.png"); }
#infographic .slider li.identity .circle { background-image:url("../img/pic/solutions_identity.png"); }
#infographic .slider li.web .circle { background-image:url("../img/pic/solutions_web.png"); }
#infographic .slider li.marketing .circle { background-image:url("../img/pic/solutions_marketing.png"); }
#infographic .slider li.apps .circle { background-image:url("../img/pic/solutions_apps.png"); }
#infographic .slider li .label { background-image:url("../img/solutions_icons.png"); background-repeat:no-repeat; font-size: 14px; margin-right: 25px; line-height: 20px; color: #ccc; }
#infographic .slider li .label:hover { cursor: pointer; }
#infographic .slider li .last { margin-right: 0; }
#infographic .slider li.active .label { color: #334546; }
#infographic .slider li.strategia .label { background-position: 0px 0px; padding-left: 25px; }
#infographic .slider li.identity .label { background-position: 0px -20px; padding-left: 25px; }
#infographic .slider li.web .label { background-position: 0px -40px; padding-left: 25px; }
#infographic .slider li.marketing .label { background-position: 0px -60px; padding-left: 25px; }
#infographic .slider li.apps .label { background-position: 0px -80px; padding-left: 25px; }

/* works */

#portfolio { background: transparent; width: 720px; margin: 15px 0 0 90px; background: url("../img/line.png") repeat-x left bottom; }
#portfolio li { list-style: none; margin-top: 35px; }
#portfolio .work a { display: block; position: relative; }
#portfolio .work img { padding: 5px; border-radius: 5px; -moz-border-radius: 5px; background: url("../img/transparent_bg.png") repeat center center; width: 330px; height: 250px; }
#portfolio .work .name { position: absolute; top: 50%; width: 330px; color: #334546; text-align: center; text-shadow: none; font-style: italic; font-size: 14px; }

#work_pics { width: 430px; float: left; margin: 50px 0 0 90px; }
#work_pics li { list-style: none; margin-bottom: 35px; }
#work_pics li img.box { padding: 5px; border-radius: 5px; -moz-border-radius: 5px; background: url("../img/transparent_bg.png") repeat center center; }

#case_history { float: right; width: 198px; margin: 50px 0 0; padding: 20px 0 20px 41px; background: url("../img/line_vert.png") repeat-y left top; }
#case_history .client { font-size: 16px; background: url("../img/line.png") repeat-x left bottom; margin-bottom: 15px; padding-bottom: 15px; color: #99C330; }
#case_history .description { margin-bottom: 70px; }
#case_history .title { font-size: 14px; background: url("../img/line.png") repeat-x left bottom; margin-bottom: 10px; padding-bottom: 10px; }
#case_history .title .icon { background-image:url("../img/contact_icons.png"); background-repeat:no-repeat; float: right; width: 20px; height: 18px; }
#case_history .title .map { background-position: 0 0; }
#case_history .title .archivie { background-position: 0 -18px; }
#case_history .title .phone { background-position: 0 -36px; }
#case_history .title .fax { background-position: 0 -54px; }
#case_history .title .mail { background-position: 0 -72px; }
#case_history .title .facebook { background-position: 0 -90px; }
#case_history .title .twitter { background-position: 0 -108px; }
#case_history p { margin-bottom: 50px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 18px; }
#case_history p.last { margin: 0; }

/* contact */

#map_box { float: left; margin: 50px 0 0 90px; padding: 5px; border-radius: 5px; -moz-border-radius: 5px; background: url("../img/transparent_bg.png") repeat center center; }
#map { width: 365px; height: 635px; text-shadow: none; }
#contact_info { width: 260px; float: right; margin-top: 50px; padding: 20px 0 20px 41px; background: url("../img/line_vert.png") repeat-y left top; }
#contact_info .title { font-size: 13px; background: url("../img/line.png") repeat-x left bottom; margin-bottom: 10px; padding-bottom: 10px; }
#contact_info .title .icon { background-image:url("../img/contact_icons.png"); background-repeat:no-repeat; float: right; width: 20px; height: 18px; }
#contact_info .title .map { background-position: 0 0; }
#contact_info .title .archivie { background-position: 0 -18px; }
#contact_info .title .phone { background-position: 0 -36px; }
#contact_info .title .fax { background-position: 0 -54px; }
#contact_info .title .mail { background-position: 0 -72px; }
#contact_info .title .facebook { background-position: 0 -90px; }
#contact_info .title .twitter { background-position: 0 -108px; }
#contact_info p { margin-bottom: 35px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 18px; }
#contact_info p.last { margin: 0; }

/* footer */

#footer { margin-bottom: 50px; padding: 50px 0; background: url("../img/line.png") repeat-x left bottom; }
#footer .information { float: left; width: 330px; padding-left: 90px;}
#footer .information p { font-size: 11px; line-height: 22px; font-style: italic; color: #B3A2AB; }

/* networks */

#twitter_update_list_box { position: absolute; right: 0; top: 60px; width: 250px; padding-left: 50px; background: url("../img/twitter_bird.png") no-repeat left top; }
#twitter_update_list { padding: 5px 15px; list-style: none; font-size: 11px; text-shadow: none; line-height: 18px; background: url("../img/box_twitter.png") repeat left top; border-radius: 5px; -moz-border-radius: 5px; }
#social_network_box { padding: 10px; float: right; background: url("../img/box_twitter.png") repeat left top; width: 320px; border-radius: 5px; -moz-border-radius: 5px; }
#twitter_share { float: left; margin-right: 10px; }
#google_share { float: left; margin-right: 10px; }
#facebook_share { float: left; }

/* fade */

a span.hover { 
position:absolute; 
top:0; 
left:0; 
width:340px; 
height:260px; 
background: #fff; 
opacity: 0; 
-webkit-transition: all 0.3s ease-in-out; 
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out; 
-ms-transition: all 0.3s ease-in-out; 
filter: alpha(opacity=0); 
}

a:hover span.hover { 
opacity: 0.8; 
-webkit-transition: all 0.3s ease-in-out; 
-moz-transition: all 0.3s ease-in-out; 
-o-transition: all 0.3s ease-in-out; 
-ms-transition: all 0.3s ease-in-out; 
filter: alpha(opacity=100); 
}