/* Start of CMSMS style sheet 'katalin' */ /*----------------------------------------------- # Katalin - Master Css #------------------------------------------------ # # TABLE OF CONTENT # # - Reset # # - Grid # - - width-x # # - Typography # - - Global # # - Redefined standard elements # # - Layout # - - Content First Containers # # - Content # - - Header # - - - Logo # - - - Search bar # - - Navigation # - - - Main nav # - - Pagenation # - - Bottoms # - - Startpage # - - Program page # # - Common Elements ------ # - - Backgrounds # - - Boxes # - - Buttons & Links # - - Colors # - - Forms # - - Lists # - - Borders # # - Misc ------------------ # - - Display # - - Text # - - Floats # - - Positioning # - - Clearing # - - Font sizes # - - Z-index # - - Margins # - - Paddings # #---------------------------------------------- # Glossary # # act - active # b bt bl bb br - Border Top, Left, Bottom, Right # bg - Background # cf - Content First # d dIn dBl dInBl - Display Inline, Block, Inline-block # f - Float # f10 - Font (1em) # H - Holder (classNameH) # m mt mr mb ml - Margin Top, Right, Bottom, Left # p pt pr pb pl - Padding Top, Right, Bottom, Left # pos1 - Position(1,2,3 etc.) # Sp - Spacer (tagNameSp) - Mostly used with sprites/images to make dynamic rounded corners etc. # txt txtL txtR txtC - Text Left, Right, Center # z - Z-index # #---------------------------------------------- # Colors # # Grey: #212121 # GreyDark: #111 # Yellow: #ee9722 # #----------------------------------------------*/ /*---------------------------------------------*/ /*################## Reset ####################*/ /*---------------------------------------------*/ /* Eric Meyer’s 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, 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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* Remember to define focus styles! */ :focus {outline:0; -moz-outline-style: none;} html {overflow:-moz-scrollbars-vertical} body {line-height:1; color:white; background:#090909;} ol, ul {list-style:none} /* Tables still need 'cellspacing="0"' in the markup */ table {border-collapse:separate; border-spacing:0} caption, th, td {text-align:left;font-weight: normal} blockquote:before, blockquote:after,q:before, q:after {content:""} blockquote, q {quotes: "" ""} strong{font-weight: bold;} a img {border:0} /* - - Sets up basic grid floating and margin - */ .width-1, .width-2, .width-3, .width-4, .width-5, .width-6, .width-7, .width-8, .width-9, .width-10, .width-11, .width-full{ float:left; position:relative;} /* - - Use these classes to set the width of a column - */ .width-1 {width: 238px} .width-2 {width: 298px} .width-3 {width: 606px} .width-4 {width: 420px} .width-5 {width: 128px} .width-full {width: 854px} /* - - The last column in a row needs this class except width-full - */ div.last, span.last, .last {margin-right:0} /* - - The first column in a row may need this class depending on your markup - */ div.first, span.first, .first {margin-left:0} /*---------------------------------------------*/ /*############### Typography ##################*/ /*---------------------------------------------*/ /* Main */ body { font-family: Arial, Verdana, sans-serif; line-height: 1.4; /* Unitless for proper inheritance */ color: #FFFFFF; } /* The top one is for IE: The percentage is of 16px (default IE text size) 10px is 62.5%, 12px is 75%, 13px is 81.25%, and so forth). The second value is what all other browsers see (the wanted font size). */ body {font-size: 62.5%} /* IE */ html > body {font-size: 10px} /* Other browsers */ p { font-size:1.1em;} /* Headers */ h1,h2,h3,h4,h5,h6 {font-weight: normal; line-height:1.4; font-family: Arial, Verdana;} h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {text-decoration: none} h1 {font-size:1.2em; font-weight:bold; color:#ee9722; padding:0 0 7px; } h2 {font-size:1.2em; color:#fff; /*background:#111;*/} h3 {font-size:1.6em; font-weight:bold; padding:10px 10px 12px;} h4 {} h5 {} h6 {} /* Links */ h1 a, h1 a:hover{ color:#ee9722;} /* LoVe/HAte-order */ a {/*font-size:1.1em; */text-decoration:none; color:#fff;} a:link { } a:visited { } a:hover {text-decoration:none; color:#ccc;} a:active { } a:focus { } /*---------------------------------------------*/ /*######## Redefined standard elements #######*/ /*---------------------------------------------*/ body {background:#040404 url(../images/misc/bgBody.jpg) no-repeat center top;} p {padding:0} /*---------------------------------------------*/ /*################## Layout ###################*/ /*---------------------------------------------*/ /* - - Content first holders - */ /*** NO PADDING ALLOWED IN THIS SECTION ***/ .cf-container {position:relative; margin:0 auto; text-align:left; width:854px; min-height:558px;} .cf-header {position:absolute; top:0; left:0; width:854px; height:93px; background:url(../images/misc/lineHeader.gif) repeat-x left bottom;} .cf-content {float:left; position:relative;} .cf-bottom {float:left; margin:22px 0 0; width:100%; padding:10px 0 28px; background:#212121;} /* cfSp = Content first spacer Setting the top placement to the main containers (cf-content, cf-rightH, cf-leftH) */ .cfSp {margin-top:103px} /*---------------------------------------------*/ /*################## Content ##################*/ /*---------------------------------------------*/ /* Header */ .logo {position:absolute; top:103px; left:-127px; height:600px; width:117px; background: url(../images/misc/katalinLogo.gif) no-repeat;} /* - Navigation */ /* - - Main nav - */ .navigation {position:absolute; bottom:10px; left:0; width:854px;} .navigation ul {padding: 0; margin: 0; background:#212121; width:100%;} .navigation li {float: left; position: relative; width: auto; background:#101; } .navigation li a {color: #fff; font-weight: bold; font-size:1.2em; display:block; background:#212121; padding: 0 26px; margin:0 3px 0 0; font-weight:bold; height: 26px; line-height: 26px;} .navigation li a:hover {color:#ccc;} .navigation ul .last a {margin:0px;} /* Dropdown */ .navigation ul ul {position: absolute; z-index:2; width:100%; top:26px; display:none; background:none;} .navigation ul li:hover ul {display:block;} .navigation ul ul li {float:none;} .navigation ul ul li.first span {display:block; height:19px;} .navigation ul ul li.first {background:none;} .navigation ul ul li a {margin:0; font-size:1.2em; font-weight:normal; display:block; width:100%; padding:4px 0;} .navigation ul ul li a span {display:block; padding:0 12px 0 26px;} .navigation ul ul li a:hover {color:#ee9722; background:#3e3e3e; } /* Pagenation */ /* Bottom */ .cf-bottom p {padding:0; color:#FFF; } .cf-bottom .bottomH {width:852px; margin:0 auto; border-left:1px solid #7a7a7a; border-right:1px solid #7a7a7a; overflow:hidden;} .cf-bottom .bottomH div {width:287px; float:left; padding:0 10px; border-right:1px solid #7A7A7A;} .cf-bottom .bottomH div h1 {padding:0 0 4px 0} .cf-bottom .bottomH div a {text-decoration:none; color:#FFFFFF; font-size:11px;} .cf-bottom .bottomH div p {padding:0} .cf-bottom .bottomH .last {width:210px; float:left; padding:0 10px; position:relative; border:none} /* Startpage */ .photoMain a {position:absolute; right:15px; bottom:20px; height:52px; width:227px; cursor:pointer; z-index:2; background: url(../images/misc/program.png) no-repeat; display:block;} .spotH {margin:0 0 10px; background:#212121; height: 330px;} .spotH img {float:left; padding:0 10px 0 0;} .spotH h1, .spotH h2 {padding:7px 10px 0 0;} .spotContent {width:298px; float:left;} .spotContent span {display:inline-block; font-size:1.1em} .spotContent p {padding:0 10px 16px 0;} .spotContent div {float:right; width:146px; min-height:124px; position:relative; padding:0 0 20px;} .spotContent .readMore {position:absolute; bottom:10px; left:0;} .menuH {margin:0 10px 0 0; background:#212121; min-height:340px} .menuH .menuR {float:right; min-height:124px; padding:0 8px 0 0; position:relative; width:141px;} .menuH .menuR p {padding:0 0 10px;} .menuH img, .welcomeH img {float:left; padding:0 10px 30px 0} .menuH h1, .welcomeH h1 {padding:7px 0;} .menuH p, .welcomeH p {padding:0 10px 10px;} .welcomeH {background:#212121 url(../images/misc/sign.gif) no-repeat left bottom; /*min-height:260px;*/ padding:0 0 80px;} .rightCol {float:right;} .content h2 span, .rightCol h2 span {background:#212121 url(../images/misc/arrow.gif) no-repeat right -13px; display:inline-block; padding:0 20px 0 10px; height: 26px; line-height: 26px;} .dontMissH {background:#212121; margin:0; border-bottom:1px solid black; height: 330px;} .dontMissH a {display:block;} .dontMissH a:hover {color:#ccc;} .dontMissH img {margin: 0 0 6px;} .dontMissH .header {font-size:1.1em; font-weight:bold; color:#ee9722; padding:0 10px 1px; display:block;} .dontMissH span {padding:0 10px 4px; display:block;} .newsH {background:#212121; padding:8px 10px 10px; min-height:148px; margin: 9px 0 0;} .newsH a span {display:block;} .newsH a {padding:0 0 10px; display:block; line-height:1.3em;} .newsH a:hover {color:#ccc} /* Program page */ .spotBigH {margin:0 0 35px; background:#212121; position:relative;} .spotBigH .slutRed,.spotBigH .slutYellow {display:none; z-index:10; top:0px; left:0px; position:absolute; width:130px; height:130px; background:url(../images/misc/slutRed.png) no-repeat;} .spotBigH .slutYellow{background:url(../images/misc/slutYellow.png) no-repeat;} .spotBigH.slut .slutRed, .spotBigH.slut .slutYellow {display:block;} .spotBigH img {float:left;} .spotBigH .content {float:right; min-height:220px; padding:0 10px 28px 0; position:relative; width:346px;} .spotBigH h1,.spotBigH h2 {padding:7px 0;} .spotBigH p {padding:0 0 10px;} .spotBigH .content .botLinks {width:344px; bottom:10px; left:0; position:absolute;} .botLinks img {padding:0 10px 0 0;} .calendar {background:#212121; margin:0 0 10px;} .calH {width:187px; margin:0 auto; padding:10px 0} .calendar p {padding:0 10px 7px} .calendar h1 {padding:0px 10px 3px;} /* Sub page */ .subPageH2, .subPageH, .albumPageH {background:#212121; position:relative; min-height:532px;} .subPageH2 img, .subPageH img , .albumPageH img {float:left; padding:0 15px 5px 0;} .subPageH2 h1, .subPageH h1, .albumPageH h1 {padding:12px 0 0} .subPageH2 p, .subPageH p, .albumPageH p {padding:0 10px 10px} /* Album page */ .albumPageH {background:#212121; position:relative; min-height:693px;} .albumPageH img {float:left; padding:0 15px 5px 0;} .albumPageH h1 {padding:12px 0 0} .albumPageH p {padding:0 10px 10px} /* Artist page */ .artistH {background:#212121; position:relative; min-height:450px; font-size: 110%;} .artistH .photo {float:left; padding:0 15px 5px 0} .artistH .content {float:left} .artistH .content h1, .artistH .content h2, detailLeftCol h2 {padding:7px 0 5px;} .artistH .content p {padding:0 0 10px 0} .artistH .right {float:right; margin:10px 10px 0 0;} .artistH .right p {padding:0 0 10px 0} .artistH .right p a {font-size:1.0em} /*---------------------------------------------*/ /*############# Common Elements ###############*/ /*---------------------------------------------*/ /* - - Backgrounds - */ .bgGrey {background:#212121} .bgGreyLight {background:#383838} /* - - Boxes - */ /* - - Buttons & Links - */ .readMore {background:#383838; font-size:10px; padding:1px 8px 2px;} .bgGreyLight .readMore {background:#212121;} /* - - Colors - */ .grey {color:#212121} .greyDark {color:#111} .yellow {color:#ee9722} /* - - Forms - */ .inputBox {border-style:none; width:170px; background:#FFFFFF; height:13px; padding:3px 3px 3px; font-size:11px; margin:8px 0 ;} .btnOK {background:#FFFFFF; border-style:none; color:#000000; font-size:11px; padding: 3px 3px 3px; margin:8px 0 ; height:19px; cursor:pointer; width:25px; position:absolute; bottom:0; right:9px} /* - - Lists - */ /* - - Borders - */ .bNo {border:none} /* - - Calendar - -*/ table {border-collapse:collapse;} table caption {font-weight:bold; text-align:center; padding:0 0 7px 0} table caption .pre {float:left; width:5px; padding:3px 0 0 0} table caption span {float:left; text-align:center; width:173px;} table caption .next {float:right; width:5px; padding:3px 0 0 0} #cmscal {width: 98%; margin: auto; font-size:11px;} #cmscal .calendar-prev {font-size: 1.6em;} #cmscal .calendar-month {font-weight: bold;} #cmscal .calendar-next {font-size: 1.6em;} #cmscal td {width:14%; color:#313031; border:2px solid #212121; margin:0; padding:1px 0; background:#f7f7f7; text-align:center; font-weight:bold;} #cmscal .calendar-today {color:#000; font-weight:bold; background:#ee9722} #cmscal .calendar-past {font-weight:bold; background:#c4c5c0} #cmscal .nextMthDay {font-weight:bold; color:#c4c5c0;} #cmscal th {color:#FFF; font-weight:bold; text-align:center;} #cmscal tr {vertical-align: top;} #cmscal ul {margin: 0; padding: 0; list-style: none} #cmscal li {border-bottom: 1px dotted #bbb;} #cmscal a, #cmscal a:link, #cmscal a:visited {font-size: .8em; color: blue; text-decoration: none;} /*---------------------------------------------*/ /*############## Miscellaneous ################*/ /*---------------------------------------------*/ /* Display */ .dIn {display:inline} .dInBl {display:inline-block} .dBl, .show {display:block} .hide {display:none} /* Text */ .txtL {text-align:left} .txtR {text-align:right} .txtC {text-align:center} .uLine {text-decoration:underline} .bold {font-weight:bold} .normal {font-weight:normal} .italic {font-style:italic} .capitalize {text-transform:capitalize} .upperCase {text-transform:uppercase} /* Floats */ .fLeft {float:left} .fRight {float:right} .fNo {float:none} /* Positioning */ .absolute {position:absolute} .relative {position:relative} .static {position:static} .fixed {position:fixed} /* Clearing */ .clear:after, .container:after {content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden;} .clear, .container {display:block} .clear {clear:both} /* Font sizes */ .f10{font-size:1.0em;} /* Z-Index */ .z1{z-index:1} /*-----------------*/ /***** Margins *****/ /*-----------------*/ /* TRouBLed-order: Top, Right, Bottom, Left */ .m0{margin:0} .m10{margin:10px} /* - Margin Top - */ .mt4{margin-top:4px} .mt10{margin-top:10px} /* - Margin Right - */ .mr10{margin-right:10px} .mr40{margin-right:40px} .mr43{margin-right:43px} /* - Margin Bottom - */ .mb10{margin-bottom:10px} /* - Margin Left - */ .ml10{margin-left:10px} /*------------------*/ /***** Paddings *****/ /*------------------*/ /* TRouBLed-order: Top, Right, Bottom, Left */ .p0{padding:0} .p10{padding:10px} /* - Padding Top - */ .pt10{padding-top:10px} /* - Padding Right - */ .pr10{padding-right:10px} /* - Padding Bottom - */ .pb10{padding-bottom:10px} .pb20{padding-bottom:20px} /* - Padding Left - */ .pl10{padding-left:10px} .spotContent .slutRed,.spotContent .slutYellow {display:none; z-index:10; position:absolute; width:65px; height:65px; background:url(../images/misc/slutRed_small.png) no-repeat;} .spotContent .slutYellow{background:url(../images/misc/slutYellow_small.png) no-repeat;} .spotContent .slutRed, .spotContent .slutYellow {display:block;} /* End of 'katalin' */