/* Eric Meyer Reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
font: 12px/1.5 arial, verdana, sans-serif; color: #4d4d4d; background: #606060 url(../images/background-body.png) top repeat-x;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Layout */
#wrapper{ width: 1030px; margin: 0 auto; background: transparent url(../images/background-wrapper-tile.png) 0 0 repeat-y; }
#wrapper-inner{ padding: 0 5px; background: transparent url(../images/background-wrapper.png) 0 0 no-repeat; }
/* Header */
#header{ position: relative; z-index: 2; height: 169px; background: transparent url(../images/background-header.jpg) 0 0 no-repeat; }
#logo{ position: absolute; top: 33px; left: 104px; display: block; width: 444px; height: 56px; text-indent: -9999px; }
#kyles-music{ position: absolute; top: 42px; right: 25px; display: block; width: 290px; height: 76px; color: #666; }
#kyles-music strong{
display: block;
color: #FFF;
font-size: 18px;
}
#kyles-music a{
color: #274869;
}
#header ul{ position: absolute; left: 0; bottom: 0; width: 970px; height: 37px; padding: 0 25px; background: transparent url(../images/background-menu.png) 0 0 repeat-x; }
#header ul li{ float: left; position: relative; padding-right: 2px; background: transparent url(../images/background-menu-divider.png) right no-repeat; }
#header ul li a{ display: block; height: 37px; line-height: 37px; padding: 0 11px; font-size: 11px; color: #939393; text-transform: uppercase; text-decoration: none; }
#header ul li a.current{ background: transparent url(../images/background-menu-item.png) 0 0 repeat-x; }
#header ul li a.current, #header ul li a:hover{ color: #4d4d4d; }
#header ul li.rss{ position: absolute; top: 0; right: 30px; background-position: left; }
#header ul li.rss a{ padding: 0 11px 0 34px; background: transparent url(../images/icon-menu-rss.png) 0 0 no-repeat; }
#header ul ul{
position: absolute;
top: 36px;
bottom: auto;
left: -30%;
display: none;
width: 117px;
padding: 0;
height: auto;
background: #000;
opacity: 0.6;
color: #FFF;
}
#header ul ul li{ display: block; float: none; padding: 0; background: none; }
#header ul ul li a{ height: 27px; line-height: 27px; padding: 0; color: #FFF; text-align: center; background: transparent url(../images/submenu-divider.png) bottom no-repeat; }
#header ul li:hover ul{ display: block; }
/* Home Page Feature */
#feature{ position: relative; z-index: 1; height: 378px; background: transparent url(../images/background-feature.jpg) 0 0 no-repeat; }
#feature-images, #feature-images li{ position: absolute; top: 0; left: 0; width: 1020; height: 378px; }
#feature-images{ z-index: 1; }
#welcome{ position: absolute; z-index: 2; left: 25px; top: 37px; width: 326px; height: 303px; padding: 0 28px; }
#welcome h1{ font-size: 26px; line-height: 54px; margin-bottom: 10px; font-weight: bold; }
#welcome p{ font-size: 16px; line-height: 30px; }
#welcome a{ font-size: 14px; line-height: 30px; text-transform: uppercase; color: #4d4d4d; }
#recent-news{ position: absolute; z-index: 2; right: 25px; top: 33px; width: 240px; color: #FFF; }
#recent-news h2{ font-size: 13px; margin-bottom: 10px; }
#recent-news ul li a{ color: #FFF; }
/* Content */
#content-wrapper{ position: relative; background: #7fafd8 url(../images/background-clouds-top.jpg) 0 0 no-repeat; }
#content-wrapper-inner{ padding-bottom: 25px; background: transparent url(../images/background-clouds-bottom.jpg) bottom left no-repeat; min-height: 612px; }
#content-wrapper.transparent-sidebar #shadow-transparent{ position: absolute; top: 0; left: 4px; width: 656px; height: 5px; background: #FFF url(../images/background-content-shadow.png) 0 0 no-repeat; }
#content-wrapper.transparent-sidebar #content{ position: relative; width: 557px; padding: 25px 54px 25px 54px; min-height: 500px; margin: 0 0 0 19px; background: transparent url(../images/background-content2.png) bottom no-repeat; }
#content-wrapper.transparent-sidebar #sidebar{ position: absolute; top: 0; right: 30px; width: 327px; min-height: 500px; padding-top: 28px; }
#content-wrapper.transparent-sidebar #content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#content-wrapper.opaque-sidebar #shadow-opaque{ position: absolute; z-index: 2; top: 0; left: 5px; width: 962px; height: 5px; background: transparent url(../images/background-content-shadow2.png) 0 0 no-repeat; }
#content-wrapper.opaque-sidebar #content{ position: relative; z-index: 1; width: 547px; margin: 0 0 0 19px; padding: 25px 366px 25px 59px; min-height: 500px; background: transparent url(../images/background-content3.png) bottom no-repeat; }
#content-wrapper.opaque-sidebar #content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#content-wrapper.opaque-sidebar #content #sidebar{ width: 307px; float: right; margin-right: -361px; display: inline; }
#content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#content h1{ font-size: 18px; line-height: 40px; margin-bottom: 18px; border-bottom: 1px solid #C7C7C7; }
#content h1 a{ padding-right: 9px; padding-left: 9px; text-decoration: none; color: #979797; }
#content h1 a:hover, #content h1 a.current{ color: #4D4D4D; }
#content ol, #content ul, #content p{ margin-bottom: 18px; }
#content p.byline{ font-weight: bold; }
#content ul.list li{ border-bottom: 1px solid #CCC; padding-bottom: 8px; margin-bottom: 8px; }
.sidebar-image-wide{ width: 327px; background: transparent url(../images/background-sidebar-image-wide.png) 0 0 no-repeat; }
.sidebar-image-wide img{ margin: 14px 0 0 14px; }
.sidebar-image-wide p{ font-weight: bold; margin: 6px 6px 15px 30px; text-align: right; }
.sidebar-image-tall{ width: 327px; background: transparent url(../images/background-sidebar-image-tall.png) 0 0 no-repeat; }
.sidebar-image-tall img{ margin: 14px 0 14px 14px; }
.sidebar-image-tall p{ font-weight: bold; margin: 6px 6px 15px 30px; text-align: right; }
.sidebar-gallery-section-image a{
display: block;
width: 206px;
height: 119px;
margin: 0 0 0 11px;
padding: 11px 0 0 0;
overflow: hidden;
}
/* Home Content */
#content-wrapper.home{ min-height: 370px; background: #000; }
#links-left, #links-right{ line-height: 0; position: absolute; top: 25px; width: 216px; }
#links-left li, #links-right li{ margin-bottom: 9px; }
#links-left li a.box, #links-right li a.box{ display: block; width: 216px; height: 99px; text-indent: -9999px; background-position: 0 0; }
#links-left li a.box:hover, #links-right li a.box:hover{ background-position: 0 -99px; cursor: pointer; }
ul#links-left{ left: 25px; }
ul#links-right{ right: 25px; }
a#box-youtube{ background-image: url(../images/box-youtube.jpg); }
a#box-news{ background-image: url(../images/box-news.jpg); }
a#box-fantasy{ background-image: url(../images/box-fantasy.jpg); }
a#box-flickr{ background-image: url(../images/box-flickr.jpg); }
a#box-about{ background-image: url(../images/box-about.jpg); }
a#box-victory{ background-image: url(../images/box-victory.jpg); }
#follow-kyle{ position: absolute; top: 25px; left: 252px; width: 472px; height: 316px; padding: 0 20px; background: transparent url(../images/panel-follow-kyle.jpg) 0 0 no-repeat; }
#follow-kyle h2{ font-size: 19px; line-height: 44px; }
#upcoming-events{ position: absolute; top: 50px; left: 16px; }
#upcoming-events img{ border: 1px solid #8a8a8a; }
#upcoming-events h3{ font-size: 15px; line-height: 29px; padding: 0 7px; }
#upcoming-events ul li{ padding: 8px 0 8px 7px; background: transparent url(../images/background-events-divider.jpg) top no-repeat; }
#upcoming-events h4{ font-size: 21px; line-height: 21px; }
#upcoming-events p{ margin: 0; padding: 0; line-height: 12px; }
#twitter{ position: absolute; left: 213px; top: 57px; }
#kyle-cam{ position: absolute; top: 166px; left: 207px; width: 142px; }
#kyle-cam h3{ font-size: 15px; line-height: 29px; margin: 0 0 8px 0; padding: 0 7px; }
#kyle-cam img{ border: 1px solid #8a8a8a; }
#kyle-cam a{ font-weight: bold; color: #4a4a4a; }
#where-am-i{ position: absolute; top: 166px; left: 360px; width: 142px; }
#where-am-i h3{ font-size: 15px; line-height: 29px; margin: 0 0 8px 0; padding: 0 7px; }
#where-am-i img{ border: 1px solid #8a8a8a; }
#where-am-i a{ font-weight: bold; color: #4a4a4a; }
/* Content - Follow Kyle */
#follow-kyle-map{ border: 1px solid #c6c6c6; }
#content .follow-kyle-entry{ padding: 18px 0; border-bottom: 1px solid #C6C6C6; }
#content .follow-kyle-entry h2{ font-size: 18px; line-height: 27px; font-weight: bold; }
#content .follow-kyle-entry h2 a{ color: #4d4d4d; text-decoration: none; }
#content .primary h2{ font-size: 33px; line-height: 40px; }
#content .follow-kyle-entry p.byline{ font-size: 13px; font-weight: bold; }
#paginationLinks{ margin: 18px 0 0 0; }
#paginationLinks li{ display: inline; }
#paginationLinks li a{ color: #000; }
#paginationLinks li a.current{ font-weight: bold; color: #666; text-decoration: none; }
/* Content - Gallery */
#content-gallery h2{ font-size: 14px; line-height: 24px; margin-bottom: 18px; }
#gallery-hero{ width: 561px; min-height: 346px; background: transparent url(../images/gallery-hero-shadow.png) 0 0 no-repeat; }
#gallery-hero div{ padding: 14px 0 0 14px; }
#gallery-hero div.youtube-video{ padding: 0; }
/* Content - Store */
#store-form fieldset{ margin-bottom: 15px; }
#store-form dl{ width: 285px; }
#store-form dt{ float: left; width: 75px; height: 1.5em; clear: both; text-align: right; padding: 0 10px 0 0; }
#store-form dd{ float: left; width: 200px; height: 1.5em; padding-bottom: 10px; }
#store-products{ border-top: 1px solid #C6C6C6; border-bottom: 1px solid #aaa; }
#store-products:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#store-products li{ float: left; padding: 18px 33px 0 33px; width: 116px; text-align: center; }
#store-products li p{ font-weight: bold; }
.store-product-image{ display: block; width: 116px; height: 116px; background: transparent url(../images/store-product-shadow.png) 0 0 no-repeat; }
/* Content - Kyle's Music Form */
#music-form fieldset{ margin-bottom: 18px; }
#music-form label{ display: block; }
#music-form input.text{ margin-bottom: 9px; }
/* Content - Where Am I */
#comments form{ display: block; }
#comments form fieldset{ margin-bottom: 18px; }
#comments form label{ display: block; }
#comments form textarea{ width: 400px; height: 150px; }
#comments ol{ margin: 0 0 0 1.5em; list-style: decimal; }
#comments ol li{ margin-bottom: 18px; }
#comments ol li a{ color: #000; }
.comment-meta{ font-weight: bold; }
/* Sidebar */
.sidebar-section{ margin: 0 15px; padding: 15px 25px 0 25px; border-top: 1px solid #C6C6C6; }
.sidebar-section h2{ margin-bottom: 9px; font-size: 18px; font-weight: bold; color: #4D4D4D; }
.sidebar-section h3{ font-size: 14px; font-weight: bold; color: #4D4D4D; }
.sidebar-section img{ border: 1px solid #C6C6C6; }
#sidebar-twitter{ border: 0; padding: 0; }
#sidebar-twitter h2 img{ border: none; }
#content .sidebar-section ul li p{ margin-bottom: 5px; }
#sidebar-gallery h2{ margin: 0 15px; text-align: center; font-size: 18px; color: #4d4d4d; line-height: 36px; border-bottom: 1px solid #c0c0c0; }
#sidebar-gallery h2 img{ position: relative; top: 3px; }
.sidebar-gallery-section{ margin: 18px 15px 0 15px; padding: 0 25px; }
#content .sidebar-gallery-section p{ margin: 0 0 5px 0; padding: 0; font-weight: bold; }
.sidebar-gallery-section-image, .sidebar-gallery-section-video{ width: 228px; height: 141px; background: transparent url(../images/sidebar-gallery-image-shadow.png) 0 0 no-repeat; }
.sidebar-gallery-section-video div { padding: 11px 0 0 11px; }
/* Footer */
#footer{ position: relative; height: 136px; background: transparent url(../images/background-footer.png) 0 0 no-repeat; font-size: 9px; text-transform: uppercase; }
#footer ul{ margin: 0 25px; }
#footer ul li{ display: inline; line-height: 30px; padding-right: 2px; }
#footer ul li a{ color: #4d4d4d; text-decoration: none; margin-right: 2px; font-weight: bold; }
#footer p{ position: absolute; top: 0; right: 25px; line-height: 30px; font-weight: bold; }