/*

  GENERAL INFO
  Site:       http://
  Version:    2009.04
  Author:     Amsterdam Hotsprings
  Email:      webmaster@amsterdamhotsprings.com
  Website:    www.amsterdamhotsprings.com

  INDEX
  1. reset
  2. general
  3. text markup
     3.1 headings
	 3.2 text elements
	 3.3 lists
	 3.4 table
	 3.5 misc classes
  4. forms
  5. alignment
     5.1 general
	 5.2 images
	 5.3 floats
	 5.4 columns
  6. layout
     6.1 general
	 6.2 header
	 6.3 navigation
	     6.3.1 main-navigation
		 6.3.2 sub-navigation
	 6.4 body
	     6.4.1 main content
		 6.4.2 DLSidebar
	 6.5 footer
	 6.6 bottom
  7. thumbnails
  8. box
  9. separators
  10. misc overriding classes
  
  NOTES
  
  SHORTHANDS
  ********************************************************************
  background: color image repeat position attachment;
  background: #fff url(image.png)no-repeat 20px 100px fixed;
  background: red url(image.png) repeat top left scroll;
  
  font: style variant weight size line-height family;
  font: italic small-caps bold 1.2em/1.5em Arial, Georgia, "Times New Roman"
  
  border: width style color;
  border: 1px solid #0000;
  
  margin: 10px;               *** een marge van 10px rondom ***
  margin: 5px 10px;           *** 5px marge voor de top en bottom en 10px marge voor links en rechts ***
  margin: 10px 20px 30px      *** 10px marge top, 20px marge links en rechts, 30px marge bottom ***
  margin: 5px 10px 15px 20px  *** 5px marge top, 10px marge rechts, 15px marge bottom, 20px marge links ***
  
  outline: width style color;
  outline: 5px dotted #foo;
  
  list-style: type position image;
  liste-style: disc outside none;

*/

/*********************************************************************
* 1. reset                                                         *
*********************************************************************/

  html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td  {margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
  table {border-collapse: collapse; border-spacing: 0;}
  caption, th, td {text-align: left; font-weight: normal;}
  table, td, th {vertical-align: middle;}
  blockquote:before, blockquote:after, q:before, q:after {content: "";}
  blockquote, q {quotes: "" "";}
  a img {border: none;}
  :focus {outline: 0; }

/*********************************************************************
* 2. general                                                         *
*********************************************************************/

  * {
    margin: 0;
    padding: 0;
  }
 
  html {
    padding-bottom: 1px; /* force scrollbars */
  }

  body {
    background: url(../images/pageparts/bg-basis-1px.jpg);
  }
  
  #DLVerloopBg{
	  background: url(../images/pageparts/bg-verloop.jpg);
	  height: 550px;
	  left:0;
	  top:0;
	  position: absolute;
	  width:100%;
  }
  
/*********************************************************************
* 3. text markup                                                     *
*********************************************************************/

/**********************************
* 3.1 headings                    *
**********************************/

  h1, h2, h3, h4, h5, h6 {
    color: #000;
	font-weight: normal;
	font-size: 1em;
  }
  
  h1{font-size: 1.1em; font-weight: bold;}
  
  h1 span{color: #000; margin-left: 7px;}

  h3, h4, h5, h6 { color: #000; }
  
  h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }
  
/**********************************
* 3.2 text elements               *
**********************************/

  p { margin-bottom: 20px;}
 
  a:focus, a:hover{ text-decoration: underline; }
  
  a {
    color: #E20072;
	text-decoration: none;
  }

  abbr, acronym {border-bottom: 1px dotted #666;}
  address {margin-bottom: 1.5em;}
  blockquote {margin: 1.2em; line-height: 1.4em;}

  blockquote span {font-size: 1.4em; color: #000;}
  del {color:#666;}
  em, dfn, blockquote, address {font-style: italic;}
  strong, dfn {font-weight: bold;}
  sup, sub {line-height: 0;}
  cite {color: #666;}

  pre {
    margin: 1.5em 0;
    white-space: pre;
  }

  pre,code,tt {
    font: 1em monospace;
    line-height: 1.5;
  }

/**********************************
* 3.3 lists                       *
**********************************/

  li ul, li ol {margin-left: 1.5em;}
  ul, ol {margin: 0 1.5em 1.5em 1.5em;}

  ul { margin-left: 25px; margin-top: 10px; list-style-image: url(../images/pageparts/bullit.gif);}
  ol {margin-left: 30px;}

  dl {margin: 0 0 1.5em 0;}
  dl dt {font-weight: bold;}
  dd {margin-left: 1.5em;}

/**********************************
* 3.4 tables                      *
**********************************/

  table {margin-bottom: 1.4em; width: 100%;}
  th {font-weight: bold;}
  thead th {background: #C3D9FF;}
  th,td,caption {padding: 4px 10px 4px 5px;}
  tr.even td {background: #F2F6FA;}
  tfoot {font-style: italic;}
  caption {background: #EEE;}

  table.data-table {
    border: 1px solid #EEE;
    margin-bottom: 2em;
    width: 100%;
  }
  
  table.data-table th {
    background: #EEE;
    border: 1px solid #DDD;
    color: #555;
    text-align: left;
  }
  
  table.data-table tr {border-bottom: 1px solid #EEE;}
  table.data-table td, table th {padding: 8px 10px;}
  table.data-table td {
    background: #F6F6F6;
    border: 1px solid #E6E6E6;
  }

  table.data-table tr.even td {background: #FCFCFC;}

/**********************************
* 3.5 misc classes                *
**********************************/

  .small {font-size: 0.9em;}
  .smaller {font-size: 0.8em;}
  .smallest {font-size: 0.7em;}

  .large {font-size: 1.1em;}
  .larger {font-size: 1.2em;}
  .largest {font-size: 1.3em;}

  .hidden {display: none;}

  .quiet {color: #666;}
  .loud {color: #000;}
  .highlight {background: #FF0;}

  .text-left {text-align: left;}
  .text-right {text-align: right;}
  .text-center {text-align: center;}

  .error, .notice, .success {
    border: 1px solid #DDD;
    margin-bottom: 1em;
    padding: 0.6em 0.8em;
  }

  .error {background: #FBE3E4; color: #8A1F11; border-color: #FBC2C4;}
  .error a {color: #8A1F11;}

  .notice {background: #FFF6BF; color: #514721; border-color: #FFD324;}
  .notice a {color: #514721;}

  .success {background: #E6EFC2; color: #264409; border-color: #C6D880;}
  .success a {color: #264409;}

  div.more {padding-top: 6px;}
  .more a, a.more {color: #666;}
  .more a:hover, a.more:hover {color: #002;}

/*********************************************************************
* 4. forms                                                           *
*********************************************************************/

  fieldset { border: 1px solid #b4d82b; padding: 4px 8px 10px 10px;}
  legend {display: table-row;
  width: 100%;
  margin: 0 -17px 0 -11px;
  background-color: #b4d82b;
  padding: 0 10px 0 10px;
  color: #fff;
  font-weight: bold;
}

label { position: absolute; width:190px; }
input { margin-left: 200px; margin-bottom: 3px; width: 200px; }
textarea { margin-left: 200px; margin-bottom: 3px; width: 202px; }
input.checkbox { margin-left: 200px; margin-bottom: 3px; width: 15px; }

input.optIn{ width: 15px; margin: 0; }
label.optIn{ width: 400px; margin-left: 5px; margin-top:-3px; }
input.optIn2{ width: 100px; margin: 0; }

input.postcodeCheck{ width: 70px; margin: 0; }

.extraInfo{ margin-left: 200px; }

input.submit, .postcodeButton{
  background-image: url(../images/submit-button.gif);
  width: 103px;
  height: 21px;
  border: 1px solid #ccc;
  color: #fff;
  border: 0px;
}

input.submit{
  margin-left: 300px;
}
.postcodeButton{
  margin: 0px;
}
  
  input.letter-vergroten-button{
  width: 39px;
  height: 27px;
  background-image: url(../images/pageparts/letter-vergroten.jpg);
  border: 0;
  margin: 0px;
}

input.letter-herstellen-button{
  width: 53px;
  height: 27px;
  background-image: url(../images/pageparts/letter-herstellen.jpg);
  border: 0;
  margin: 0px;
}

input.letter-verkleinen-button{
  width: 39px;
  height: 27px;
  background-image: url(../images/pageparts/letter-verkleinen.jpg);
  border: 0;
  margin: 0px;
}


/*********************************************************************
* 5. alignment                                                       *
*********************************************************************/

/**********************************
* 5.1 general                     *
**********************************/

  .center,.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

/**********************************
* 5.2 images                      *
**********************************/

  img.bordered,img.alignleft,img.alignright,img.aligncenter {
    background-color: #FFF;
    padding: 3px;
  }

  img.alignleft, img.left {margin: 0 1.5em 1em 0;}
  img.alignright, img.right {margin: 0 0 1em 1.5em;}

/**********************************
* 5.3 floats                      *
**********************************/

  .left,.alignleft {float: left; margin-right: 20px;}
  .right,.alignright {float: right;}

  .clear,.clearer {clear: both;}
  .clearer {
    display: block;
    font-size: 0;
    line-height: 0;	
  }

/**********************************
* 5.4 columns                     *
**********************************/

  .col2 {width: 47%;}


/*********************************************************************
* 6. lay-out                                                         *
*********************************************************************/

/**********************************
* 6.1 general                      *
**********************************/

  #DLMainContain {
  position: absolute;
  width: 950px;
  margin-left: -484px;
  left: 50%;
  padding: 0 9px 0 9px;
  background: url(../images/pageparts/content-achtergrond.png) repeat-y;
  }
  
/**********************************
* 6.2 header                      *
**********************************/

  #DLHeaderContain { background: url(../images/pageparts/kopbalk-sensia.jpg) no-repeat top left;}

  #DLHeader{
    width:950px;
    height:168px;
  }
  
  #DLLogo{ position: absolute; top: 15px; right: 25px; height: 45px; width: 253px;}
  #DLSiteTitle a{}
  #DLSiteTitle, #DLSiteTitle a{       
    padding: 47px 0 0 250px;
  }
  
  .DLTitle{	font: normal  24px "Arial Black";
    color: #99cc33;
}
  
  #DLSiteSlogan{}

/**********************************
* 6.3 navigation                  *
**********************************/

  ul.tabbed {
    display: inline;
    margin: 0;
    padding: 0;
  }

  ul.tabbed li {
    float: left;
    list-style: none;
  }

  ul.tabbed a {text-decoration: none;}

/**********************************
* 6.3.1 main-navigation           *
**********************************/
  #DLNavigationContain { position: absolute; left: 260px; width: 675px;}
  #DLNavigation {padding: 0;}

  #DLNavigation a {
    color: #a3d42b;
    display: block;
    font-weight: normal;
    font-size: 1.5em;
	text-align: center;
	text-decoration: none;
	margin-right: 5px;
  }
  #DLNavigation a:hover { color: #de1827;}
  #DLNavigation .current_page_item {color: #D0D0D0;}

/**********************************
* 6.3.2 sub-navigation            *
**********************************/

  #DLSubnavContain { position: absolute; top: 150px; padding: 0 0 0 252px; width: 675px; color: #a3d42b;
    font-size: 1.5em;}
  #DLSubnavContain2 {background: url(../images/pageparts/content-wrapper.gif) repeat-y center top;}

  #DLSubnav a {
    color: #a3d42b;
    padding: 0 0 0 0;
	text-decoration: none;
  }
  #DLSubnav a:hover {color: #de1827;}
  #DLSubnav .current_page_item {color: #de1827;}

/**********************************
* 6.4 body                        *
**********************************/

  #DLBodyContentContain{ padding-top: 10px; font-size: 1.5em;}
  .DLBodyContent#DLBodyContentTwoColumns {background: url(../images/pageparts/content-two-columns.gif) repeat-y right top;}

/**********************************
* 6.4.1 main content              *
**********************************/

  #DLContentContain {
    float: right;
    width: 675px;
	padding: 0 0 0 0px;
	margin: 0 25px 0 0;
  }
  #DLContent {padding: 30px 0 0 0; width: 450px; float: left; }

  #DLContent .text-separator{
    color: #AAA;
    padding: 0 0px;
  }

/**********************************
* 6.4.2 DLSidebar left              *
**********************************/

  #DLSidebarContainLeft {
    float: left;
    padding: 5px;
    width: 232px;
	color: #838383;
  }
  
          #DLChangeSize{
	      position: relative;
	      top: 30px;
		  left: 9px;
          padding: 10px;
          width: 215px;
          border-left: solid 1px #838383;
          border-top: solid 1px #838383;
          border-bottom: solid 1px #838383;
          z-index:2
        }
  
          #DLChangeSize2{
          position: relative;
          padding: 10px;
          top: 30px;
		  left: 9px;
          border: solid 1px #838383;
          z-index:2;
		  font-size: 16px;
          width: 192px;
        }
		
		#DLNews{
          position: relative;
          padding: 10px;
		  color: #000;
		  top: 50px;
          left:9px;
          width: 192px;
          border: 1px solid #a4d32b;
          z-index:2;
        }

        #DLPoetry {
          position: relative;
          padding: 0 35px 0 35px;
          top: 105px;
		  left: 9px;
        }



/**********************************
* 6.4.3 DLImage		              *
**********************************/

  #DLImage {
    float: right; padding: 30px 0 0 0;
  }

/**********************************
* 6.6 footer                      *
**********************************/

  #DLFooterContain {
    position: relative;
	font-size: 1.4em;
	left: -9px;
	padding-top: 20px;
	padding-bottom: 20px;
	top: 32px;
	width: 968px;
	background: url(../images/pageparts/footer-achtergrond.png) no-repeat center bottom;
	color: #999999;
  }
  #DLFooter {
  text-align: center;
  }
  #DLFooter a {
    color: #999999;
    text-decoration: none;
  }
  #DLFooter a:hover {color: #999999; text-decoration: underline;}


/*********************************************************************
* 10. misc overriding classes                                        *
*********************************************************************/

/**********************************
* 10.1 borders                    *
**********************************/

.noborder {border: 0;}
.notborder {border-top: 0;}
.norborder {border-right: 0;}
.nobborder {border-bottom: 0;}
.nolborder {border-left: 0;}

/**********************************
* 10.2 margins                    *
**********************************/

.nomargin {margin: 0;}
.notmargin {margin-top: 0;}
.normargin {margin-right: 0;}
.nobmargin {margin-bottom: 0;}
.nolmargin {margin-left: 0;}

/**********************************
* 10.3 paddings                   *
**********************************/

.nopadding {padding: 0;}
.notpadding {padding-top: 0;}
.norpadding {padding-right: 0;}
.nobpadding {padding-bottom: 0;}
.nolpadding {padding-left: 0;}


.DLKlik{
color: #de1827;
font-size: 22px;
text-decoration: underline;
padding: 7px;
}

.DLChangeInfo{
padding-left: 10px; }

.DLChangeInfo2{
padding-left: 65px;}

#aankeilers{
width: 710px;
}

.DLAankeiler {
 	position: relative;
	z-index: 1;
	float:left;
	margin-right: 17px;
	margin-top: 19px;
	width:216px; 
	background-repeat:no-repeat;
	border: solid 1px #a4d32b;

}

.AankeilerPicture {
  width: 216px;
  height: 90px;
}

.DLAankeilerText{
padding: 20px;
text-indent: -0.3em;
}

.errorMsg{
width: 450px;
background-color: #e13130;
color: #fff;
padding: 5px;
}

a img{
  border: 0;
}

img.downloads{
margin-right: 10px; }