/** * Common Styles - Main template styles (used in admin and frontend) * Author: Darren Rees */ /* Reset block level margins and paddings*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} /* Import styles to reset all html tags */ body { margin: 0; text-align: center; color: #000; font-size: 10pt; font-family: Verdana, Arial, Helvetica, sans-serif; } a { text-decoration: none; } ul { list-style: none; padding: 0; margin: 0; } img { border: none;} .text-right { text-align: right; } .bold { font-weight: bold; } .center { text-align: center; } .clear { clear: both; } /* Main layout wrapper - its center floating and fluid width (with min and max values) */ #wrapper { margin: 10px auto; min-width: 950px; max-width: 1020px; text-align: left; } /* IE6 Does not support min and max width - set it to a fixed with - IE6 ONLY */ * html #wrapper { width: 1020px; } #headerLeft img { margin: 12px 0 0 73px; } #headerLeftBlank img { margin: 12px 0 0 73px; } /* Header search box */ #songSearch { margin: 8px 0 0 0px; z-index: 50; font-size: 15px; text-transform: uppercase;} #songSearch p { margin: 0; padding: 0; } #songSearch .keywords input { width: 150px; } /* Content Styles - This is the elsatic panel in the center of the framed layout */ #content { padding: 10px 200px; color: #000;} #content a { color: #060606; text-decoration: underline; } #contentLeft { padding-right: 200px; } #contentRight { float: right; width: 170px; } #contentRight img { margin: 5px 0; text-align: right; float:right;} #contentRight ul { margin: 0; padding: 0 0 0 20px; } #contentRight li a { text-align: left; color: #00f; text-decoration: underline; margin: 0; padding: 0; } #contentFooter { margin: 10px 0; color: #61615E; } #contentFooter a { color: #61615E; } #contentFooterLeft { float: left; width: 250px; } #contentFooterLeft img { float: left; margin-top: 10px;} #contentFooterLeft ul { margin: 90px 0 0px 5px; } #contentFooterRight { float: right; width: 250px; } /* The left side bar */ #sideBarLeft { float: left; width: 150px; padding: 23px 0 5px 10px; color: white; font-size: 80% !important; max-width: 150px; } #sideBarLeft #news { margin-top: 10px; text-align: left; color: #00f; } #sideBarLeft a { color: #fff; text-decoration: underline; } #sideBarLeft a:hover { text-decoration: underline; } #sideBarLeft #otherArtists { margin-top: 350px; } /* The right side bar */ #sideBarRight { float: right; width: 150px; padding: 5px 18px 5px 0px; font-size: 80% !important; color: #666666; } * html #sideBarRight { padding-right: 12px; padding-left: 3px;} * html #bonus #sideBarRight { padding-right: 15px; } #sideBarRight a { color: #094ecc; } #sideBarRight a:hover { text-decoration: underline; } #sideBarRight a:visited { text-decoration: underline; } /* The site footer */ #siteFooter { margin: 20px 0px; text-align: center; color: #6B6B69; clear: both; font-size: 80%; } #siteFooter a { color: #0858FA; } /* Signup Form styles */ #signup .signupHeader { text-align: center; font-weight: bold; margin-bottom: -15px; } #signup label {} #signup .text { background-color: #FFFF98; width: 142px; margin: 5px 0; } #signup .button { text-align: center; width: 100px; margin: 10px 0 0 20px; } .songMenu { margin: 0 0 3px 2px; } .tellAFriend { margin: 0 0 0 180px; } .sitesFor { margin: 0 0 0 59px; } /* Common page specific styles ------------------------------------------------ */ /* Wrapper1 and wrapper2 are used to prevent column drops on the right and left side columns */ #common #wrapper1 { background: url(http://cdn.kididdles.com/side_left.png) repeat-y left top; } #common #wrapper2 { background: url(http://cdn.kididdles.com/side_right.png) repeat-y right top; } /* Top Header - Repeating background allows for elastic layout - Left and right corners are floated to left and right */ #common #header { background: url(http://cdn.kididdles.com/top.png) repeat-x; height: 87px; } #common #headerLeft { background: url(http://cdn.kididdles.com/corner_top_left.png) no-repeat left top; float: left; height: 87px; width: 725px; } #common #headerLeftBlank { background: url(http://cdn.kididdles.com/corner_top_left_blank.png) no-repeat left top; float: left; height: 87px; width: 725px; } #common #headerRight { background: url(http://cdn.kididdles.com/corner_top_right.png) no-repeat right top; float: right; height: 87px; width: 200px; } /* Footer - Again repeating background with floating left and right corners allows for fluid layout */ #common #footer { height: 215px; background: url(http://cdn.kididdles.com/bottom.png) repeat-x; } #common #footerLeft { background: url(http://cdn.kididdles.com/corner_bottom_left.png) no-repeat left top; float: left; height: 215px; width: 750px; } #common #footerRight { background: url(http://cdn.kididdles.com/corner_bottom_right.png) no-repeat right top; float: right; height: 215px; width: 200px; } #common #footerAbout { clear:both;padding-top: 0; text-align: center; font-size: 7pt; color: #7d7a59;} #common #footerAbout li { display: inline; } #common #footerAbout li a { padding: 3px 8px; color: #7D7A59; } #common #signup { margin-top: 20px; color: #5601CC; } #common h1 { font-size: 240%; color: #6200FF; } #common h2 { font-size: 175%; color: #6200FF; margin-bottom: 10px; } #common h3 { font-size: 110%; color: #6200FF; margin-bottom: 10px; } #common #sideBarLeft .sheets { margin: 25px; margin-left: 28px; } #common #songPerformer { margin-top: 100px; color: #757376; } #common #songPerformer a { font-weight: bold; } #common .sideBarText { color: #3F00F9; } #common .sideBarText a { color: #3F00F9; } #common #about { margin-top: 480px; color: #6200FF; } #common #about a { color: #6200FF; } #common .info { color: #000; } #common .lyrics { color: #4F4F4F; font-size: 15pt; line-height: 1.5em; text-align: center; margin-bottom: 50px; padding-top: 20px; float:left;width:568px} #common .songLyrics { color: #4F4F4F; font-size: 15pt; line-height: 1.5em; text-align: center; } #common .instrux { color: #00af8a; font-size: 10pt; margin-bottom: 0; line-height: 1.0em; text-align: center; } #common br { line-height: 1em; } /* End common page specific styles -------------------------------------------- */ /* Performer page specific styles -------------------------------------------- */ /* Wrapper1 and wrapper2 are used to prevent column drops on the right and left side columns */ #wrapper1 { background: url(http://cdn.kididdles.com/images/performer/side_left.png) repeat-y left top; } #wrapper2 { background: url(http://cdn.kididdles.com/images/performer/side_right.png) repeat-y right top; } /* Top Header - Repeating background allows for elastic layout - Left and right corners are floated to left and right */ #performer #header { background: url(http://cdn.kididdles.com/images/performer/top.png) repeat-x; height: 87px; } #performer #headerLeft { background: url(http://cdn.kididdles.com/images/performer/corner_top_left_blank.png) no-repeat left top; float: left; height: 87px; width: 725px; } #performer #headerRight { background: url(http://cdn.kididdles.com/images/performer/corner_top_right.png) no-repeat right top; float: right; height: 87px; width: 200px; } /* Footer - Again repeating background with floating left and right corners allows for fluid layout */ #performer #footer { height: 125px; background: url(http://cdn.kididdles.com/images/performer/bottom.png) repeat-x; } #performer #footerLeft { background: url(http://cdn.kididdles.com/images/performer/corner_bottom_left.png) no-repeat left top; float: left; height: 125px; width: 750px; } #performer #footerRight { background: url(http://cdn.kididdles.com/images/performer/corner_bottom_right.png) no-repeat right top; float: right; height: 125px; width: 200px; } #performer #content .cd1 { padding: 15px 15px 15px 0px; } #performer #content .cd2 { padding: 15px 0px; } #performer #footerAbout { clear:both; padding-top: 0; text-align: center; font-size: 7pt; color: #4f4f4f;} #performer #footerAbout li { display: inline; } #performer #footerAbout li a { padding: 3px 8px; color: #00f; } #performer #signup { margin-top: 20px; color: #fff; } #performer h1 { font-size: 240%; color: #031399; } #performer h2 { font-size: 110%; color: #031399; padding-bottom: 10px; border-bottom: 1px solid #031399; margin-bottom: 10px; } #performer #about { margin-top: 280px; } #performer .info { color: white; } #performer .sideBarText { color: white; } #performer #sideBarLeft #news { margin-top: 10px; text-align: justify; color: #fff; } #performer #sideBarRight ul.categories li { color: #fff; } #performer #sideBarRight ul.categories a { color: #fff; } #performer #performer-left { width: 420px; } #performer #performer-left h1, #performer #performer-left h2 { text-align: left; } #performer #performer-right { width: 150px; float: right; font-size: 8pt; } #performer #performer-right a{ font-size: 8pt; color: #7D7A59; margin: 0; padding: 0; } #performer #performer-right a:visited { color: #7D7A59; } /* End Performer page specific styles ---------------------------------------- */ /* Song page specific styles ------------------------------------------------ */ /* Wrapper1 and wrapper2 are used to prevent column drops on the right and left side columns */ #song #wrapper1 { background: url(http://cdn.kididdles.com/images/song/side_left.png) repeat-y left top; } #song #wrapper2 { background: url(http://cdn.kididdles.com/images/song/side_right.png) repeat-y right top; } /* Top Header - Repeating background allows for elastic layout - Left and right corners are floated to left and right */ #song #header { background: url(http://cdn.kididdles.com/images/song/top.png) repeat-x; height: 87px; } #song #headerLeft { background: url(http://cdn.kididdles.com/images/song/corner_top_left.png) no-repeat left top; float: left; height: 87px; width: 725px; } #song #headerLeftBlank { background: url(http://cdn.kididdles.com/images/song/corner_top_left_blank.png) no-repeat left top; float: left; height: 87px; width: 725px; } #song #headerRight { background: url(http://cdn.kididdles.com/images/song/corner_top_right.png) no-repeat right top; float: right; height: 87px; width: 200px; } /* Footer - Again repeating background with floating left and right corners allows for fluid layout */ #song #footer { height: 125px; background: url(http://cdn.kididdles.com/images/song/bottom.png) repeat-x; } #song #footerLeft { background: url(http://cdn.kididdles.com/images/song/corner_bottom_left.png) no-repeat left top; float: left; height: 125px; width: 750px; } #song #footerRight { background: url(http://cdn.kididdles.com/images/song/corner_bottom_right.png) no-repeat right top; float: right; height: 125px; width: 200px; } #song #footerAbout { clear:both; padding-top: 0; text-align: center; font-size: 9pt; color: #7d7a59; } #song #footerAbout li { display: inline; } #song #footerAbout li a { padding: 3px 8px; color: #0000FF; text-decoration: underline; } #song #signup { margin-top: 20px; color: #5601CC; } #song h1 { font-size: 240%; color: #6200FF; } #song h2 { font-size: 175%; color: #6200FF; margin-bottom: 10px; } #song h3 { font-size: 110%; color: #6200FF; margin-bottom: 10px; } #song #sideBarLeft .sheets { margin: 25px; margin-left: 28px; } #song #songPerformer { margin-top: 10px; color: #757376; margin-left: -3px; } #song #songPerformer a { font-weight: bold; } #song .sideBarText { color: #3F00F9; } #song .sideBarText a { color: #3F00F9; } #song #about { margin-top: 480px; color: #6200FF; } #song #about a { color: #6200FF; } #song .info { color: #000; } #song .lyrics { color: #4F4F4F; font-size: 15pt; line-height: 1.5em; text-align: center; margin-bottom: 50px; padding-top: 20px; float:left;width:568px} #song .songLyrics { color: #4F4F4F; font-size: 15pt; line-height: 1.5em; text-align: center; } #song .instrux { color: #00af8a; font-size: 10pt; margin-bottom: 0; line-height: 1.0em; text-align: center; } #song br { line-height: 1em; } /* End Song page specific styles -------------------------------------------- */ /* Bonus page specific styles ----------------------------------------------- */ /* Wrapper1 and wrapper2 are used to prevent column drops on the right and left side columns */ #bonus #wrapper1 { background: url(http://cdn.kididdles.com/images/bonus/side_left.png) repeat-y left top; } #bonus #wrapper2 { background: url(http://cdn.kididdles.com/images/bonus/side_right.png) repeat-y right top; } /* Top Header - Repeating background allows for elastic layout - Left and right corners are floated to left and right */ #bonus #header { background: url(http://cdn.kididdles.com/images/bonus/top.png) repeat-x; height: 87px; } #bonus #headerLeft { background: url(http://cdn.kididdles.com/images/bonus/corner_top_left.png) no-repeat left top; float: left; height: 87px; width: 725px; } #bonus #headerRight { background: url(http://cdn.kididdles.com/images/bonus/corner_top_right.png) no-repeat right top; float: right; height: 87px; width: 200px; } /* Footer - Again repeating background with floating left and right corners allows for fluid layout */ #bonus #footer { height: 125px; background: url(http://cdn.kididdles.com/images/bonus/bottom.png) repeat-x; margin-top: -15px; } #bonus #footerLeft { background: url(http://cdn.kididdles.com/images/bonus/corner_bottom_left.png) no-repeat left top; float: left; height: 125px; width: 750px; } #bonus #footerRight { background: url(http://cdn.kididdles.com/images/bonus/corner_bottom_right.png) no-repeat right top; float: right; height: 125px; width: 200px; } #bonus #footerAbout { clear:both; padding-top: 0px; text-align: center; font-size: 7pt; color: #fff;} #bonus #footerAbout li { display: inline; } #bonus #footerAbout li a { padding: 3px 8px; color: #fff; } #bonus .sideBarText { color: #FFFFFF; }#contentLeft { padding-right: 250px; } #contentRight { float: right; width: 170px; } #bonus h1 { font-size: 170%; color: #003366; } #bonus h2 { font-size: 130%; color: #003366; padding-bottom: 10px; border-bottom: 1px solid #003366; margin-bottom: 10px; } #bonus #about { margin-top: 280px; } #bonus .info { color: white; } #bonus #news { color: #fff; } /* End Bonus page specific styles ------------------------------------------- */ #common #contentLeft { padding-right: 240px; } #common #contentLeft h1 { text-align: left; } #common #contentLeft h2 { text-align: left; } #common #contentRight { float: right; width: 210px; } #common #newsLeft { padding-right: 100px; } #common #newsLeft p { font-size: 100%; } #common #newsLeft h1 { text-align: left; } #common #newsLeft h2 { text-align: left; } #common #newsRight { float: right; width: 170px; } #common #newsRight .archive { font-size: 11px; } #common #newsRight ul.archive { list-style: none; margin-bottom: 10px; } #common #newsRight .archive li { margin-bottom: 8px; } #common h1 { font-size: 170%; color: purple; } #common h2 { font-size: 130%; color: #b102b1; padding-bottom: 10px; border-bottom: 0px solid #003366; margin-bottom: 10px;} #common h3 { font-size: 105%; color: white; background-color: #b008b0; margin-bottom: 6px; padding-top: 2px; padding-bottom: 3px; padding-left: 6px; border-color: transparent; }