/*
Theme Name: De Backup Provider
Theme URI: http://debackupprovider.nl/
Description: Template website De Backup Provider online backup.
Version: 3.0
Author: Gerard Ouendag
Author URI: http://debackupprovider.nl/
Tags: 

*/


/*-------------------------------------------------------------
	RESET
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, 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; }

/*-------------------------------------------------------------
	HACKS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

.clearfix { 
	display:inline-block; }

.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden; }
	
/* Hide from IE Mac \*/
	.clearfix { display:block; }
/* End hide from IE Mac */

.clear {clear:both;} 

/*-------------------------------------------------------------
	BODY
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

body { 
	margin: 0px;
	padding-bottom: 30px;
	font: 11px/1.55em arial, helvetica, sans-serif;
 	color: #5B5B5B;
	background:#F7F7F7;}

.colorbox{
	background: #fff;}


/*-------------------------------------------------------------
	LINK STYLES
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

a {
	text-decoration: none;
	color: #4A73B0;
	cursor: pointer;}

a:hover {
	text-decoration: underline;}


/*-------------------------------------------------------------
	HEAD STYLES
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

h1 {
	font-size: 20px;
	font-weight: bold;
	color: #000;
	padding-bottom: 0px;}

h2 {
	font-size: 16px;
	font-weight: bold;
	color: #000;
	display: block;
	padding-bottom: 10px;}

h3.werkstations {
	color: #73B220;
	font-weight: bold;
	padding-top: 25px;}

h3.servers {
	color: #365481;
	font-weight: bold;
	padding-top: 25px;}

h3 {
	font-size: 14px;
	font-weight: normal;
	color: #000;
	padding-bottom: 10px;}

h3.contact {
	font-size: 14px;
	font-weight: bold;
	color: #000;
	padding-top: 10px;
	padding-bottom: 0px;}

.entry {
	font-size: 12px;
	line-height: 1.8;}

/*-------------------------------------------------------------
	TEXT STYLES
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

.big {
	font-size: 36px;
	font-weight: bold;
  	line-height: 1.0;}

/*-------------------------------------------------------------
	HEADER
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

.header {
	width: 955px;
	height: 80px;
	margin: auto;
	position: relative;
	background: #FFF; }

.header .logo {
	padding: 20px 0 0 20px;
	float: left;}

.header .login { 
	padding: 20px 30px 0 0;
	font-size: 12px;
	float: right;}

.navigation {
	width: 905px;
	height: 28px;
	margin: auto;
	padding: 10px 25px 0 25px;
	background: #365481;
	border-bottom: 5px solid #4A73B0;
	font-size: 12px;
	font-weight: bold;
	color: #FFF;}

.navigation li {
	padding: 5px 15px 0 10px;
	display: inline;
	margin-right: 15px;
	list-style-type: none;}

.navigation li.active {
	padding: 5px 10px 12px 10px;
	height: 25px;
	background: #4A73B0;}

.navigation li.active a:hover{
	text-decoration: none;}

.navigation li a {
	color: #FFF;}

.navigation li a:hover {
	color: #FFF;}

/*-------------------------------------------------------------
	CONTENT HOLDER
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/
.breadcrum {
	position: relative;
	width: 905px;
	padding: 0px 0px 10px 0px;
	margin: 15px auto 0 auto;
	border-bottom: 1px solid #e7e7e7;}


.subheader {
	position: relative;
	width: 905px;
	padding: 0px 25px 0 25px;
	margin: 15px auto 0 auto;}
	
.pagetitle {
	float: left;}

.pagetitle h1 {
	font-size: 24px;
	color: #000;
	font-weight: bold;
	padding: 25px 0 10px 0;}

.subnavigation {
	float: right;}

.subnavigation ul {
	margin-top: 6px;}

.subnavigation li {
	display: inline;
	list-style-type: none;
	padding-left: 25px;}

.content {
	width: 905px;
	background: #FFF;
	border: 1px solid #e7e7e7;
	margin: 15px auto 0 auto;
	padding: 25px;
	position: relative;}

.content .post {
	width: 550px;
	font-size: 12px;
	float: left;}

.content .image {
	float: right;}

/*-------------------------------------------------------------
	OVERZICHT
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

#overzicht.content .post {
	width: 565px;
	float: left;
	font-size: 14px;}

#overzicht.content h1 {
	font-size: 24px;
	font-weight: bold;
	line-height: 35px;}

#overzicht.content .post p{
	width: 565px;
	float: left;
	font-size: 12px;}

.packagewrapper {
	width: 955px;
	margin: 20px auto 0 auto;
	position: relative;}

.packagewrapper .workstation {
	float: left;
	font-size: 12px;
	position: relative;
	width: 417px;
	background: #FFF;
	border: 1px solid #e7e7e7;
	padding: 25px;}

.packagewrapper .workstation .price{
	position: absolute;
	right: 30px;
	top: 65px;
	color: #73B220;}

.packagewrapper .workstation p{
	width: 275px;}

.packagewrapper .workstation h2{
	color: #73B220;
	font-weight: bold;}

.packagewrapper .workstation ul {
	margin-top: 30px;
	width: 325px;}

.packagewrapper .workstation li {
	font-size: 12px;
	display: inline;
	list-style-type: none;
	padding-right: 15px;}

.packagewrapper .workstation a.button1 {
	padding: 5px 10px 5px 10px;
	background: #73B220;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	color: #FFF;}

.packagewrapper .workstation a.button1:hover {
	background: #000;
	text-decoration: none;}

.packagewrapper .workstation a.button2 {
	padding: 5px 10px 5px 10px;
	background: #9DCD40;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	color: #FFF;}

.packagewrapper .workstation a.button2:hover {
	background: #000;
	text-decoration: none;}

.packagewrapper .server {
	float: right;
	font-size: 11px;
	position: relative;
	width: 417px;
	background: #FFF;
	border: 1px solid #e7e7e7;
	padding: 25px;}

.packagewrapper .server .price{
	position: absolute;
	right: 30px;
	top: 65px;
	color: #365481;}

.packagewrapper .server p{
	width: 275px;}

.packagewrapper .server h2{
	color: #365481;
	font-weight: bold;}

.packagewrapper .server ul {
	margin-top: 30px;
	width: 325px;}

.packagewrapper .server li {
	display: inline;
	list-style-type: none;
	padding-right: 15px;}

.packagewrapper .server a.button1 {
	padding: 5px 10px 5px 10px;
	background: #365481;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	color: #FFF;}

.packagewrapper .server a.button1:hover {
	background: #000;
	text-decoration: none;}

.packagewrapper .server a.button2 {
	padding: 5px 10px 5px 10px;
	background: #4A73B0;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	color: #FFF;}

.packagewrapper .server a.button2:hover {
	background: #000;
	text-decoration: none;}

.ovfooterwrapper {
	width: 955px;
	margin: 20px auto 0 auto;
	position: relative;}

.ovfooterwrapper .quicklinks {
	float: left;
	width: 417px;
	padding: 0px 25px 25px 25px;}

.ovfooterwrapper .quicklinks li{
	padding: 5px 0 5px 0;
	font-size: 12px;
	line-height: 1.8;
	list-style-type: none;
	border-top: 1px solid #E7E7E7;}

.ovfooterwrapper .latestnews {
	float: right;
	width: 417px;
	padding: 0px 25px 25px 25px;}

.ovfooterwrapper .latestnews li{
	padding: 5px 0 5px 0;
	line-height: 1.8;
	list-style-type: none;
	font-size: 12px;
	border-top: 1px solid #E7E7E7;}

/*-------------------------------------------------------------
	KLANT LOGIN
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

#login.content .post {
	width: 500px;
	line-height: 1.8;
	float: left;}

ul.login {
	width: 450px;}

ul.login li {
	width: 300px;
	list-style-type: none;}

ul.login li.button{
	padding-top: 15px;
	padding-bottom: 15px;}

.loginform {
	width: 200px;}

a.button {
	padding: 5px 10px 5px 10px;
	background: #73B220;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	color: #FFF;}

a.button:hover {
	background: #000;
	text-decoration: none;}

/*-------------------------------------------------------------
	PRODUCT OVERZICHT
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

#product.content h2 {
	padding-bottom: 0px;}

#product.content .post {
	width: 100%;
	line-height: 1.8;
	padding-bottom: 20px;}

.incontent-wrap {
	padding-top: 20px;
	padding-bottom: 25px;
	font-size: 12px;
	width: 905px;
	position: relative;}

.incontent-wrap .voordelen{
	width: 575px;
	border: 1px solid #e7e7e7;
	padding: 20px;
	float: left;
	position: relative;}

.incontent-wrap .voordelen .winmag {
	position: absolute;
	right: 20px;
	top: 20px;}

.incontent-wrap .voordelen .price_workstation {
	float: right;
	padding-top: 110px;
	color: #73B220;}

.incontent-wrap .voordelen .price_server {
	float: right;
	padding-top: 110px;
	color: #365481;}

.incontent-wrap .voordelen .workstation_buttons ul {
	margin-top: 25px;
	margin-left: 0px;
	list-style-type: none;}

.incontent-wrap .voordelen .workstation_buttons li {
	display: inline;
	list-style-type: none;
	padding-right: 15px;}

.incontent-wrap .voordelen .workstation_buttons a.button1 {
	padding: 5px 10px 5px 10px;
	background: #73B220;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	width: 350px;
	color: #FFF;}

.incontent-wrap .voordelen .workstation_buttons a.button1:hover {
	background: #000;
	width: 350px;
	text-decoration: none;}

.incontent-wrap .voordelen .workstation_buttons a.button2 {
	padding: 5px 10px 5px 10px;
	background: #9DCD40;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	color: #FFF;}

.incontent-wrap .voordelen .workstation_buttons a.button2:hover {
	background: #000;
	text-decoration: none;}

.incontent-wrap .voordelen .workstation h3 {
	color: #73B220;
	font-weight: bold;}

.incontent-wrap .voordelen .workstation ul {
	margin-left: 17px;
	list-style-type: square;
	color: #73B220;}

.incontent-wrap .voordelen .workstation li{
	padding-top: 8px;} 

.incontent-wrap .voordelen .workstation li span{
	padding-top: 10px;
	color: #5B5B5B;} 

.incontent-wrap .image {
	width: 285px;
	float: right;
	text-align: right;}

.incontent-wrap .voordelen .server_buttons ul {
	margin-top: 25px;
	margin-left: 0px;
	list-style-type: none;}

.incontent-wrap .voordelen .server_buttons li {
	display: inline;
	list-style-type: none;
	padding-right: 15px;}

.incontent-wrap .voordelen .server_buttons a.button1 {
	padding: 5px 10px 5px 10px;
	background: #365481;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	width: 350px;
	color: #FFF;}

.incontent-wrap .voordelen .server_buttons a.button1:hover {
	background: #000;
	width: 350px;
	text-decoration: none;}

.incontent-wrap .voordelen .server_buttons a.button2 {
	padding: 5px 10px 5px 10px;
	background: #4A73B0;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	color: #FFF;}

.incontent-wrap .voordelen .server_buttons a.button2:hover {
	background: #000;
	text-decoration: none;}

.incontent-wrap .voordelen .server h3 {
	color: #365481;
	font-weight: bold;}

.incontent-wrap .voordelen .server ul {
	margin-left: 17px;
	list-style-type: square;
	color: #365481;}

.incontent-wrap .voordelen .server li{
	padding-top: 8px;} 

.incontent-wrap .voordelen .server li span{
	padding-top: 10px;
	color: #5B5B5B;}

.specifications {
	padding-top: 20px;
	font-size: 12px;}


/*-------------------------------------------------------------
	FOOTER
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

.footer {
	width: 955px;
	border-top: 1px solid #e7e7e7;
	margin: 10px auto 0 auto;
	padding: 15px 0 35px 0;
	text-align: right;
	font-size: 12px;}

.footer li {
	color: #AAA;
	display: inline;
	list-style-type: none;
	padding-right: 5px;}

.footer li a{
	color: #AAA;
	text-decoration: none;}

.footer li a:hover {
	color: #AAA;
	text-decoration: none;}
/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#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; overflow:visible;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/* 
    ColorBox example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure easier to understand.
*/
#cboxOverlay{background:#fff;}

#colorbox{}
    #cboxContent{margin-top:32px;}
        #cboxLoadedContent{background:#fff; padding:0px 10px 10px 10px; border:1px solid #e7e7e7;}
        #cboxLoadingGraphic{background:url(images/loading.gif) center center no-repeat;}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
        #cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(images/controls.png) 0 0 no-repeat;}
        #cboxPrevious{background-position:0px 0px; right:44px;}
        #cboxPrevious.hover{background-position:0px -25px;}
        #cboxNext{background-position:-25px 0px; right:22px;}
        #cboxNext.hover{background-position:-25px -25px;}
        #cboxClose{background-position:-50px 0px; right:0;}
        #cboxClose.hover{background-position:-50px -25px;}
        .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
        .cboxSlideshow_on #cboxSlideshow.hover{background-position:-100px -25px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
        .cboxSlideshow_off #cboxSlideshow.hover{background-position:-75px -25px;}

td {
	font-size: 12px;}

table {
	background-color: #fff;}

.form {
	background-color: #fff;}

table.pakket {
	margin-top: 15px;
	border: 1px solid #e7e7e7;
	width: 100%;}

table.pakket td {
	padding: 10px;
	width: 15%;
	text-align: left;
	color: #5B5B5B;
	font-weight: normal;}

table.pakket div.buttonholder {
	margin-top: 10px;}

table.pakket .pricews {
	padding-top:5px;
	font-size: 14px;
	color: #73B220;}

table.pakket .pricesrv {
	padding-top:5px;
	font-size: 14px;
	color: #365481;}

table.pakket li {
	list-style-type: none;}

table.pakket .button {
	text-align: right;}


a.buttonsrv {
	padding: 5px 10px 5px 10px;
	background: #365481;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	color: #FFF;}

a.buttonsrv:hover {
	background: #000;
	text-decoration: none;}

.post {
	width: 100%;}

.q {
	font-size: 14px;
	font-weight: bold;
	color: #000;
	padding-bottom: 0px;
	margin-bottom: 0px;}

td.left {
	width: 50px;}

.contenttitle {
	font-size: 14px;
	font-weight: bold;
	color: #000;}

/*TABLE*/
.specs {
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 0px;
	border-collapse: collapse; 
	width: 100%;
	}

.vergelijk {
	padding: 0px;
	border-collapse: collapse;}

.row1 {
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	height: 35px;
	width: 180px;
	background: url('img/tablebg.gif') no-repeat;
	color: #FFF;
	}

.rowspecs {
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	height: 35px;
	width: 225px;
	background: url('img/tablebg.gif') no-repeat;
	color: #FFF;
	}

.row {
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	height: 35px;
	width: 120px;
	background-color: #1788c3;
	color: #FFF;
	}

.rowspecssub {
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	height: 35px;
	width: 200px;
	background-color: #365481;
	color: #FFF;
	}

.rowspecssubws {
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	height: 35px;
	width: 200px;
	background-color: #73B220;
	color: #FFF;
	}

.row1sub {
	text-align: right;
	vertical-align: middle;
	height: 35px;
	font-weight: bold;
	border-bottom: 1px solid #dedede;
	}

.rowsub {
	border-bottom: 1px solid #dedede;
	height: 35px;
	text-align: center;
	vertical-align: middle;}

.rowsubvglmid {
	border-top: 1px solid #dedede;
	height: 35px;
	text-align: center;
	vertical-align: middle;}

.rowsubvglleft {
	border-top: 1px solid #dedede;
	height: 35px;
	text-align: left;
	vertical-align: middle; }

.rowsubvglleft1 {
	height: 35px;
	text-align: left;
	vertical-align: middle; }

.rowsubvglmid1 {
	height: 35px;
	text-align: center;
	vertical-align: middle;}

.blue {
	color: #1788c3;}

.rowsep {
	background-color: #f2f2f2;
	height: 35px;
	text-align: left;
	padding-left: 20px;
	vertical-align: middle;
	color: #626262;
	font-weight: bold;
	border-bottom: 1px solid #dedede;}

.answer { display:none;}

a.groen {
	font-weight: bold;}

a:hover.groen {
	font-weight: bold;}

.small {
	font-size: 11px;
	padding-top: 20px;}

.small ol {
	padding-left: 15px;}

img.alignleft, div.alignleft
{
float:left;
margin:0 0.5em 0.5em 0;
}
img.alignright, div.alignright
{
float:right;
margin:0 0 0.5em 0.5em;
}
img.aligncenter, div.aligncenter
{
text-align:center;
margin:0 auto;
}

.leftsearch {
	float: left;
	text-align: left;
	width: 50%}

.rightsearch {
	float: right;
	text-align: left;
	width: 50%}

#feature {
	margin-bottom:20px;
}
.feature-img {
	float:left;
	margin-top:10px;
}
.feature-text {
	margin-left:545px;
}
h2#tagline {
	font-size: 24px;
	color: #000;
	line-height:1.4;
	font-weight: bold;
	padding: 0 0 10px 0;
}

h3#tagline-mini {
	font: 12px arial, helvetica, sans-serif;
 	color: #5B5B5B;
	line-height: 1.8;
	margin-bottom: 0px;
}
.feature-screenshots {
	margin:0;
	list-style:none;
}
.feature-screenshots li {
	float:left;
	margin:	0 20px 10px 0;
}

.feature-text ul {
	margin-top: 5px;
	margin-left: 0px;
	list-style-type: none;}

.feature-text li {
	display: inline;
	list-style-type: none;
	padding-right: 15px;}

.feature-text a.button1 {
	padding: 5px 10px 5px 10px;
	background: #365481;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	color: #FFF;}

.feature-text a.button1:hover {
	background: #000;
	text-decoration: none;}

.feature-text a.button2 {
	padding: 5px 10px 5px 10px;
	background: #4A73B0;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	color: #FFF;}

.feature-text a.button2:hover {
	background: #000;
	text-decoration: none;}

.feature img {
	float:left;
}

.feature p {
	margin-left:0px;
	font: 12px arial, helvetica, sans-serif;
 	color: #5B5B5B;
	line-height: 1.8;
}

.feature-werkstation p {
	margin-left:0px;
	font: 12px arial, helvetica, sans-serif;
 	color: #5B5B5B;
	line-height: 1.8;
}

.feature h3 {
	font-size: 14px;
	font-weight: bold;
	color: #365481;
	padding-top: 10px;
	padding-bottom: 0px;}

.scrollable {
	height:110px;
	overflow:hidden;
	position:relative;
	width:100%;
}
.scrollable .items {
	clear:both;
	position:absolute;
	width: 20000em;
}
.items div {
	float:left;
	width: 780px;
}
.scrollable img {
	background-color:#FFFFFF;
	border: 1px solid #e7e7e7;
	float:left;
	height: 100px;
	margin:0 35px 0 10px;
	padding:1px;
	width:100px;
}
.scrollable .active {
	border: 1px solid #e7e7e7;
	cursor:default;
	position:relative;
}
/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;
}

.feature-text a.button1-werkstation {
	padding: 5px 10px 5px 10px;
	background: #73B220;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	color: #FFF;}

.feature-text a.button1-werkstation:hover {
	background: #000;
	text-decoration: none;}

.feature-text a.button2-werkstation {
	padding: 5px 10px 5px 10px;
	background: #9DCD40;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	color: #FFF;}

.feature-text a.button2-werkstation:hover {
	background: #000;
	text-decoration: none;}

.feature-werkstation h3 {
	font-size: 14px;
	font-weight: bold;
	color: #73B220;
	padding-top: 10px;
	padding-bottom: 0px;}