/* ---------------------------------------------------------- BudoBeats CSS Last Update: May 2009 TABLE OF CONTENT 01 - GLOBAL BROWSER RESET 02 - COMMON STYLE 03 - LAYOUT 04 - HOMEPAGE 05 - SUBPAGES 06 - FRAMEWORK 07 - UTILITY COLOR GUIDE (Main Site Colors and their Hex Codes) ---------------------------------------------------------- */ /* 01 =GLOBAL BROWSER RESET ---------------------------------------------------------- */ /* YUI Reset version: 2.7.0 */ html { color: #000; background: #FFF; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,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,optgroup { font-style: inherit; font-weight: inherit; } del,ins { text-decoration: none; } li { 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; font-variant: normal; } sup { vertical-align: baseline; } sub { vertical-align: baseline; } /*because legend doesn't inherit in IE */ legend { color: #000; } input,button,textarea,select,optgroup,option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; } /*@purpose To enable resizing for IE */ /*@branch For IE6-Win, IE7-Win */ input,button,textarea,select { *font-size: 100%; } /* 02 =COMMON STYLE ---------------------------------------------------------- */ @font-face { font-family: gothic; src: url("http://www.budobeats.com/img/LeagueGothic.otf") format("opentype"); } body { font: 12px/17px Helvetica, "Helvetica Neue", Arial, Geneva, sans-serif; color: #000; } .base h1 { color: #3d5e5e; font-size: 4.5em; margin-bottom: 20px; line-height: 1em; font-family: gothic; } .base h2 { color: #729ea0; font-size: 1.8em; margin-bottom: 10px; line-height: .8em; font-weight: bold; font-family: gothic; } .base h3 { color: #729ea0; font-size: 1.3em; margin-bottom: 10px; line-height: .8em; font-weight: bold; } .base h4 { } .base p { margin-bottom: 15px; } a { text-decoration: none; color: #729ea0; } a:hover { text-decoration: underline; } blockquote { } .base ul, ol { } .base ul { } .base ol { } .base ul li, .base ol li { } .base li ol { } .base li ul { } .date { color: #555555; font-style: italic; margin-bottom: 2px; } .base h2 a { color: #729ea0; margin-bottom: 5px; } #main.base .entry h2 { margin-bottom: 5px; } #main p img { float: left; display: inline; padding-right: 10px; padding-bottom: 10px; } .entry { margin-bottom: 20px; float: left; width: 100%; } p.more { float: left; width: 600px } .title { float: left; width: 600px; margin-bottom: 5px} /* 03 =LAYOUT ---------------------------------------------------------- */ html { background: #e2e2c8; } #wrapper { width: 960px; margin: 0 auto; } #header { background: url(/img/header.jpg) no-repeat; height: 149px; } .full-width #header { background: url(/img/header-full.jpg) no-repeat; } #header img.site-logo { float: left; padding-top: 40px; } #header .quick-signup { width: 217px; float: right; height: 70px; padding-top: 5px; background-color: #cdccb5; padding: 10px; } #header .quick-signup input.email { padding: 3px; border: 1px solid #578480; width: 160px; } #header .quick-signup input.btn { float: right; margin-top: 5px; margin-right: 10px; } #header .quick-signup legend { color: #719e9f; font-size: 1.8em; margin-bottom: 7px; float: left; font-family: gothic; width: 208px; } #header .quick-signup label { color: #719e9f; padding-right: 5px; } #header .quick-signup #mce-success-response { font-size: .8em; height: 0; overflow: hidden; width: 0; } #site-nav { float: right; background: #719e9f; right: 71px; top: 104px; width: 530px; height: 35px; padding-left: 5px; padding-top: 0; padding-bottom: 0; margin-top: 15px; margin-right: 1px; } #site-nav ul li{ display: inline; } #site-nav ul li a { color: #fff; float: left; background: #719e9f; letter-spacing: 3px; padding: 10px 12px 8px; font-weight: bold; font-size: 1em; } #site-nav ul li a:hover { color: #3d5e5e; text-decoration: none; } #site-nav ul li.nav_active a { color: #3d5e5e; text-decoration: none; } #content { background: url(/img/bg_content.jpg) repeat-y; } .full-width #content { background: #fff; } #main { float: left; padding: 20px; width: 600px; } #footer { background: url(/img/footer.jpg) no-repeat; height: 35px; padding-top: 155px; } .full-width #footer { background: url(/img/footer-full.jpg) no-repeat; } #sidebar { float: left; padding: 14px 20px 20px; width: 280px; } .sidebar-box { background: #d5d5ca ; float: left; width: 255px; border: 2px solid #2c7078; margin-bottom: 10px; padding: 10px;} #albums { height: 325px; } #sidebar .controls { width: 255px; height: 40px; position: relative; top: -40px; } #sidebar a.qp_next { float: left; z-index: 1000; position: relative; font-weight: bold; } #sidebar a.qp_prev { float: right; z-index: 1000; position: relative; font-weight: bold; } .album-cover { height: 245px; overflow: hidden; margin-bottom: 6px; width: 255px; } .album-purchase { width: 235px; background: #759492 left; padding: 10px; height: 34px; margin-bottom: 5px; text-align: center; } .album-purchase a { color: #fff; font-size: 1.2em; } #sidebar #beats { float: left; height: 200px; margin-bottom: 10px; } #sidebar #twitter.sidebar-box { padding: 0; width: 280px; border: none; background: #729ea0} #sidebar #twitter ul.twitter { } #sidebar #twitter li { font-weight: bold; padding: 5px 10px; width: 250px; margin-left: auto; margin-right: auto; color: #fff; } #sidebar #twitter li.two { border-bottom: 1px dashed #3d5e5e; border-top: 1px dashed #3d5e5e; } #twitter h3 { color: #fff; font-size: 2em; margin-bottom: 0; line-height: .8em; font-weight: bold; text-align: ; text-transform: lowercase; padding: 10px 10px 5px 15px; } #twitter h3 a { color:#fff } /* 04 =HOMEPAGE ---------------------------------------------------------- */ img.blog-thumb { width: 90px; float: left; padding-right: 10px; padding-bottom: 10px; } .blog-summary { float: left; width: 500px; } #home .entry { margin-bottom: 20px; float: left; width: 600px; } /* 05 =SUBPAGES ---------------------------------------------------------- */ #map { width: 590px; height: 390px; border: 5px solid #759492; margin-bottom: 20px; } div.popup div { width: 200px; height: 150px; display: block; margin-bottom: 5px;} #map h2 { font: bold 1.5em Helvetica, sans-serif; margin-bottom: 5px;} #featuredMap h4, #map h4 { font: normal .9em/1.25em Verdana, sans-serif; margin: 0 0 5px 0 ; text-align: left;} #featuredMap p, #map p { line-height: 17px; margin: 0 0 10px 0;} #featuredMap div.popup div div, #map div.popup div div { height: 111px; overflow: hidden; display: block;} #featuredMap div.popup div img, #map div.popup div img { width: 92px; height: auto; float: left; margin-right: 10px;} #map .popup p { line-height: 17px; margin: 0 0 10px 0; overflow: auto; float: left; width: 220px; height: 65px; } #disqus_thread { float: left; width: 600px; margin-top: 25px; } .event-listings { float: left; width: 590px; border: 5px solid #e2e2c8;} table.event-listings tbody tr td{ padding: 5px; } .event-listings tr.one { background: #759492; } .event-listings .two { background: #3d5e5e; padding: 20px 10px 5px 20px; } .event-listings h3 { float: left; margin-bottom: 0; padding-right: 10px; color: #fff; font-size: 1em; line-height: 1.2em; } table.event-listings { color: #fff; margin-bottom: 5px; } .event-listings td.date { color: #fff; margin-bottom: 5px; width: 117px; } #video h1 { font-size: 2.5em; margin-left: -20px; } #video .videos { padding-right: 20px; padding-left: 20px ;} #video .left { width: 100%; margin: 0 auto 15px; } #video .video-thumb { width: 100px; } #video span.thumb { display: block; margin-right: 5px; border: 2px solid #759492; width: 125px; height: 175px; text-align: center; font-weight: bold; padding: 5px; } #video .media_gallery, #video .entry { float: left; width: 186px; } #downloads #main { width: 920px; } #downloads .entry { width: 910px; border: 5px solid #759492; } #downloads .download-image { float: left; display: inline; width: 350px; height: 350px; overflow: hidden; border-right: 5px solid #759492; } #downloads .download-text { float: left; background-color: #e2e2c8; padding: 40px; height: 270px; width: 475px; } #downloads .download-text p{ font-size: 1.2em; margin-top: 10px; } #downloads .controls { width: 60px; float: right; position: relative; top: -50px; right: -2px; } #video-top { float: left; width: 920px; } #video-bottom { float: left; width: 920px; padding-top: 0; height: 100%; background-color: #457e77; margin-top: 10px; } #video #content { min-height: 900px; padding: 10px; } .main-video { float: =; margin-left: auto; margin-right: auto; width: 560px; } .video-title { background-color: #970b10; padding: 10px; color: #f2f2f2; height: 11px; width: 240px; float: left; } .video-title .date{ float: left; margin-bottom: 0; color: #f2f2f2; } .video-title .video-time{ float: right; margin-bottom: 0; color: #f2f2f2; font: .8em/1em "Lucida Grande", Lucida, Verdana, sans-serif; margin-bottom: 5px; } .video-summary { padding: 10px; color: #fff; width: 240px; float: left; height: 300px; } .video-summary h2 { color: #fff; width: 240px; display: inline; word-wrap: break-word; margin-left: 0px; margin-right: 20px; } .video-summary .title-summary { height: 260px; } #more-videos { float: right; width: 563px; padding: 15px 0 15px 15px; background-color: #457e77; color: #fff; font: 12px "Lucida Grande", Lucida, Verdana, sans-serif; height: 100%; } #more-videos h1 { color: #fff; width: 154px; float: left; } #more-videos a { color: #fff; font: 12px "Lucida Grande", Lucida, Verdana, sans-serif; } #more-videos .video-list-top { border-bottom: #fff 1px solid; padding-bottom: 10px; padding: 10px; height: 20px; margin-bottom: 1px; } #more-videos .video-list-top #video-list-counter { float: right; } #more-videos #video-list { float: left; width: 560px; padding: 0; margin: 0; height: 330px; overflow: hidden; } #more-videos #video-list li { list-style: none; width: 130px; float: left; padding: 10px 10px 10px 0; overflow: hidden; height: 150px; } #more-videos #video-list li img { width: 115px; padding-bottom: 0; border: 1px solid #98140f;} #more-videos .video-list-top a { padding-right: 5px; padding-left: 5px;text-transform: lowercase; text-decoration: none; } .video-form { background: #749491; height: auto; width: 311px; float: left; padding: 15px; } .video-form h2 { color: #fff; } .video-form input.text { border: 1px solid #999999; padding: 3px; font: 12px "Lucida Grande", Lucida, Verdana, sans-serif; margin-bottom: 10px; width: 300px; } .video-form input.nome { float: left; width: 130px; margin-right: 3px; } .video-form input.sobrenome { float: left; width: 159px; } .video-form textarea { float: left; width: 300px; border: 1px solid #999999; padding: 3px; font: 12px "Lucida Grande", Lucida, Verdana, sans-serif; margin-bottom: 7px; height: 200px; } .video-form input.buttonImage { float: right; } .video-entry .video-summary { padding: 0; color: #fff; width: 114px; float: left; margin-bottom: 5px; margin-top: 5px; } #video .share { background-color: #fdfcf8; padding: 10px 5px; float: right; width: 230px; color: #000; border: 1px solid #411c32; height: 18px; } #video #disqus_thread { float: left; width: 319px; margin-top: 0; } #video #disqus_thread h3, #video .video-form a { color: #fff } #video .share h4 { float: left; width: 95px; text-transform: uppercase; font-weight: bold; font-size: .85em; height: 12px; margin-top: 3px; padding-right: 10px; } /* 06 =FRAMEWORK ---------------------------------------------------------- */ /* 07 =UTILITY ---------------------------------------------------------- */ .stretcher { clear: both; height: 1px; visibility: hidden; } .nomargin { margin-bottom: 0px; } .floatl {float: left; margin: 0; padding: 0 10px 10px 0;} .floatr {float: right; margin: 0; padding: 0 0 10px 10px;} .floatl-nomargin { float: left; margin: 0; padding: 0;} .floatr-nomargin { float: right; margin: 0; padding: 0;} .clear {clear:both; height:0; margin:0; font-size: 1px; line-height: 0;} i, em { font-style: italic; } b, strong { font-weight: bold; } sup, sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative;} sup { bottom: 1ex; } sub { top: .5ex; } .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix {display:inline-block;} .clearfix {display:block;}.clearfix {display:block;}