/********************************************* * WebDevvr * * Author: Nico Habets.com * WebDevvr is copyright protected. It is not * allowed to adjust, reproduce or sell this * product without approval from the author. * ********************************************/ /*//////////////////////////////////////////// CSS RESET ////////////////////////////////////////////*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, small, strong, em, img, sub, sup, del, ins, b, i, a, dl, dt, dd, ol, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; background:transparent; list-style: none; } article, aside, figure, footer, header, hgroup, nav, section { display:block; } /* Paars #645176; Oranje: #ee7d11 */ body { background: #171717; font-family: 'Muli', sans-serif; font-size: 14px; } h1 { color: #ee7d11; text-transform: uppercase; margin: 0px 0px 20px 0px; font-size: 20px; } h2 { color: #ee7d11; margin: 0px 0px 5px 0px; font-size: 16px; } h3 { color: #000000; margin: 0px; font-size: 16px; } p { line-height: 1.5em; margin: 0px 0px 15px 0px; } a { color: #645176; text-decoration: none; } a:hover { color: #ee7d11; } #container { width: 980px; margin: 0px auto; position: relative; z-index: 2; } #spacer { height: 20px; } #header { margin: 0px 0px 0px 0px; position: relative; height: 135px; } #logo { margin: 0px 0px 0px 75px; position: absolute; z-index: 2; background: #ffffff; border-radius: 10px; } #logo img { width: 225px; } #menu { background: #4c2177; position: absolute; top: 30px; left: 0px; right: 0px; z-index: 1; border-radius: 10px; text-transform: lowercase; } #menu ul { margin: 0px 0px 0px 325px; padding: 0px; list-style: none; } #menu li { margin: 0px 7px; padding: 0px; list-style: none; float: left; position: relative; } #menu a { color: #ffffff; display: block; line-height: 28px; font-size: 14px; text-decoration: none; padding: 0px 5px; } #menu a:hover { background: #7243a0; } #menu li.active a { background: #7243a0; } #menu ul ul { position: absolute; top: 28px; left: 0px; margin: 0px; background: #4c2177; display: none; } #menu ul ul li { width: 100%; margin: 0px; } /*#menu ul ul a:hover { background: #7243a0; }*/ #main { margin: 25px 0px 0px 0px; position: relative; } #banner { position: absolute; left: 75px; top: 0px; width: 185px; background-color: rgb(76,33,119); background-color: rgba(76,33,119,0.7); border-radius: 10px; padding: 20px 20px; color: #ffffff; font-size: 16px; } #banner #slogan { background: url(../images/slogan-icon-entertainment.png) no-repeat; width: 136px; height: 34px; } #banner p { margin: 0px; } #sidebar { position: absolute; left: 75px; margin: 115px 0px 0px 0px; width: 185px; padding: 0px 20px; color: #ffffff; font-size: 14px; } #sidebar p { line-height: 1.3em; } #sidebar strong { color: #ee7d11; text-transform: uppercase; margin: 0px 0px 20px 0px; font-size: 20px; } #sidebar ul { margin: 0px 0px 0px 18px; padding: 0px; } #sidebar li { margin: 0px 0px 5px 0px; } #sidebar a { color: #ffffff; text-decoration: none; } #sidebar a:hover { color: #ee7d11; } #content { background-color: rgb(255,255,255); background-color: rgba(255,255,255,0.8); border-radius: 10px; margin: 0px 250px 0px 325px; padding: 30px 25px; } #images { position: absolute; right: 0px; top: 0px; bottom: 0px; } #images .image { width: 220px; height: 220px; /*height: 300px;*/ background-position: center center; border-radius: 10px; margin: 0px 0px 30px 0px; border: 1px solid #ee7d11; } #images.num2 .img2 { position: absolute; bottom: -30px; } #artists { position: absolute; right: 0px; top: 0px; } #artists ul { margin: 0px; padding: 0px; list-style: none; } #artists li { margin: 0px 0px 10px 0px; padding: 0px; list-style: none; width: 220px; white-space: nowrap; } #artists a { color: #ffffff; text-decoration: none; display: block; position: relative; height: 75px; padding: 0px 0px 0px 85px; } #artists a:hover { text-decoration: none; color: #ee7d11; } #artists .image { width: 75px; height: 75px; border-radius: 10px; border: 1px solid #ee7d11; margin: 0px 10px 0px 0px; vertical-align: middle; overflow: hidden; position: absolute; left: 0px; top: 0px; } #artists .text { padding: 20px 0px 20px 0px; } #artists img { width: 75px; height: 75px; border-radius: 10px; } #background { z-index: 1; position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; } #background .slide { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; position: absolute; display: none; } /********************************************* * WebDevvr * * Author: Nico Habets.com * WebDevvr is copyright protected. It is not * allowed to adjust, reproduce or sell this * product without approval from the author. * ********************************************/ /*//////////////////////////////////////////// CSS RESET ////////////////////////////////////////////*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, small, strong, em, img, sub, sup, del, ins, b, i, a, dl, dt, dd, ol, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; background:transparent; list-style: none; } article, aside, figure, footer, header, hgroup, nav, section { display:block; } /* Paars #645176; Oranje: #ee7d11 */ body { background: #171717; font-family: 'Muli', sans-serif; font-size: 14px; } h1 { color: #ee7d11; text-transform: uppercase; margin: 0px 0px 20px 0px; font-size: 20px; } h2 { color: #ee7d11; margin: 0px 0px 5px 0px; font-size: 16px; } h3 { color: #000000; margin: 0px; font-size: 16px; } p { line-height: 1.5em; margin: 0px 0px 15px 0px; } a { color: #645176; text-decoration: none; } a:hover { color: #ee7d11; } #container { width: 980px; margin: 0px auto; position: relative; z-index: 2; } #spacer { height: 20px; } #header { margin: 0px 0px 0px 0px; position: relative; height: 135px; } #logo { margin: 0px 0px 0px 75px; position: absolute; z-index: 2; background: #ffffff; border-radius: 10px; } #logo img { width: 225px; } #menu { background: #4c2177; position: absolute; top: 30px; left: 0px; right: 0px; z-index: 1; border-radius: 10px; text-transform: lowercase; } #menu ul { margin: 0px 0px 0px 325px; padding: 0px; list-style: none; } #menu li { margin: 0px 7px; padding: 0px; list-style: none; float: left; position: relative; } #menu a { color: #ffffff; display: block; line-height: 28px; font-size: 14px; text-decoration: none; padding: 0px 5px; } #menu a:hover { background: #7243a0; } #menu li.active a { background: #7243a0; } #menu ul ul { position: absolute; top: 28px; left: 0px; margin: 0px; background: #4c2177; display: none; } #menu ul ul li { width: 100%; margin: 0px; } /*#menu ul ul a:hover { background: #7243a0; }*/ #main { margin: 25px 0px 0px 0px; position: relative; } #banner { position: absolute; left: 75px; top: 0px; width: 185px; background-color: rgb(76,33,119); background-color: rgba(76,33,119,0.7); border-radius: 10px; padding: 20px 20px; color: #ffffff; font-size: 16px; } #banner #slogan { background: url(../images/slogan-icon-entertainment.png) no-repeat; width: 136px; height: 34px; } #banner p { margin: 0px; } #sidebar { position: absolute; left: 75px; margin: 115px 0px 0px 0px; width: 185px; padding: 0px 20px; color: #ffffff; font-size: 14px; } #sidebar p { line-height: 1.3em; } #sidebar strong { color: #ee7d11; text-transform: uppercase; margin: 0px 0px 20px 0px; font-size: 20px; } #sidebar ul { margin: 0px 0px 0px 18px; padding: 0px; } #sidebar li { margin: 0px 0px 5px 0px; } #sidebar a { color: #ffffff; text-decoration: none; } #sidebar a:hover { color: #ee7d11; } #content { background-color: rgb(255,255,255); background-color: rgba(255,255,255,0.8); border-radius: 10px; margin: 0px 250px 0px 325px; padding: 30px 25px; } #images { position: absolute; right: 0px; top: 0px; bottom: 0px; } #images .image { width: 220px; height: 220px; /*height: 300px;*/ background-position: center center; border-radius: 10px; margin: 0px 0px 30px 0px; border: 1px solid #ee7d11; } #images.num2 .img2 { position: absolute; bottom: -30px; } #artists { position: absolute; right: 0px; top: 0px; } #artists ul { margin: 0px; padding: 0px; list-style: none; } #artists li { margin: 0px 0px 10px 0px; padding: 0px; list-style: none; width: 220px; white-space: nowrap; } #artists a { color: #ffffff; text-decoration: none; display: block; position: relative; height: 75px; padding: 0px 0px 0px 85px; } #artists a:hover { text-decoration: none; color: #ee7d11; } #artists .image { width: 75px; height: 75px; border-radius: 10px; border: 1px solid #ee7d11; margin: 0px 10px 0px 0px; vertical-align: middle; overflow: hidden; position: absolute; left: 0px; top: 0px; } #artists .text { padding: 20px 0px 20px 0px; } #artists img { width: 75px; height: 75px; border-radius: 10px; } #background { z-index: 1; position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; } #background .slide { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; position: absolute; display: none; } /* ColorBox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width: none;} .cboxIframe{width:100%; height:100%; display:block; border:0;} #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;} /* User Style: Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{background:#000;} #colorbox{} #cboxContent{margin-top:20px;} .cboxIframe{background:#fff;} #cboxError{padding:50px; border:1px solid #ccc;} #cboxLoadedContent{border:5px solid #000; background:#fff;} #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;} #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;} #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;} #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background: url(../images/colorbox/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;} #cboxPrevious:hover{background-position:bottom left;} #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(../images/colorbox/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;} #cboxNext:hover{background-position:bottom right;} #cboxLoadingOverlay{background:#000;} #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;} #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(../images/colorbox/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;} #cboxClose:hover{background-position:bottom center;}.widget-album-list { } .widget-album-list .item { display: inline-block; width: 100px; margin: 0px 18px 10px 0px; vertical-align: top; } .widget-album-list img { width: 100px; height: 100px; border: 1px solid #ee7d11; border-radius: 5px; } .widget-album-list strong { display: block; text-align: center; font-weight: normal; font-size: 12px; height: 30px; overflow: hidden; } .widget-album-list a { text-decoration: none; color: #000000; } .widget-album-list .images { display: none; }