/* Global Stylesheet -------------------------- Site: One Mighty Roar URL: www.onemightyroar.com */ /* Color Swatch -------------------------- Deep Purple - 574AAE Background Gray - FAFAFA Almost Black - 111111 */ *{margin:0; padding:0; border:0;} body{ background:#1a1a1a; border-top:2px solid #392A53; -webkit-font-smoothing: antialiased;} /* Top Header Zone */ #header-wrapper{ width:100%; background:#7455A3 url('images/purple-bg.png') no-repeat top center; text-align:center;} #header{margin:0 auto; width:960px; text-align:left;} #hello-bar{height:140px; width:960px; background:/*url("images/index-top-bar-purple-paint.jpg")*/ no-repeat top center; overflow:hidden; position:relative;} .logo-zone{ height:auto; clear:left; float:left;overflow:hidden;} h1#logo-link{height:85px; width:135px; margin:28px 12px 12px 12px; background: url("images/one-mighty-roar-logo.png") no-repeat top left;} h1#logo-link a{text-indent:-9999px; display:block; height:100%; width:100%; text-decoration:none;} #page-slogan{float:left; width:400px; height:50px; text-align:right; margin-top:30px; overflow:hidden; display:none;} #banner-image{ margin:0px 10px 0px 10px; position:relative; overflow:hidden; background:#1a1a1a;} #banner-image img{width:920px; margin:10px;} #content-wrapper{ width:100%; background:#fff url('images/split-bg.png') repeat-y top center; clear:both; text-align:center;} #content{margin:0 auto; width:960px; text-align:left;} .content-box{width:940px; margin:0 10px; background:#f5f5f5; overflow:hidden;} .box-header{position:relative; left:-10px;} .content-box p{padding:10px 30px 25px 30px;} .content-box img.alignright{float:right;clear:right; padding:5px; margin:10px 0px 10px 10px;} .content-box img.alignleft{float:left; clear:left; padding:5px;} img.withborder{border:1px solid #CCC;} img.service-icon{clear:both; margin:0px 0px 0px 0px;} .content-box h3{padding:0px 30px 0px 30px; clear:right;} .content-box ul h3{clear:right;} ul.service-list{list-style:none; margin:0px 10px 20px 30px;} ul.service-list li{width:410px; height:300px; float:left; display:inline; margin:0px 20px 20px 0px; overflow:hidden;} .service-list li p{padding:0px 20px;} .service-list li h3{padding:0px 0px 8px 0px; margin:0; clear:right;} .searchonly{display:none;} /* Navigation w/ Sprites */ #main-nav{width:450px; background:#392A53; border:1px solid #8A6BBF; margin:55px 10px 0 0; float:right; clear:right; overflow:hidden; -moz-border-radius: 5px; -webkit-border-radius:5px;} #main-nav ul{margin:0; padding:4px 0 8px 0;} #main-nav ul li{display:inline; list-style:none; width:80px; height:28px; margin:0 15px 0 0;float:right; text-indent:-9999px;} #main-nav li a{background:url('images/main-menu-sprite.png') top left no-repeat; color:#FFF;text-decoration:none;display:block; height:100%;} #main-nav li.about {width:51px;} #main-nav a{background-position:0px 0px;} #main-nav .about a:hover{background-position:0px -23px;} #main-nav .about a.here {background-position:0px -46px;} #main-nav li.work {width:46px;} #main-nav .work a{background-position:-80px 0px;} #main-nav .work a:hover{background-position:-80px -23px;} #main-nav .work a.here{background-position:-80px -46px;} #main-nav li.network {width:72px;} #main-nav .network a{background-position:-160px 0px;} #main-nav .network a:hover{background-position:-160px -23px;} #main-nav .network a.here{background-position:-160px -46px;} #main-nav li.contact {width:61px;} #main-nav .contact a{background-position:-240px 0px;} #main-nav .contact a:hover{background-position:-240px -23px;} #main-nav .contact a.here{background-position:-240px -46px;} #main-nav li.home {width:49px;} #main-nav .home a{background-position:-400px 0px;} #main-nav .home a:hover{background-position:-400px -23px;} #main-nav .home a.here{background-position:-400px -46px;} #main-nav li.services {width:65px;} #main-nav .services a{background-position:-320px 0px;} #main-nav .services a:hover{background-position:-320px -23px;} #main-nav .services a.here{background-position:-320px -46px;} /* Main Content Section */ .slideshow{width:940px; height:270px; margin: 0 auto; background:#111;} .slideshow li{list-style:none; float:left; display:inline; position:relative; margin:0 auto;} .heytheretag{position:relative; z-index:50; top:-100px;} .omrtv{float:left; padding:10px 40px 20px 40px;} /*Contact Page Only*/ #double-columns{overflow:hidden;} #formbox{width:650px; float:left;} #sidebar {width:250px; float:left;} /* End of Contact Page */ #right-sub-column{ width:689px; float:right; background:#fff; overflow:hidden; } #right-sub-column h2{ font:bold 20pt "Helvetica", Arial, sans-serif; color:#333; margin:10px 25px 0 25px; padding:10px 0 0 0; letter-spacing: -.5px; } #right-sub-column .subline{ font:bold 8pt Arial, sans-serif; color:#888; margin:5px 25px 20px 25px; text-transform: uppercase; } .spanbox{ padding:25px 0 25px 0; margin:0 0 0 25px; border-top:1px dotted #bbb; } .spanbox.bigsub {border:none; padding:5px 25px 10px 0;} .spanbox.bigsub p{font:normal 16pt "Georgia", serif; margin-bottom:10px; padding:0;} .spanbox.bigsub a.subnote{color:#fff; background: #7359A0; -moz-border-radius: 3px; -webkit-border-radius:3px; font:9pt "Helvetica", Arial, Tahoma, Verdana, sans-serif; padding:3px 5px; } .spanbox.bigsub a.subnote:hover{ background: #5E4587; text-decoration:none; } .spanbox.title{ border-top:1px solid #bbb; } .spanbox h5{ padding:10px 0 0 0; } .spanbox.form img{ border:none; float:right; padding:0 0 0 15px; } .spanbox.slides{ overflow:hidden; padding:0px; position:relative; } .spanbox.slides .slider{ background:transparent; margin:25px; text-align:center; width:639px; height:190px; overflow:hidden; } .spanbox.slides .slider li{ list-style:none; float:left; display:inline; position:relative; border:none; } .spanbox.slides #prev-slide{ z-index:100; position:absolute;margin-top:100px; left:20px; float:left; } .spanbox.slides #next-slide{ z-index:100; position:absolute; margin-top:100px; right:20px; float:left; } .spanbox.intro, .spanbox.dotted{ border-bottom:1px dotted #bbb; } .spanbox.intro img{ border:none; float:right; padding:25px 0 0 15px; } .spanbox.intro p, .spanbox.desc p{ color:#555; padding:0; margin-top:10px; } .spanbox p.big{ font:normal 16pt "Georgia", serif; margin:0px; } .spanbox.case .case-details{ clear:left; width:100%; } .spanbox.case img{ } .spanbox.case .case-details img{ border:none; margin:0 0 5px 0; } .spanbox.case h5 a{color:#111; font:bold 15pt "Helvetica", Arial, sans-serif; line-height:1.3em; letter-spacing: -.5px;} .spanbox.case span{color:#888; font:italic 9pt "Georgia","Helvetica", Arial, Tahoma, Verdana, sans-serif; line-height:1.4em; padding-top:3px;} .spanbox.case p{color:#555; font:13px Georgia, serif; line-height:1.4em; padding:3px 0 6px 0; margin:0 0 5px 0; } .spanbox.case a.view{ color:#fff; background: #7359A0; -moz-border-radius: 3px; -webkit-border-radius:3px; padding:3px 5px; font:9pt "Helvetica", Arial, Tahoma, Verdana, sans-serif; line-height:1.4em; margin:0 5px 0 0;} .spanbox.case a.view:hover{ background: #5E4587; text-decoration:none; } .spanbox.client p{font-size:13px; padding:3px 8px 10px 8px;} .spanbox.client h3 a{color:#333; font:bold 20px "Helvetica", Arial, sans-serif; letter-spacing: -.5px;} .spanbox.client p.subtitle {font-size:14px; font-style:italic; color:#888; padding:0px 15px;} .spanbox.client img{float:left; margin: 0px 12px 12px 0px; } .spanbox.crew p{font-size:13px; padding:3px 8px 10px 8px;} .spanbox.crew h3{color:#333; font:bold 20px "Helvetica", Arial, sans-serif; letter-spacing: -.5px;} .spanbox.crew p.subtitle {font-size:14px; font-style:italic; color:#888; padding:0px 15px;} .spanbox.crew img{float:left; margin: 0px 12px 12px 0px; } .spanbox.crew p.connectwith{padding:5px 8px; color:#fff; font-style:italic; font-size:8.5pt; letter-spacing: 1px; background:#1a1a1a; float:left; -moz-border-radius: 3px; -webkit-border-radius:3px;} .connectwith a{ color:#B399DF; font-style: normal; text-transform: uppercase; } #left-sub-column{ width:250px; padding:10px 0; } #left-sub-column h4{ font:bold 16pt "Helvetica", Arial, sans-serif; color:#333; margin:0px 25px 0 0; padding:10px 0 0 0; letter-spacing: -.5px; } #left-sub-column h4.strategic{ margin:10px 25px 0 0;} #left-sub-column .subline{ font:bold 8pt Arial, sans-serif; color:#888; margin:5px 25px 10px 0; text-transform: uppercase; } #left-sub-column p{ font:10pt "Georgia", serif; margin:0 25px 0 0; padding:10px 0px; line-height:1.4em; } #left-sub-column .bordered{ border-top:1px dotted #888; } #left-sub-column ul{ margin:0 25px 0 0; list-style:none; padding:10px 0; overflow:hidden; } #left-sub-column ul li{ color:#555; font:12px "Helvetica","Georgia", serif; line-height:1.3em; margin:0 0 8px 0; } #left-sub-column ul li.last{margin:0;} #left-sub-column li a{ color:#111; border-bottom:1px solid #7F4DCF; } #left-sub-column li a:hover{ border-bottom:1px solid #111; text-decoration: none; } #left-sub-column li.tweet{ line-height:1.4; } #left-sub-column li.space{ padding-top:15px; margin-top:15px; border-top:1px solid #ccc; } #left-sub-column li .followus{ margin:10px 0 0 0; text-align:right; font-size:11px; } #left-sub-column li .followus a{ padding:3px 5px; background:#ccc; color:#555; border:none; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #left-sub-column li .followus a:hover{ background:#999; color:#fff; border:none; } #left-sub-column ul.highlights{ list-style:outside disc; margin:0 25px 0 0; padding:0 0 10px 13px; overflow:hidden; } #left-sub-column ul.highlights li{ line-height:1.6em; } #left-sub-column a.social-link{ padding:3px 5px; background:#ccc; color:#555; border:none; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #left-sub-column a.social-link:hover{ background:#999; color:#fff; border:none; } /*Footer*/ #footer{clear: both; width: 100%; margin: 0; border-top:2px solid #ddd; z-index:1000;} #footerpadding{ margin: 0px auto; width: 960px; } #footerpadding #endnotes{ margin: 5px 0px; padding:10px 25px 10px 10px; float:left; text-align: left; } #endnotes em{ color:#888; font-style: normal; } #endnotes strong{ font:bold 11px "Helvetica", sans-serif; line-height:18px; } #endnotes p{float: left; color:#e5e5e5; font:11px "Helvetica", sans-serif; line-height:18px; padding:0 45px 0 0;} #endnotes p.float{float: left; clear:right;} #endnotes a{font-style:normal; border-bottom:1px dotted #574aae; color:#e5e5e5;} #endnotes a:hover{ text-decoration: none; } /* Fonts & Such */ h2{font:bold 20pt "Helvetica", Arial, sans-serif; color:#333; margin:10px 25px; } #full-span h2{clear:both; margin-bottom:15px;} h3{font-size:22px; color:#222222; padding: 0px 0px 12px 12px; margin:0; font-weight:normal;} #client-gallery h3{font-family:"Georgia", serif; color:#222222; font-size:18px; font-weight:normal; padding-top:8px;} p, ul.stripped li{color:#555555; font:15px "Georgia", serif; line-height:1.6em;} #split-columns p{padding:8px;} #full-span p{padding:8px 12px 12px 12px;} #full-span p.subtitle {font-style:italic;} #client-gallery p.subtitle {padding:0px 0px 12px 0px;} /*Client & Work Page */ img.clientshot {width:300px; height:175px; background:#111;} ul#client-gallery {overflow:hidden; margin:20px; list-style:none; display:block;} ul#client-gallery li{float:left; margin:0px; text-align:center; border-bottom:2px solid #FAFAFA;} #client-gallery li:hover{background:#efefef; border-bottom:2px solid #CCC;} #client-gallery li:hover p{color:#191919;} #client-gallery li:hover h3{color:#574AAE;} #client-gallery li a:hover{ text-decoration:none;} #content-well{height:600px; width:960px; clear:both; background:url("images/content-well-sample.jpg") no-repeat top center;} #content-well h2{padding:45px 45px 15px 45px; margin:0; border:none;} #content-well h3{padding:12px 60px;} /* General Design Elements */ .content-padding{padding:12px;} .clear{clear:both; width:960px; height:0px;} .footer-clear{height:100px; width:100%; clear:both;} a{color:#574aae; text-decoration:none;} a:hover{text-decoration:underline;} .slideshow a{display:block;}