@charset "UTF-8";
/* CSS Document */


/* RESET.CSS    v1.0 | 20080212 */

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, b, u, i, center, 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-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
/* remember to define focus styles! */
:focus { outline: 0; }
/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }
/* end reset.css
----------------------*/

/*-------------------------- 
generic styles
--------------------------*/
body { background: #E5E5E5 url(../images/mainbg.jpg) no-repeat center top fixed; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 62.5%; /* reset to 10px */ width: 100%; height: 100%; color: #999; }
p, address, ul li, ol li, td { font-size: 1.4em; text-shadow: 0 1px 0 #FFF; font-style: normal; line-height: 1.3em; margin-bottom: 1em; }
.small { font-size: .8em; color: #AAA; font-weight: normal; }
a { color: #666; /* dark grey */ text-decoration: none; }
a:hover { color: #F2811D; /* orange */ }
.big { font-size: larger; }
h1, h2, h3, h4, h5, h6 { text-shadow: 0 1px 0 #FFF; color: #666; }
h1 { text-align: center; font-size: 7em; font-weight: bold; width: 636px; height: 135px; margin: 80px auto 40px auto; text-indent: -999em; }
h3 { font-size: 2em; font-weight: bold; margin-bottom: 1em; }
h4 { font-size: 1.6em; font-weight: bold; margin-bottom: 1em; }
.fll { float: left; }
.flr { float: right; }
/* clear fix */
.clearfix:after, .showcase:after { content: "."; height: 0; visibility: hidden; display: block; clear: both; }
html[xmlns] .clearfix { display: block; /* for IE7 */ }
* html .clearfix { height: 1%; }
/* old skool clearing */
.clearer { clear: both; }
/* end clear fix */

/*-------------------------- 
masthead
--------------------------*/
#masthead { background: #464646 url(../images/mastheadbg.jpg) repeat-x left top; width: 100%; height: 50px; position: fixed; top: 0; left: 0; z-index: 99; }
#mastheadwrapper { width: 960px; text-align: center; margin: 0 auto; }
#masthead h2 a { text-indent: -999em; display: block; width: 203px; height: 36px; margin: 7px 0; background: url(../images/navbar/diezjietal-logo.png) no-repeat left top; float: left; }
#masthead h2 a:hover { background: url(../images/navbar/diezjietal-logo.png) no-repeat left -40px; }
#navbar { float: right; }
#navbar li { float: left; width: 32px; height: 40px; margin: 9px 10px; position: relative; }
#navbar li.current { background: url(../images/currentindicator.gif) no-repeat center 34px; }
#navbar a { display: block; width: 32px; height: 32px; text-indent: -999em; }
#navbar a:hover, #navbar a.current { background-position: bottom center; }
/* sections */
#webdesignicon { background: url(../images/navbar/design-icon.png) no-repeat top center; }
#webhostingicon { background: url(../images/hosting/hosting-icon.png) no-repeat top center; }
#freelanceicon { background: url(../images/navbar/freelance-icon.png) no-repeat top center; }
#portfolioicon { background: url(../images/navbar/portfolio-icon.png) no-repeat top center; }
#infoicon { background: url(../images/navbar/info-icon.png) no-repeat top center; }
#description { text-align: justify; font-size: 1.4em; display: none; }
/*----------------------------------- 
container and content 
-----------------------------------*/
#container { width: 960px; min-height: 403px; height: 100%; margin: 0 auto; text-align: center; /* for IE6 */ padding-bottom: 40px; }
#content { text-align: left; padding: 20px; }
#content ul, #content ol { margin-bottom: 4em; }
#content li { background: url(../images/greybttn.gif) no-repeat left 3px; margin-bottom: 10px; padding-left: 20px; }
#content ol li { list-style-type: decimal-leading-zero; background: none; padding-left: 0; margin-left: 20px; list-style-position: outside; }
#box { width: 65%; margin: 0 15%; }
.cols { width: 31%; padding-right: 20px; float: left; margin-bottom: 20px; }
.full { width: 960px; padding: 20px 0 0 0; clear: both; }
img.profilepic { padding: 5px; background-color: #CCC; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
a.fll { margin-right: 20px; }
/* image replacement for Headings
---------------------------------*/
#home.nl h1 { background: url(../images/taglines/home_tagline_nl.gif) no-repeat top center; }
#home.en h1 { background: url(../images/taglines/home_tagline_en.gif) no-repeat top center; }
#webdesign.en h1 { background: url(../images/taglines/webdesign_tagline_en.gif) no-repeat top center; }
#webdesign.nl h1 { background: url(../images/taglines/webdesign_tagline_nl.gif) no-repeat top center; }
#webhosting.en h1 { background: url(../images/taglines/hosting_tagline_en.gif) no-repeat top center; }
#webhosting.nl h1 { background: url(../images/taglines/hosting_tagline_nl.gif) no-repeat top center; }
#freelance.en h1 { background: url(../images/taglines/freelance_tagline_en.gif) no-repeat top center; }
#freelance.nl h1 { background: url(../images/taglines/freelance_tagline_nl.gif) no-repeat top center; }
#portfolio.en h1 { background: url(../images/taglines/portfolio_tagline_en.gif) no-repeat top center; }
#portfolio.nl h1 { background: url(../images/taglines/portfolio_tagline_nl.gif) no-repeat top center; }
#info.en h1 { background: url(../images/taglines/info_tagline_en.gif) no-repeat top center; }
#info.nl h1 { background: url(../images/taglines/info_tagline_nl.gif) no-repeat top center; }
#voorwaarden.nl h1 { background: url(../images/taglines/conditions_tagline_nl.gif) no-repeat top center; }
#conditions.en h1 { background: url(../images/taglines/conditions_tagline_en.gif) no-repeat top center; }
/* end image replacements */

/* rounded corners 
------------------------*/
.rounded { background-color: #D9D9D9; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 10px; border-bottom: 1px solid #FFF; float: left; }
#webhosting .rounded { float: none; text-align: center; }
.positioned { position: relative; top: -150px; }
.quicklink { background: url(../images/rightarrow.gif) no-repeat right top; padding-right: 20px; font-size: 1.5em; line-height: 1.2em; text-shadow: 0 1px 0 #FFF; display: block; }
.quicklink:hover { background-position: right -40px; }
.balloon { background: url(../images/balloon.png) no-repeat top center; display: block; width: 200px; height: 131px; padding: 43px 30px 0 30px; margin: 0 auto; font-size: 2em; font-weight: normal; line-height: normal; font-style: italic; color: #AAA; text-align: center; }
.balloon p { text-shadow: none; }
.hosting { width: 100%; margin-bottom: 2em; }
.hosting td { padding: 5px; border: 1px solid #DDD; border-collapse: collapse; text-align: left; }
.hosting td.col1 { color: #777; }
#container #content .hosting tr:hover { background-color: #EEE; }
.centered { text-align: center; }
.priceContainer { text-align: center; font-size: 1.2em; }
.price { color: #666; font-weight: bold; }
/* featured designs @ homepage */
#featurewrapper { margin-top: 20px; position: relative; }
#featurewrapper p { position: absolute; top: 200px; left: 0; }
#featured_nav { width: 30%; float: left; }
#featured_nav li { padding: 20px 0; background: none; margin: 0; }
#featured_nav a { background: url(../images/greybttn.gif) no-repeat left 3px; display: block; padding-left: 20px; }
#featured_nav a.activeSlide { background: url(../images/orangebttn.gif) no-repeat left 3px; display: block; padding-left: 20px; }
#featured { float: right; height: 358px; width: 400px; }
#shadow { float: right; position: relative; top: -35px; z-index: 50; height: 35px; width: 400px; background: url(../images/shadow.jpg) no-repeat center center; }
/* end featured designs @ homepage */

/* skills 
------------------*/
#content .skills li.advanced { background: url(../images/skills/advanced.gif) no-repeat right top; padding: 0; }
#content .skills li.good { background: url(../images/skills/good.gif) no-repeat right top; padding: 0; }
#content .skills li.medium { background: url(../images/skills/medium.gif) no-repeat right top; padding: 0; }
#content .skills li.basic { background: url(../images/skills/basic.gif) no-repeat right top; padding: 0; }
img.icons { vertical-align: middle; }
/* tools 
--------------------*/
#content ul.tools li { display:  block; float:  left; margin: 0 10px 10px 0; background:  none; padding:  0; }
.tools li a { display: block; border: none; width: 48px; height: 48px; background-position: left top; background-repeat: no-repeat; text-indent: -999em; }
.tools li a:hover { background-position: left -48px; }
#apple { background-image: url(../images/icons/tools/apple.png); }
#windows { background-image: url(../images/icons/tools/windows.png); }
#firefox { background-image: url(../images/icons/tools/firefox.png); }
#php { background-image: url(../images/icons/tools/php.png); }
#mysql { background-image: url(../images/icons/tools/mysql.png); }
#jquery { background-image: url(../images/icons/tools/jquery.png); }
#opensource { background-image: url(../images/icons/tools/opensource.png); }
#joomla { background-image: url(../images/icons/tools/joomla.png); }
#adobe { background-image: url(../images/icons/tools/adobe.png); }
#virtuemart { background-image: url(../images/icons/tools/virtuemart.png); }
#wordpress { background-image: url(../images/icons/tools/wordpress.png); }
#virtualhostx { background-image: url(../images/icons/tools/virtualhostx.png); }
#mamp { background-image: url(../images/icons/tools/mamp.png); }
#virtualbox { background-image: url(../images/icons/tools/vbox.png); }
#jquerytools { background-image: url(../images/icons/tools/jquerytools.png); }
/* tooltips
---------------------*/
a.bubble { display: inline-block; }
#stalkMe li { background: none; float: left; margin: 5px; padding: 0; }
#stalkMe li a { display: block; }
#content #list li { float: left; padding: 0; margin: 0; background: none; }
#content #list li a { display: block; }
.navtips, .logotips, .icontips, .langtips { z-index: 150; color: #CCC; display: none; text-shadow: none; font-style: normal; }
.navtips { font-size: 1.4em; line-height: 1.2em; background: url(../images/rev_smallTooltip.png) no-repeat top center; height: 71px; width: 107px; text-align: center; line-height: 71px; }
.logotips { font-size: 1.4em; line-height: 1.2em; width: 181px; padding: 50px 30px 5px 30px; height: 102px; text-align: justify; background: url(../images/navbar/reverse_bigTooltip.png) no-repeat top center; }
.icontips { background: url(../images/smallTooltip.png) no-repeat top center; width: 141px; height: 51px; font-size: 1.2em; text-align: center; padding: 14px; line-height: 15px; }
.langtips { font-size: 1.2em; line-height: 1; background: url(../images/rev_smallTooltip.png) no-repeat top center; height: 71px; width: 93px; text-align: center; padding: 23px 7px 0 7px; }
/* language selector 
-------------------*/
#langselect { float: left; margin-left: 10px; display: inline; }
#langselect li { float: left; height: 50px; line-height: 50px; display: block; font-size: 1.2em; text-shadow: none; margin-right: 5px; }
#langselect a { color: #777; display: block; }
#langselect a:hover { color: #F2811D; /* orange */ }
/* form styles, modalbox, ..
----------------------------*/
#overlay { display: none; }
#triggers li { background: none; padding: 0; margin: 0; float: left; }