/* Typography */
* { margin: 0; padding: 0; }
/* Reset Settings */
/* Site font face */
html,body{font-family:Arial,verdana,Georgia,tahoma,sans-serif;font-size:16px; background-color: #000; color: #fff;text-align: center;}
p,li,dt,dd,label,address,th,td,legend,input,select,textarea{font-size:100%;line-height:120%;}
th dt, td dt, th dd, td dd, th li, td li, li li, dt dt, dt dd, dd dt, dd dd, legend legend{font-size:100%;}
h1,h2,h3,h4,h5,h6,pre,code{font-size:1em;}
/* to avoid ff<1.03 bug (instead of *) and normalise spacing */
html,body,div,pre,form,table,fieldset,h1,h2,h3,h4,h5,h6,dl,ul,ol,hr,p,blockquote{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p,pre,table{margin-bottom:0.5em; line-height: 110%;}
/* constant look and cursor */
abbr,acronym{font-style:normal;cursor:help;}
a img,:link img,:visited img,fieldset{border:none;}
td, th{vertical-align:top;}
img,object,embed{border:none;vertical-align:bottom;}
/* always hide */
.print,legend{display:none;}
select {height: 1.0em;}
form input, form label, form select, form textarea {font-family:'Arial',verdana,tahoma,georgia,sans-serif; font-size:90%;}
h1, h2, h3, h4, h5 { color: #fff; text-transform: uppercase; font-weight:normal;}
h1 { font-size:1.6em;}
h2 { font-size:1.2em; font-weight: bold;}
h3 { font-size:1.2em; font-weight: bold;}
h4 { font-size:1.2em; padding-bottom: 2px; }
h5 { font-size:0.9em; padding-bottom: 2px; font-weight:bold;}
h1 a, h2 a { text-decoration: none;}
a { color:#fff; text-decoration:underline;}
a:hover { color:#cccccc;}
a:visited {}
/* Template Structure */
#container { font-size: .90em; margin-left: auto;margin-right: auto;padding: 0;border: 0px solid #000;position: relative; text-align: left;}
#container {width:976px;}
.hide {display:none;}
.clear {clear: both;line-height:0;}
/* Header */
#container #headerarea #header_header {background-color: #666666; height:110px; text-align: center; padding: 10px;}
#container #headerarea #header_header a:hover { color:#fff;}
#container #headerarea #header_header h1 { font-size:4.0em; font-weight: bold; line-height: 100%;}
#container #headerarea #header_header h2 { font-size: 1.4em; font-weight: bold; margin: -20px 0 0 0; }
#container #headerarea #header_header .imageReplace .replace {}
#container #headerarea #header_header .imageReplace a {text-indent: -999999px; display:block; padding: 0 0 0 0; background: transparent url(/Skins/CalendarSongs/Images/title.gif) 0 0 no-repeat;width:962px;height:81px;cursor: pointer; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */}
/* Navigation */
#container #headerarea #navigation {float:left; width: 100%; padding: 0 0 10px 0; text-align: center;}
#container #headerarea #navigation #monthNav {width: 100%; list-style: none; text-align:center; font-size: 1.6em; padding: 10px 0 0 0;}
#container #headerarea #navigation #monthNav li {float:left; width:8%; display: inline; text-transform: uppercase; font-weight: bold; line-height: 100%; padding: 10px 1px 10px 2px;}
#container #headerarea #navigation #monthNav li.septgember { padding-left: 3px; padding-right: 4px;}
/* background colours for Months */
.october {background-color: #FF6100 !important;}
.november {background-color: #c40434 !important;}
.december {background-color: #FE0000 !important;}
.january {background-color: #A7629B !important;}
.february {background-color: #D99797 !important;}
.march {background-color: #509B61 !important;}
.april {background-color: #979A5F !important;}
.may {background-color: #3B28D5 !important;}
.june {background-color: #EA2564 !important;}
.july {background-color: #d9d600 !important;}
.august {background-color: #0c71b8 !important;}
.september {background-color: #006600 !important;}
/* News */
#container #headerarea #news { text-align: center; padding-bottom: 0px;}
/* Content */
#container #contentarea { padding: 10px 0 10px 0; width: 976px; }
/* Main */
#container #contentarea #main { float:left; padding: 0 0 0 0; }
#container #contentarea #main div.hr {width: auto;background-image: url(images/dot_light.gif);background-repeat: repeat-x;height: 1px;margin: 15px 0px 15px 0px;}
/* now hide the standard hr */
#container #contentarea #main div.hr hr {display: none;}
/* Sidebar */
#container #contentarea #main .side {float:right;position:relative;}
#container #contentarea #main .sidebar { background: #666666; width: 310px; }
#container #contentarea #main .sidebar { padding: 10px 10px 10px 10px; margin: 0 0 10px 0;}
#container #contentarea #main .sidebar_first { padding:10px; margin: -10px 0px 10px 0px; background: #666666; width: 310px; float:right;}
#container #contentarea #main .sidebar_first .actions { padding:0px; margin: 0px 0px 0px 0px;}
/* Search */
#container #contentarea #main .sidebar_first .actions #search { float:left; }
#container #contentarea #main .sidebar_first .actions #search { width: 150px;}
#container #contentarea #main .sidebar_first .actions ul { float:right;}
#container #contentarea #main .sidebar_first .actions li { font-size: 85%; text-align: right; margin: 0px; padding: 0px}
#container #contentarea #main .sidebar h2, #container #contentarea #main .sidebar_first h2 { font-size: 1.1em;}
#container #contentarea #main .sidebar li, #container #contentarea #main .sidebar_first li { list-style: none; padding: 0 0 5px 0px;}
/* Comments */
#container #contentarea #main .sidebar .comments { padding:0 0 25px 0px;}
/* Tag Cloud */
#container #contentarea #main .sidebar .tagCloud { padding:0 0 25px 0px;}
#container #contentarea #main .sidebar .tagCloud .more {padding: 10px 0 0 0;}
/*--------{tags}-------------*/
#tag-cloud{font-size: 1em;margin: 0;padding: 0;}
#tag-cloud li {display: inline;list-style-type: none;}
#tag-cloud li, #tag-cloud li a {display: inline;}
#tag-cloud li {padding: 2px 3px;}
.tag-style-1 {font-size: .8em;font-weight: normal;}
.tag-style-2 {font-size: 1em;font-weight: normal;}
.tag-style-3 {font-size: 1.2em;font-weight: bold;}
.tag-style-4 {font-size: 1.4em;font-weight: normal;}
.tag-style-5 {font-size: 1.6em;font-weight: bold;}
.tag-style-6 {font-size: 1.8em;font-weight: bold;}
.tag-style-7 {font-size: 2em;font-weight: bold;}
/* Categories */
#container #contentarea #main .sidebar .category { padding:0px;}
#container #contentarea #main .sidebar .category ul { padding:0px; margin:0px;}
#container #contentarea #main .sidebar .category li { padding: 0px 0px 5px 0px;}
/* Homepage */
#container #contentarea #main #home {width: 646px; float: left;margin-bottom:15px;}
#container #contentarea #main #home h3 { padding-bottom: 0px;}
#container #contentarea #main #home .paddingTop { padding-top: 10px;}
#container #contentarea #main #home a { font-weight: bold;}
#container #contentarea #main #home .about {width: 241px; float: left;}
#container #contentarea #main #home .about { padding: 0 20px 0 0;}
#container #contentarea #main #home #latestSong { width: 350px; float: left;}
#container #contentarea #main #home #latestSong { padding: 0 20px 0 0;}
#container #contentarea #main #home #latestSong #playlistTrack { position:relative; padding: 10px 0 10px 0;}
#container #contentarea #main #home #latestSong #actions {margin: 0 0 0 0; position: relative;}
#container #contentarea #main #home #latestSong #actions a {cursor: pointer; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */}
#container #contentarea #main #home #latestSong #actions #homepage_ascx_monthOfSong {float: left; width: 75px; text-align: center; text-transform: uppercase; font-size:1.8em; font-weight: bold; line-height: 110%; padding: 10px 15px 10px 15px;}
#container #contentarea #main #home #latestSong #actions .actions { float: left; width: 230px; padding-left: 10px;}
#container #contentarea #main #home #latestSong #actions .video {background-color: #666666; text-align:center; padding: 5px 0px;}
#container #contentarea #main #home #latestSong .creativeCommons { padding: 0px 0 0 0;}
/* Monthly songs */
#container #contentarea #main #month {float: left;width: 616px; padding-right: 15px;}
#container #contentarea #main .journal_eintrag .header {width: 516px;}
#container #contentarea #main #month #monthlySong { float:left; width: 320px;}
#container #contentarea #main #month #monthlySong h4 { padding-bottom: 0px;}
#container #contentarea #main #month #songLinks { float:left; width: 180px; padding-left: 18px; font-size: .89em; line-height: 100%}
#container #contentarea #main #month #songLinks .hr {margin-top: 10px;margin-bottom: 10px;}
#container #contentarea #main #month #monthlyDescription { width: 516px; float:left;}
#container #contentarea #main #month #monthlyDescription .topPadding { padding-top: 15px;}
#container #contentarea #main #monthlyRemix {background-color:#666666; position:relative; float:right; margin-top: -59px; width: 320px; padding: 10px 10px 10px 10px;}
*>#container #contentarea #main #monthlyRemix { min-height: 315px;}
* html #container #contentarea #main #monthlyRemix { height: 315px;}
#container #contentarea #main #monthlyRemix h3 { padding-bottom: 0px;}
#container #contentarea #main #monthlyRemix #playlistTrack { padding-top: 15px;}
/* Remixes */
#container #contentarea #main #remixer { float: left; width: 616px; padding-right: 15px;}
#container #contentarea #main #remixer #name { float:left; width: 616px;}
#container #contentarea #main #remixer #name h3 { padding-bottom: 0px;}
#container #contentarea #main #remixer #description { width: 516px; float:left;}
#container #contentarea #main #remixer #descriptionL .topPadding { padding-top: 15px;}
/* Entries */
#container #contentarea #main #entryCollection .header { padding-bottom: 20px; }
#container #contentarea #main #entryCollection .header h1 { line-height: 110%; padding-bottom: 0px; margin-bottom: 10px;}
#container #contentarea #main #entryCollection h2 { padding-bottom: 0px; margin-bottom: 5px;}
#container #contentarea #main #entryCollection .journal_eintrag { padding: 10px 0 20px 0;}
/* Archives */
#container #contentarea #main #archiveCategories { padding: 0 0 20px 0;}
/* Rules */
#container #contentarea #main #rules ol {margin: 5px 0 10px 20px; padding: 10px;}
#container #contentarea #main #rules ol li {padding-bottom: 10px;}
/* Category */
#container #contentarea #main .category { padding: 0 0 20px 0;}
#container #contentarea #main .category li { list-style: none; padding: 0 0 5px 10px;}
/* syndications */
#container #contentarea #main .syndications { padding: 0 0 20px 0;}
#container #contentarea #main .syndications li { list-style: none; padding: 0 0 5px 10px;}
/* Posts */
#container #contentarea #main .previousNext { text-align: left; padding: 0 0 20px 0;}
.postfooter {width: 516px; padding-top:20px;}
/* Comments */
#container #contentarea #main .comments { padding: 10px 0 10px 0; width: 516px; }
#container #contentarea #main .comments div.author {/*background: #cccccc url(images/CommentAuthorGradient.gif) repeat-x top left ;*/border: solid 1px #967758;}
#container #contentarea #main .comments div.comment {margin: 0 0 1em 0;padding: 5px;clear: both;width: 440px;}
#container #contentarea #main .comments div.comment .commentInfo {width: 440px;color: #587796;margin-bottom: .2em;padding-left: 26px;height: 22px;display: block;background: url(images/CommentIcon.gif) no-repeat 0 .1em;}
#container #contentarea #main .comments div.comment {width: 503px;display: block;border: solid 1px #587796;margin: 0;padding: 5px;}
#container #contentarea #main .comments img.avatar {padding: 0 5px 5px 0;margin: 0;}
/* Form */
#container #contentarea #CommentForm { padding: 0 0 25px 0; width: 445px;}
#container #contentarea #CommentForm label { float: left; width: 180px; margin: 5px;}
#container #contentarea #CommentForm input { float: left; width: 230px;}
#container #contentarea #CommentForm input { padding: 0 2px 0 2px; margin: 5px;}
#container #contentarea #CommentForm textarea { float: left; width: 230px;}
#container #contentarea #CommentForm textarea { padding: 0 2px 0 2px; margin: 5px;}
#container #contentarea #CommentForm .captcha img { float: left; width: 180px; margin: 5px;}
#container #contentarea #CommentForm .buttonSubmit { margin: 10px 0 20px 193px; width: 80px; }
/* Bookmarks */
#container #contentarea #main #bookmarks {width: 516px;}
#container #contentarea #main #bookmarks li {display: inline; padding:0 10px 0 10px; border-right: solid 1px #fff;}
#container #contentarea #main #bookmarks li img {padding-right:5px;}
#container #contentarea #main #bookmarks li.end {border-right: solid 0px #fff;}
/* Holding Page */
#container #contentarea #main #holding {width: 873px;margin-left: auto;margin-right: auto;text-transform:uppercase;position:relative;}
#container #contentarea #main #holding .left {width: 450px;float:left;}
#container #contentarea #main #holding .right {width: 400px;float:right;position:relative;}
*>#container #contentarea #main #holding .right ul { min-height: 245px;}
* html #container #contentarea #main #holding .right ul { height: 245px;}
#container #contentarea #main #holding .right li {list-style-type:none;padding:0px;margin:0;padding-bottom:2px;}
#container #contentarea #main #holding .right .topPadding {padding-top:120px;}
#container #contentarea #main #holding .right .button { font-weight:bold;text-align:center; padding:15px; background:#666666;width:160px;text-transform:uppercase;font-size:0.9em}
#container #contentarea #main #holding .right a {text-decoration:none;}
#container #contentarea #main #holding h1 {font-weight:bold;}
/* Footer */
#container #footer {clear: both; position: relative; padding: 10px; width: 956px;}
/********* PrintIcon **********
Applies a print icon to a print link.
Sample usage:
*/
a.printIcon
{
background: url('../../images/printer.png') no-repeat top left;
padding-bottom: 4px;
}
a.printIcon span
{
background: url('../../images/printer.png') no-repeat top left;
padding-left: 17px;
}
/********* ShareIcon **********
Applies a share-icon to an element with the shareIcon class.
http://shareicons.com/
Sample usage:
*/
.shareIcon
{
background: url('../../images/share-icon-16x16.png') no-repeat center left;
}
/********* Gravatar **********
This is an avatar thumbnail displayed next to a blog post.
Sample usage within comments.ascx:
*/
img.avatar
{
float: left;
width: 50px;
padding: 5px;
border: 0;
display: block;
}
.commentInfo
{
clear: left;
}
.accessKey
{
text-decoration: underline;
}
/********* Pullout **********
A magazine layout box that floats right. Good for emphasizing
a point in a blog post.
USE THIS IN THE CONTENT OF A BLOG POST
Sample usage.
It is indeed a fact
*/
.pullout
{
display: block;
width: 30%;
padding: 10px;
background-color: #ddd;
float: right;
font: bold 1em arial, helvetica, sans-serif;
text-align: left;
letter-spacing: 0.05em;
margin: 5px;
clear: both;
border: solid 1px;
}
.pullout.alt
{
float: left;
}
/* blockquote styling */
blockquote.withline
{
text-align: justify;
padding: 5px;
border-left: 1px solid #9ACD32;
}