* { padding:0; margin:0; }
h1 { font-size:36px; }
h2 { font-size:25px; }
h3 { font-size:20px; }
h4, h5 { font-size:18px; }
h1, h2, h3, h4, h5 { padding:0 0 1em; line-height:1.1em; }
p { padding: 0 0 1em; }
ul, ol { padding: 0 0 1em 2em; }
img { border:0; }
input[type=button], input[type=submit] { cursor:pointer; }
input[type=button] *, input[type=submit] * { outline:0; }
input[type=text], textarea { background:url(art/input-bg.png) no-repeat left top #f2f2f2; border:1px solid #ddd; padding:5px; border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px; font-size:inherit; font-family:inherit; resize: none; }
input[type=text]:focus, textarea:focus { background-color:#fff; border-color:#888; }
input[type=text].error, textarea.error { background-color:#fcc; border-color:#a00; }

address { font-style:normal; }
:focus	{ outline:0; }
::-moz-focus-inner { border:0; }

a { color:#fff; }
a:hover { color:#ccc; }

body { color:#fff; background:#e1e1e1; font:14px/18px Arial; }

.left { float:left; }
.right { float:right; }
.clear { clear:both; }
.toc { list-style:none; padding:0; }
.toc li { float:left; }

.button { border:2px solid; padding:5px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; text-decoration:none; font-style:italic; box-shadow:0px 0px 2px #666; -moz-box-shadow:0px 0px 2px #666; -webkit-box-shadow:0px 0px 2px #666; }
.button:focus { border-color:#fff; box-shadow:0px 0px 2px #000; -moz-box-shadow:0px 0px 2px #000; -webkit-box-shadow:0px 0px 2px #000; }

.container { width:984px; margin:0 auto; position:relative; padding:0 28px; }
.header { position:absolute; top:0; width:100%; z-index:42; min-width:1040px; }
.header .container { width:1040px; padding:0; }
.promo { background:url(art/bg.jpg) no-repeat top center #696969; padding:0 0 40px; position:relative; height:600px; min-width:1040px; }
.secondary { background:url(art/bg-sec.jpg) no-repeat top center #696969; position:relative; padding:140px 0 80px; font:normal 15px/24px Arial; min-width:1040px; }
.secondary .container { width:974px; padding:0 33px; }
.fat-footer { margin:-50px 0 0; color:#696969; min-width:1040px; }

.logo { float:left; padding:20px 0 0; margin:0 0 0 35px;}
.top { float:right; margin:0 34px 0 0; z-index:42; position:relative; }
.top li { width:97px; font:normal 14px/16px Arial; text-align:center; position:relative; }
.top li a { color:#fff; text-transform:lowercase; font:16px "Century Gothic", Arial; text-decoration:none; display:block; padding:40px 0 0; position:relative; z-index:5; height:85px; }
.top li a:hover span { border-bottom:3px solid #ff8001; padding:0 0 4px; }

.menu-over-effect { width:168px; height:125px; position:absolute; top:0; left:-35px; z-index:1; }
.menu-over-effect .left, .menu-over-effect .right { width:0; background:url(art/top-toc-over.png) no-repeat; height:125px; position:absolute; top:0; right:133px; }
.menu-over-effect .right { background-position:-178px 0; left:133px; width:35px; }
.menu-over-effect .middle { width:98px; background:url(art/top-toc-over.png) no-repeat -35px 0; height:125px; position:absolute; left:35px; opacity:0; }

.promo .toc-wrapper { background:url(art/panel-toc.png) no-repeat; position:absolute; top:560px; right:49px; height:39px; padding:0 0 0 12px; }
.promo .toc { background:url(art/panel-toc.png) no-repeat top right; padding:0 12px 0 0; height:39px;}
.promo .toc li { width:22px; background:url(art/panel-toc.png) no-repeat -34px 0; height:39px; cursor:pointer; }
.promo .toc li span { display:none; }
.promo .toc li:hover, .promo .toc li.active { background-position:-12px 0; }

.promo .slide { height:600px; position:absolute; top:0; left:0; width:100%; }
.promo .slide h1 { position:absolute; top:200px; left:35px; z-index:20; font:normal 30px/30px arial; }
.promo .slide h1 strong { display:block; font:normal 60px/60px arial; text-transform:uppercase; }
.promo .slide p { position:absolute; z-index:20; top:315px; left:35px; width:350px; }
.promo .slide .button { position:absolute; top:420px; left:35px; background:url(art/oj-button-fade.png) repeat-x top #e36000; font:normal 24px/24px "Century Gothic", arial; border:2px solid #ff7f00; padding:5px 0; width:130px; text-align:center; }
.promo .slide .button:hover { color:#fff; background:#ff7f00; border-color:#e35800; }
.promo .slide .button + .button { left:200px; }

.promo .slide.experience h1 strong { letter-spacing:-2px; }

.promo .slide.websites img { position:absolute; right:10px; bottom:20px; }
.promo .slide.software img { position:absolute; right:70px; bottom:-2px; }
.promo .slide.experience img { position:absolute; right:50px; bottom:-2px; }

.secondary .col { width:470px; }
.secondary h3 { font:normal 18px/24px Arial; padding:0 0 15px; }
.secondary h1 { font:normal 30px/34px Arial; }
.secondary h1 strong { font:normal 60px/65px Arial; text-transform:uppercase; display:block; }
.secondary .sub.toc li { display:block; float:none; }
.secondary .sub.toc li a { font:18px/28px Arial; }

ol.portfolio { list-style:none; padding:0; clear:both; }
ol.portfolio + .portfolio { padding:18px 0 0; }
ol.portfolio li { border:5px solid #fff; width:220px; height:130px; float:left; box-shadow:0px 3px 3px #444; -moz-box-shadow:0px 3px 3px #444; -webkit-box-shadow:0px 3px 3px #444; cursor:pointer; position:relative; }
ol.portfolio li + li { margin:0 0 0 18px; }

.portfolio li img { position:absolute; z-index:1; }
.portfolio li div { background:rgba(0,0,0,.5); height:130px; width:220px; position:absolute; z-index:42; }
.portfolio li h3 { padding:8px; font:bold 15px Arial; }
.portfolio li p { padding:0 8px; font:14px Arial; }

.body-overlay { background:rgba(0,0,0,.7); width:100%; height:100%; position:fixed; top:0; left:0; z-index:101; cursor:pointer; }
.close { cursor:pointer; width:40px; height:40px; position:absolute; z-index:1; top:-25px; right:-25px; background:url(art/close.png) no-repeat; }

.lb-container { position:absolute; border:10px solid #fff; box-shadow:0px 0px 10px #000; -moz-box-shadow:0px 0px 10px #000; -webkit-box-shadow:0px 0px 10px #000; z-index:102; background:#fff; }
.lb-container img { display:block; }
.lb-container .go-left, .lb-container .go-right { position:absolute; left:0; height:100%; background:#000; opacity:0; top:0; width:100px; cursor:pointer; }
.lb-container .go-right { right:0px; left:auto; }

.tabs { background:url(art/tab-container.png) no-repeat top left; height:50px; }
.tabs li { background:url(art/tabs.png) no-repeat -87px 0; display:block; width:232px; height:31px; margin:19px 0 0 22px; }
.tabs li:hover { background-position:-87px -31px; }
.tabs li + li { margin:19px 0 0 4px; }
.tabs li span { display:block; width:222px; padding:6px 0 6px 15px; background:url(art/tabs.png) no-repeat 208px 7px; color:#fff; font:16px/18px "Century Gothic", Arial; cursor:pointer; }
.tabs li.active span { background-position:208px -23px; }
.tab-content { background:url(art/tab-container.png) repeat-y right; padding:0 19px; height:215px; }
.tab-footer { background:url(art/tabs.png) no-repeat -30px -62px; height:47px; }
.likes { padding:8px 0 0 25px; width:100px; position:absolute; top:265px; left:20px; z-index:42; }
.likes a { padding:0; position:absolute; top:9px; left:68px; }
.likes a + a { left:97px; }
.tab-footer a { color:#fff !important; font-size:16px; float:right; padding:10px 50px; }

.tabs li.news { background-position:-319px 0; }
.tabs li.news:hover { background-position:-319px -31px; }
.tabs li.news span { background-position:208px -53px; }
.tabs li.news.active span { background-position:208px -84px; }

.tabs li.partners { background-position:-551px 0; }
.tabs li.partners:hover { background-position:-551px -31px; }
.tabs li.partners span { background-position:208px -113px; }
.tabs li.partners.active span{ background-position:208px -143px; }

.tabs li.contact { background-position:-783px 0; }
.tabs li.contact:hover { background-position:-783px -31px; }
.tabs li.contact span { background-position:208px -173px; }
.tabs li.contact.active span { background-position:208px -203px; }

.news .tab-footer { background-position:-30px -109px; }
.partners .tab-footer { background-position:-30px -156px; }
.contact .tab-footer { background-position:-30px -203px; }

.latest h1, .latest h2, .latest h3, .latest a { color:#e35400; }
.latest .launch { float:left; width:690px; list-style:none; padding:20px 15px 0 5px; border-right:1px solid #ccc; height:180px; overflow:none; margin:7px 15px 7px 0; }
.latest .launch img { float:left; border:5px solid #fff; box-shadow:0px 0px 5px #aaa; -moz-box-shadow:0px 0px 5px #aaa; -webkit-box-shadow:0px 0px 5px #aaa; }
.latest .launch-text { float:right; width:440px; }
.latest .launch-text p { padding:0; }
.latest .button { background-color:#e35400; border-color:#ff7f00; color:#fff; }
.latest .button:hover { background-color:#ff7f00; border-color:#e35400; }
.latest .launch-text h3 { padding:0 0 10px; }
.latest .tagline { padding:30px 0 0; }
.latest .tagline h2 { padding:0 0 8px; font:bold 24px/24px Arial; }
.latest .tagline h3 { font:normal 18px Arial; }
.latest .tagline h1 { font:normal 30px Arial; }

.news h1, .news h2, .news h3, .news a { color:#00aacb; }
.news .button { background-color:#00aacb; border-color:#5bd3ea; color:#fff; }
.news .button:hover { background-color:#5bd3ea; border-color:#00aacb; }
.news .news-item { float:left; width:453px; border-right:1px solid #ccc; margin:7px 15px 7px 0; padding:20px 15px 0 5px; height:180px; }
.news .news-item img { width:90px; height:90px; background:#ddd; float:left; border:5px solid #fff; box-shadow:0px 0px 5px #aaa; -moz-box-shadow:0px 0px 5px #aaa; -webkit-box-shadow:0px 0px 5px #aaa; }
.news .news-text { float:right; width:335px; }
.news h2, .news h3 { padding:0 0 10px; font:bold 18px Arial; }
.news .latest-tweets { padding:20px 0 0; }
.news .tweets { list-style:none; padding:0; }
.news .tweets a { text-decoration:none; }
.news .tweets a:hover { color:#696969; }
.news .tweets li + li { margin:15px 0 0; }

.contact h1, .contact h2, .contact h3, .contact a, .contact dt, .contact label { color:#8c9d00; }
.contact .address { float:left; width:265px; border-right:1px solid #ccc; padding:20px 15px 0 18px; margin:7px 0; height:180px; }
.contact .address address { font:16px Arial; margin:20px 0; }
.contact .address h2 { font:bold 20px Arial; padding:0; }
.contact .address dt { float:left; width:61px; text-align:right; font:bold 18px Arial; clear:both; padding:0 10px 0 0; }
.contact .address dd { font:18px Arial; }

.contact .follow { width:174px; float:left; border-right:1px solid #ccc; height:180px; padding:20px 0 0; margin:7px 15px 7px 0; }
.contact .follow h3 { text-align:center; font:bold 18px Arial; }
.contact .follow li { float:left; }
.contact .follow li + li { margin:0 0 0 4px; }
.contact .follow ul { list-style:none; padding:0; margin:0 auto; width:100px; }

.contact .form { float:left; width:450px; padding:27px 0 0; }
.contact .form h3 { font:bold 18px Arial; padding:0 0 10px; }
.contact .form input[type=text] { width:290px; }
.contact .form textarea { width:360px; height:60px; }
.contact .form input[type=text] { margin:0 5px 5px 0; }
.contact .form .button { background-color:#9fad28; border-color:#c0d03b; color:#fff; float:right; margin:36px 0 0; }
.contact .form .button:hover { background-color:#c0d03b; border-color:#9fad28; }

.contact-page p, .contact-page address { font:16px "Century Gothic", Arial; }

.contact-page .gmaps { border:5px solid #fff; box-shadow:0px 0px 1px #444; -moz-box-shadow:0px 0px 1px #444; -webkit-box-shadow:0px 0px 1px #444; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; margin:20px 0 0; background:#fff; position:absolute; bottom:0px; }
.contact-page .gmaps input[type=text] { width:300px; }
.contact-page .gmaps input[type=submit] { float:right; width:120px; color:#fff; background:url(art/oj-button-fade.png) repeat-x top; }
.contact-page .google-map { width:440px; height:300px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; margin:5px 0 0; color:#000; font:13px/16px Arial; }
.contact-page .google-map strong { text-transform:uppercase; display:block; border-bottom:1px dashed #eee; }

.contact-page address { margin:0 0 10px; }
.contact-page .follow li { float:left; margin:0 4px 0 0; }
.contact-page .follow ul { list-style:none; padding:0; }

.contact-page .col.left { height:750px; position:relative; }
.contact-page .col.right { background:rgba(255,255,255,.32); border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; padding:10px 30px; width:410px; height:730px; position:relative; }
.contact-page .col.right input[type=text] { display:block; width:398px; }
.contact-page .col.right textarea { display:block; width:398px; height:150px; }
.contact-page .col.right label { display:block; }
.contact-page .col.right label + label { padding:15px 0 0; }
.contact-page .col.right .button { position:absolute; bottom:20px; right:30px; font:normal 16px "Century Gothic", Arial; text-align:center; width:100px; background:url(art/oj-button-fade.png) top #e36000; color:#fff; }
.contact-page .col.right .button:hover { background:#444; }
.contact-page .col.right .button:focus { box-shadow:0px 0px 2px #000; -moz-box-shadow:0px 0px 2px #000; -webkit-box-shadow:0px 0px 2px #000; }

.partners img { display:block; margin:0 auto; }

.footer .container { color:#696969; height:30px; padding:0 0 50px; width:940px; }
.copyright { float:left; }
.footer h3 { float:right; font:normal 14px Arial; }

.message { display:none; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; padding:10px; box-shadow:0px 0px 4px #444; -moz-box-shadow:0px 0px 4px #444; -webkit-box-shadow:0px 0px 4px #444; position:absolute; }
.message.error { display:block; background:#fcc; border:1px solid #a00; color:#a00; }
.message.success { display:block; background:#cfc; border:1px solid #0a0; color:#0a0; }

.message .close { display:block; clear:both; font:10px Arial; cursor:pointer; background:none; position:absolute; top:-12px; right:-12px; padding:0; margin:0; height:auto; background:#fff; padding:2px 4px; text-align:center; width:auto; border:1px solid #000; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; text-transform:uppercase; color:#000; }
.message ul { padding:0 0 0 15px; }
.fat-footer .message { top:100px; right:130px; width:300px; }
.contact-page .message { bottom:20px; width:280px; font:13px Arial; }
.contact-page .message p { font:14px Arial; padding:0 0 5px; }

.services { background:url(art/knife.png) no-repeat top right; min-height:550px; }