Example of our CSS code
/**********************************************************************************************
CSS on Sails
Title: Kiss925.com
Author: XHTMLized (http://www.xhtmlized.com/)
Date: October 2009
***********************************************************************************************
1. BASE
1.1 Reset
1.2 Accessibility Navigation & Hide
1.3 Clearfix
1.4 Default Styles
1.5 Image replacement generic
1.6 Generic buttons
2. LAYOUT
2.1 Structure
2.2 Header
2.3 Navigation
2.4 Content
2.5 Sidebar
2.6 Bottom
2.7 Footer
2.8 Background pattern
***********************************************************************************************/
/* 1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/
/* 1.1 Reset
-----------------------------------------------------------------------------------------------*/
html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, 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;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
q {
quotes: none;
}
q:before, q:after {
content: "";
content: none;
}
a, ins, del {
text-decoration: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
th, td {
vertical-align: top;
}
th {
text-align: left;
}
/* 1.2 Accessibility Navigation & Hide
-----------------------------------------------------------------------------------------------*/
ol#accessibility-nav, .hide {
position: absolute;
top: -999em;
left: -999em;
height: 1px;
width: 1px;
}
/* 1.3 Clearfix
-----------------------------------------------------------------------------------------------*/
.clearfix:after,
#content:after,
#header .main-nav:after,
#header .sec-nav:after,
#spotlight .nav:after,
.post:after,
.post-nav:after,
.post .links:after,
#sidebar .latest-comments li:after,
.sponsored:after,
.comments .top:after,
.comments .list .action:after,
.title-rss:after,
.simply-list .item:after,
#gallery:after,
.simply-list .featured:after,
.container:after,
#bottom:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 1.4 Default Styles
-----------------------------------------------------------------------------------------------*/
body {
background: #fef200 url(../images/bg_body.jpg) repeat-x;
color: #000;
font: 75%/1.17 "Arial", "Helvetica", sans-serif;
text-align: center;
}
hr {
display: none;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
del {
text-decoration: line-through;
}
th {
font-weight: normal;
}
address, cite, dfn {
font-style: normal;
}
li {
list-style: none;
}
abbr, acronym {
border-bottom: 1px dotted #999;
cursor: help;
}
input, textarea, select {
font-family: "Arial", "Helvetica", sans-serif;
font-size: 1em;
}
a, a:visited {
color: #f148ab;
text-decoration: none;
}
a:hover, a:active {
color: #999;
text-decoration: underline;
}
.sponsored {
font-weight: bold;
font-size: 0.83em;
color: #686868;
text-align: right;
}
.sponsored strong {
float: left;
display: block;
height: 23px;
line-height: 23px;
}
.sponsored img {
float: right;
display: block;
margin-left: 11px;
background: #fff;
}
.clear {
clear: both;
}
/* 1.5 Image replacement generic
-----------------------------------------------------------------------------------------------*/
.ir {
display: block;
overflow: hidden;
position: relative;
line-height: 1.0;
font-size: 1em;
}
.ir span {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
background: url(../images/txt_all.png) no-repeat;
}
.ir a {
cursor: pointer;
display: block;
height: 100%;
width: 100%;
}
.ir a span, a.ir span {
cursor: pointer;
}
/* 1.6 Generic buttons
-----------------------------------------------------------------------------------------------*/
input.button, a.button, a.button:visited {
display: block;
float: left;
border: 0;
background: #8b8b8b;
color: #fff;
padding: 2px 15px 2px 10px;
font-weight: bold;
text-decoration: none;
text-transform: lowercase;
font-size: 1.17em;
line-height: 1.0;
}
.button-big {
font-size: 1.67em;
padding: 0 10px;
}
a.button-rounded, a.button-rounded:visited {
display: block;
float: left;
font: bold 0.83em/1.5 Verdana, Geneva, lucida, sans-serif;
background: url(../images/bg_all.png) -800px -450px no-repeat;
padding: 0 5px;
width: 74px;
height: 18px;
line-height: 18px;
text-align: center;
color: #fff;
}
p.rss {
width: 17px;
height: 16px;
}
p.rss span {
background: url(../images/ico_all.png) 0 -300px no-repeat;
}
/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/
/* 2.1 Structure
-----------------------------------------------------------------------------------------------*/
.show-pattern {
background: url(../images/bg_pattern.jpg) center top no-repeat;
}
.top-banner {
width: 728px;
height: 98px;
padding-top: 15px;
margin: 0 auto;
}
.top-banner img {
display: block;
margin-left: 17px;
}
.container {
width: 975px;
padding: 26px 5px 0 5px;
margin: 0 auto;
position: relative;
text-align: left;
background: #fff url(../images/bg_container.png) top right repeat-y;
}
#content {
width: 601px;
float: left;
padding: 0 0 10px 25px;
min-height: 600px;
}
.home #content {
width: 661px;
padding-left: 0;
}
#sidebar {
width: 303px;
float: right;
padding-top: 5px;
}
#footer {
clear: both;
width: 985px;
margin: 10px auto 0 auto;
padding-bottom: 64px;
text-align: left;
position: relative;
left: -14px;
font: 0.92em/1.5 Verdana, Geneva, lucida, sans-serif;
color: #050505;
}
/* 2.2 Header
-----------------------------------------------------------------------------------------------*/
#header {
height: 235px;
width: 985px;
margin: 0 auto;
text-align: left;
background: url(../images/bg_all_24bit.png) 0 87px no-repeat;
}
#header .site-name {
float: left;
margin: 0 0 0 1px;
}
#header .site-name,
#header .site-name span {
display: block;
overflow: hidden;
width: 229px;
height: 98px;
padding: 117px 0 0 10px;
}
#header .site-name {
position: relative;
}
#header .site-name span {
background: url('../images/logo.png') no-repeat;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
#header a.site-name span {
cursor: pointer;
}
#header .txt-num1-station {
width: 175px;
height: 180px;
position: absolute;
top: 0;
right: 0;
z-index: 100;
text-indent: -999em;
}
#header .txt-num1-station span {
background-image: url(../images/txt_num1_station.png);
}
#header .right {
float: right;
width: 730px;
position: relative;
}
/* Loyalty club */
#header .club {
position: absolute;
top: 5px;
right: 25px;
width: 253px;
height: 76px;
padding: 5px 36px 5px 15px;
background: url(../images/bg_all_24bit.png) 0 -275px no-repeat;
}
#header .txt-club {
float: left;
width: 113px;
height: 12px;
margin-right: 21px;
color: #fff;
}
#header .txt-club span {
background-position: -213px -141px;
}
#header .club a {
color: #ffd1e8;
}
#header .club .register {
float: left;
font-size: 1.08em;
padding-left: 10px;
background: url(../images/ico_all.png) 0 2px no-repeat;
margin-top: -2px;
}
#header .club ol {
clear: both;
padding-top: 5px;
}
#header .club .text {
display: block;
float: left;
width: 109px;
height: 15px;
padding: 3px 4px 2px 11px;
background: #febfdf url(../images/bg_all.png) -852px -419px no-repeat;
color: #000;
margin: 0;
border: 0;
font-size: 0.92em;
}
#header .club .first {
margin-right: 5px;
}
#header .club .submit {
clear: both;
font-size: 0.83em;
padding: 6px 0 0 5px;
font-weight: bold;
}
#header .club .submit a {
display: block;
float: left;
}
#header .club .submit input {
display: block;
float: right;
border: 0;
background: #881273;
color: #fff;
font-size: 0.83em;
font-weight: bold;
}
/* Service of */
#header .service-of {
font-size: 0.75em;
position: absolute;
top: 153px;
left: 0;
width: 567px;
text-align: right;
}
/* Player */
#header #player {
position: absolute;
top: 147px;
left: -7px;
width: 590px;
height: 93px;
}
#header #player img {
display: block;
}
/* Follow us */
#header .follow-us {
position: absolute;
top: 174px;
left: 592px;
width: 130px;
}
#header .txt-follow-us {
width: 58px;
height: 8px;
margin-bottom: 7px;
}
#header .txt-follow-us span {
background-position: 0 -43px;
}
#header .follow-us li {
float: left;
margin-right: 5px;
}
#header .follow-us li .ir {
width: 26px;
height: 27px;
}
#header .follow-us li .twitter, #header .follow-us li .rss {
width: 27px;
}
#header .follow-us li .ir span {
background: url(../images/ico_all.png) no-repeat;
}
#header .follow-us li .facebook span {
background-position: -46px -170px;
}
#header .follow-us li .youtube span {
background-position: 0 -200px;
}
#header .follow-us li .twitter span {
background-position: -46px -230px;
}
#header .follow-us li .rss span {
background-position: 0 -260px;
}
/* 2.3 Navigation
-----------------------------------------------------------------------------------------------*/
#header .main-nav {
position: absolute;
top: 104px;
left: -6px;
}
#header .main-nav li {
float: left;
margin-left: 26px;
}
#header .main-nav a {
display: block;
float: left;
padding: 3px 8px;
color: #fff;
font-size: 1.5em;
font-weight: bold;
text-transform: uppercase;
}
#header .main-nav a:hover, #header .main-nav .current a {
background: #9d3293;
color: #fff;
text-decoration: none;
}
/* Secondary navigation */
#header .sec-nav {
position: absolute;
top: 38px;
left: 6px;
}
#header .sec-nav li {
float: left;
}
#header .sec-nav a {
display: block;
float: left;
color: #fff;
font-size: 1.08em;
font-weight: bold;
text-transform: uppercase;
background: url(../images/bg_all_24bit.png) no-repeat;
}
#header .sec-nav .photos a {
padding: 4px 0 4px 30px;
background-position: -230px -188px;
}
#header .sec-nav .videos {
margin-left: 10px;
}
#header .sec-nav .videos a {
padding: 4px 0 4px 32px;
background-position: -490px -225px;
}
#header .sec-nav .podcasts {
margin-left: 14px;
}
#header .sec-nav .podcasts a {
padding: 4px 0 8px 32px;
background-position: -730px -188px;
}
#header .sec-nav .contact {
margin-left: 12px;
}
#header .sec-nav .contact a {
padding: 4px 0 4px 27px;
background-position: -960px -226px;
}
/* 2.4 Content
-----------------------------------------------------------------------------------------------*/
/* Spotlight tabs */
#spotlight {
width: 650px;
margin: 0 0 20px 10px;
position: relative;
background: url(../images/bg_all.png) -384px -520px no-repeat;
}
#spotlight .txt-spotlight {
width: 108px;
height: 15px;
position: absolute;
top: 5px;
left: 66px;
z-index: 15;
}
#spotlight .txt-spotlight span {
background-position: -213px -33px;
}
#spotlight .rss {
position: absolute;
top: 1px;
left: 199px;
z-index: 15;
}
#spotlight .sponsored {
position: absolute;
top: 0;
right: 36px;
z-index: 15;
width: 160px;
}
#spotlight .sponsored strong {
width: 78px;
}
#spotlight .tab {
width: 563px;
height: 289px;
padding: 23px 10px 10px 43px;
position: absolute;
top: 0;
left: 0;
}
#spotlight .tab img {
display: block;
}
#spotlight .tab .text {
position: absolute;
top: 245px;
left: 0;
z-index: 10;
}
#spotlight .tab h2 {
float: left;
background: #ed1594;
color: #fff;
font: bold 2.5em/1.0 "Courier New", Courier, monospace;
padding: 4px 13px 2px 11px;
}
#spotlight .tab h2 a, #spotlight .tab p a {
color: #fff;
}
#spotlight .tab h2 a:hover {
text-decoration: none;
}
#spotlight .tab p {
clear: both;
float: left;
background: #4a4a4a;
color: #fff;
font-weight: bold;
padding: 9px 12px 9px 11px;
}
#spotlight .tab .frame {
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 33px;
width: 583px;
height: 322px;
background: url(../images/bg_spotlight.png) no-repeat;
cursor: pointer;
}
#spotlight .ui-tabs-hide {
display: none;
}
/* Spotlight navigation */
#spotlight .nav {
padding-top: 326px;
margin-left: 24px;
width: 624px;
}
#spotlight .nav li {
float: left;
width: 115px;
padding-left: 9px;
}
#spotlight .nav li .photo {
position: relative;
display: block;
width: 79px;
height: 47px;
padding: 0 3px 4px 0;
background: url(../images/bg_all.png) 0 -501px no-repeat;
margin-bottom: 7px;
}
#spotlight .nav li .photo .frame {
visibility: hidden;
width: 80px;
height: 49px;
position: absolute;
top: 0;
left: 0;
background: url(../images/bg_all.png) -82px -501px no-repeat;
cursor: pointer;
}
#spotlight .nav li .photo:hover .frame, #spotlight .nav .ui-tabs-selected .photo .frame {
visibility: visible;
}
#spotlight .nav li .photo img {
display: block;
}
#spotlight .nav li a:hover {
text-decoration: none;
}
#spotlight .nav li h3 {
color: #000;
}
#spotlight .nav li p {
color: #797979;
font-size: 0.92em;
font-weight: bold;
line-height: 1.0;
}
/* Content */
#content h1, #content h2.large {
font-size: 1.83em;
color: #555;
margin-bottom: 0.25em;
font-weight: bold;
}
#content h2.large {
margin-bottom: 1em;
}
#content p.subtitle{
margin: -20px 0 20px;
}
/* Middle content column */
.content-middle {
float: right;
width: 468px;
margin-top: 4px;
}
.content-middle h2 {
margin: 0 2px 16px 0;
}
.content-middle h2 img {
display: block;
}
.content-middle .banner {
clear: both;
margin-bottom: 20px;
padding-bottom: 15px;
background: url(../images/border_post.png) bottom repeat-x;
}
.content-middle .banner img {
display: block;
}
/* Kiss Dish */
.txt-kiss-dish {
width: 209px;
height: 35px;
float: left;
}
.txt-kiss-dish span {
background-position: -147px -93px;
}
.content-middle .rss-top {
margin-top: 14px;
}
.content-middle .rss-top img {
display: block;
}
/* Posts */
.post {
clear: both;
padding-bottom: 20px;
margin-bottom: 15px;
background: url(../images/border_post.png) bottom repeat-x;
}
.post h3 {
font-size: 1.83em;
line-height: 1.0;
margin-bottom: 0.35em;
}
.post .content {
font-family: Verdana, Geneva, lucida, sans-serif;
line-height: 1.5;
color: #000;
margin-bottom: 0.75em;
}
.post .content p {
margin-bottom: 0.85em;
}
.post .top-margin {
padding-top: 16px;
}
.post .bar {
font-size: 0.83em;
color: #5c5a5a;
text-transform: uppercase;
margin-bottom: 6px;
}
.post p.related {
font-weight: bold;
font-family: "Arial", "Helvetica", sans-serif;
color: #606060;
margin-bottom: 12px;
clear: both;
}
.post .links ul {
margin: 5px 0 10px 0;
}
.post .links li {
float: left;
padding-left: 10px;
margin-left: 8px;
background: url(../images/ico_all.png) 0 -700px no-repeat;
}
.post .links li.first {
margin: 0;
padding: 0;
background: none;
}
.post .action {
text-transform: uppercase;
height: 1.5em;
font-family: Verdana, Geneva, lucida, sans-serif;
}
.post .action li {
float: left;
margin-right: 9px;
}
.post .action a {
display: block;
float: left;
color: #a30e7b;
background: url(../images/ico_all.png) -60px -316px no-repeat;
padding: 2px 0 6px 20px;
}
.post .action .recommend-num {
margin: -1px 10px 0 0;
color: #a30e7b;
}
.post .action .recommend-num a {
padding: 0;
float: none;
}
.post .action .recommend-num .voted {
color: #a30e7b;
}
.post .action .add-to-any a {
padding: 2px 0 0 0;
background: none;
}
.post .action .add-to-any img {
display: block;
}
.post .action .bookmark a {
padding-left: 14px;
background-position: -65px -395px;
color: #666;
}
.post .action .print {
padding-left: 3px;
}
.post .action .print .ir {
width: 16px;
height: 17px;
padding: 0;
background: none;
}
.post .action .print .ir span {
background: url(../images/ico_all.png) -59px -40px no-repeat;
}
.post img.wide {
display: block;
padding: 7px 9px 9px 7px;
background: url(../images/bg_all.png) 0 -940px no-repeat;
margin: -2px 0 8px -4px;
}
.post .action .comments-num a:hover,
.post .action .recommend-num a:hover {
text-decoration: none;
}
.post img.alignleft, .post img.alignright {
display: block;
float: left;
margin: 10px 5px 10px 0;
padding: 7px 9px 9px 7px;
background: url(../images/bg_all.png) 0 -570px no-repeat;
}
.post .header-image img {
float: left;
display: block;
margin: 5px 18px 18px 0;
}
.post img.alignright {
float: right;
display: block;
margin: 10px 0 18px 18px;
}
.post .page img.alignleft, .post .page img.alignright {
background: none;
padding: 0;
}
.post .content object, .post .content embed {
margin: 0 0 5px 0;
}
.post .map-it {
padding-right: 15px;
background: url(../images/ico_all.png) 100% -658px no-repeat;
}
/* Single post - inherits from .post */
.post-single {
background: none;
margin: 0 0 12px 0;
padding: 0;
}
.post-single .bar {
margin-bottom: 14px;
}
.post-single .action {
margin-bottom: 12px;
}
.post-single .youtube {
margin: 10px 0 20px 0;
}
/* Story - inherits from .post */
.story {
background: none;
margin: 0;
padding: 0;
}
.story .bar {
margin-bottom: 11px;
}
.story .action {
margin-bottom: 12px;
}
.story p {
margin-bottom: 1.5em;
}
/* Comments */
.comments {
background: url(../images/border_post.png) repeat-x;
padding-top: 15px;
}
.comments .top {
margin: 0 0 24px 4px;
}
.comments .top h2 {
float: left;
color: #202020;
font-size: 1em;
}
.comments .top ul {
float: left;
}
.comments .top li {
float: left;
background: url(../images/ico_all.png) 0 -85px no-repeat;
padding-left: 10px;
margin-left: 8px;
}
.comments .top .num {
margin: 0 5px 0 11px;
background: none;
padding: 0;
}
.comments .top .num strong {
display: block;
float: left;
width: 22px;
height: 19px;
line-height: 1.0;
padding-top: 2px;
text-align: center;
font-weight: normal;
background: #fc9634 url(../images/ico_all.png) -28px -60px no-repeat;
color: #fff;
}
.comments .list {
margin: 10px 0;
}
.comments .list .comment {
margin: 0 0 8px;
padding: 16px 0 8px 60px;
background: url(../images/border_post.png) repeat-x;
list-style: outside none none;
}
.comments .list li.first {
background: none;
padding-top: 0;
}
.comments .list .avatar {
display: block;
float: left;
margin: 0 0 0 -60px;
}
.comments .list h3 {
color: #202020;
}
.comments .list p {
font-family: Verdana, Geneva, lucida, sans-serif;
font-size: 0.92em;
line-height: 1.45;
}
.comments .list .moderation {
font-size: 0.92em;
display: block;
margin: 0 0 3px;
font-style: italic;
color: #5C5A5A;
}
.comments .list .comment-meta {
margin: 0 0 5px;
}
.comments .list .action {
font-size: 0.92em;
color: #333;
margin-top: 3px;
}
.comments .list .action li {
float: left;
}
.comments .list .action .from a {
color: #202020;
}
.comments .list .action .offensive {
float: right;
padding: 2px 0 4px 18px;
background: url(../images/ico_all.png) 0 -598px no-repeat;
margin-left: 15px;
}
.comments .list .action .reply {
float: right;
padding: 2px 0 4px 22px;
background: url(../images/ico_all.png) -57px -548px no-repeat;
}
.comments .list .depth-2 {
margin: 0 0 0 60px;
}
.comments .list .depth-3 {
margin: 0 0 0 120px;
}
.comments .list .depth-4 {
margin: 0 0 0 180px;
}
.comments .list .depth-5 {
margin: 0 0 0 240px;
}
.comments .comment-attachments {
margin: 16px 0;
}
.comments .comment-attachments img {
width: 200px;
padding: 2px;
border: 1px solid #DDD;
}
.comments .comment-player {
margin: 0 0 3px;
height: 20px;
}
.comments .top li.see-all {
display: none;
}
.galleries .comments .top li.see-all {
display: block;
}
.galleries .comments .list .comment {
display: none;
}
.galleries .comments .list li.first {
display: block;
}
.galleries .comments .list-all .comment {
display: block;
}
/* Related */
.txt-related {
width: 131px;
height: 34px;
}
.txt-related span {
background-position: -213px -158px;
}
div.related {
margin-top: 25px;
padding: 20px 0 100px 0;
background: url(../images/border_post.png) repeat-x;
}
div.related ul {
margin: 25px 0 0 4px;
}
div.related ul .photo {
float: left;
display: block;
}
div.related ul .post {
clear: none;
padding: 0 0 20px 0;
margin: 0 0 20px 140px;
}
div.related ul .post h3 {
font-size: 1em;
}
div.related ul .post .bar {
margin-bottom: 8px;
}
div.related ul .post p {
font-family: "Arial", "Helvetica", sans-serif;
line-height: 1.17;
}
div.related ul ul {
margin: 15px 0 0 0;
}
/* Post navigation */
.post-nav li {
float: left;
}
.post-nav li.next {
float: right;
}
.post-nav li a {
display: block;
padding: 4px 12px 4px 22px;
font-weight: bold;
text-transform: uppercase;
font-size: 1.33em;
background: #ed1594 url(../images/ico_all.png) 10px -412px no-repeat;
color: #fff;
}
.post-nav a:visited {
color: #fff;
}
.post-nav li.next a {
padding: 4px 22px 4px 12px;
background-position: 100% -452px;
}
/* Title with RSS icon */
.title-rss h1 {
float: left;
}
.title-rss .rss {
float: left;
margin: 12px 0 0 10px;
}
.title-pink {
margin: 2px 0 10px 0;
}
.title-pink h1 {
padding-right: 13px;
float: left;
height: 40px;
background: #ed1594 url(../images/title-simple.png) top right no-repeat;
text-transform: uppercase;
}
.title-pink strong {
display: block;
height: 40px;
line-height: 40px;
padding: 0 36px 0 17px;
background: url(../images/title-simple.png) no-repeat;
color: #fff;
min-width: 245px;
}
.txt-concerts-events {
width: 323px;
height: 40px;
margin: 2px 0 0 0;
}
.txt-concerts-events span {
background: url(../images/txt_other_pages.png) no-repeat;
}
/* Simply list - Concerts, events, Contests */
.simply-list {
position: relative;
padding-top: 3em;
}
.simply-list .intro {
color: #000;
font-size: 1.09em;
margin: 10px 0 0 3px;
position: absolute;
top: 0;
left: 0;
}
.simply-list .post {
padding: 0;
background: none;
/* Inherits from .post */
clear: none;
}
.simply-list .post p {
font-family: "Arial", "Helvetica", sans-serif;
line-height: 1.17;
margin-bottom: 0.75em;
}
.simply-list .post .subtitle {
margin: 0;
}
.simply-list .featured {
padding: 14px 35px 3px 18px;
background: url(../images/bg_featured.png) repeat-x;
width: 569px;
margin: 0 -15px 0 -10px;
}
.simply-list .featured .photo {
display: block;
float: left;
}
.simply-list .featured .post {
margin: 0;
color: #5c5a5a;
float: right;
width: 310px;
}
.simply-list .featured h2 {
font-size: 2.5em;
font-weight: normal;
line-height: 1.0;
margin: 2px 0 7px 0;
}
.simply-list .featured .subtitle {
font-size: 1.17em;
margin: 0;
}
.simply-list .featured .sep {
margin: 0 3px;
}
.simply-list .featured .desc {
margin: 1.15em 0 0.25em 0;
}
.simply-list .featured .desc p {
margin: 0;
}
.simply-list .list {
background: url(../images/border_post.png) repeat-x;
padding: 20px 0 0 3px;
margin: 10px 0 0 5px;
}
.simply-list .list li.item {
margin-bottom: 30px;
clear: both;
}
.simply-list .list .photo {
display: block;
float: left;
margin-top: 4px;
}
.simply-list .list .post {
margin: 0 0 0 139px;
}
.simply-list .list .post h2 {
font-size: 1.5em;
color: #252525;
font-weight: normal;
}
.simply-list .list .post .action {
margin: 6px 0 0 0;
}
/* Simple list navigation - inherits from .post-nav */
.simply-list .post-nav {
margin: 40px 0;
padding-top: 27px;
background: url(../images/border_post.png) repeat-x;
}
/* Simple form */
.simple-form {
background: #f2f2f2;
color: #373737;
padding: 20px 75px 25px 59px;
font-family: Verdana, Geneva, lucida, sans-serif;
margin: 10px 0;
}
.simple-form ol li {
padding-bottom: 20px;
}
.simple-form ol li.left {
float: left;
width: 205px;
margin-right: 18px;
}
.simple-form ol li.clear {
clear: left;
}
.simple-form label {
display: block;
color: #373737;
margin-bottom: 4px;
font-weight: bold;
}
.simple-form input.text {
display: block;
border: 1px solid #c1c1c1;
padding: 3px 4px;
margin-bottom: 4px;
width: 195px;
}
.simple-form input.long {
width: 419px;
}
.simple-form textarea.long {
display: block;
border: 1px solid #c1c1c1;
padding: 3px 4px;
margin-bottom: 4px;
width: 419px;
}
.simple-form .note {
color: #373737;
font-style: normal;
}
.simple-form .error, .simple-form .recaptcha-error {
color: #cc0000;
font-style: normal;
font-weight: normal;
font-size: 0.915em;
display: block;
margin: 0 0 4px;
}
.simple-form .submit {
margin-top: 20px;
}
.simple-form .submit .button {
background: #ed1594;
color: #fff;
font-size: 1.5em;
margin-right: 15px;
text-transform: uppercase;
padding: 4px 30px;
}
.mmf div.mmf-response-output {
display: none;
border: 0;
padding: 10px 20px;
}
.mmf div.mmf-validation-errors {
border: 1px solid #FF0000;
color: red;
}
.mmf div.mmf-mail-sent-ok {
border: 1px solid green;
color: green;
}
/* Request song */
.request-song {
margin-left: 6px;
}
.request-song p {
margin-bottom: 8px;
}
.txt-request-song {
width: 257px;
height: 46px;
margin: 0 0 18px -6px;
}
.txt-request-song span {
background: url(../images/txt_other_pages.png) 0 -96px no-repeat;
}
/* Respond (add comment ) */
#respond {
margin: 20px 0 20px 6px;
}
#respond p {
margin-bottom: 8px;
}
#respond h2 {
margin: 0 0 16px;
}
#respond .user-info {
margin: 0 0 16px;
}
#respond .attachments {
margin: 0 0 16px;
}
#respond .note {
font-size: .91em;
}
.txt-leave-reply {
width: 193px;
height: 46px;
margin: 0 0 18px -6px;
}
.txt-leave-reply span {
background: url(../images/txt_other_pages.png) 0 -285px no-repeat;
}
/* Galleries */
.txt-photo-galleries {
width: 258px;
height: 46px;
}
.txt-photo-galleries span {
background: url(../images/txt_other_pages.png) 0 -196px no-repeat;
}
.txt-video-galleries {
width: 258px;
height: 46px;
}
.txt-video-galleries span {
background: url(../images/txt_other_pages.png) 0 -331px no-repeat;
}
/* Gallery */
#gallery {
background: url(../images/bg_featured.png) repeat-x;
padding: 5px 11px 5px 16px;
margin-top: 19px;
width: 600px;
}
#gallery .title-rss {
margin: -41px 0 15px -16px;
}
#gallery .post {
padding: 0;
margin: 0 0 10px 0;
background: none;
/* Inherits from .post */
clear: none;
}
#gallery .post h2 {
font-size: 1.83em;
color: #555;
margin-bottom: 7px;
}
#gallery .post .date {
float: left;
color: #5c5a5a;
font-size: 0.83em;
text-transform: uppercase;
}
#gallery .post ul.action {
float: left;
margin: -2px 0 0 4px;
}
#gallery .main {
float: left;
width: 425px;
font-size: 0.92em;
color: #000;
font-family: Verdana, Geneva, lucida, sans-serif;
}
#gallery .main strong {
font-family: "Arial", "Helvetica", sans-serif;
}
#gallery .main p {
margin: 0;
}
#gallery .thumbnails {
float: right;
width: 165px;
}
#gallery .thumbnails h3 {
clear: both;
text-transform: uppercase;
color: #3b3b3b;
font-size: 0.92em;
margin: 14px 0 3px 0;
}
/* Gallery slideshow */
/* Height and line-height should be set to be at least the height of the largest image in the slideshow */
#gallery .slideshow-container {
position: relative;
height: 316px;
width: 425px;
}
#gallery .loader {
position: absolute;
top: 0;
left: 0;
background: url('../images/loader.gif') center center no-repeat;
width: 425px;
height: 316px;
}
#gallery .slideshow span.image-wrapper {
display: block;
position: absolute;
top: 0;
left: 0;
}
#gallery .slideshow a.advance-link {
display: block;
width: 425px;
height: 316px;
line-height: 316px;
text-align: center;
margin-left: -4px;
}
#gallery .slideshow img {
vertical-align: middle;
}
#gallery .caption-container {
position: relative;
clear: both;
margin-top: 8px;
height: 3em;
}
#gallery .image-caption {
display: block;
position: absolute;
width: 421px;
left: 0;
top: 0;
background: #fff;
}
#gallery a:focus {
outline: none !important;
}
/* Gallery Photo Index */
#gallery #photo-index {
float: left;
}
/* Gallery Image Controls */
#gallery .controls {
float: right;
height: 19px;
width: 67px;
position: relative;
}
#gallery .controls a {
display: block;
width: 20px;
height: 19px;
background: #ed1594 url(../images/ico_all.png) -28px -779px no-repeat;
text-indent: -999em;
color: #fff;
}
#gallery .controls .ss-controls {
position: absolute;
top: 0;
left: 24px;
}
#gallery .controls .ss-controls a {
width: 19px;
background-position: -28px -755px;
}
#gallery .controls .ss-controls a.pause {
background-position: -55px -755px;
}
#gallery .controls .nav-controls {
width: 67px;
}
#gallery .controls .nav-controls .prev {
position: absolute;
top: 0;
left: 0;
background-position: -28px -779px;
}
#gallery .controls .nav-controls .next {
position: absolute;
top: 0;
right: 0;
background-position: -55px -779px;
}
/* Gallery Thumbs */
#gallery ul.thumbs {
clear: both;
width: 174px;
}
#gallery ul.thumbs li {
float: left;
padding: 0;
margin: 0 9px 4px 0;
}
#gallery ul.thumbs a.thumb {
display: block;
border: 4px solid #dedede;
position: relative;
width: 70px;
height: 70px;
}
#gallery ul.thumbs a.thumb .play {
display: block;
position: absolute;
top: 28px;
left: 30px;
}
#gallery ul.thumbs li.selected a.thumb {
border-color: #fff216;
}
#gallery ul.thumbs img {
display: block;
}
/* Gallery Pager */
#gallery .pager {
height: 17px;
padding-top: 5px;
clear: both;
}
#gallery .pager li {
float: left;
margin-right: 3px;
}
#gallery .pager a {
display: block;
float: left;
width: 17px;
height: 17px;
line-height: 17px;
background: #ed1594 url(../images/ico_all.png) 0 -802px no-repeat;
text-indent: -999em;
color: #fff;
}
#gallery .pager .prev a {
background-position: -21px -802px;
}
#gallery .pager .next a {
background-position: -39px -802px;
}
#gallery .pager .last a {
background-position: -57px -802px;
}
#gallery .pager .number {
width: 78px;
text-align: center;
margin-top: 2px;
}
/* Gallery comments */
.galleries .comments {
margin: 6px 0 0 8px;
clear: both;
}
/* Galleries more */
.galleries .more {
background: url(../images/border_post.png) repeat-x;
padding-top: 15px;
margin: 10px 0 100px 6px;
width: 600px;
}
.galleries .more h2 {
margin-bottom: 10px;
}
.galleries .more li {
float: left;
margin: 0 4px 7px 0;
width: 120px;
min-height: 12.66em;
padding: 15px 12px 10px 14px;
background: #f2f2f2;
}
.galleries .more li.current {
border: 1px solid #dedede;
padding: 14px 11px 9px 13px;
}
.galleries .more li h3 {
height: 2.5em;
overflow: hidden;
margin-top: 8px;
}
.galleries .more li a.thumb {
position: relative;
display: block;
height: 90px;
width: 120px;
margin-bottom: 10px;
}
.galleries .more li a.thumb .play {
display: block;
position: absolute;
top: 34px;
left: 48px;
}
.galleries .more li a.thumb img {
display: block;
margin: 0 auto;
}
.galleries .more p {
font-size: 0.92em;
margin-top: 2px;
}
.galleries .more p .date {
float: left;
font-weight: normal;
}
.galleries .more p .comments-num {
float: right;
color: #a30e7b;
background: url(../images/ico_all.png) -60px -319px no-repeat;
padding: 0 0 4px 20px;
}
/* Playlist */
.txt-playlist {
width: 227px;
height: 40px;
}
.txt-playlist span {
background: url(../images/txt_other_pages.png) 0 -242px no-repeat;
}
.playlist h2 {
color: #000;
font-size: 1.17em;
font-weight: normal;
margin: 10px 0 18px 12px;
}
.playlist table {
margin: 0 0 12px 12px;
width: 585px;
background: url(../images/border_post.png) repeat-x;
}
.playlist table th, .playlist table td {
background: bottom url(../images/border_post.png) repeat-x;
padding: 12px 0;
color: #585858;
}
.playlist table th {
font-size: 1.09em;
width: 105px;
}
.playlist table td {
font-size: 0.92em;
font-weight: bold;
}
.playlist table td h3 {
font-size: 1.17em;
color: #000;
}
.playlist table td.song {
width: 360px;
}
.playlist .service-of {
font-size: 0.92em;
margin: 0 0 50px 17px;
}
/* Content sidebar */
.content-sidebar {
float: left;
width: 172px;
}
.content-sidebar .box {
background: url(../images/bg_flexible.png) no-repeat;
padding: 0 9px 25px 12px;
}
.content-sidebar h2 {
text-transform: uppercase;
}
/* Hot 3 */
.content-sidebar .hot3 {
padding: 5px 4px 50px 9px;
color: #000;
}
.content-sidebar .hot3 .sponsored img {
padding: 3px 3px 3px 6px;
}
.content-sidebar .txt-hot3 {
width: 168px;
height: 61px;
margin: 0 0 4px -6px;
}
.content-sidebar .txt-hot3 span {
background-position: 0 -196px;
}
.content-sidebar .hot3 h3 {
line-height: 1.0;
padding-right: 25px;
position: relative;
margin: 0 0 12px 19px;
}
.content-sidebar .hot3 h3 span {
display: block;
margin-left: 45px;
}
.content-sidebar .hot3 h3 img {
display: block;
position: absolute;
top: 0;
right: 0;
}
.content-sidebar .hot3 ul {
text-align: left;
}
.content-sidebar .hot3 ul li {
padding-left: 25px;
position: relative;
margin-bottom: 10px;
font-size: 0.83em;
color: #797979;
}
.content-sidebar .hot3 ul strong {
display: block;
padding: 1px 4px;
position: absolute;
top: 0;
left: 0;
font-weight: bold;
background: #a30e7b;
color: #fff;
}
.content-sidebar .hot3 ul h4 {
color: #000;
font-size: 1.2em;
}
/* Requests */
.content-sidebar .requests {
padding: 5px 9px 65px 16px;
color: #797979;
background-position: -172px 0;
}
.content-sidebar .txt-requests {
width: 158px;
height: 42px;
margin: -20px 0 10px -16px;
}
.content-sidebar .txt-requests span {
background-position: -168px -196px;
}
.content-sidebar .requests h3 {
font-size: 1em;
font-weight: bold;
margin-bottom: 6px;
color: #111;
line-height: 1.5;
width: 110px;
}
.content-sidebar .requests .sponsored {
margin: 12px 0 0 -4px;
}
.content-sidebar .requests .button-rounded:hover {
text-decoration: none;
}
/* Join team */
.content-sidebar .join-team {
padding: 5px 9px 30px 12px;
}
.content-sidebar .txt-join-team {
width: 162px;
height: 77px;
margin: -37px 0 8px -12px;
}
.content-sidebar .txt-join-team span {
background-position: -168px -238px;
}
.content-sidebar .join-team p {
color: #000;
margin-bottom: 8px;
line-height: 1.5;
width: 140px;
}
.content-sidebar .join-team p a {
font-weight: bold;
}
.content-sidebar .join-team .login {
line-height: 1.25;
}
.content-sidebar .join-team .login a {
font-size: 1.08em;
}
/* 2.5 Sidebar
-----------------------------------------------------------------------------------------------*/
#sidebar .ad h3 {
color: #666;
font-size: 0.83em;
text-align: center;
font-weight: normal;
margin-bottom: 2px;
}
#sidebar .ad img {
display: block;
}
/* Box */
#sidebar .box {
background: #f2f2f2;
margin-bottom: 17px;
}
/* Categories */
#sidebar .categories {
padding: 20px 17px 15px 17px;
margin-top: 42px;
}
#sidebar .categories img {
display: block;
}
#sidebar .txt-categories {
width: 255px;
height: 36px;
margin: -34px 0 2px -15px;
}
#sidebar .txt-categories span {
background-position: -139px -52px;
}
/* Popular posts */
#sidebar .popular {
padding: 20px 24px 12px 24px;
margin-bottom: 6px;
position: relative;
}
#sidebar .popular .sponsored {
width: 100px;
text-align: left;
position: absolute;
top: 8px;
right: 17px;
line-height: 1.0;
height: auto;
}
#sidebar .popular .sponsored img {
float: none;
padding: 3px 14px 3px 15px;
margin: 4px 0 0 0;
}
#sidebar .txt-popular-posts {
width: 147px;
height: 48px;
margin: -20px 0 15px -24px;
}
#sidebar .txt-popular-posts span {
background-position: 0 -93px;
}
#sidebar .popular li {
margin-bottom: 10px;
}
#sidebar .popular a {
font-weight: bold;
}
/* Facebook */
#sidebar .facebook {
padding: 6px 4px 0 6px;
margin-bottom: 36px;
}
/* Latest comments */
#sidebar .latest-comments {
padding: 20px 14px 10px 14px;
margin-bottom: 27px;
}
#sidebar .latest-comments .rss{
float: right;
margin-top: -35px;
}
#sidebar .txt-latest-comments {
width: 187px;
height: 51px;
margin: -47px 0 14px -14px;
}
#sidebar .txt-latest-comments span {
background-position: 0 -141px;
}
#sidebar .latest-comments li {
padding-top: 8px;
margin-top: 5px;
background: url(../images/border_post.png) repeat-x;
}
#sidebar .latest-comments li.first {
background: none;
margin: 0;
padding: 0;
}
#sidebar .latest-comments li img,
#sidebar .latest-comments li div.avatar{
display: block;
float: left;
}
#sidebar .latest-comments li p {
margin-left: 60px;
}
#sidebar .latest-comments .reply {
float: right;
font-weight: bold;
margin: -1em 16px 0 0;
padding-left: 18px;
background: url(../images/ico_all.png) 0 -826px no-repeat;
}
#sidebar .latest-comments .sponsored {
background: #fff;
padding: 4px 14px 3px 10px;
width: 261px;
margin: 20px -5px 0 -5px;
}
#sidebar .latest-comments .sponsored img {
margin-left: 16px;
}
#sidebar .latest-comments .sponsored strong {
width: 170px;
}
/* Poll */
#sidebar .poll {
padding: 20px 13px 5px 19px;
margin: 44px 0 10px 0;
font-size: 1.17em;
font-weight: bold;
color: #777;
text-transform: uppercase;
}
#sidebar .txt-poll {
width: 213px;
height: 36px;
margin: -35px 0 14px -17px;
}
#sidebar .txt-poll span {
background-position: 0 -315px;
}
#sidebar .poll h3 {
margin-bottom: 6px;
}
#sidebar .poll ul {
margin: 8px 0 14px 0;
}
.home #sidebar .poll {
margin-top: 0;
}
/* Related post categories */
.txt-related-categories {
width: 221px;
height: 56px;
margin-bottom: 8px;
}
.txt-related-categories span {
background: url(../images/txt_other_pages.png) 0 -40px no-repeat;
}
#sidebar .related-categories {
margin: 12px 0;
}
#sidebar .related-categories ul {
margin-left: 10px;
}
/* Rogers Wireless widget */
#sidebar .rogers-wireless {
position: relative;
margin: 30px 0 62px 0;
}
#sidebar .txt-rogers-wireless {
width: 299px;
height: 122px;
}
#sidebar .txt-rogers-wireless span {
background: url(../../_media-preview/images/placeholders/rogers-wireless-banner.png);
}
#sidebar .rogers-wireless a {
display: block;
position: absolute;
left: 11px;
bottom: 11px;
width: 164px;
height: 24px;
z-index: 10;
text-indent: -999em;
}
#sidebar .rogers-wireless a:focus {
outline: none !important;
}
/* Join music team */
#sidebar .txt-join-team {
width: 250px;
height: 54px;
margin: -33px 0 10px -20px;
}
#sidebar .txt-join-team span {
background: url(../images/txt_other_pages.png) 0 -142px no-repeat;
}
#sidebar .join-team {
padding: 5px 45px 15px 20px;
margin: 41px 0 10px 0;
}
#sidebar .join-team p {
color: #020202;
line-height: 1.5;
margin-bottom: 6px;
}
/* 2.7 Bottom
-----------------------------------------------------------------------------------------------*/
#bottom {
clear: both;
width: 845px;
height: 181px;
padding: 61px 83px 20px 66px;
margin-left: -14px;
position: relative;
overflow: visible;
background: url(../images/bg_all.png) top left no-repeat;
color: #fff;
}
#bottom .listen {
float: left;
width: 150px;
padding-right: 51px;
}
#bottom .join {
float: left;
width: 150px;
padding-right: 58px;
}
#bottom .do-more {
float: left;
width: 162px;
padding-right: 20px;
}
#bottom .stations {
float: left;
width: 254px;
}
#bottom a {
color: #fff;
}
#bottom h2 {
float: left;
background: #fff;
color: #ec068d;
padding: 2px 21px 2px 11px;
margin-bottom: 8px;
font-size: 1.5em;
text-transform: uppercase;
}
#bottom ul {
clear: both;
font-size: 1.17em;
font-weight: bold;
}
#bottom li {
margin-bottom: 3px;
}
#bottom .stations h2 {
background: transparent;
color: #fff;
padding: 0;
margin: -2px 0 6px 0;
}
#bottom .stations ul {
background: #fff;
padding: 11px 8px 8px 8px;
}
#bottom .stations li {
float: left;
margin-left: 8px;
}
#bottom .stations li img {
display: block;
}
/* 2.8 Footer
-----------------------------------------------------------------------------------------------*/
#footer .first {
margin-left: 4px;
}
/* Cforms
-----------------------------------------------------------------------------------------------*/
form.mmf-form {
background: #f2f2f2;
color: #373737;
padding: 20px 75px 25px 59px;
font-family: Verdana, Geneva, lucida, sans-serif;
}
form.mmf-form ol li {
padding-bottom: 20px;
}
form.mmf-form ol li.left {
float: left;
width: 205px;
margin-right: 18px;
}
form.mmf-form ol li.clear {
clear: left;
}
form.mmf-form label {
display: block;
color: #373737;
margin-bottom: 4px;
font-weight: bold;
}
form.mmf-form input.text {
display: block;
border: 1px solid #c1c1c1;
padding: 3px 4px;
margin-bottom: 4px;
width: 195px;
}
form.mmf-form input.long {
width: 419px;
}
form.mmf-form textarea.long {
display: block;
border: 1px solid #c1c1c1;
padding: 3px 4px;
margin-bottom: 4px;
width: 419px;
}
form.mmf-form .note {
color: #373737;
font-style: normal;
}
form.mmf-form .error {
color: #cc0000;
font-style: normal;
font-weight: normal;
font-size: 0.915em;
}
form.mmf-form .submit {
margin-top: 20px;
}
form.mmf-form .submit .button {
background: #ed1594;
color: #fff;
font-size: 1.5em;
margin-right: 15px;
text-transform: uppercase;
padding: 4px 30px;
}
/* Facebook connect
-----------------------------------------------------------------------------------------------*/
.fbc_connect_button_area {
margin-left: 0 !important;
padding-left: 0 !important;
}
.fbc_connect_button_area .dark {
margin-top: 6px;
}