/********************************************* * 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, ul, li, 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%; vertical-align:baseline; background:transparent; list-style: none; } article, aside, figure, footer, header, hgroup, nav, section { display:block; } /*//////////////////////////////////////////// STANDARD ELEMENTS ////////////////////////////////////////////*/ html, body { width: 100%; height: 100%; background: #ede8e4; } body { font-size: 12px; font-family: 'Tempus Sans ITC', Georgia, 'Times New Roman', Times, serif; color: #ffffff; } h1 { font-size: 24px; margin: 0px 0px 15px 0px; font-weight: normal; font-family: 'Tempus Sans ITC', Georgia, 'Times New Roman', Times, serif; color: #c2a044; } h1 em { font-size: 14px; } h2 { font-size: 20px; margin: 0px 0px 15px 0px; font-weight: normal; font-family: 'Tempus Sans ITC', Georgia, 'Times New Roman', Times, serif; } h2 a { color: #ffffff; } h3 { font-size: 14px; color: #c2a044; } p { margin: 0px 0px 15px 0px; } input, textarea, select, option { font-size: 12px; font-family: 'Tempus Sans ITC', Georgia, 'Times New Roman', Times, serif; width: 245px; background: #d5d5d5; } textarea { height: 70px; } button { background: #646464; border: 1px solid #313131; cursor: pointer; padding: 3px 10px; color: #ffffff; margin-top: 10px; } button:hover { background: #343434; } table td { color: #ffffff; text-align: justify; } a { color: #b9bdeb; text-decoration: none; } a:hover { text-decoration: underline; } .checkbox { width: 18px; background: none; margin: 3px 5px 0px 0px; } .radio { width: 18px; background: none; margin: 3px 5px 0px 0px; } label { text-align: left; } .style1 { color: #c2a044; } iframe { float: left; margin: 0px 10px 10px 0px; } /*//////////////////////////////////////////// STRUCTURE ////////////////////////////////////////////*/ #container { width: 950px; margin: 0px auto; position: relative; z-index: 2; } #header { height: 130px; position: relative; } #logo { position: absolute; top: 30px; left: 0px; } #logo img { width: 203px; height: 76px; } #languages { position: absolute; top: 105px; right: 25px; } #languages a { margin: 0px 0px 0px 3px; opacity:0.4; filter:alpha(opacity=40); } #languages a.active { opacity: 1; filter: alpha(opacity=100); } #social { position: absolute; top: 105px; right: 0px; } #menu { font-family: 'Century Gothic', Arial, Helvetica, sans-serif; font-size: 12px; position: absolute; top: 105px; right: 60px; } #menu a { color: #2b2b2b; text-decoration: none; float: left; margin: 0px 0px 0px 10px; font-weight: bold; } #main { background: #2c2c2c; padding: 5px; } #main { -webkit-box-shadow: 0px 0px 1px 2px #6a7072; -moz-box-shadow: 0px 0px 1px 2px #6a7072; box-shadow: 0px 0px 1px 2px #6a7072; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #submenu { height: 45px; font-size: 15px; } #submenu a { /*color: #595959;*/ color: #fff; text-decoration: none; display: inline-block; width: 168px; padding: 0px 0px 0px 20px; background: url(../images/sprite-y.png) no-repeat -0px -10px; } #submenu a:first-child { background: none; } #submenu a:hover { color: #ffffff; } #submenu a.active { color: #ffffff; } #submenu a:first-letter { font-size: 23px; font-weight: bold; color: #ffffff; } #content { margin: 0px 50px 30px 50px; font-family: 'Century Gothic', Arial, Helvetica, sans-serif; line-height: 1.5em; } #content.sidebar { margin-right: 320px; } #nimages { float: right; margin: 0px 0px 20px 20px; } #ndate { font-weight: bold; margin: 0px 0px 10px 0px; } #sidebar { float: right; width: 200px; padding: 30px 50px 0px 0px; text-align: justify; } #sidebar strong { font-size: 20px; font-weight: normal; color: #d3cece; border-bottom: 1px solid #3e3e3e; display: block; } #sidebar ul { padding: 5px 0px 5px 15px; } #sidebar li { list-style: disc; text-align: left; } #footer { position: absolute; bottom: -30px; text-align: right; width: 950px; color: #484848; font-size: 10px; } #footer a { color: #484848; text-decoration: none; } #background { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 1; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } * html #background { position: absolute; } /*//////////////////////////////////////////// ICONS ////////////////////////////////////////////*/ .ico { float: left; height: 16px; background: url(../images/sprite.png) no-repeat; text-indent: -9999px; line-height: 1em; } .lang-nl { width: 19px; height: 17px; background-position: -0px -0px; } .lang-en { width: 19px; height: 17px; background-position: -19px -0px; } .news { width: 115px; height: 77px; background-position: -0px -27px; } .blog { width: 70px; height: 77px; background-position: -115px -27px; } .pdf { width: 57px; height: 77px; background-position: -185px -27px; } /*//////////////////////////////////////////// MASKS ////////////////////////////////////////////*/ .newsticker { text-transform: uppercase; } /*//////////////////////////////////////////// CLASSES ////////////////////////////////////////////*/ .column2 { -moz-column-count: 2; -moz-column-gap: 40px; -webkit-column-count: 2; -webkit-column-gap: 40px; column-count: 2; column-gap: 40px; } .column2 { text-align: justify; } .block { display: block !important; } /*//////////////////////////////////////////// TABS ////////////////////////////////////////////*/ /*//////////////////////////////////////////// WIDGETS ////////////////////////////////////////////*/ .widget-slideshow { width: 940px; height: 240px; overflow: hidden; margin: 0px 0px 15px 0px; } .widget-slideshow img { width: 940px; height: 240px; } .widget-block { margin: 0px 0px 5px 0px; } .widget-block table { width: 100%; } .widget-block td { width: 50%; } .widget-block strong { font-size: 14px; } .widget-block a { display: block; height: 80px; padding: 10px 0px 10px 25px; line-height: 1em; color: #ffffff; text-decoration: none; background: url(../images/sprite-y.png) no-repeat -0px -48px; cursor: pointer; } .widget-block a:hover { background: #343434; } .widget-block .first a { background: none; } .widget-block .first a:hover { background: #343434; } .widget-block .first a { padding-left: 25px; } .widget-block .second a { padding-left: 50px; } .widget-block .third a { padding-left: 40px; } .widget-block .ico { margin: 0px 10px 0px 100px; } .widget-usp { position: relative; margin: 0px 0px 10px 0px; line-height: 1em; height: 12px; overflow: hidden; } .widget-usp .tickercontainer { width: 940px; overflow: hidden; } .widget-usp ul { position: relative; margin: 0px; padding: 0px; } .widget-usp li { float: left; margin: 0px; padding: 0px 15px 0px 0px; } .widget-usp a { color: #ffffff; } .widget-contact { float: right; width: 450px; margin: 0px 0px 0px 70px; } .widget-contact label { display: inline-block; width: 175px; vertical-align: top; } .widget-contact .field { display: inline-block; width: 265px; } .widget-contact .row { clear: both; margin: 0px 0px 3px 0px; } .widget-contact button { margin: 0px 0px 0px 360px; } .widget-newsletter label { float: left; } .widget-newsletter td { padding: 0px 20px 0px 0px; } .widget-news li { position: relative; background: #404040; padding: 30px 40px; margin: 0px 0px 30px 0px; } .widget-news h2 { margin-left: 80px; } .widget-news .images { float: right; margin: 0px 0px 20px 20px; } .widget-news .date { position: absolute; top: 28px; left: -30px; background: #ffffff; color: #323232; padding: 5px 15px; border-radius: 5px; } /*//////////////////////////////////////////// MESSAGES ////////////////////////////////////////////*/ .mssg { color: #e04545; } .warn { color: #e04545; } .error { color: #e04545; } .ok { color: #e04545; } .clear { clear: both; } * html .cf { height: 1%; } *+html .cf { display: inline-block; } .cf:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #stats-system { position: fixed; bottom: 0px; left: 0px; font-size: 11px; color: #999999; } #stats-system ul { margin: 0px; padding: 0px; } #stats-system li { float: left; margin: 0px 10px 0px 0px; list-style: 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;} .cboxIframe{width:100%; height:100%; display:block; border:0;} /* 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{} #cboxTopLeft{width:14px; height:14px; background:url(../images/colorbox/controls.png) no-repeat 0 0;} #cboxTopCenter{height:14px; background:url(../images/colorbox/border.png) repeat-x top left;} #cboxTopRight{width:14px; height:14px; background:url(../images/colorbox/controls.png) no-repeat -36px 0;} #cboxBottomLeft{width:14px; height:43px; background:url(../images/colorbox/controls.png) no-repeat 0 -32px;} #cboxBottomCenter{height:43px; background:url(../images/colorbox/border.png) repeat-x bottom left;} #cboxBottomRight{width:14px; height:43px; background:url(../images/colorbox/controls.png) no-repeat -36px -32px;} #cboxMiddleLeft{width:14px; background:url(../images/colorbox/controls.png) repeat-y -175px 0;} #cboxMiddleRight{width:14px; background:url(../images/colorbox/controls.png) repeat-y -211px 0;} #cboxContent{background:#fff; overflow:visible;} .cboxIframe{background:#fff;} #cboxError{padding:50px; border:1px solid #ccc;} #cboxLoadedContent{margin-bottom:5px;} #cboxLoadingOverlay{background:url(../images/colorbox/loading_background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(../images/colorbox/loading.gif) no-repeat center center;} #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;} #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(../images/colorbox/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;} #cboxPrevious{left:0px; background-position: -51px -25px;} #cboxPrevious:hover{background-position:-51px 0px;} #cboxNext{left:27px; background-position:-75px -25px;} #cboxNext:hover{background-position:-75px 0px;} #cboxClose{right:0; background-position:-100px -25px;} #cboxClose:hover{background-position:-100px 0px;} .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;} .cboxSlideshow_on #cboxSlideshow:hover{background-position:-150px 0px;} .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;} .cboxSlideshow_off #cboxSlideshow:hover{background-position:-125px 0px;}