html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

body {
	margin: 0 0 0px 0;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	background-color: #eaf8fd;
	font-size: 13px;
	line-height: 15px;
	
}

#outer {
	 width: 756px;
	 background: #FFF;
	 border: 2px solid #bfe1ec;
	 margin: 20px auto 4px auto;
	 padding: 12px 18px 22px 18px;
	 text-align:left;	 
	 overflow: hidden;
}

#header {
	height: 40px;
	border-bottom: 1px solid #ECECEC;
}

h1 {
	font-size: 28px;
	color: #4B911C;
	line-height: 140%;
	font-weight: normal;
	padding: 0;
	margin: 0 0 3px 0;
	
	float: left;
	
}

#rm-logo {
	float: right;	
}

#footer-content
{
	width:800px;
	margin: 0px auto 0px auto;
	padding: 0 0 15px 0;

}

#footer-content  p#copyright{
	padding: 0;
	margin: 2px 0 2px 0;
	color: #0489b6;
	font-size: 11px;
	line-height: 15px;	
}


/* STAPPEN */

#steps-buttons {
	width: 690px;
	height: 35px;
	margin: 25px auto 20px auto;	
}

.steps-button {
	padding: 7px 15px 7px 10px;
	height: 20px;
	float: left;
	font-size: 15px;
}

.steps-button span {
	font-size: 18px;
	color: #CB3A1D;
	padding: 0px 5px 0px 5px;
}

.steps-button-active {
	background: #E6F3F9;
	color: #252A2E;
	font-weight: bold;
}

.steps-button-active span {
	font-weight: normal;
}


/* EXTRA OPMAAK */ 

a { color: #0489B7; background: transparent; text-decoration: none; }
a:hover { color: #000; background: transparent; text-decoration: none; }

h2 {
	font-size:14px;
	font-weight: normal;
	color: #4B911C; 
	text-transform: uppercase;
	padding: 0;
	margin: 20px 0 5px 0;
}

h2.underline {
	padding: 0 0 5px;
	border-bottom: 1px solid #ECECEC;
	margin: 20px 0 8px 0;
	
}

h2.big {
	font-size: 20px;
	color: #42484c;	
	border-bottom: 1px solid #ECECEC;
	text-transform: none;
	line-height: 30px;
	margin: 0 0 8px 0;
	padding: 0 0 0 0;	
}
h2.big2 {
	font-size: 20px;
	color: #42484c;	
	border-bottom: 1px solid #ECECEC;
	text-transform: none;
	line-height: 30px;
	padding: 0 0 0 0;	
}

h3 {
	padding: 0;
	margin: 2px 0px 4px 0px;
	font-size: 12px;
	color: #4B5053;
	background: transparent;
	font-weight: bold;
}

p {
	padding: 0 0 0 0;
	margin: 5px 0 5px 0;		
}

p.big-line-height { line-height: 20px; }

.box {
	background: #f8f8f8;
	border: 1px solid #e0e0e0;
	padding: 12px 15px;
	margin: 15px 0 0 0;
	line-height: 22px;	
}

.box-smalltopmargin { margin-top: 8px; }

p.error{
	margin: 15px 0 15px 0;
	padding: 10px;
	color: #0693D4;
	border: 1px solid #0693D4;
	font-size: 13px;
	background: #eaf8fd;
	font-weight: bold;
}

input.submit-simple{
	background: transparent;
	border:0; 
	cursor: pointer;
	color: #0489B7;
}

input.submit-simple:hover{
	color: #000;
}

input.gaverder-button {
	padding: 0px 10px 0px 100px; 
    margin: 0px auto;	
    
    display: block;
    
    height: 35px;
 
 	background-color: #0488b8;
    background-image: url('/templates/portal/img/album-bestellen/album-bestellen-button-bg.jpg');
    background-repeat: no-repeat;
    background-position: 0 1px;
    border: 2px solid #ccdee8;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    
    cursor: pointer;
}


input.afronden-button {
	
    background-image: url('/templates/portal/img/album-bestellen/album-afronden-button-bg.jpg');
    padding: 0px 10px 0px 160px;
    cursor: pointer;
}


input.submit-terug {
	padding: 0px 10px 0px 10px; 
    margin: 0px auto;	
    
    display: block;
    
    height: 35px;
 
 	background-color: #0488b8;
  
    background-repeat: no-repeat;
    background-position: 0 1px;
    border: 2px solid #ccdee8;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    
    cursor: pointer;
}





/* UITLEG PAGINA */

#uitleg-submit-block { width: 750px; margin: 30px auto 30px auto; }

#uitleg-submit-block{*margin-top:10px;}

#uitleg-submit-block .box { margin-top: 8px; padding-bottom: 13px; overflow: hidden; }

#uitleg-input-field { float: left; }
#uitleg-input-field2 { float: left;  margin: 5px 0 0 5px; }

#uitleg-input-field span { line-height: 30px; padding: 0 0 10px 0; }



#uitleg-submit-image1a {
	padding: 0px 0px 0px 95px; 

    margin: 0px auto;	
    float: right;
    
    display: block;
    width: 280px;
    height: 35px;
    background-image: url('/templates/portal/img/album-bestellen/album-bestellen-button-1b.jpg');
    border: 0;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

#uitlegtekst {
	display: block;
	width: 320px; 
	float: left;
	margin: 0;
	text-align: center;
}

#uitlegtekst2 {
	display: block;
	width: 320px; 
	float: left;
	margin: 8px 0 0 0;
	text-align: center;
	clear: both;
}

#uitlegtekst2 span{
	font-size: 20px;	
}


.uitleg-block-left, .uitleg-block-right {
	display: block; 
	width: 365px; 
	float: left; 
	margin: 5px 0 0px 5px;
	padding: 0 0 22px 0;
	/*background: yellow;*/
	font-size: 12px;	
}

.uitleg-block-right { margin: 5px 0 0 20px; }

.uitleg-block-left h2, .uitleg-block-right h2 { margin: 0 0 0 70px; }

.uitleg-block-left p, .uitleg-block-right p {
	margin: 0 0 0 70px;	
	line-height: 19px;
	padding: 5px 0 3px 0;
}

.uitleg-line {
	margin: 3px 0 0 0 ;
	border-bottom: 1px solid #ececec;
}

#uitleg-testimonal-block {
	width: 364px;
	height: 41px; 
	margin: 23px auto 22px auto;
	background: #f8f8f8;
	border: 1px solid #e0e0e0;
	padding: 7px 7px;
	font-size: 12px;
}

#uitleg-testimonal-block img { border: 2px solid #c9c9c9; }

#uitleg-testimonal-block p { margin: 0px 0 0 50px; padding: 12px 0 0 0; }

#bezorgdmet {
	width: 50%;
	float: left;
	text-align: center;
	font-size: 11px;
	margin: 15px 0 0 0;
}

#betaalmet {
	width: 50%;
	float: right;
	text-align: center;
	font-size: 11px;
	margin: 15px 0 0 0;
}

span#anderalbum{
	margin-left: 80px;
	color: #999;
	font-size: 12px;
}

/* VOORBEELD PAGINA */

#voorbeeld-link-block {
	width: 250px;
	height: 32px; 
	margin: 23px auto 23px auto;
	background: #f8f8f8;
	border: 1px solid #e0e0e0;
	padding: 8px 8px;
	font-size: 12px;
}

#voorbeeld-link-block a { margin: 0px 0 0 34px; padding: 8px 0 0 0; font-size: 18px; display: block; }

table.details { 
	width: 100%; 
	border: 1px solid #c5c5c5;
	padding: 1px;
	background: #FFF;
}	
	
#voorbeeldsubmits { 
	text-align: center; 
	width: 480px;
	margin: 8px auto 0 auto; 
}

#voorbeeldsubmits-left { 
	float: left;
	padding: 10px 5px 0 0;
}


#loginbox{
	text-align: left;
	margin: 10px 20px;
}


/* GEGEVENS INVULLEN PAGINA */

#detailssubmits { 
	text-align: center; 
	width: 333px;
	margin: 8px auto 0 auto; 
}

#detailssubmits-left { 
	float: left;
	padding: 10px 5px 0 0;
}

form.form #submit-details-image {
    padding: 0px 0px 0px 0px;
}



/* BESTELLEN PAGINA */

#betaalsubmits { 
	text-align: center; 
	margin: 8px auto 0 auto; 
}

.betaalmethoden label{
	font-weight: bold;
	
	display: block;
}

.betaalmethoden #ideal{
	
}

.betaalmethoden small{
	margin: 0 0 0 -10px;
}


/* GENEREREN PAGINA */

#generate_box{
	margin: 40px auto 30px auto; 
	border: 1px solid #ECECEC; 
	padding: 10px; 
	width: 300px; 
	height: 39px;
}

#generate_box h2{
	font-size: 20px;	
	color: #42484c; 
	text-transform: none; 
	padding: 0px 0px 0px 48px; 
	line-height: 20px; 
	margin: 9px 0 0 0;
}

#generate_box img{
	float: left;
}


/* TABLE */
table.data {
	width: 100%; 
	border: 1px solid #c5c5c5;
	padding: 1px;
	background: #FFF;
	margin: 5px 0 0 0px;
}

table tr.even {
	background-color: #fff;
}

table tr.odd {
	background-color: #eaf8fd;
}

table td {
	padding: 6px;
	font-size: 12px;
	line-height: 15px;
}



/* FORM ELEMENTS */

form.form {
	margin: 0;
	padding: 0;

	text-align: left;
	width: 100%;
}

.formdivider {
	margin: 9px 0 0 0 ;
}

form.form fieldset {
	/* background: #f6f5f2; */
	margin: 0px 0 0px 0;
	border: 0px;
	position: relative;
	padding: 0px 0px 0px;
}


form.form fieldset span.first {

	display: block;
	height: 10px;
	line-height: 1px;
	font-size: 1px;
	
}

form.form fieldset label {
	width: 120px;
	text-align: right;	
}

form.form p.first {
	margin-top: 10px;
}

form.form input.checkbox {
   float: left;
   margin-right: 8px;
}


form.form input.field {
	color: #565555;
	border: 1px solid #c9c9c9;
	padding: 4px 4px 4px 4px;
	margin: 2px 0 5px 0px;
	background: #fff;
	font-weight: normal;
	font-size: 110%;
}

form.form input.error {
	border: 1px solid #0693D4;
}

form.form select {
	padding: 0;
	margin: 2px;

	border: 1px solid #396cac;
}

form.form select {
	color: #565555;
	border: 1px solid #c9c9c9;
	padding: 3px 3px 3px 3px;
	margin: 2px 5px 5px 0px;
	background: #fff;
	font-weight: normal;
	font-size: 110%;
}

form.form input.submit {
    font-size: 16px; 
	background: #0489B7; 
	font-weight: normal; 
	color: #FFF; 
	padding: 4px 15px 6px 15px; 
	border:2px solid #CCDEE8;    
	display:block;
    margin:0px auto;	
}

form.form .submit-image {
    padding: 8px 0px 0px 0px; 
	display: block;
	margin: 0px auto;	
}

form.form textarea {
	border: 1px solid #396cac;
	padding: 0 3px 0 3px;
	margin: 2px;
}

form.form label {
	font-size: 13px;
	line-height: 15px;
	/* display: block; */
	/* width: 130px; */
	float: left;
	margin: 5px 20px 5px 0px;
}

form.form label.error {

	color: red;
	font-weight: bold;
}



/* fotoupgrade bank selectie */

form.fotoupgrade label {
	display: inline;
	width: auto;
	font-weight: bold;
	margin: 0 10px 0 0;
}


form.form label.bankoptie img {
	float: left;
}



/* fotoselect lightbox */

div.fotodiv{
	margin: 12px 2px 12px 2px;
	padding: 4px;
	float: left;
	
	text-align: center;
	position: relative;
	width: 100px;
	height:66px;
	background: #eee;
	overflow: hidden;
	
	border: 1px solid #999;
	
	cursor: move;
}

div.fotodiv img{
	border: 0;
	max-width: 100px;
	max-height:66px;
}

#fotosweltonenouter{
	width: 500px;
    height: 400px;
    overflow: auto;
    
    float: left;
    margin-right: 10px;
    padding: 0;
    
    
    border: 1px solid #999; 
}


#fotosweltonen {
    display: block;
    padding: 0 10px 0 16px;
   
   	min-height: 400px;
    
    background-image: url('/templates/portal/img/album-bestellen/fotoselectrowbg.gif');
    background-position: 0 0;
    background-repeat: repeat;
    background-attachment: scroll;
     
}

#fotosniettonen {
    display: block;
    padding: 10px 10px 10px 10px;
	float: left;
    margin-right: 0px;
    height: 380px;
    width: 360px;
    border: 1px solid #999; 
    overflow: auto;
   
}

#fotosniettonen div.fotodiv{
	margin: 2px 2px 2px 2px;
	opacity: 0.5 !important;
 	filter: alpha(opacity = 50) !important;
}

#fotosniettonen div.fotodiv:hover{
	margin: 2px 2px 2px 2px;
	opacity: 1 !important;
 	filter: alpha(opacity = 100) !important;
	
}

div.fotoselectpage h3{
	color: #0589b9;
	float: left;
}

div.fotoselectpage h1{
	font-size: 160%;
	margin-bottom: 0;
	float:none;
	
}

div.fotoselectpage p{
	margin: 0 0 10px 0;	
}

a.selectfotos{
	font-size: 11px !important;
	float: right;
}
