/****** FILE: themes/cyj2010/css/layout.css *****/
/* cross-browser reset */
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:top;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}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}


/* defaults */
html {
    overflow-y: scroll; /* right scrollbar always visible */
}

@font-face {
    font-family: 'myriad pro';
    src: url('../fonts/myriadpro-regular-webfont.woff') format('woff'),
         url('../fonts/myriadpro-regular-webfont.ttf') format('truetype'),
         url('../fonts/myriadpro-regular-webfont.svg#webfontHU6JZxuN') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
/*    font: 13px/1.5 'myriad pro', calibri, verdana; */
font: 13px 'myriad pro', calibri, verdana;
letter-spacing: 0px;
}

hr {
    border: 0px #ccc solid;
    border-top-width: 1px;
    clear: both;
    height: 0px;
}

h1 {
    font-size: 25px;
}
h2 {
    font-size: 23px;
}
h3 {
    font-size: 21px;
}
h4 {
    font-size: 19px;
}
h5 {
    font-size: 17px;
}
h6 {
    font-size:15px;
}

ol {
    list-style: decimal;
}

ul {
    list-style: disc;
}

li {
    margin-left: 30px;
}

wbr {
    display: inline-block;
}

/* misc */
.clear {
    position: relative;
    clear: both;
    float: none;
    overflow: hidden;
    font-size: 0px;
    line-height: 0px;
    height: 0px;
}

.noFloat {
    float: none;
}


/* continue styles here: */

body {
/** background-image: url(../images/achter2.png); **/
    background: url(../images/achtergrondB2.png) repeat 0 0;
    /*background: repeat;*/
    height: 100%;
    /*background-position: 50% 0%;*/
}

.clear-block {
clear: both;
display:block;
}
/*
.pngFix { behavior: url(../PNGfix/iepngfix.htc) }
*/
#clockyourjob {
    position: relative;
    width: 100%;
    background-image: url(../images/achtergrondA.jpg);
    background-repeat:no-repeat;
    background-position: 50% 0%;
    min-height: 100%;
    background-attachment: scroll;
}


/** container en main logo **/
.container-logo {
    position: relative;
    height: 56px; /* logoimg = 56px; */
    padding: 20px 0px 14px 20px;
    margin: 0px auto;
    width: 1004px;
}
    .logo {
        position: relative;
        float: left;
        width: 330px; /* img = 277px so 23px extra spacing */
    }
        .logo a {
            display: block;
        }
    .inloggen {
        position: relative;
        float: left;
        width: 360px;
		display: none;
    }


/** menu balk **/
.container-menu {
    position: relative;
    height: 31px;
    background: transparent url(../images/menubalk.jpg) repeat-x;
}
    .main-menu {
        position: relative;
        width: 1024px;
        height: 31px;
        margin: 0px auto;
    }
        #menubalk,
        #taalkeuzemenu {
            position: relative;
            float: left;
            width: 633px;
        }
        #taalkeuzemenu {
            width: 72px;
        }
        .main-menu ul {
            position: relative;
            list-style: none;
            padding: 0px;
            margin: 0px;
        }
        #menubalk ul {
            width: 633px;
        }
        #taalkeuzemenu ul {
            width: 72px;
        }
            .main-menu li {
                position: relative;
                display: block;
                float: left;
                list-style: none;
                margin: 0px;
                padding: 0px;
                height: 31px;
                overflow: hidden;
            }
                .main-menu li a { /* display block here, breaks on ie6, so add a float: left */
                    position: relative;
                    display: block;
                    font-size: 15px;
                    line-height: 31px;
                    height: 31px;
                    padding: 0px 15px;
                    background: transparent repeat-x;
                    color: #FFFFFF;
                    font-weight: bold;
                    text-decoration: none;
                    vertical-align: bottom;
                }
                    .main-menu li.balk.first a {
                        padding-left: 21px;
                    }
                    .main-menu li a:hover,
                    .main-menu li a.current {
                        background-image: url(../images/menubalk-hover.png);
                    }
                #taalkeuzemenu li a {
                    height: 11px;
                    padding: 10px 2px 10px 2px;
                }
                    #taalkeuzemenu li a img {
                        vertical-align: top;
                    }
                    #taalkeuzemenu li.taal a:hover {
                        background-image: url(../images/menubalk-hover.png);
                    }
/*
                a.nl {
                    background: transparent url(./../images/nl.png) no-repeat left center;
                }
                a.en {
                    background: transparent url(./../images/en.png) no-repeat left center;
                }
                a.de {
                    background: transparent url(./../images/de.png) no-repeat left center;
                }
                li.taal img {
                    width: 17px;
                    height: 31px;
                }
                    li.taal.last img {
                        margin-right: 0px;
                    }
*/
/** Content container **/

.container-content {
    position: relative;
    width: 1024px;
    margin: 0px auto;
}
    .main-content {
        position: relative;
    }
    #computer {
        position: absolute;
        width: 371px;
        height: 483px;
        right: -47px;
        top: -180px;
    }
    #laptop {
        position: absolute;
        width: 299px;
        height: 252px;
        right: 324px;
        top: 51px;
    }
    #prijsImg,
    #prijs {
        position: absolute;
        display: block;
        width: 204px;
        height: 204px;
        right: 378px;
        top: 33px;
    }
        #prijs img {
            width: 138px;
            height: 138px;
        }
    #bekijkdemo {
        position: absolute;
        display: block;
        width: 136px;
        height: 136px;
        right: 178px;
        top: 150px;
    }

/** knoppen **/

/** blauwe bestelknop **/
p.bestelBtn {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 335px;
    padding-left: 85px; /* was 40*/
    padding-bottom: 9px;
    }
    #blok p.bestelBtn {
    padding-left: 42px;  /* was 17 */
    }
    #blok1 p.bestelBtn,
    #blok2 p.btn {
    padding-left: 62px; /* was 37 */
	width: 318px;
		   }

a.directbestellen {
    display: inline-block;
  border: 1px none;
  text-decoration:none;
  width: 259px;
  height: 47px;
  background: transparent url(./../images/directbeginnen.png) no-repeat;
}
    a.directbestellen:hover {
        background-image: url(./../images/directbeginnen-grijs.png);
    }
    a.directbestellen img {
        width: 259px;
        height: 47px;
    }
a.meerinfo {
    display: inline-block;
  border: 1px none;
  text-decoration:none;
  width: 259px;
  height: 47px;
  background: transparent url(./../images/meerinfo.png) no-repeat;
}
    a.meerinfo:hover {
        background-image: url(./../images/meerinfo-grijs.png);
    }
    a.meerinfo img {
        width: 259px;
        height: 47px;
    }
	
p.bestellenBtn {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 660px;
    padding-left: 0px; /* was 40*/
    padding-bottom: 9px;
    }
    #blok p.bestellenBtn {
    display: inline;
	padding-bottom:20px; 
position:relative;
text-align:right;
    } 
	a.afrekenen {
		display: inline-block;
	  border: 1px none;
	  text-decoration:none;
	  width: 176px;
	  height: 42px;
	  background: transparent url(./../images/betalen-klein.png) no-repeat;
	}
		a.afrekenen:hover {
			background-image: url(./../images/betalen-grijs.jpg);
		}
		a.afrekenen img {
			width: 176px;
			height: 42px;
		}
	a.wijzigen {
		display: inline-block;
	  border: 1px none;
	  text-decoration:none;
	  width: 176px;
	  height: 42px;
	  background: transparent url(./../images/wijzigen-klein.png) no-repeat;
	}
		a.wijzigen:hover {
			background-image: url(./../images/wijzigen-grijs.png);
		}
		a.wijzigen img {
			width: 176px;
			height: 42px;
		}
	a.annuleren {
		display: inline-block;
	  border: 1px none;
	  text-decoration:none;
	  width: 176px;
	  height: 42px;
	  background: transparent url(./../images/annuleren-klein.png) no-repeat;
	}
		a.annuleren:hover {
			background-image: url(./../images/annuleren-grijs.jpg);
		}
		a.annuleren img {
			width: 176px;
			height: 42px;
		}
		
		#ideal_form .ideal {
		-moz-background-clip:border;
		-moz-background-inline-policy:continuous;
		-moz-background-origin:padding;
		background:transparent url(./../images/betalenmetideal-hover.png) no-repeat scroll 0 0;
		border:0 none;
		cursor:pointer; 
		height:42px;
		text-indent:-9999px;
		width:176px;
		}
		
		#ideal_form .ideal:hover {
		-moz-background-clip:border;
		-moz-background-inline-policy:continuous;
		-moz-background-origin:padding;
		background:transparent url(./../images/betalenmetideal-klein.png) no-repeat scroll 0 0;
		border:0 none;
		cursor:pointer; 
		height:42px;
		text-indent:-9999px;
		width:176px;
		}
		
		#ideal_form .paypal {
		-moz-background-clip:border;
		-moz-background-inline-policy:continuous;
		-moz-background-origin:padding;
		background:transparent url(./../images/betalenmetpaypal-hover.png) no-repeat scroll 0 0;
		border:0 none;
		cursor:pointer; 
		height:42px;
		text-indent:-9999px;
		width:176px;
		}
		
		#ideal_form .paypal:hover {
		-moz-background-clip:border;
		-moz-background-inline-policy:continuous;
		-moz-background-origin:padding;
		background:transparent url(./../images/betalenmetpaypal-klein.png) no-repeat scroll 0 0;
		border:0 none;
		cursor:pointer; 
		height:42px;
		text-indent:-9999px;
		width:176px;
		}

/** ronde knop: prijs **/
a.prijs {
border: none;
text-decoration: none;
}

/** ronde knop: bekijk de demo **/
a#bekijkdemo {
  display: inline-block;
  border: none;
	text-decoration: none;
  width: 142px;
  height: 145px;
  background: transparent url(./../images/bekijkdedemo.png) no-repeat;
}
    a#bekijkdemo:hover {
        background-image: url(./../images/bekijkdedemo-grijs.png);
    }
    a#bekijkdemo img {
	  width: 142px;
	  height: 145px;
    }
	

/** grijze bestelknop **/
a.bestellen {
border:medium none;
position:absolute;
text-align:center;
text-decoration:none;
top:300px;
width: 333px;
height: 34px;
display:block;}

 /** Opmaak stijlregels van het intro blok **/

.introductie {
    position: relative;
    height: 310px;
}

.intro {
    position:relative;
    width: 400px;
    margin: 20px 0px 0px 22px;
}
/*
    .intro h2 {
            font-size: 24px;
            font-weight: normal;
            color: #660099;
        }

    .intro p {
            font-size: 14px;
            line-height: 23px;
        }
*/
    img.bestelknop {
    text-align: center;
    margin-top: 10px;}


/** Opmaak stijlregels van het contentgedeelte van de pagina **/
.content {
    position: relative;
    width: 980px; /* was 976 */
    padding: 0px 22px;  /* was 24px */
    background: url(../images/BG2.jpg) no-repeat right top;
            background-color: #FFF;

	}
    .content .titel {
    font-size: 18px;
    color: #000000;  }

    .content .subtitel {
    font-size: 15px;
    color: #000000;
    }

    .content .tekst {
    color: #666666;
    font-size: 12px;
     }
/*
    .content ul {
    margin-left: 0;
    padding-left: 20px;
    list-style-type: none;
    list-style-image: url("../images/dot.png");
     }

    .content li {
    line-height: 23px;
    color: #000000;
    font-size: 15px;
     }
*/
    .content li.leesmeer {
    color: #F7F7F7;
    text-decoration: none;
    list-style-type: none;
    list-style-image: none;
    font-style: italic; }

    .content li.leesmeer a {
    color: blue;
    text-decoration: none;
      }

        #blok,
        #offerteBlok {
            position: relative;
            width: 744px;
            padding: 20px 20px 0px 20px;
            border: 1px solid #cccccc;
        }
        #blok {
            /*margin-bottom: 20px;*/
			background-color: #f7f7f7;
        }

/** Informatieblokken onderin op de pagina **/
    #blok1 {
            position: relative;
            float: left;
            background-color: #F7F7F7;
            font-size: 12px;
            width: 340px;
            height: 342px;
            padding: 20px;
            margin-right: 20px;
            border: 1px solid #cccccc;
     }
    #blok2 {
            position: relative;
            float: left;
            background-color: #F7F7F7;
            font-size: 12px;
            width: 340px;
            height: 342px;
            padding: 20px;
            border: 1px solid #cccccc;
        }
            #blok1 p.bestelBtn,
            #blok2 p.btn {
                position: absolute;
                left: 0px;
                bottom: 0px;
                padding-bottom: 10px;
            }
/** blok aan de rechterkant **/

.socialblok {
    position: relative;
    float: right;
    width: 171px;
    font-size: 12px;
}
    .doorsturen {
    background-color:#F2F2F2;
    width:170px;
    font-size:12px;
    border: 1px solid #cccccc;
            margin-bottom: 26px;
            overflow: hidden;
        }
    .twitter {
    background-color:#F2F2F2;
    width:170px;
    font-size:12px;
    border: 1px solid #cccccc;
    margin-bottom: 26px;}

    .linkedin {
    background-color:#F2F2F2;
    width:170px;
    font-size:12px;
    border: 1px solid #cccccc;
    margin-bottom: 26px;}

    .betaling {
    background-color:#F2F2F2;
    width:170px;
    font-size:12px;
    border: 1px solid #cccccc;
    margin-top: 10px;}

    .bloktitel {
    background-color:#C6C6C6;
    background-image:url(../images/bloktitel.png);
    color:#FFFFFF;
    padding-bottom:7px; 
    padding-left:16px;
    padding-top:7px;
	height: 13px;
    text-align:left;
    text-transform:uppercase;
	vertical-align: center; }

    .blokinhoud {
    padding: 15px 15px 5px 15px;
    font-size: 11px; }

    .volgen {
    padding-bottom:5px;
    padding-left:15px;
    padding-top:5px; }

    .stuurdoor {
    border: 1px solid #CCCCCC;
    /** buiten gebruik background: url('../images/stuurdoor.png') no-repeat top left; **/
    padding: 2px 8px;
    height: 23px;
    width: 140px;
    color: #666666;
    margin-top: 5px;
    text-transform: uppercase;
    color: }

    .betaalmethodes {
    display: block;
    width: 130px;
    text-align: center;
    margin-top: 2px;
    }




hr.break {
clear:both;
color:transparent;
display:block;
/** visibility: hidden; **/
height:60px; /** was 100px **/
margin:0px auto;
width:1024px;
padding-top:30px;
border-top-width: 0px;
background-color: #FFF;
}


/** Footer **/

#footer {
color:#FFFFFF;
display:block;
font-size:14px;
height:31px;
line-height:30px;
margin:auto;
position:relative;
text-align:right;
vertical-align: middle;
}

#footer a {
color:#FFFFFF;
margin:0;
padding: 4px;
text-decoration:none;
vertical-align: middle;
}

#footer a:hover {
text-decoration: underline;
}

.footer-menu {
/** background-image:url(../images/menubalk.jpg);
left:-10px;
margin:auto;
position:relative;
text-align:left;
width:105%;
margin-bottom: -5px; **/
background-image:url(../images/menubalk.jpg);
margin-right: 12px;
position:relative;
text-align:right;
}


#stepper {
    position: relative;
    float: right;
    width: 40px;
    height: 32px;
    line-height: 32px;
    font-size: 15px;
    font-weight: bold;
    text-align: right;
    color: #999999;
}
    #stepper span {
        color: #0066ff;
    }

.betaling .blokinhoud {
    color: #666666;
    font-size: 11px;
    padding: 4px 15px 10px 15px;
}
.betaalmethodes {
    padding-top: 5px;
    line-height: 18px;
    vertical-align: middle;
}
    .betaalmethodes img {
        vertical-align: middle;
    }

p.loader {
    position: relative;
    height: 20px;
    background: transparent url(./../images/loader.gif) no-repeat 50% 50%;
}


/****** FILE: themes/cyj2010/css/typography.css *****/
/**
 * This typography file is included in the WYSIWYG editor,
 *
 * all content editable in a WYSIWYG editor in the backend should be pasted in
 * a container div with class 'typography'
 */

/* DEFAULTS */
.typography * {
    font-family: 'myriad pro',calibri,verdana;
}
    .typography blockquote {
        margin-left: 20px;
    }
    .typography hr {
        padding: 5px;
    }
    .typography p {
        color: #666666;
		line-height: 18px;
    }
    .typography p,
    .typography li {
        font-size: 13px;
    }
    .typography p,
    .typography h2,
    .typography h3,
    .typography ul {
        position: relative; /* helps prevent the disappearing li background-image bug */
        padding-bottom: 20px;
		}

/* HEADER STYLES */
    .typography h1 {
        font-size: 16px;
    }
    .typography h2 {
        font-size: 24px;
        font-weight: normal;
    }
    .typography h3 {
        font-size: 21px;
        font-weight: normal;
    }
    .typography h4 {
        font-size: 19px;
    }
    .typography h5 {
        font-size: 17px;
    }
    .typography h6 {
        font-size: 15px;
    }

/* LINK STYLES */
    .typography a {
        color: #0066ff;
        text-decoration: underline;
    }
        .typography a:hover {
            text-decoration: none;
        }

/* TABLE STYLES */
    .typography table {
    }
        .typography table tr td {
            padding: 3px 5px;
        }


/* WYSIWYG EDITOR ALIGNMENT CLASSES */
    .typography .left {
        text-align: left;
    }
    .typography .center {
        text-align: center;
    }
    .typography .right {
        text-align: right;
    }
    .typography img.right {
        float: right;
    }
    .typography img.left {
        float: left;
    }

    .typography p.MsoNormal, .typography p.MsoBodyText {
        margin: 0;
    }


/**
 * stuff from the design, classes will be available in the WYSIWYG
 */
    .typography .topTitle {
        color: #660099;
        padding-bottom: 15px;
		padding-top: 15px;
    }
    .typography .topSubTitle {
        font-weight: 600;
        color: #660099;
    }
    .typography .topTekst {
        font-size: 15px;
        line-height: 28px;
        color: #666666;
    }

    .typography ul {
        margin-left: 0px;
        padding-left: 0px;
        list-style: none;
    }

    .typography li {
        background: transparent url(./../images/dot.png) no-repeat left center;
        margin-left: 0px;
        padding-left: 30px;
        line-height: 20px;
        color: #000000;
   	    /** font-weight: bold; **/
        vertical-align: top;
    }

    .typography .leesmeer,
    .typography .leesmeer a {
        color: #0066ff !important;
        font-style: italic;
        font-weight: bold;
        text-decoration: none;
    }
    .typography .leesmeer a:hover {
        text-decoration: underline;
    }

    .typography.intro h2 {
        padding-bottom: 25px;
		padding-top: 20px;
    }

/****** FILE: themes/cyj2010/css/form.css *****/
/* defaults */
form,
fieldset {
    border: 0px;
    margin: 0px;
    padding: 0px;
}

.inloggen form {
    position: relative;
    height: 25px;
    padding: 20px 0px 0px 0px;
}
    .inloggen .text {
        float: left;
        position:relative;
        width: 133px;
        font-size: 13px;
        line-height: 15px;
        height: 15px;
        padding: 3px 4px;
        margin: 1px 5px 1px 0px;
        border: 2px inset #cccccc;
        margin-right: 2px;
    }
    .inloggen .submit {
        float: left;
        width: 62px;
        height: 27px;
        border: 0px none;
        background: transparent url(./../images/login.png) no-repeat;
        text-indent: -9999px;
        cursor: pointer;
    }
	
				.inloggen .submit:hover {
					background-image: url(./../images/login-grijs.png);
					}
	 

#blok form {
    position: relative;
    padding-bottom: 20px;
}
    #blok form div.field {
        position: relative;
        width: 744px;
        clear: both;
        padding-bottom: 20px;
    }
        #blok form label.left {
            position: relative;
            display: block;
            float: left;
            width: 150px;
            line-height: 27px;
            color: #666666;
        }
        #blok form .middleColumn {
            position: relative;
            width: 594px;
            margin-left: 150px;
        }
            #blok form .middleColumn ul {
                position: relative;
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
                #blok form .middleColumn li {
                    float: left;
                    margin: 0px;
                    padding: 0px;
                    list-style: none;
                    background: transparent none;
                }
            #blok form input.text,
            #blok form textarea {
              /*  width: 582px; */
                width: 400px;
                font-size: 13px;
                line-height: 15px;
                padding: 4px;
                border: 1px solid #cccccc;
            }
            #blok form textarea {
                height: 70px;
            }
        #blok form .Actions {
			padding-left:150px;
			text-align:left;
        	}
            #Form_OrderForm_action_toConfirm {
                width: 252px;
                height: 47px;
                border: 0px none;
                background: transparent url(./../images/betalenverder.png) no-repeat;
                text-indent: -9999px;
                margin-right: -9px;
                cursor: pointer;
            }
			#Form_OrderForm_action_toConfirm:hover {
					background-image: url(./../images/betalenverder-grijs.png);
					}
			
			#Form_OrderForm_BankAccountType { 
			font-family: 'myriad pro',calibri,verdana; 
			font-size: 13px; 
			margin-top: 4px; }
					
			#Form_OrderForm_BankAccountType option { 
			font-family: 'myriad pro',calibri,verdana; 
			font-size: 13px; }
	 
			
            #Form_ContactForm_action_ContactFormSender,#Form_SupportForm_action_SupportFormSender{
                width: 252px;
                height: 47px;
                border: 0px none;
                background: transparent url(./../images/verzenden.png) no-repeat;
                text-indent: -9999px;
                margin-right: -9px;
                cursor: pointer;
            }
            #Form_ContactForm_action_ContactFormSender {
    			background: url("./../images/verzenden.png") no-repeat scroll 0 0 transparent;
			    border: 0 none;
			    cursor: pointer;
			    height: 47px;
			    margin-right: -9px;
			    text-indent: -9999px;
			    width: 252px;
				}

            #Form_OrderForm_action_toStartFree {
                width: 252px;
                height: 47px;
                border: 0px none;
                background: transparent url(./../images/verzenden.png) no-repeat;
                text-indent: -9999px;
                margin-right: -9px;
                cursor: pointer;
            }

				#Form_SupportForm_action_SupportFormSender:hover {
					background-image: url(./../images/verzenden-grijs.png);
					}
	 

#Form_TellAFriendForm input.text {
    width: 136px;
    border: 2px inset #cccccc;
    margin-bottom: 5px;
}
#Form_TellAFriendForm_action_tellAFriendMailer {
    width: 153px;
    height: 34px;
    border: 0px none;
    background: transparent url(./../images/stuurdoor.png) no-repeat;
    text-indent: -9999px;
    margin-right: -9px;
    cursor: pointer;
}

	#Form_TellAFriendForm_action_tellAFriendMailer:hover {
		background-image: url(./../images/stuurdoor-blauw.png);
		    width: 153px;
			height: 34px;
			border: 0px none; 
			text-indent: -9999px;
			margin-right: -9px;
			cursor: pointer;
		}
		
	
	 

form .error{
    background: #ab3fba;
}