/********************************************* * 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; }