/*
 * Project:   HandyRandy.com
 * Date:      2010-01-21
/* ---------------------------------------- */

* { margin: 0; padding: 0; }

html { min-height: 100%; margin: 0 0 1px; font-size: 100.01%; }
body { background: #efefed url(/images/bg.png) repeat-x; font-size: 62.5%; }
body.promo { background: #fff; }

@media only screen and (max-device-width: 480px) { html { -webkit-text-size-adjust: none; } }

body, textarea, input, select, option, button { color: #717174; font-family: "Lucida Grande","Lucida Sans Unicode","Helvetica Neue",Helvetica,Arial,sans-serif; line-height: 1.25; }
li, dt, dd, p, th, td, caption, pre { font-size: 1.2em; }
ul, ol, dl, p, table, pre, h1, h2, h3, h4, h5, h6 { margin-bottom: 22px; }

a { color: #94948f; text-decoration: underline; }
a:hover, a:focus, a:active { text-decoration: none; }

ul, ol, dd, blockquote { padding-left: 40px; }
ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; }
li *, li p, li li, dt *, dd *, p *, th *, td * { font-size: 1em; }

img { border: none; -ms-interpolation-mode: bicubic; }
pre { font-family: "Courier New",monospace; white-space: pre-wrap; }
table { border-collapse: collapse; border-spacing: 0; }
button { overflow: visible; padding: 0 10px; cursor: pointer; } button::-moz-focus-inner { padding: 0; border: none; }

hr { overflow: hidden; height: 1px; margin: 15px 0 !important; margin: -5px 0 8px; padding: 0; border: none; background-color: #ccc; color: #ccc; }
*:first-child+html hr { margin: -7px 0 8px !important; }

.offset { position: absolute !important; left: -10001px !important; overflow: hidden !important; }

/* LAYOUT
------------------------------------------- */

#root { width: 970px; margin: 0 auto; background: url(/images/bg-top.png) 50% 0 no-repeat; overflow: hidden; }
 #top { position: relative; background: url(/images/bg-nav.png) 50% 249px no-repeat; height: 303px; overflow: hidden; }
  #top h1 { position: absolute; z-index: 100; left: 620px; top: 260px; font-size: 1em; font-weight: normal; }
  #skip-links { position: absolute; top: 0; left: -10001px; list-style: none; margin: 0; padding: 0; }
   #skip-links li a:focus, #skip-links li a:active { display: block; position: absolute; left: 10001px; top: 0; z-index: 10001; width: 200px; margin: 15px 0 0 15px; padding: 2px 0; background: #333; color: #fff; text-align: center; text-decoration: none; }
 #nav { position: absolute; left: 0; bottom: 7px; list-style: none; margin: 0; padding: 0; }
  #nav li { float: left; font-size: 1.3em; margin: 0 25px 0 0; }
   #nav li a { float: left; display: block; color: #717174; padding: 0 0 24px; min-width: 38px; background: url(/images/nav-hover.png) -999em 0 no-repeat; text-decoration: none; text-align: center; }
   #nav li a:hover, #nav li a:focus, #nav li a:active, #nav li a.active { background-position: 50% 100%; color: #be321b; }
   #nav li em { position: absolute; left: -10001px; top: -10001px; }
 #content { position: relative; z-index: 100; width: 910px; padding: 10px 0 30px 60px; float: left; background: url(/images/logo.png) no-repeat; }
  #content .main { float: left; width: 500px; }
  #content .aside { position: relative; top: -66px; margin: 0 0 -66px; float: right; width: 350px; padding: 57px 0 0; }
 #footer { border-top: 1px solid #fff; padding: 10px 0; }
  #footer .wrapper { width: 970px; margin: 0 auto; }
   #footer .wrapper p { text-align: right; color: #888; font-size: 1em; margin: 0; }
    #footer .wrapper p a { color: #888; }
   
/* GENERAL
------------------------------------------- */

/* headers */

h1, h2, h3, h4, h5, h6 { }
h1 { font-size: 1.8em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.2em; }
h3.a { margin: 0; }
h4 { font-size: 1.2em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1.0em; }

/* containers */

/* forms */

/* tables */

table { }
 table th, table td { padding: 5px 10px; border: 1px solid #ccc; }

/* lists */
.sitemap-a { list-style-type: circle; padding-left: 20px; }
 .sitemap-a ul { list-style-type: circle; padding-left: 20px; margin-top: 5px; }
 .sitemap-a li { margin-bottom: 5px; }
/* paragraphs */

.emf-a { font-style: italic; color: #bf311a; }
.emf-b { font-style: italic; }
 .emf-a strong span { font-weight: normal; }

div.hr-a { margin-top: 5px; margin-bottom: 5px; border-top: 1px solid #fff; overflow: hidden; }
div.hr-a hr { display: none; }

/* links */

a.a { color: #bf311a; }

/* other */
 
/* SPECIFIC
------------------------------------------- */
#anniversary-a { position: absolute; z-index: 100; top: -25px; right: 95px; width: 63px; height: 81px; margin: 0; background: url(/images/anniversary-a.png) no-repeat; }
 #anniversary-a a { display: block; width: 100%; height: 100%; text-indent: -999em; overflow: hidden; }  

.slideshow-a { position: relative; width: 100%; height: 235px; overflow: hidden; }
 .slideshow-a .slide { position: relative; overflow: hidden; }
  .slideshow-a .slide .picture { float: left; }
  .slideshow-a .slide .copy { float: right; padding: 30px 0 0;  }
   .slideshow-a .slide .copy p { margin: 0 0 20px; }

html.js .slideshow-a .wrapper { position: absolute; left: 0; top: 0; height: 235px; }
 html.js .slideshow-a .wrapper .slide { float: left; }

 .slideshow-a .nav { position: absolute; right: 210px; bottom: 0px; padding: 0; list-style: none; overflow: hidden; margin: 0; }
  .slideshow-a .nav li { display: inline; float: left; width: 12px; height: 12px; margin: 0 0 0 12px; }
   .slideshow-a .nav li a { float: left; display: block; width: 100%; height: 100%; background: url(/images/slider-nav.png) no-repeat; text-indent: -999em; overflow: hidden; }
   .slideshow-a .nav li a:hover, .slideshow-a .nav li a.active { background-position: 0 -12px; }

#slide-anniversary { width: 370px; padding: 52px 250px 0 350px; }
 #slide-anniversary .copy { width: 220px; }

#slide-personality { width: 650px; padding: 45px 110px 0 200px; }
 #slide-personality .copy { width: 340px; }

#slide-ride { width: 740px; padding: 55px 105px 0 125px; }
 #slide-ride .copy { width: 270px; }

#slide-omniarch { width: 845px; padding: 50px 70px 0 55px; }
 #slide-omniarch .copy { width: 140px; }

#slide-probono { width: 520px; padding: 50px 195px 0 255px; }
 #slide-probono .copy { width: 275px; }

#twithead { position: absolute; top: 0; right: 20px; width: 49px; height: 60px; background: url(/images/twitter-a.png) no-repeat;  }
 #twithead a { display: block; width: 100%; height: 100%; text-indent: -999em; overflow: hidden; }

.twitter-a { position: relative; width: 350px; background: url(/images/twitter-bubble.png) no-repeat; padding: 35px 0 0; }
 .twitter-a .wrapper { width: 300px; background: url(/images/twitter-bubble.png) 0 100% no-repeat; padding: 0 25px 25px; overflow: hidden; }
  .twitter-a .wrapper p { margin: 0; font-size: 1.1em; }
	.twitter-a .wrapper ul { padding: 0; list-style: none; margin: 0; }
	 .twitter-a .wrapper li { overflow: hidden; padding: 0; }
	  .twitter-a .wrapper li a { color: #bf311a; }
	  .twitter-a .wrapper .tweet_avatar { padding-right: .5em; float: left; }
	   .twitter-a .wrapper  .tweet_avatar img { vertical-align: middle; }

.follow-a { text-align: right; padding: 0 12px; font-size: 1.1em; }

.slogan { margin: 30px 0 0 30px; width: 335px;  }
 .slogan p { font-size: 1.1em; }

#slogan-home { padding: 0 0 170px; background: url(/images/slogans/home.png) 80px 100% no-repeat; }
 #slogan-home p { width: 80px; text-align: center;  margin: 0 0 10px; }

#slogan-about { min-height: 234px; background: url(/images/slogans/about.png) 86px 100% no-repeat; }
* html #slogan-about { height: 234px; }
 #slogan-about p.a { margin: 0 0 20px; width: 90px; text-align: center; }
 #slogan-about p.b { margin: 0; width: 90px; font-style: italic; text-align: center; }

#slogan-services { padding: 110px 0 0; min-height: 137px; background: url(/images/slogans/services.png) 120px 0 no-repeat; }
* html #slogan-services { height: 137px; }
 #slogan-services p { width: 160px; text-align: center; }

#slogan-work { padding: 46px 0 0; min-height: 160px; background: url(/images/slogans/work.png) 180px 0 no-repeat; }
* html #slogan-work { height: 160px; }
 #slogan-work p.a { width: 180px; text-align: center; font-style: italic; }
 #slogan-work p.b { width: 180px; text-align: center; }

#slogan-why { min-height: 201px; background: url(/images/slogans/why.png) 80px 0 no-repeat; }
* html #slogan-why { height: 201px; }
 #slogan-why p { width: 120px; text-align: center; }
  #slogan-why p em { text-transform: uppercase; letter-spacing: 2px; font-style: normal; }

#slogan-contact { min-height: 206px; background: url(/images/slogans/contact.png) 62px 0 no-repeat; }
* html #slogan-contact { height: 206px; }
 #slogan-contact p { width: 85px; text-align: center; }

/* Lightbox 
------------------------------------------- */
#portfolio { position: absolute; top: -999em; }

#overlay { position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background: #000; opacity: 0.8; }
* html #overlay { position: absolute; }
#lightbox { position: fixed; z-index: 1100; left: 50%; top: 50%; width: 736px; height: 537px; margin: -268px 0 0 -368px; background: url(../images/lightbox.png) no-repeat; }
* html #lightbox { position: absolute; }
 #lightbox .media { position: absolute; left: 34px; top: 57px; }
 #lightbox .description { position: absolute; left: 70px; top: 476px; width: 520px; font-size: 1em; line-height: 1.5; color: #fff; }
  #lightbox .description a { color: #888; }
 #lightbox .nav { position: absolute; bottom: 27px; left: 615px; width: 44px; }
  #lightbox .nav .a { position: relative; width: 100%; overflow: hidden; margin: 0 0 5px; }
   #lightbox .nav .a a { display: block; width: 18px; height: 18px; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; background-position: 0 100%; }
   #lightbox .nav .a span { position: absolute; left: -999em; }
   #lightbox .nav .a a.inactive { background-position: 0 0; }
   #lightbox .nav .a a.prev { float: left; background-image: url(../images/lightbox-left.png); }
   #lightbox .nav .a a.next { float: right; background-image: url(../images/lightbox-right.png); } 
  #lightbox .nav .b { text-align: center; font-size: 1em; margin: 0; }
   #lightbox .nav .b a { color: #888; text-transform: uppercase; }
 #lightbox .anniversary { position: absolute; right: 30px; bottom: 27px; display: block; width: 25px; height: 37px; margin: 0; }
  #lightbox .anniversary a { display: block; width: 100%; height: 100%; background: url(../images/lightbox-10.png) no-repeat; text-indent: -999em; overflow: hidden; 	 }

#lightbox-b { position: fixed; z-index: 1100; left: 50%; top: 50%; width: 620px; height: 640px; padding: 13px 10px 18px; margin: -338px 0 0 -320px; background: url(../images/lightbox-b-shadow.png) no-repeat; }
* html #lightbox-b { position: absolute; }
 #lightbox-b .inner { background: #fff; width: 620px; height: 640px; }
 #lightbox-b a.close { position: absolute; right: 10px; bottom: 0; display: block; width: 10px; height: 11px; background: url(../images/lightbox-b-close.png) no-repeat; text-indent: -999em; overflow: hidden; }

#lightbox-c { position: fixed; z-index: 1100; left: 50%; top: 50%; width: 736px; height: 537px; margin: -268px 0 0 -368px; background: url(../images/lightbox.png) no-repeat; }
* html #lightbox-c { position: absolute; }
 #lightbox-c .art10 { position: absolute; right: 30px; bottom: 27px; display: block; width: 25px; height: 37px; margin: 0; background: url(../images/lightbox-10.png) no-repeat; }
 #lightbox-c .close { position: absolute; bottom: 27px; left: 615px; width: 44px; text-align: center; font-size: 1em; margin: 0; }
  #lightbox-c .close a { color: #888; text-transform: uppercase; }
 #lightbox-c .copyright { position: absolute; left: 70px; bottom: 38px; font-size: 1em; color: #fff; margin: 0; }

#lightbox-d { position: fixed; z-index: 1100; left: 50%; top: 50%; width: 807px; height: 402px; padding: 12px 0 19px; margin: -201px 0 0 -404px; background: url(../images/lightbox-d.png) no-repeat; }
* html #lightbox-d { position: absolute; }
 #lightbox-d .inner { background: #fff; width: 774px; height: 398px; margin: 0 auto; }
 #lightbox-d a.close { position: absolute; right: 10px; bottom: 0; display: block; width: 10px; height: 11px; background: url(../images/lightbox-b-close.png) no-repeat; text-indent: -999em; overflow: hidden; }


/* Promos 
------------------------------------------- */
#promo-a { width: 620px; height: 580px; margin: 0 auto; }
 #promo-a .visual { margin: 0; height: 400px; text-align: center;  }
  #promo-a .visual img { display: block; }
 #promo-a .content { position: relative; height: 120px; padding: 30px 160px 30px 50px; background: #f9f9f9 url(../images/promo-content-bg.png) repeat-x; }
  #promo-a .content h2 { font-weight: normal; font-size: 1.7em; width: 100%; padding: 0 0 0 30px; margin: 0 0 22px -30px; line-height: 23px; height: 23px; background: url(../images/lightbox-b-logo.png) no-repeat; font-family: "Frutiger","Lucida Grande","Lucida Sans Unicode","Helvetica Neue",Helvetica,Arial,sans-serif; }
  #promo-a .content p { font-size: 1.1em; }
  #promo-a .content .phone { position: absolute; left: 50px; bottom: 20px; margin: 0;  }
  #promo-a .content .slogan { position: absolute; right: 30px; bottom: 20px; margin: 0; text-align: right; padding: 48px 0 0; background: url(../images/lightbox-b-10.png) 100% 0 no-repeat;  }

.promo-b { width: 774px; height: 398px; margin: 0 auto; }
 .promo-b .visual { position: absolute; left: -999em; }
 .promo-b .content { position: relative; height: 85px; padding: 314px 320px 0 50px; }
  .promo-b .content h2 { font-weight: normal; font-size: 1.5em; width: 100%; padding: 0 0 0 30px; margin: 0 0 5px -30px; line-height: 23px; height: 23px; background: url(../images/lightbox-b-logo.png) no-repeat; font-family: "Frutiger","Lucida Grande","Lucida Sans Unicode","Helvetica Neue",Helvetica,Arial,sans-serif; }
  .promo-b .content p { font-size: 1.1em; }
  .promo-b .content .slogan { position: absolute; right: 25px; bottom: 15px; margin: 0; text-align: right; padding: 48px 0 0; background: url(../images/lightbox-b-10.png) 100% 0 no-repeat;  }

#promo-05 { background: url(../images/promos/promo-05.jpg) no-repeat; }
#promo-06 { background: url(../images/promos/promo-06.jpg) no-repeat; }

/* Personality Scale 
------------------------------------------- */
#scale { }
html.js #scale { position: absolute; left: -999em; }
.scale-inner { color: #fff; }
 html.js .scale-inner { padding: 30px; }
 .scale-inner h2 { margin: 0 0 10px; font-size: 1.8em; font-weight: normal; text-transform: uppercase; }
  .scale-inner h3 { font-style: italic; margin: 0 0 10px; font-size: 1.8em; font-weight: normal; }
   .scale-inner h3 span { text-transform: uppercase; font-style: normal; }
 .scale-inner .section-a { padding: 25px 18px 0 ; border-bottom: 1px solid #fff; overflow: hidden; }
  .scale-inner .section-a p { padding: 0 100px 0 0; }
  .scale-inner .section-a  .steps { position: relative; height: 82px; width: 572px; padding: 0; list-style: none; margin: 0 auto 2px; overflow: hidden; background: url(../images/scale.png) 0 100% no-repeat; }
   .scale-inner .section-a  .steps li { position: absolute; top: 0; width: 14px; height: 13px; font-size: 0; }
   .scale-inner .section-a  .steps li.corp-3 { left: 86px; }
   .scale-inner .section-a  .steps li.corp-2 { left: 164px; }
   .scale-inner .section-a  .steps li.corp-1 { left: 243px; }
   .scale-inner .section-a  .steps li.casu-1 { left: 321px; }
   .scale-inner .section-a  .steps li.casu-2 { left: 399px; }
   .scale-inner .section-a  .steps li.casu-3 { left: 478px; }
    .scale-inner .section-a  .steps li a { display: block; width: 100%; height: 100%; background: url(../images/scale-item.png) no-repeat; text-indent: -999em; overflow: hidden; }
    .scale-inner .section-a  .steps li a:hover, .scale-inner .section-a  .steps li a.active { background-position: 0 100%;  }
  .scale-inner .section-b { padding: 15px 18px 10px; border-bottom: 1px solid #888; overflow: hidden; }
  html.js .scale-inner .section-b { display: none; }
   .scale-inner .section-b p { margin: 0 0 10px; }
   .scale-inner .section-b p.desc { margin: 0; }
   .scale-inner .step { padding: 0 200px 0 0; min-height: 93px; background-repeat: no-repeat; background-position: 100% 0; }
   * html .scale-inner .step { height: 93px; }
   html.js .scale-inner .step { display: none; }
   #corporate-3 { background-image: url(../images/scale/corporate-3.png); }
   #corporate-2 { background-image: url(../images/scale/corporate-2.png); }
   #corporate-1 { background-image: url(../images/scale/corporate-1.png); }
   #casual-1 { background-image: url(../images/scale/casual-1.png); }
   #casual-2 { background-image: url(../images/scale/casual-2.png); }
   #casual-3 { background-image: url(../images/scale/casual-3.png); }
 .scale-inner .section-c { padding: 15px 18px 0; }
  .scale-inner .section-c .errors { margin: 0 0 10px; }
 html.js .scale-inner .section-c { display: none; }
  .scale-inner .section-c p.emf { color: #a6a8ab; margin: 0 0 10px;  }
   .scale-inner .section-c p.emf strong { font-weight: normal; color: #fff; } 
  .scale-inner form div.wrap { width: 100%; overflow: hidden; }
   .scale-inner form div.wrap p { position: relative; float: left; margin: 0 3px 10px 0; font-size: 1em; }
    .scale-inner form div.wrap p input { float: left; background: #a6a8ab; border: none; color: #000; padding: 6px 3px; height: 14px; line-height: 1; }
    .scale-inner form div.wrap p label { position: absolute; left: -999em; top: 6px; color: #fff; text-transform: uppercase; }
    html.js .scale-inner form div.wrap p label { left: 3px; }
   .scale-inner form div.wrap p.email { width: 216px; }
    .scale-inner form div.wrap p.email input { width: 210px; }
   .scale-inner form div.wrap p.name { width: 170px; }
    .scale-inner form div.wrap p.name input { width: 164px; }
   .scale-inner form div.wrap p.phone { width: 146px; }
    .scale-inner form div.wrap p.phone input { width: 140px; }
   .scale-inner form div.wrap p.submit { width: 35px; margin: 0; }
    .scale-inner form div.wrap p.submit button { display: block; width: 35px; height: 26px; background: url(../images/scale-submit.png) no-repeat; text-indent: -999em; overflow: hidden; border: none; }

/* Icons 
------------------------------------------- */

a#presenation { background-image:url(/images/presentation-a.png); height: 144px; width:180px; display:block; }
a#presenation span { display:none; }
a#presenation:hover { background-image:url(/images/presentation-b.png); }

a#success { background-image:url(/images/success-a.png); height: 144px; width:180px; display:block; }
a#success span { display:none; }
a#success:hover { background-image:url(/images/success-b.png); }

a#work { background-image:url(/images/work-a.png); height: 144px; width:180px; display:block; }
a#work span { display:none; }
a#work:hover { background-image:url(/images/work-b.png); }