Created
January 7, 2009 19:05
-
-
Save dodeja/44369 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Mugasha.com - MAIN CSS (main.css) | |
COPYRIGHT 2008 Mugasha. All Rights Reserved. | |
*/ | |
/* COLOR PALLETTE | |
============================================================================ | |
Blue - #46afc5 | |
Light Blue - #cadee5 #e0f7ff | |
Dark Gray - #2d3133 | |
Medium Gray - #999, #7b888c | |
Light Gray - #e9e9e9 | |
Orange - #e64804 | |
Text - #555 | |
Links - #e64804 | |
===========================================================================*/ | |
/* GLOBAL RESET | |
---------------------------------------------------------------------------*/ | |
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, 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 {line-height: 1;} | |
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:1px solid #000; | |
border-collapse:collapse; | |
font-family:arial,sans-serif; | |
} | |
td,th{ | |
border:1px solid #000; | |
border-collapse:collapse; | |
padding:5px; | |
} | |
/* ADMIN | |
---------------------------------------------------------------------------*/ | |
#adminNav { margin: 0 0 10px 0; padding: 5px 5px 10px 5px; border-bottom: 1px solid #000; background: #879499; } | |
#adminNav ul, #adminNav li { margin: 0; padding: 0 5px 0 5px; display: inline; list-style-type: none; border-right: 2px solid #333; } | |
#adminNav a:link, #adminNav a:visited { font-weight: bold; color: #000; } | |
#adminNav a:hover { color: #fff; } | |
/* GENERAL SELCTORS | |
---------------------------------------------------------------------------*/ | |
body {font: 14px arial, helvetica, sans-serif; color: #555; background-color: #7b888c} | |
p {margin: 0 0 10px 0; line-height: 1.5em;} | |
/* HEADINGS */ | |
h1 {clear: both; padding: 15px 0 0 20px; width: 960px; height: 55px; background: url(../images/page_heading_bg.png) bottom left no-repeat; font-size: 26px; font-weight: normal; color: #fff;} | |
h2 {margin: 0 0 20px 0; padding: 0 0 5px 0; border-bottom: 1px solid #ccc; font-size: 18px; font-weight: bold; color: #e64804;} | |
h3 {margin: 0 0 5px 0; padding: 0 0 5px 0; font-size: 14px; font-weight: bold; color: #2d3133;} | |
h4 {font-size: 14px; font-weight: bold; color: #e64804;} | |
/* LINKS */ | |
a:link {color: #e64804; text-decoration: none;} | |
a:visited {color: #e64804; text-decoration: none;} | |
a:hover {text-decoration: underline;} | |
a:active {color: #e64804; text-decoration: none;} | |
/* LAYOUT | |
---------------------------------------------------------------------------*/ | |
/* MAIN WRAP */ | |
#mainWrap {margin: 0 auto; width: 100%;} | |
/* UTILITY NAV */ | |
#utilNav {margin: 0 auto; width: 980px; height: 30px;} | |
#utilNav ul {float: right; padding: 0 0 0 20px; font-size: 12px; background: url(../images/utilnav_left.png) bottom left no-repeat;} | |
#utilNav li {display: inline; padding: 0 10px; color: #fff; border-right: 1px solid #fff;} | |
#utilNav li.first {padding: 0 10px 0 0;} | |
#utilNav li.last {padding: 0 0 0 9px; border: none;} | |
/* BETA SIGN UP FORM */ | |
.lightboxForm {width: 460px;} | |
.lightboxForm legend {display: none;} | |
.lightboxForm label {font-size: 12px; font-weight: bold; color: #000;} | |
.lightboxForm input {clear: both; width: 446px; margin: 5px 0 10px 0; padding: 6px; height: 16px; border: 1px solid #bbb; font-family: arial, helvetica, sans-serif; font-size: 14px; color: #46afc5; background-color: #fff; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px;} | |
.lightboxForm input:hover {border: 1px solid #888;} | |
.lightboxForm input.submit {float: left; margin: 5px 0 0 0; width: 74px; height: 30px; border: none; background: url(../images/submit_btn_inline.png) 0 0 no-repeat; cursor: pointer; -webkit-border-radius: 0; -moz-border-radius: 0;} | |
.lightboxForm input.submit:hover {background-position: 0 -30px;} | |
.cancelLnk {display: block; float: left; margin: 12px 0 0 10px;} | |
#utilNav a {font-size: 12px; color: #46afc5; text-decoration: none;} | |
#utilNav a:hover {color: #fff;} | |
#utilNavRight {display: block; padding: 9px 20px 7px 0; background: url(../images/utilnav_right.png) bottom right no-repeat;} | |
/* HEADER */ | |
#setPg #headerWrap {width: 100%; background: #4f575a url(../images/setpg_header_bg.png) top left repeat-x;} | |
#headerWrap {width: 100%; background: #4f575a url(../images/header_bg.png) top left repeat-x;} | |
#header {position: relative; margin: 0 auto; width: 980px;} | |
/* LOGO */ | |
#logo {float: left; margin: 0 0 30px 14px; width: 300px; height: 120px;} | |
#logo a {display: block; width: 300px; height: 120px; background: url(../images/logo.png) top left no-repeat;} | |
/* MAIN NAV */ | |
#mainNav {position: absolute; top: 45px; right: 0;} | |
#mainNav ul {float: left; color: #fff;} | |
#mainNav li {float: left; display: inline; margin: 0 0 0 10px;} | |
#mainNav a {float: left; padding: 0 0 0 20px; height: 40px; text-decoration: none; background: url(../images/mainnav_left.png) top left no-repeat;} | |
#mainNav a span {float: left; display: block; padding: 10px 20px 12px 0; height: 18px; font-size: 18px; color: #46afc5; text-decoration: none; background: url(../images/mainnav_right.png) top right no-repeat; cursor: pointer;} | |
#mainNav a.selected, #mainNav a:hover {background-position: 0 -40px;} | |
#mainNav a.selected span, #mainNav a:hover span {color: #fff; background-position: 100% -40px;} | |
/* PLAYER */ | |
#player {clear: both; margin: 0 auto; padding: 20px 20px; width: 940px; height: 150px; background: url(../images/player/player_bg.png) top left no-repeat;} | |
/* PLAYER PHOTO */ | |
#playerPhoto {float: left; margin: 10px 30px 10px 10px;border: 1px solid #000; width: 118px; height: 118px; overflow: hidden;} | |
/* PLAYER CONTROLS WRAP */ | |
#playerControlWrap {float: left; width: 160px; height: 130px;} | |
/* TRACK CONTROL WRAP */ | |
#trackControlWrap {margin: 0 0 37px 0; width: 160px; height: 61px;} | |
/* TRACK BACK BUTTON */ | |
#trackBackBtn {float: left; margin: 10px 0 0 0; width: 40px; height: 41px;} | |
#trackBackBtn span {display: block; width: 40px; height: 41px; background: url(../images/player/track_back_btn.png) 0 0 no-repeat;} | |
#trackBackBtn span:hover {background-position: 0 -41px;} | |
/* PLAY BUTTON */ | |
.playBtn {float: left; margin: 0 10px; width: 60px; height: 61px;} | |
.playBtn span {display: block; width: 60px; height: 61px; background: url(../images/player/track_play_btn.png) 0 0 no-repeat;} | |
.playBtn span:hover {background-position: 0 -61px;} | |
/* PAUSE BUTTON */ | |
.pauseBtn {float: left; margin: 0 10px; width: 60px; height: 61px;} | |
.pauseBtn span {display: block; width: 60px; height: 61px; background: url(../images/player/track_pause_btn.png) 0 0 no-repeat;} | |
.pauseBtn span:hover {background-position: 0 -61px;} | |
/* TRACK FORWARD BUTTON */ | |
#trackForwardBtn {float: left; margin: 10px 0 0 0; width: 40px; height: 41px;} | |
#trackForwardBtn span {display: block; width: 40px; height: 41px; background: url(../images/player/track_forward_btn.png) 0 0 no-repeat;} | |
#trackForwardBtn span:hover {background-position: 0 -41px;} | |
/* VOLUME CONTROL WRAP */ | |
#volumeControlWrap {margin: 0 0 0 20px; width: 110px; height: 14px;} | |
#volumeSlider {position: relative; width: 110px; height: 14px; background: url(../images/player/volume_control_bg.png) top left no-repeat;} | |
/* VOLUME CONTROL HANDLE */ | |
#volumeHandle {position: absolute; width: 14px; height: 14px; cursor: move; background: url(../images/player/volume_control_handle.png) top left no-repeat;} | |
/* PLAYER DISPLAY */ | |
#playerDisplay {float: right; padding: 20px; width: 560px; height: 90px; background: url(../images/player/player_display_bg.png) 0 0 no-repeat;} | |
#playerDisplay h3 {float: left; border: none; color: #3b808f;} | |
#playerDisplay .playerArtistsName {margin: 0 0 0 10px; padding: 0 0 0 10px; border-left: 1px solid #46afc5; color: #46afc5;} | |
#playerDisplay #playerRating {float: left; margin: 3px 0 0 10px; width: 69px; height: 13px; background: url(../images/player/player_rating.png) 0 0 no-repeat;} | |
#playerDisplay h4 {color: #3b808f;} | |
#playerDisplay .ratemsg {font-size: 10px; color: #333; float: left; margin: 0 0 0 10px; padding: 4px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background-color: #46afc5;} | |
#playerDisplay h5 {font-weight: normal; color: #3b808f;} | |
/* TIME SLIDER WRAP */ | |
#timeSliderWrap {position: relative; margin: 13px 0 0 0; padding: 1px 0 0 0; height: 14px;} | |
#timeSliderWrap .timeStart {position: absolute; top: 0; left: 0; font-size: 12px; font-weight: bold; color: #3b808f;} | |
#timeSlider {position: relative; margin: 0 56px; width: 446px; height: 12px; background: url(../images/player/time_slider_bg.png) 0 0 no-repeat;} | |
#timeSlider .trackMark {position: absolute; width: 2px; height: 12px; background-color: #55b8cd;} | |
#timeSliderWrap .timeEnd {position: absolute; top: 0; right: 0; font-size: 12px; font-weight: bold; color: #3b808f;} | |
/* TIME SLIDER HANDLE */ | |
#timeHandle {position: absolute; width: 14px; height: 14px; cursor: move; background: url(../images/player/volume_control_handle.png) top left no-repeat;} | |
/* CONTENT */ | |
#contentWrap {margin: 0 auto 30px auto; padding: 20px 0 0 0; width: 980px; background: url(../images/content_bg.png) top left repeat-y;} | |
#content {margin: 0 20px; width: 940px; background-color: #fff;} | |
#contentWrapBtm {width: 980px; height: 30px; background: url(../images/content_wrap_btm.png) bottom left no-repeat;} | |
/* BETA SIGN UP FORM */ | |
.betaSignUpForm {margin: 0 0 20px 0; padding: 20px; width: 660px; background-color: #e0f7ff; -webkit-border-radius: 5px; -moz-border-radius: 5px;} | |
.betaSignUpForm legend {display: none;} | |
.betaSignUpForm label {font-size: 18px; font-weight: bold; color: #000;} | |
.betaSignUpForm input {float: left; width: 572px; margin: 5px 0 0 0; padding: 6px; height: 16px; border: 1px solid #bbb; font-family: arial, helvetica, sans-serif; font-size: 14px; color: #46afc5; background-color: #fff; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px;} | |
.betaSignUpForm input:hover {border: 1px solid #888;} | |
.betaSignUpForm input.submit {float: left; margin: 5px 0 0 0; width: 74px; height: 30px; border: none; background: url(../images/submit_btn_inline.png) 0 0 no-repeat; cursor: pointer; -webkit-border-radius: 0; -moz-border-radius: 0;} | |
.betaSignUpForm input.submit:hover {background-position: 0 -30px;} | |
/* LEFT COLUMN */ | |
#leftColumn {float: left; margin: 0 20px 0 0; width: 700px;} | |
#leftColumn h2 {margin: 0; border: none;} | |
/* SET LIST */ | |
.setList {float left; margin: 20px 0 30px 0; width: 700px;} | |
/* SET LIST HEADING */ | |
.setListHeading {width: 700px; height: 40px; background: url(../images/leftcol_heading_bg.png) top left no-repeat; font-size: 18px; color: #fff; font-weight: bold;} | |
.setListHeading .favorite {float: left; margin: 13px 0 0 50px; width: 16px; height: 16px; background: url(../images/tracklist_heading_heart.png) 0 0 no-repeat;} | |
.setListHeading p {float: left; margin: 8px 0 0 20px;} | |
.setListHeading .trackNumber {float: left;} | |
.setListHeading .trackName {float: left; margin: 0 0 0 20px;} | |
.setListHeading .title {float: left;} | |
.setListHeading .artistName {float: left; margin: 0 0 0 230px;} | |
.setListHeading .date {float: left; margin: 0 0 0 346px;} | |
.setListHeading .buyTrack {float: left; margin: 0 0 0 80px;} | |
.setListHeading .runTime {float: left; margin: 0 0 0 24px;} | |
.setListHeading .rating {float: left; margin: 0 0 0 22px;} | |
/* TRACK ODD */ | |
.setList .trackOdd {width: 700px; height: 30px; font-size: 14px; color: #2d3133;} | |
.setList .trackOdd:hover {-webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: #46afc5; color: #fff; cursor: pointer;} | |
.setList .trackOdd p {float: left; margin: 6px 0 0 20px;} | |
.setList .trackOdd .trackNumber {float: left; width: 20px;} | |
.setList .trackOdd .trackName {float: left; width: 310px; margin: 0 0 0 25px;} | |
.setList .trackOdd .title {float: left; width: 355px;} | |
.setList .trackOdd .date {float: left; margin: 0 0 0 45px;} | |
.setList .trackOdd .runTime {float: left; margin: 0 0 0 55px;} | |
.setList .trackOdd .rating {float: left; margin: 0 0 0 35px;} | |
/* TRACK EVEN */ | |
.setList .trackEven {width: 700px; height: 30px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: #e0f7ff; font-size: 14px; color: #2d3133;} | |
.setList .trackEven:hover {-webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: #46afc5; color: #fff; cursor: pointer;} | |
.setList .trackEven p {float: left; margin: 6px 0 0 20px;} | |
.setList .trackEven .trackNumber {float: left; width: 20px;} | |
.setList .trackEven .trackName {float: left; width: 310px; margin: 0 0 0 25px;} | |
.setList .trackEven .title {float: left; width: 355px;} | |
.setList .trackEven .date {float: left; margin: 0 0 0 45px;} | |
.setList .trackEven .runTime {float: left; margin: 0 0 0 55px;} | |
.setList .trackEven .rating {float: left; margin: 0 0 0 35px;} | |
/* TRACK LIST */ | |
.trackList {margin: 0 0 30px 0; width: 700px;} | |
/* TRACK LIST HEADING */ | |
.trackListHeading {width: 700px; height: 40px; background: url(../images/leftcol_heading_bg.png) top left no-repeat; font-size: 18px; color: #fff; font-weight: bold;} | |
.trackListHeading .favorite {float: left; margin: 13px 0 0 20px; width: 16px; height: 16px; background: url(../images/tracklist_heading_heart.png) 0 0 no-repeat;} | |
.trackListHeading p {float: left; margin: 8px 0 0 20px;} | |
.trackListHeading .trackNumber {float: left;} | |
.trackListHeading .trackName {float: left; margin: 0 0 0 20px;} | |
.trackListHeading .artistName {float: left; margin: 0 0 0 230px;} | |
.trackListHeading .buyTrack {float: left; margin: 0 0 0 105px;} | |
/* TRACK ODD */ | |
.trackOdd {width: 700px; height: 30px; font-size: 14px; color: #2d3133;} | |
.trackOdd:hover {-webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: #46afc5; color: #fff; cursor: pointer;} | |
.trackOdd .favorite {float: left; margin: 7px 0 0 20px; width: 16px; height: 16px;} | |
.trackOdd .favorite a {display: block; width: 16px; height: 16px; background: url(../images/favorite_icon_whitebg.png) 0 0 no-repeat;} | |
.trackOdd .favorite a:hover {background-position: 0 -16px;} | |
.trackOdd .notfavorite {float: left; margin: 7px 0 0 20px; width: 16px; height: 16px;} | |
.trackOdd .notfavorite a {display: block; width: 16px; height: 16px; background: url(../images/favorite_icon_whitebg.png) 0 -16px no-repeat;} | |
.trackOdd .notfavorite a:hover {background-position: 0 0;} | |
.trackOdd p {float: left; margin: 6px 0 0 28px;} | |
.trackOdd .trackNumber {float: left; width: 20px;} | |
.trackOdd .trackName {float: left; width: 310px; margin: 0 0 0 25px;} | |
.trackOdd .artistName {float: left; margin: 0 0 0 20px; width: 180px;} | |
.trackOdd .buyTrack {float: right; margin: 7px 20px 0 30px; width: 30px; height: 15px;} | |
.trackOdd .buyTrack a {display: block; width: 30px; height: 15px; background: url(../images/buy_btn.png) 0 0 no-repeat;} | |
.trackOdd .buyTrack a:hover {background-position: 0 -15px;} | |
/* TRACK EVEN */ | |
.trackEven {width: 700px; height: 30px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: #e0f7ff; font-size: 14px; color: #2d3133;} | |
.trackEven:hover {-webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: #46afc5; color: #fff; cursor: pointer;} | |
.trackEven .favorite {float: left; margin: 7px 0 0 20px; width: 16px; height: 16px;} | |
.trackEven .favorite a {display: block; width: 16px; height: 16px; background: url(../images/favorite_icon_whitebg.png) 0 0 no-repeat;} | |
.trackEven .favorite a:hover {background-position: 0 -16px;} | |
.trackEven .notfavorite {float: left; margin: 7px 0 0 20px; width: 16px; height: 16px;} | |
.trackEven .notfavorite a {display: block; width: 16px; height: 16px; background: url(../images/favorite_icon_whitebg.png) 0 -16px no-repeat;} | |
.trackEven .notfavorite a:hover {background-position: 0 0;} | |
.trackEven p {float: left; margin: 6px 0 0 28px;} | |
.trackEven .trackNumber {float: left; width: 20px;} | |
.trackEven .trackName {float: left; width: 310px; margin: 0 0 0 25px;} | |
.trackEven .artistName {float: left; margin: 0 0 0 20px; width: 180px;} | |
.trackEven .buyTrack {float: right; margin: 7px 20px 0 30px; width: 30px; height: 15px;} | |
.trackEven .buyTrack a {display: block; width: 30px; height: 15px; background: url(../images/buy_btn.png) 0 0 no-repeat;} | |
.trackEven .buyTrack a:hover {background-position: 0 -15px;} | |
/* TRACK CURRENTLY PLAYING TRACK */ | |
.trackCurrent {width: 700px; height: 30px; background-color: #e64804; font-size: 14px; color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px;} | |
.trackCurrent .favorite {float: left; margin: 7px 0 0 20px; width: 16px; height: 16px;} | |
.trackCurrent .favorite a {display: block; width: 16px; height: 16px; background: url(../images/favorite_icon_whitebg.png) 0 0 no-repeat;} | |
.trackCurrent .favorite a:hover {background-position: 0 -16px;} | |
.trackCurrent .notfavorite {float: left; margin: 7px 0 0 20px; width: 16px; height: 16px;} | |
.trackCurrent .notfavorite a {display: block; width: 16px; height: 16px; background: url(../images/favorite_icon_whitebg.png) 0 -16px no-repeat;} | |
.trackCurrent .notfavorite a:hover {background-position: 0 0;} | |
.trackCurrent p {float: left; margin: 6px 0 0 28px;} | |
.trackCurrent .trackNumber {float: left; width: 20px;} | |
.trackCurrent .trackName {float: left; width: 310px; margin: 0 0 0 25px;} | |
.trackCurrent .artistName {float: left; margin: 0 0 0 20px; width: 120px;} | |
.trackCurrent .buyTrack {float: right; margin: 7px 20px 0 30px; width: 30px; height: 15px;} | |
.trackCurrent .buyTrack a {display: block; width: 30px; height: 15px; background: url(../images/buy_btn.png) 0 0 no-repeat;} | |
.trackCurrent .buyTrack a:hover {background-position: 0 -15px;} | |
/* SEARCH FORM */ | |
.searchForm {margin: 0 0 20px 0; padding: 20px 20px 10px 20px; width: 660px; background-color: #e0f7ff; -webkit-border-radius: 5px; -moz-border-radius: 5px;} | |
.searchForm legend {display: none;} | |
.searchForm input {float: left; width: 572px; padding: 6px; height: 16px; border: 1px solid #bbb; font-family: arial, helvetica, sans-serif; font-size: 14px; color: #46afc5; background-color: #fff; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px;} | |
.searchForm input:hover {border: 1px solid #888;} | |
.searchForm input.submit {float: left; width: 74px; height: 30px; border: none; background: url(../images/submit_btn_inline.png) 0 0 no-repeat; cursor: pointer; -webkit-border-radius: 0; -moz-border-radius: 0;} | |
.searchForm input.submit:hover {background-position: 0 -30px;} | |
/* SEARCH TABS */ | |
#searchTabs {margin: 10px 0 0 0;} | |
#searchTabs .title {float: left; margin: 5px 10px 0 0; font-weight: bold; font-size: 14px; color: #000;} | |
#searchTabs ul {float: left;} | |
#searchTabs li {display: inline; height: 50px;} | |
#searchTabs a {float: left; margin: 0 5px 0 0; padding: 5px 10px; color: #2d3133; font-size: 14px; font-weight: bold; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px;} | |
#searchTabs a:hover, #searchTabs a.selected {color: #fff; text-decoration: none; background-color: #e64804; -webkit-border-radius: 3px; -moz-border-radius: 3px;} | |
/* SEARCH RESULTS */ | |
.searchResults {width: 700px; margin: 0 0 20px 0;} | |
.searchResults .img {border: none;} | |
/* SET TABS */ | |
.setTabs {float: left; text-align: center; margin: 5px; padding: 20px 10px 0 10px; width: 203px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: #e0f7ff;} | |
.setTabs:hover {color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: #2d3133;} | |
.setTabs .thumb {margin: 0 auto 5px auto; padding: 5px; border: 1px solid #bbb; width: 120px; height: 120px; background-color: #fff; overflow: hidden;} | |
.setTabs a:hover .thumb {border: 1px solid #bbb; background-color: #fff;} | |
.setTabs .blurb {text-align: center; margin: 0 auto;} | |
/* SEARCH RESULTS ITEM EVEN */ | |
.searchResultsItemEven {clear: both; padding: 10px; width: 680px; height: 38px; overflow: auto; cursor: pointer;} | |
.searchResultsItemEven:hover {-webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: #2d3133; color: #fff;} | |
.searchResultsItemEven .thumbWrap {float: left; margin: 0 10px 0 0; padding: 2px; border: 1px solid #bbb; background-color: #fff;} | |
.searchResultsItemEven .thumb {width: 32px; height: 32px; background-color: #fff; overflow: hidden;} | |
.searchResultsItemEven .thumbWrap:hover {background-color: #46afc5; border: 1px solid #46afc5;} | |
.searchResultsItemEven .blurb {float: left;} | |
/* SEARCH RESULTS ITEM ODD */ | |
.searchResultsItemOdd {clear: both; padding: 10px; width: 680px; height: 38px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: #e0f7ff; overflow: auto; cursor: pointer;} | |
.searchResultsItemOdd:hover {-webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: #2d3133; color: #fff;} | |
.searchResultsItemOdd .thumbWrap {float: left; margin: 0 10px 0 0; padding: 2px; border: 1px solid #bbb; background-color: #fff;} | |
.searchResultsItemOdd .thumb {width: 32px; height: 32px; background-color: #fff; overflow: hidden;} | |
.searchResultsItemOdd .thumbWrap:hover {background-color: #46afc5; border: 1px solid #46afc5;} | |
.searchResultsItemOdd .blurb {float: left;} | |
/* COMMENTS */ | |
.comments {width: 700px;} | |
/* INDIVIDUAL COMMENTS */ | |
.commentWrap {margin: 10px 0 0 0; width: 700px;} | |
.commentWrap .user {clear: left; float: left; width: 140px; text-align: center;} | |
.commentWrap .thumb {width: 60px; height: 60px; overflow: hidden;} | |
.commentWrap a.thumb {border: 1px solid #cadee5;} | |
.commentWrap a:hover .thumb {border: 1px solid #46afc5;} | |
.commentWrap a {font-weight: bold; color: #e64804;} | |
.commentBubble {float: left; padding: 0 0 0 20px; width: 460px; background: url(../images/comment_arrow.png) top left no-repeat;} | |
.commentBubble .boxTopBlue {float: left; width: 540px; height: 10px; background: url(../images/box_top_blue_540.png) top left no-repeat;} | |
.commentBubble p {margin: 10px 0 0 0; padding: 10px 20px; width: 500px; background-color: #e0f7ff;} | |
.commentBubble .boxBtmBlue {width: 540px; height: 10px; background: url(../images/box_btm_blue_540.png) bottom left no-repeat;} | |
/* PAGINATION */ | |
.pagination {margin: 20px 0; width: 700px; text-align: center;} | |
.pagination ul {margin: 8px 0 0 0;} | |
.pagination li {display: inline;} | |
.pagination a {padding: 5px 10px; color: #2d3133; font-size: 14px; font-weight: bold; text-decoration: none; background-color: #e0f7ff; -webkit-border-radius: 3px; -moz-border-radius: 3px;} | |
.pagination a:hover{color: #fff; background-color: #e64804;} | |
.pagination .current {padding: 5px 10px; color: #fff; font-size: 14px; font-weight: bold; text-decoration: none; background-color: #e64804; -webkit-border-radius: 3px; -moz-border-radius: 3px;} | |
.next_page, a.next_page {padding: 5px 10px; color: #fff; font-size: 14px; font-weight: bold; text-decoration: none; background-color: #000; -webkit-border-radius: 3px; -moz-border-radius: 3px;} | |
.next_page, a.prev_page {padding: 5px 10px; color: #fff; font-size: 14px; font-weight: bold; text-decoration: none; background-color: #000; -webkit-border-radius: 3px; -moz-border-radius: 3px;} | |
.disabled { display: none;} | |
/* PAGINATION */ | |
.pagination {margin: 20px 0; width: 700px; text-align: center;} | |
.pagination ul {margin: 8px 0 0 0;} | |
.pagination li {display: inline;} | |
.pagination a {padding: 5px 10px; color: #2d3133; font-size: 14px; font-weight: bold; text-decoration: none; background-color: #e0f7ff; -webkit-border-radius: 3px; -moz-border-radius: 3px;} | |
.pagination a:hover, .pagination a.selected {color: #fff; background-color: #e64804;} | |
.pagination a.btn {margin: 10px; background-color: #000; color: #fff;} | |
.pagination a.btn:hover {background-color: #e64804; color: #fff;} | |
/* BASIC FORM */ | |
.basicForm {padding: 20px; width: 660px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: #e0f7ff;} | |
.basicForm legend {display: none;} | |
.basicForm label {margin: 0; padding: 0; font-size: 12px; font-weight: bold; color: #000;} | |
.basicForm .caption {float: right; margin: 0 0 0 5px; font-size: 12px; font-weight: normal; color: #999;} | |
.basicForm a.caption {float: right; margin: 0 0 0 5px; font-size: 12px; font-weight: normal; color: #e64804;} | |
.basicForm input {margin: 2px 0 10px 0; padding: 6px; width: 648px; height: 16px; font-family: arial, helvetica, sans-serif; font-size: 14px; color: #46afc5; border: 1px solid #bbb; background-color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px;} | |
.basicForm input:hover {border: 1px solid #888;} | |
.basicForm input.help:hover {border: 1px solid #46afc5;} | |
.basicForm input.nonField {margin: 4px 0 20px 0; padding: 0; border: none; background: none; color: #000;} | |
.basicForm label.error {color: #e41e26;} | |
.basicForm select {clear: both; margin: 3px 0 5px 0; width: 220px;} | |
.basicForm input.checkBox {float: left; margin: 0 10px 0 0; padding: 0; width: 14px; height: 14px;} | |
.basicForm label.checkBoxLabel {float: left; margin: 0 0 15px 0;} | |
.basicForm textarea {padding: 6px; width: 610px; font-family: arial, helvetica, sans-serif; font-size: 14px; color: #fff; border: none; background-color: #1e2426; -webkit-border-radius: 3px; -moz-border-radius: 3px;} | |
.basicForm input.submit {display: block; clear: both; margin: 5px 5px 0 0; width: 74px; height: 30px; border: none; background: url(../images/submit_btn.png) 0 0 no-repeat; cursor: pointer; -webkit-border-radius: 0; -moz-border-radius: 0} | |
.basicForm input.submit:hover {background-position: 0 -30px;} | |
/* COMMENT FORM */ | |
#commentForm {padding: 20px; width: 660px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: #e0f7ff;} | |
#commentForm legend {margin: 0 0 20px 0; border-bottom: 1px solid #ccc; font-size: 18px; font-weight: bold; color: #e64804;} | |
#commentForm label {font-size: 14px; font-weight: bold; color: #000;} | |
#commentForm textarea {padding: 6px; width: 650px; font-family: arial, helvetica, sans-serif; font-size: 14px; color: #2d3133; border: 1px solid #bbb; background-color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px;} | |
#commentForm textarea:hover {border: 1px solid #888;} | |
#commentForm input.submit {float: left; margin: 5px 0 0 0; width: 74px; height: 30px; border: none; background: url(../images/submit_btn.png) 0 0 no-repeat; cursor: pointer;} | |
#commentForm input.submit:hover {background-position: 0 -30px;} | |
/* BLOG POST SUMMARY */ | |
.postSummary {margin: 0 0 20px 0; padding: 0 0 10px 0; border-bottom: 1px solid #cadee5;} | |
#leftColumn .postSummary h2 {margin: 0 0 15px 0; padding: 0; font-size: 26px; font-weight: bold; text-transform: capitalize; color: #46afc5; background: none;} | |
.postSummary .byLine {font-weight: bold;} | |
.postSummary .commentCount {float: right; padding: 0 0 0 22px; font-weight: normal; background: url(../images/comment_icon.png) 0 3px no-repeat;} | |
/* SCREENSHOTS */ | |
#leftColumn .center {width: 940px; text-align: center;} | |
#leftColumn .center .thumb {float: left; margin: 0 20px 0 0; padding: 10px; width: 200px; height: 200px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: #e0f7ff;} | |
#leftColumn .center .thumb:hover {background-color: #2d3133;} | |
#leftColumn .center .thumb .last {margin: 0;} | |
#leftColumn .center .thumb a {display: block;} | |
/* RIGHT COLUMN */ | |
#rightColumn {float: left; width: 220px;} | |
#rightColumn .box {margin: 0 0 20px 0; width: 220px;} | |
#rightColumn h2.noBg {margin: 0 0 5px 0; padding: 0; font-size: 18px; font-weight: bold; text-transform: uppercase; color: #46afc5; background: none;} | |
/* BLOG TAG LIST */ | |
#rightColumn .box .tags {margin: 0 0 0 10px;} | |
#rightColumn .box .tags li {margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom: 1px solid #cadee5;} | |
#rightColumn .box .tags li.last {margin: 0; padding: 0; border: none;} | |
#rightColumn .box .tags a {font-weight: bold;} | |
/*SIGNUP NOW BUTTON */ | |
.signupBtn {width: 160px; height: 30px;} | |
.signupBtn a {display: block; width: 119px; height: 30px; background: url(../images/signup_btn.png) 0 0 no-repeat;} | |
.signupBtn a:hover {background-position: 0 -30px;} | |
/* BASIC FORM */ | |
#rightColumn .basicForm {padding: 20px; width: 180px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: #e0f7ff;} | |
#rightColumn .basicForm legend {display: none;} | |
#rightColumn .basicForm label {margin: 0; padding: 0; font-size: 12px; font-weight: bold; color: #000;} | |
#rightColumn .basicForm .caption {float: right; margin: 0 0 0 5px; font-size: 12px; font-weight: normal;} | |
#rightColumn .basicForm input {margin: 2px 0 10px 0; padding: 6px; width: 168px; height: 16px; font-family: arial, helvetica, sans-serif; font-size: 14px; color: #000; border: 1px solid #bbb; background-color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px;} | |
#rightColumn .basicForm input:hover {border: 1px solid #888;} | |
#rightColumn .basicForm input.nonField {margin: 2px 0 20px 0; padding: 0; border: none; background: none; color: #000;} | |
#rightColumn .basicForm label.error {color: #e41e26;} | |
#rightColumn .basicForm select {clear: both; margin: 3px 0 5px 0; width: 220px;} | |
#rightColumn .basicForm input.checkBox {float: left; margin: 0 10px 0 0; padding: 0; width: 14px; height: 14px;} | |
#rightColumn .basicForm label.checkBoxLabel {float: left; margin: 0 0 15px 0;} | |
#rightColumn .basicForm textarea {padding: 6px; width: 610px; font-family: arial, helvetica, sans-serif; font-size: 14px; color: #fff; border: none; background-color: #1e2426; -webkit-border-radius: 3px; -moz-border-radius: 3px;} | |
#rightColumn .basicForm input.submit {clear: both; margin: 5px 5px 0 0; width: 74px; height: 30px; border: none; background: url(../images/submit_btn.png) 0 0 no-repeat; cursor: pointer; -webkit-border-radius: 0; -moz-border-radius: 0} | |
#rightColumn .basicForm input.submit:hover {background-position: 0 -30px;} | |
/* SPONSORS */ | |
#rightColumn .sponsorBox {margin: 0 0 10px 0; width: 220px; height: 140px;} | |
#rightColumn .sponsorBoxLast {margin: 0;} | |
/* RELATED CONTENT */ | |
#rightColumn .relatedBox {margin: 0 0 10px 0; padding: 0 10px 10px 10px; width: 200px; border-bottom: 1px solid #cadee5;} | |
#rightColumn .relatedBox h3 {margin: 0; padding: 0; border: none; color: #e64804;} | |
#rightColumn .relatedBox h3 a {color: #e64804;} | |
/* FOOTER */ | |
#footer {margin: 0 auto; width: 940px;} | |
#footer .linkBox {float: left; margin: 0 20px 0 0; width: 140px;} | |
#footer .linkBox h4 {margin: 0 0 5px 0; color: #2d3133;} | |
#footer .linkBox li {margin: 0 0 5px 0; font-weight: bold;} | |
#footer p {margin: 40px 0 30px 0; font-weight: bold; color: #2d3133;} | |
#footer a {font-size: 14px; font-weight: normal; color: #bfd3d9; text-decoration: none;} | |
#footer a:hover {color: #fff; text-decoration: underline;} | |
/* GENERIC CLASSES | |
---------------------------------------------------------------------------*/ | |
.hide {display: none;} | |
.clear {clear: both;} | |
.light {font-weight: normal;} | |
.small {font-size: 12px;} | |
.white {color: #fff;} | |
/* IMAGE SHADOWS */ | |
.shadowed-image-container {position: relative; float: left; clear: both; margin: -5px 0 0 -5px;} | |
.shadowed-image {position: relative; margin: 0 10px 0 0; padding: 11px 8px 10px 9px;} | |
.shadowed-image img {position: relative; z-index: 10; border: 5px solid #fff;} | |
.shadow {position: absolute !important; top: 0; left: 0; border: 0 !important; z-index: 1 !important; behavior: url("/images/iepngfix.htc");} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment