Warning: ob_start() [ref.outcontrol]: output handler 'ob_gzhandler' conflicts with 'zlib output compression' in /home/mediashake/domains/mediashake.nl/public_html/css/gzip-css.php on line 4
/* ------------------------------
CSS RESET Tags BY YUI CSS Foundation
------------------------------ */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
img, input,#headcontainer,#slogan,#headcontainer_pages { behavior: url("/scripts/java/iepngfix.htc"); }
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
ol, ul { list-style:none; }
caption, th { text-align:left; }
h1, h2, h3, h4, h5, h6 { font-size:100%; }
q:before, q:after { content:''; }
/* ------------------------------
Redefined HTML Tags
------------------------------ */
body { height:100%; text-align: center; /*center voor IE*/ font-family: Arial, sans-serif; font-size: 10pt; color:#666; background: url(../img/shake/bg1.png) repeat-x scroll 0% 0%; line-height:1.5; }
* { text-align:left; vertical-align: baseline; font-weight: inherit; font-style: inherit; font-size: 100%; border:0 none; outline:0; padding:0; margin:0; }
p { margin: 0 10px 0 0; }
strong { font-weight:bold; line-height:1.7em; }
hr { color: #ccc; background-color: #ccc; height: 1px; }
acronym, span.wtf { border-bottom: 1px dotted #ccc; cursor: help; }
em { font-style:italic; }
p.br { margin: 10px 0 0 0; }
/* ------------------------------
Pagina Structuur (IDs)
------------------------------ */
#background_gras { background:url("../img/shake/grasbg.png") transparent repeat-x scroll 0%; background-position: bottom; min-height: 850px; }
#container { width:960px; margin: 0 auto; z-index: 0; position: static; }
#maincontainer { width:920px; background:#fff; padding:0 20px; min-height:470px;/*min-height-fast-hack for IE6*/ /*height:auto !important;height:470px;*/ }
#maincontainer a, #pop a { color:#4B93CA; text-decoration:none; }
#maincontainer a:hover { text-decoration:underline; }
#maincontainer h2 img { margin-bottom: 15px; }
#maincontainer h3 { font-family: Calibri, Arial; color:#4c94cb; font-size:17px; font-weight:bold; padding-top:10px; }
#maincontainer h3 a { color:#4c94cb; }
#maincontainer h3 a:hover { color:#ee4a9a; text-decoration:none; }
#maincontainer h4 { font-family: Arial; color:#4c94cb; font-size:12px; font-weight:bold; padding-top:10px; }
#headcontainer { background:url("../img/shake/logo.png") transparent no-repeat scroll 0% 50%; height: 324px; }
#headcontainer_slogan_mediashake { width:620px; float: right; height: 324px; }
#slogan { background:url("../img/shake/slogan.png") transparent no-repeat scroll 0% 50%; display:block; width:620px; height:139px; text-indent:-9999px; }
#mediashake { background:url("../img/shake/ms.png") transparent no-repeat scroll 0% 50%; display:block; width:620px; height:185px; text-indent:-9999px; }
#content_welkom { width:428px; padding-top: 20px; height: 400px; }
#content_recenteprojecten { width:428px; padding-top: 30px; height: 200px; }
#slidercontainer { padding-top: 20px; }
#feature { margin:20px 0 20px 0; }
#feature li { list-style-image:none; list-style-type:none; height: 30px; margin:0 0 0 10px; padding: 0 0 0 40px; padding: 0px 40px; font-family: Calibri, Arial; color:#4c94cb; font-size:16px; font-weight:bold; }
#footer { background:url("../img/shake/gras2.png") transparent; height:140px; width:960px; margin:0px auto; position:relative;}
#footerhome { background:url("../img/shake/gras_2.png") transparent; height:140px; width:960px; margin:0px auto; position:relative;}
#current { color:#EE4A9A; }
#intro { font-size:11pt; color:#999999; padding:0 0 20px; 0
}
/* small header */
#headcontainer_pages #slogan { width:620px; float: right; height: 139px; }
#headcontainer_pages { background:url("../img/shake/top.png") transparent no-repeat scroll 0% 50%; height: 139px; }
/* Site Navigatie */
#nav { font-family:Calibri, Arial; }
#nav ul { margin: 0; padding: 0; list-style-type: none; text-align: center; margin:20px 0; }
#nav ul li { display: inline; }
#nav ul li a { font-weight:bold; font-size:16px; text-decoration: none; color: #F2FAFC; letter-spacing: 1px; padding: 8px 15px; margin:6px; }
#nav ul li a:hover { color: #FFF; background:#019ab9; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
/* 404 */
#error404 { background:url(../img/shake/error_bg.png); width:705px; height:441px; margin:0 auto; position: relative; top: 75px; }
#error404 #notice { padding:142px 0 10px 15px; }
/*- Popup -*/
#pop { background:url(../img/popupbg.png) no-repeat #e0e0e0; padding:10px; color:#333333; }
#pop h1 { font-size:24px; color:#4C94CB; font-weight:bold; padding-bottom:3px; }
#pop .close { background:url(../img/sluiten_button.png) left top no-repeat; cursor:pointer; display:block; height:27px; text-indent:-9000px; width:139px; margin: 10px auto; }
#pop .close:hover, .close:active { background:url(../img/sluiten_button.png) no-repeat left bottom; }
/* ------------------------------
PAGINA CLASSES
------------------------------ */
.splitmaincontainer { padding: 0 15px; width:428px; float:left; }
.splitmaincontainer25 { padding-left: 10px; width:258px; float:right; }
.splitmaincontainer75 { padding: 0 30px 0 0; width:598px; float:left; }
.splitmaincontainer35 { padding: 0px; width:358px; float:left; }
.splitmaincontainer65 { padding: 0 30px; width:498px; float:left; }
.splitcontent_recenteprojecten { width:214px; float:left; }
.splitcontent_recenteprojecten blockquote { font-size:0.9em; margin: 5px; }
.infoboxcontainer { padding:25px 0 25px 0; }
.infoboxcontainer img { float:left; }
.infobox { border-left:solid #CCCCCC 1px; width:255px; float:right; padding:0 0 0px 20px; }
li.step1 { background:url("../img/bullets/bulletblue.png") -11px -11px transparent no-repeat; }
li.step2 { background:url("../img/bullets/bulletblue.png") -11px -53px transparent no-repeat; }
li.step3 { background:url("../img/bullets/bulletblue.png") -11px -95px transparent no-repeat; }
li.step4 { background:url("../img/bullets/bulletblue.png") -11px -137px transparent no-repeat; }
li.step5 { background:url("../img/bullets/bulletblue.png") -11px -179px transparent no-repeat; }
.zegel { float: left; }
.fotografie-diensten { padding: 30px 0 20px 25px; }
a.external { background: transparent url("../img/external.png") no-repeat scroll right center; padding:0 13px 0 0; }
.clear { clear:both; }
.portfoliobutton { background: transparent url(../img/bekijkportfolio_button.png) left top no-repeat; cursor:pointer; display:block; height:27px; text-indent:-9000px; width:139px; margin: 20px 0 0 0; }
.portfoliobutton:hover, .portfoliobutton:active { background: transparent url(../img/bekijkportfolio_button.png) left bottom no-repeat; }
.naardewebsitebutton { background: transparent url(../img/naardewebsite_button.png) left top no-repeat; cursor:pointer; display:block; height:27px; text-indent:-9000px; width:139px; margin: 20px 0 0 0; }
.naardewebsitebutton:hover, .naardewebsitebutton:active { background: transparent url(../img/naardewebsite_button.png) left bottom no-repeat; }
.neemcontactopbutton { background: transparent url(../img/contact_button.png) left top no-repeat; cursor:pointer; display:block; height:27px; text-indent:-9000px; width:139px; margin: 20px 0 0 0; }
.neemcontactopbutton:hover, .neemcontactopbutton:active { background: transparent url(../img/contact_button.png) left bottom no-repeat; }
/*- SubPagina Navigatie -*/
.subMenu { font-family:"Trebuchet MS", arial, verdana, sans-serif; font-weight:bold; background:url(../img/bg-submenu.png) #FFFFFF repeat-x; height: 28px; padding: 20px 20px 40px 20px; }
.link { border-left:1px dotted #C3C3C3; font-size:15px; line-height:30px; padding:0 20px 0 20px; float:left; color:#697B86; text-decoration:none; }
.big { font-size:24px; color:#4C94CB; padding:0 20px 0 0; line-height:25px; text-decoration:none; border-left:0px }
a.link:hover { color:#ff9933; }
.subMenu h1 a, .subMenu h1 a:hover { color:#EE4A9A; }
/*- Additional shit -*/
a.meerinfobutton { background: url(../img/meerinfo_button.png) left top no-repeat; cursor:pointer; display:block; height:27px; text-indent:-9000px; width:139px; margin: 20px 0 0 0; }
a.meerinfobutton:hover, a.meerinfobutton:active { background:url(../img/meerinfo_button.png) left bottom no-repeat; }
.imgroom { padding:5px 20px 5px 20px; }
.imgroomright { padding:5px 20px 5px 20px; float:right; }
.imgroomleft { padding:5px 20px 5px 20px; float:left; }
#listsmall li { padding: 10px 10px 0px 20px; background:url("../img/bullets/blue_s.png") transparent no-repeat 0px 15px; }
::selection {
background:#E267A8;
color:#FFFFFF; /* Safari and Opera */
}
::-moz-selection {
background:#E267A8;
color:#FFFFFF; /* Firefox */
}
.contentslide { width: 428px; height: 173px; }
.contentdiv { display: none; height: 173px; }
.contentslide .opacitylayer { /*Do not edit this rule unless you're familiar with CSS opacity behavior*/ width: 100%; height: 100%; filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1; opacity: 1; }
.pagination { width: 428px; /*Width of pagination DIV. To equal that of Content Slider's width, take into account the later's left/right paddings!*/ height: 47px; background-image:url(../img/infobottom.png); }
.pagination li { list-style-type:none; float: left; width: 107px; height: 47px; }
.pagination li a { /* van de links een block-element maken voor het :hover effect */ display: block; /* breedte en hoogte op 100% zodat de wordt opgevuld */ width: 100%; height: 100%; }
#copyright {position:absolute; top:80px; right:155px; color: #EAF7EA; }
#voorwaarden {position:absolute; font-size: 11px; top:100px; right:155px; color:#BADA92; }
#voorwaarden a{ color:#BADA92; text-decoration: none; }
.plusone { right: 25px; top: 88px; position: absolute;}
#voorwaarden a:hover { text-decoration: underline;}
/* ------------------------------
***** SLIDESHOW *****
------------------------------ */
#page0 a { background: url(../img/sliderbuttons.png) -24px -24px no-repeat; cursor:pointer; }
#page0 a:hover { background-position: -24px -118px; }
#page0 a.selected, #page0 a.selected:hover { background-position: -24px -212px; }
#page1 a { background: url(../img/sliderbuttons.png) -24px -306px no-repeat; cursor:pointer; }
#page1 a:hover { background-position: -24px -400px; }
#page1 a.selected, #page1 a.selected:hover { background-position: -24px -494px; }
#page2 a { background: url(../img/sliderbuttons.png) -24px -588px no-repeat; cursor:pointer; }
#page2 a:hover { background-position: -24px -682px; }
#page2 a.selected, #page2 a.selected:hover { background-position: -24px -776px; }
#page3 a { background: url(../img/sliderbuttons.png) -24px -870px no-repeat; cursor:pointer; }
#page3 a:hover { background-position: -24px -964px; }
#page3 a.selected, #page3 a.selected:hover { background-position: -24px -1058px; }
.contentdiv #webdesign { width:428px; height:173px; display:block; background:url(../img/sliders.jpg) 0 0px no-repeat; text-indent:-9000px; }
.contentdiv #grafisch { width:428px; height:173px; display:block; background:url(../img/sliders.jpg) 0 -173px no-repeat; text-indent:-9000px; }
.contentdiv #fotografie { width:428px; height:173px; display:block; background:url(../img/sliders.jpg) 0 -346px no-repeat; text-indent:-9000px; }
.contentdiv #meer { width:428px; height:173px; display:block; background:url(../img/sliders.jpg) 0 -519px no-repeat; text-indent:-9000px; }
/* ------------------------------
***** wie-zijn-wij *****
------------------------------ */
.imgwzwleft { border: 5px solid #fff; margin:5px 10px; float:left; }
.divlink { margin-top:20px; width:847px; height:145px; background:#F8F8F8; border:1px solid #F2F1F1; cursor:pointer; }
.divlink:hover { background:#F2F1F1; border:1px solid #ccc; }
#links { width:339px; margin-top:20px; }
#links li { background-position:0 0; background-repeat:no-repeat; line-height:32px; margin-left:14px; margin-bottom: 15px; width: 110px; padding-left:45px; list-style-image:none; display:block; float:left; font-size:14px; font-weight:bold; }
#links .twitter { background-image:url(../img/icons/twitter.png); }
#links .youtube { background-image:url(../img/icons/youtube.png); }
#links .flickr { background-image:url(../img/icons/flickr.png); }
#links .www { background-image:url(../img/icons/www.png); }
#links .linkedin { background-image:url(../img/icons/linkedin.png); }
pre { font-family: Arial, sans-serif; font-size: 10pt; color:#666; display:block; padding:10px; width:800px; display: block; }
#screenshot { position:absolute; background:#fff; padding:5px; display:none; color:#fff; }
/* KLANTEN */
.klanten li { background:#f8f8f8 none repeat scroll 0 0; border:1px solid #FFFFFF; display:inline; float:left; margin-bottom:25px; margin-left:25px; padding-bottom:0px; width:272px; height:230px; }
.klanten { clear:both; height:1%; overflow:hidden; padding-top:25px; }
.klanten li img { display:block; margin:15px auto 5px; }
.klanten h3 { font-size:1.25em; font-weight:bold; line-height:1.3em; margin-left:20px; padding-top:4px; }
/* ------------------------------
CONTACT
------------------------------ */
#contact_form_container { width:390px; height:500px; float:right; padding:25px 25px; background:url(../img/bg_contactform.jpg) no-repeat; }
#contact_form_container span.error { color:#C71217; }
#contact_form li.submit { clear:both; float:right; margin:1em 0pt; overflow:hidden; padding:40pt; position:relative; }
#contact_form li.submit input { background: url(../img/button_versturen.png) top; cursor:pointer; display:block; height:37px; overflow:hidden; padding:37px 0pt 0pt; text-indent:-9000px; width:127px; }
#contact_form li.submit input:hover, #contact_form li.submit input:active { background-position: bottom; }
#contact_form ol { list-style-image:none; list-style-position:outside; list-style-type:none; margin:0pt; padding:0pt; }
#contact_form li { border-bottom:0px dashed #7fbde8; height:1%; padding:0.7em 0pt 1.5em; position:relative; }
#contact_form li.validation_message { padding:0pt 0pt 0.7em; }
#contact_form li label { display:block; float:left; font-weight:bold; width:199px; }
optgroup { font-weight:bold; color:#697B86; padding-top:8px; font-style:italic; }
optgroup option { font-weight: normal; font-style:normal; color:#000; margin-left:20px; }
#contact_form li span.validation { clear:left; color:#ACC0D0; display:block; float:left; font-size:0.8em; width:200px; }
#contact_form li span.invalid { color:#C71217; }
#contact_form li.name input, #contact_form li.email input, #contact_form li.url input, #contact_form li select, #contact_form li.comments textarea { border:1px solid #DBD9D6; padding:3px; }
#contact_form li.name input, #contact_form li.email input, #contact_form li.url input, #contact_form li select, #contact_form li.comments textarea { width:180px; }
#contact_form li.comments textarea { height:130px; }
#contact_form input:focus, textarea:focus { background:#FFFFCC none repeat scroll 0%; }
.bedrijfsgegevens { float:left; width:50%; margin-bottom:45px; }
/* ------------------------------
SHAKEFOLIO
------------------------------ */
#webgallerycontainer { background:url(../img/bg_websites.png) no-repeat; height: 430px; }
#gallery { position:relative; top:20px; left: 20px; width: 110px; }
.switch { display:block; cursor:pointer; float:left; margin: 0 3px 0 0; }
.switch img { width:50px; height:50px; border:1px solid #c3c3c3; }
.switch img:hover { border-color: #EE4A9A; }
.hide { display:none; }
.show { position:absolute; top:0px; left:140px; display:block; width:760px; }
.show img { float:left; border: solid 1px #c3c3c3; }
.rightcolumn { max-width:230px; width:230px; float: right; margin-left:40px; }
.extrainfo { color: #4c94cb; font-weight:bold; text-transform:uppercase; margin:5px 0px; }
ul, li { margin:0; padding:0; }
ul.portfolio-info { margin: 0 0 0 0; list-style:none; }
ul.portfolio-info li { border-bottom:#c3c3c3 1px solid; padding:2px 0 10px 2px; }
/* ------------------------------
Diensten
------------------------------ */
.host p { padding: 5px 0 0 10px; }
.host li { margin: 0 0 0 30px; list-style-type: disc; }
.host span { font-style: italic; }
/* ------------------------------
SHAKEFOLIO SPRY
------------------------------ */
.TabbedPanels { background:transparent url(../img/bg_websites.png) no-repeat scroll 0 0; height:430px; margin: 0px; padding: 0px; /*float: left;*/ clear: none; width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/ }
.TabbedPanelsTabGroup { float: left; margin: 0px; padding: 20px 0 0 20px; width: 120px; }
.TabbedPanelsTab { float: left !important; width: 54px; height: 54px; margin: 0px 6px 6px 0px; list-style: none; -moz-user-select: none; -khtml-user-select: none; cursor: pointer; display:block; }
.TabbedPanelsTab a { color: black; text-decoration: none; }
.TabbedPanelsTab img { border:1px solid #C3C3C3; padding:1px; background:#F5F5F5; }
.TabbedPanelsTabSelected img { border:1px solid #EE4A9A; }
.TabbedPanelsContent { padding: 20px 0 0 20px; }
.TabbedPanelsContentVisible { float: left; }
.TabbedPanelsContentVisible img { border:1px solid #C3C3C3; float:left; }
.VTabbedPanels .TabbedPanelsTabGroup { float: left; width: 10em; height: 20em; background-color: #EEE; position: relative; border-top: solid 1px #999; border-right: solid 1px #999; border-left: solid 1px #CCC; border-bottom: solid 1px #CCC; }
.VTabbedPanels .TabbedPanelsTab { float: none; margin: 0px; border-top: none; border-left: none; border-right: none; }
.VTabbedPanels .TabbedPanelsTabSelected { background-color: #EEE; border-bottom: solid 1px #999; }
.VTabbedPanels .TabbedPanelsContentGroup { clear: none; float: left; padding: 0px; width: 30em; height: 20em; }
/* ------------------------------
TWITTER
------------------------------ */
.twitterus a { position:absolute; left:21px; top:66px; width:75px; height: 75px; }
.twitterus a:hover { background:url(../img/followus.png) no-repeat;}
.tweet { position:absolute; font-size: 11px; left:126px; top:77px; width:233px; height: 44px; color: #EAF7EA; line-height:15px; }
.tweet a {color: #FEFFDF; }
.tweet .heart {color: #FF99CC;}
.tweet .ms {color: #FFE7F4;}
.tweet .loading {line-height:55px; text-align:center;}