Example of our CSS code
/*******************************************************************************
CSS on Sails Framework
Title: Rogers Radio Player
Author: XHTMLized (http://www.xhtmlized.com/)
Date: September 2010
********************************************************************************
1. BASE
1.1 Reset
1.2 Accessibility Navigation & Hide
1.3 Clearfix
1.4 Default Styles
1.5 Buttons
2. COMMON
2.1 Container
2.2 Top
2.3 Header
2.4 Main
2.5 Content
2.6 Sidebar
2.7 Footer
2.8 Preroll
2.9 Smaller player
*******************************************************************************/
/* 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
------------------------------------------------------------------------------*/
#accessibility-nav, .hide {
position: absolute;
top: -999em;
left: -999em;
height: 1px;
width: 1px;
}
/* 1.3 Clearfix
------------------------------------------------------------------------------*/
.clearfix:after,
#player .top:after,
#email-friend .label:after,
#content .player .top:after,
#content .player .time-remaining:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 1.4 Default Styles
------------------------------------------------------------------------------*/
body {
background: #fff url(../images/common/bg_body.png);
color: #3f3f3f;
font: 75%/1.3 Arial, Helvetica, sans-serif;
}
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;
}
a {
color: #4a4a4a;
text-decoration: none;
}
a:hover {
color: #1f1e1e;
}
/* 1.5 Buttons
------------------------------------------------------------------------------*/
.button {
display: block;
text-indent: -999em;
background: url(../images/common/sprite_btn.png) no-repeat;
}
/* Buy */
.buy ul {
display: none;
position: absolute;
width: 286px;
padding: 25px 0 0 20px;
height: 70px;
top: 0;
right: 23px;
background: url(../images/common/sprite_buy.png) no-repeat;
z-index: 10;
}
.buy ul.top {
background-position: 0 -150px;
}
.buy ul.bottom {
background-position: 0 -250px;
}
.buy ul.display {
display: block;
}
.buy ul li {
float: left;
padding: 0 !important;
}
.buy ul a {
display: block;
position: relative;
height: 47px;
overflow: hidden;
}
.buy ul a span {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../images/kiss/sprite_buy.png) 0 -100px no-repeat;
cursor: pointer;
}
.buy ul .ur-music a {
width: 52px !important;
}
.buy ul .amazon a {
width: 106px !important;
}
.buy ul .amazon a span {
background-position: -52px -100px;
}
.buy ul .iTunes a {
width: 88px !important;
}
.buy ul .iTunes a span {
background-position: -158px -100px;
}
.buy ul .close a {
margin-top: -21px;
width: 18px !important;
height: 17px;
}
.buy ul .close a span {
background-position: -256px -100px;
}
/* 2. COMMON
--------------------------------------------------------------------------------
==============================================================================*/
/* 2.1 Container
------------------------------------------------------------------------------*/
.container {
margin: 60px auto;
width: 965px;
height: 637px;
background: url(../images/common/bg_container.png) top left no-repeat;
position: relative;
}
/* 2.2 Top
------------------------------------------------------------------------------*/
#top {
position: relative;
height: 42px;
}
#top ul {
position: absolute;
top: 9px;
right: 16px;
text-align: right;
z-index: 1;
}
#top li {
display: inline;
margin-left: 7px;
padding-left: 10px;
background: url(../images/common/sprite_bg.png) 0 2px no-repeat;
}
#top li a {
font-weight: bold;
}
#top li.first,
#top li.another {
padding: 0;
background: none;
}
#top li.another {
margin-left: 12px;
}
#top li.another a {
display: inline-block;
width: 159px;
height: 25px;
text-align: left;
vertical-align: middle;
outline: 0;
}
#top li.another a:hover {
background-position: 0 -30px;
}
/* 2.3 Header
------------------------------------------------------------------------------*/
#header {
position: relative;
height: 175px;
}
#header .site-name {
position: absolute;
top: 16px;
/* Override position for different players logos */
left: 34px;
}
#header .site-name img {
display: block;
}
/* Player */
#player {
position: absolute;
top: 24px;
left: 239px;
width: 700px;
height: 126px;
color: #4a4a4a;
}
#player .pic {
float: left;
margin-right: 10px;
}
#player .pic img {
display: block;
}
/* Disable player */
#player .overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 75px;
background: url(../images/common/bg_player_overlay.png);
z-index: 2;
}
#player .overlay2 {
width: 285px;
height: 50px;
top: 75px;
}
#player .overlay3 {
width: 315px;
height: 50px;
top: 75px;
left: 380px;
}
#player.disable .overlay {
display: block;
}
/* Player: Info */
#player .info {
float: left;
}
#player .top {
width: 400px;
margin-bottom: 20px;
}
#player .playing {
margin-bottom: 9px;
font-size: 11px;
line-height: 1.0;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
color: #4a4a4a;
}
#player .buy {
float: left;
margin-right: 8px;
}
#player .buy a.button {
width: 63px;
height: 36px;
background-position: -55px -60px;
outline: none;
}
#player .buy a.button:hover {
background-position: -120px -60px;
}
#player .buy ul {
right: auto;
}
#player .title h2 {
font-size: 18px;
line-height: 1.0;
}
#player .author {
font-size: 14px;
}
/* Player: Share */
#player .share {
float: left;
width: 155px;
}
#player .share h3 {
margin-bottom: 2px;
font-size: 11px;
color: #626262;
font-weight: normal;
}
#player .share li {
float: left;
margin-right: 9px;
}
#player .share li a {
display: block;
width: 29px;
height: 29px;
text-indent: -999em;
background: url(../images/common/sprite_share.png) no-repeat;
outline: none;
}
#player .share li.facebook a {
background-position: -38px 0;
}
#player .share li.email a {
background-position: -77px 0;
}
/* Player: Email a Friend */
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../images/common/bg_overlay.png);
}
.ui-dialog {
position: absolute;
padding: 18px 11px 15px 11px;
width: 334px;
overflow: hidden;
background: #fff;
border: 1px solid #dcdbdb;
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
}
.ui-dialog .ui-dialog-titlebar {
position: relative;
}
.ui-dialog .ui-dialog-title {
margin-left: 6px;
font-weight: bold;
font-style: italic;
font-size: 14px;
text-transform: uppercase;
}
.ui-dialog .ui-dialog-titlebar-close {
display: none;
}
.ui-dialog .ui-dialog-content {
position: relative;
}
#email-friend {
width: 334px;
display: none;
}
#email-friend div.errors {
padding: 3px 6px;
margin: 4px 0 10px 0;
background: #f2a440;
color: #fff;
font-size: 14px;
}
#email-friend .row {
margin-bottom: 10px;
}
#email-friend .label {
margin-bottom: 4px;
color: #4a4a4a;
}
#email-friend .label label {
display: block;
float: left;
padding-left: 5px;
font-size: 14px;
}
#email-friend .label em {
display: block;
float: right;
margin-top: 2px;
font-weight: bold;
font-size: 11px;
}
#email-friend input.text {
padding: 2px 5px;
width: 324px;
border: 1px solid #bdb7b7;
font-size: 12px;
background: url(../images/common/sprite_email_friend.png) 0 -60px no-repeat;
}
#email-friend textarea {
display: block;
padding: 5px;
width: 324px;
height: 47px;
border: 1px solid #bdb7b7;
font-size: 12px;
background: url(../images/common/sprite_email_friend.png) no-repeat;
}
#email-friend textarea#note {
height: 77px;
background-position: 0 -90px;
}
#email-friend input.error,
#email-friend textarea.error {
border: 1px solid #f2a440;
}
#email-friend .submit {
margin-top: 20px;
}
#email-friend .submit input {
margin-right: 12px;
vertical-align: middle;
}
#email-friend .submit a {
font-weight: bold;
vertical-align: middle;
}
#email-friend .submit a:hover {
color: #1d1d1d;
}
/* Player: Controls */
#player .controls {
position: absolute;
width: 410px;
right: 0;
bottom: 0;
}
#player .controls li {
float: left;
}
#player .controls a {
display: block;
text-indent: -999em;
background: url(../images/common/sprite_btn.png) no-repeat;
outline: none;
}
#player .controls .stop,
#player .controls .play {
margin-right: 6px;
}
#player .controls .stop a {
width: 88px;
height: 40px;
background-position: 0 -120px;
}
#player .controls .stop a:hover {
background-position: 0 -165px;
}
#player .controls .play a {
width: 88px;
height: 40px;
background-position: 0 -380px;
}
#player .controls .play a:hover {
background-position: 0 -425px;
}
#player .controls .mute a {
width: 88px;
height: 40px;
background-position: -94px -120px;
}
#player .controls .mute a:hover {
background-position: -94px -165px;
}
#player .controls .volume-down {
margin: 13px 4px 0 8px;
}
#player .controls .volume-down a {
width: 20px;
height: 14px;
background: url(../images/common/sprite_volume.png) -30px -40px no-repeat;
}
#player .controls .volume-up {
margin: 11px 0 0 8px;
}
#player .controls .volume-up a {
width: 24px;
height: 18px;
background: url(../images/common/sprite_volume.png) -60px -40px no-repeat;
}
/* Player: Volume slider */
.ui-slider {
position: relative;
text-align: left;
}
.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 100%;
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
display: block;
border: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
right: 0;
}
#player .controls .slider {
margin-top: 12px;
width: 146px;
height: 16px;
background: url(../images/common/sprite_volume.png) no-repeat;
padding: 0 8px;
}
#player .controls .ui-slider-horizontal {
height: 16px;
}
#player .controls .ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 16px;
height: 16px;
cursor: pointer;
}
#player .controls .ui-slider-horizontal .ui-slider-handle {
top: 0;
margin-left: -8px;
background: url(../images/common/sprite_volume.png) 0 -40px no-repeat;
}
#player .controls .ui-slider-horizontal .ui-slider-range-min {
left: 0;
background: url(../images/common/sprite_volume.png) 0 -20px no-repeat;
}
/* 2.4 Main
------------------------------------------------------------------------------*/
#main {
position: relative;
height: 286px;
}
/* 2.5 Navigation
------------------------------------------------------------------------------*/
/* Navigation - Tabs */
#navigation {
position: absolute;
top: 0;
left: 0;
width: 203px;
}
#navigation li {
padding-top: 1px;
background: url(../images/common/sprite_bg.png) 0 -70px no-repeat;
}
#navigation li.first {
background: none;
}
#navigation a {
display: block;
padding: 8px 10px 6px 15px;
width: 178px;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}
#navigation li a:hover,
#navigation li.ui-tabs-selected a {
position: relative;
margin: 0 -12px -2px 0;
padding: 8px 22px 8px 15px;
background: url(../images/common/sprite_navigation.png) no-repeat;
color: #fff;
}
#navigation li.ui-tabs-selected a {
background-position: 0 -50px !important;
}
/* 2.5 Content
------------------------------------------------------------------------------*/
#content {
position: absolute;
top: 0;
left: 0;
width: 638px;
}
/* Tabs */
#content .tab {
position: absolute;
top: 15px;
left: 235px;
width: 400px;
}
#content .ui-tabs-hide {
position: absolute;
left: -10000px;
}
/* Scroll area */
#content .scroll-area {
width: 390px;
height: 250px;
padding-right: 10px;
overflow: auto;
position: relative;
background: #fff;
outline: none;
}
#content .scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0;
/* Do not modify or remove */
left: 0;
}
#content .vscrollerbase {
width: 19px;
background: #f4f4f4 url(../images/common/sprite_scroll.png) left top repeat-y;
}
#content .vscrollerbar {
width: 19px;
height: 19px !important;
padding: 2px 0 14px 0 !important;
z-index: 2;
background: url(../images/common/sprite_scroll.png) -22px 0 no-repeat;
}
#content .vscrollerbarbeg {
height: 0 !important;
}
#content .vscrollerbarend {
height: 0 !important;
}
#content .vscrollerbasebeg {
width: 19px;
height: 24px !important;
background: url(../images/common/sprite_scroll.png) -44px 0 no-repeat;
}
#content .vscrollerbaseend {
width: 19px;
height: 24px;
background: url(../images/common/sprite_scroll.png) -44px 100% no-repeat;
}
#content .hscrollerbase {
height: 19px;
background: #f4f4f4;
}
/* Content Player */
#content .player {
width: 385px;
}
#content .player .top {
margin-bottom: 18px;
}
#content .player .top h2 {
float: left;
font-size: 14px;
}
#content .player .top .date {
float: right;
font-size: 11px;
font-style: italic;
font-weight: bold;
color: #3f3f3f;
}
/* Content Player: Controls */
#content .player .controls {
height: 31px;
margin: 0 0 13px 0;
}
#content .player .controls li {
float: left;
}
#content .player .controls a {
display: block;
text-indent: -999em;
background: url(../images/common/sprite_btn.png) no-repeat;
outline: none;
}
#content .player .stop,
#content .player .play,
#content .player .pause {
margin-right: 4px;
}
#content .player .controls .stop a {
width: 68px;
height: 31px;
background-position: 0 -240px;
}
#content .player .controls .stop a:hover {
background-position: 0 -274px;
}
#content .player .controls .play a {
width: 68px;
height: 31px;
background-position: -93px -380px;
}
#content .player .controls .play a:hover {
background-position: -93px -414px;
}
#content .player .controls .pause a {
width: 68px;
height: 31px;
background-position: 0 -425px;
}
#content .player .controls .pause a:hover {
background-position: 0 -345px;
}
#content .player .controls .mute a {
width: 67px;
height: 31px;
background-position: -72px -240px;
}
#content .player .controls .mute a:hover {
background-position: -72px -274px;
}
#content .player .controls .volume-down {
margin: 11px 3px 0 5px;
}
#content .player .controls .volume-down a {
width: 16px;
height: 11px;
background: url(../images/common/sprite_volume.png) -20px -90px no-repeat;
}
#content .player .controls .volume-up {
margin: 9px 0 0 4px;
}
#content .player .controls .volume-up a {
width: 20px;
height: 15px;
background: url(../images/common/sprite_volume.png) -40px -90px no-repeat;
}
#content .player .controls .share {
margin-left: 3px;
}
#content .player .controls .share a {
width: 58px;
height: 31px;
background-position: -72px -310px;
}
#content .player .controls .share a:hover {
background-position: -72px -345px;
}
/* Content Player: Volume slider */
#content .player .controls .slider {
margin-top: 10px;
width: 116px;
height: 13px;
background: url(../images/common/sprite_volume.png) 0 -60px no-repeat;
padding: 0 7px;
}
#content .player .controls .ui-slider-horizontal {
height: 13px;
}
#content .player .controls .ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 13px;
height: 13px;
cursor: pointer;
}
#content .player .controls .ui-slider-horizontal .ui-slider-handle {
top: 0;
margin-left: -6px;
background: url(../images/common/sprite_volume.png) 0 -90px no-repeat;
}
#content .player .controls .ui-slider-horizontal .ui-slider-range-min {
left: 0;
background: url(../images/common/sprite_volume.png) 0 -75px no-repeat;
}
/* Content Player: Time remaining */
#content .player .time-remaining {
width: 366px;
padding: 12px 7px;
background: #f4f4f4;
}
#content .player .time-remaining p {
float: left;
width: 125px;
}
#content .player .time-remaining .time-slider {
float: right;
width: 238px;
margin-top: 2px;
height: 12px;
background: url(../images/common/sprite_time.png) no-repeat;
}
#content .player .time-remaining .ui-slider-horizontal {
height: 12px;
}
#content .player .time-remaining .ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 9px;
height: 23px;
cursor: pointer;
}
#content .player .time-remaining .ui-slider-horizontal .ui-slider-handle {
top: 0;
margin: -6px -3px;
background: url(../images/common/sprite_time.png) 0 -35px no-repeat;
outline: none;
}
#content .player .time-remaining .ui-slider-horizontal .ui-slider-range-min {
left: 0;
background: url(../images/common/sprite_time.png) 0 -20px no-repeat;
}
/* Select Show Dropdown */
.select-show-wrapper {
height: 23px;
margin: -8px -5px 3px 0;
}
.select-show {
float: right;
}
.select-show strong {
display: block;
float: left;
font-style: italic;
font-weight: bold;
font-size: 14px;
color: #4a4a4a;
}
.select-show .dropdown {
float: left;
margin-left: 6px;
}
.select-show .dropdown .trigger {
display: inline-block;
width: 129px;
padding: 3px 25px 3px 6px;
background: url(../images/common/sprite_select_show.png) no-repeat;
color: #b4b3b3;
outline: none;
}
.select-show .dropdown ul {
position: absolute;
left: -999em;
width: 158px;
border: 1px solid #c1bbbb;
background: #f4f4f4;
z-index: 100;
}
.select-show.active .dropdown ul {
left: auto !important;
}
.select-show .dropdown ul a {
display: block;
padding: 3px 6px;
width: 146px;
font-weight: bold;
}
/* 2.6 Sidebar
------------------------------------------------------------------------------*/
#sidebar {
position: absolute;
right: 17px;
top: 13px;
width: 300px;
}
#sidebar .ad img {
display: block;
}
/* 2.7 Footer
------------------------------------------------------------------------------*/
#footer {
position: relative;
}
#footer .help {
position: absolute;
left: 10px;
top: 6px;
}
#footer .help a {
width: 50px;
height: 25px;
background-position: 0 -60px;
}
#footer .help a:hover {
background-position: 0 -90px;
}
#footer .ad {
left: 116px;
top: 15px;
position: absolute;
border: 1px solid #ccc;
}
#footer .ad img {
display: block;
}
/* 2.8 Preroll - To enable preroll add class .preroll to BODY element
------------------------------------------------------------------------------*/
/* Top */
#top .preroll-overlay {
display: none;
}
.preroll #top .preroll-overlay {
display: block;
display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background: url(../images/common/bg_transparent.png);
}
.preroll #top li {
background-position: 0 -38px;
}
.preroll #top li a {
color: #b4b3b3;
}
.preroll #top li.another a {
background-position: 0 -210px;
}
/* Player */
.preroll #player .pic {
display: none;
}
.preroll #player h2 {
margin-bottom: 2px;
}
.preroll #player .share,
.preroll #player .controls .stop {
visibility: hidden;
}
/* Content */
#preroll-content {
display: none;
position: absolute;
top: 0;
left: 0;
width: 638px;
height: 285px;
z-index: 2;
background: url(../images/common/bg_preroll_overlay.png);
}
#preroll-content .content {
position: absolute;
top: 5px;
left: 225px;
padding: 15px 45px;
background: #f4f4f4;
}
.preroll #preroll-content {
display: block;
}
/* 2.9 Smaller player - Smaller player without bottom ad
------------------------------------------------------------------------------*/
.smaller-player .container {
height: 557px;
background-position: 0 -640px;
}
.smaller-player #footer .help {
top: 12px;
}