/* Stylesheet voor ccontheroad.nl - door Geert van der Heide, (c) 2005 */

html, body {
  margin: 0px;
  padding: 0px;
  text-align: center;
  background: #959595 url(images/bg.jpg) repeat-x fixed top;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}


/* Stijlen: Lay-out -------------------------------------------------------- */

#container { /* Het hoofdvak */
  margin: 20px auto;
  padding: 0px;
  width: 775px;
  min-height: 527px;
  background-color: #FFFFFF;
  text-align: left;
  border: 1px solid #BBBBBB;
  border-bottom: 0px;
}

#main { /* Het deel waar de tekst en het menu staan */
  width: 100%;
  padding: 0px;
  margin: 0px;
  background: #FFFFFF url(images/bg_main.gif) repeat-y right;
}

#left {
	width: 130px;
  float: left;
}

#info_box { /* De informatie-box in de rechter bovenhoek van het scherm */
  width: 172px;
  float: right;
  border-top: 0px;
  border-left: 2px dotted #0038B7;
  border-bottom: 2px dotted #0038B7;
  border-right: 0px;
  margin: 15px 15px 5px 15px;
  padding: 0px 0px 5px 5px;
  display: inline;
}

#photo-box { /* De box met de 3 foto's erin (rechts in beeld) */
  float: left;
  width: 190px;
  margin: 5px 0px 0px 0px;
  padding: 0px 6px 15px 0px;
  display: inline;
  background-color: #DBE6FF;
}

#content { /* De hoofdtekst van de website */
  width: 410px;
  padding: 0px 19px 20px 20px;
  float: left;
}

#logo { /* Het logo */
  width: 306px;
  height: 77px;
  float: left;
  margin: 15px;
  display: inline;
}

#box { /* De textbox onder het menu */
  width: 110px;
  margin: 10px;
  padding: 0px;
  background-color: #DBE6FF;
}


/* Stijlen: Menu ----------------------------------------------------------- */

#menu { /* Het menu */
  width: 110px;
  height: 165px;
  margin: 10px;
  padding: 0px;
  font-size: 12px;
}

a.menu-item { /* De menu-items */
  display: block;
  margin: 0px;
  padding: 7px;
  border-style: solid;
  border: 0px;
  border-right: 4px solid #0038B7;
  color: #666666;
  text-align: right;
  font-weight: bold;
  text-decoration: none;
}

a.menu-item:hover, a#aanbod:hover { /* De menu-items (on mouseover) */
  border-right: 4px solid #EEE600;
  color: #0038B7;
  background-color: #EDF3FE;
}

a#aanbod {
	background: #fffb93;
	color: #0038B7;
}


/* Stijlen: Footer --------------------------------------------------------- */

#footer { /* de footer */
  margin: 0px;
  padding: 0px;
  width: 775px;
  height: 26px;
  background-color: #19206C;
  float: left;
}

#footer p { /* de footer-tekst */
  float: right;
  margin: 6px;
  padding: 0px;
  font-size: 11px;
  text-align: right;
  text-decoration: none;
  color: #FFFFFF;
}

#footer a { /* de link naar geertvdheide.nl in de footer */
  text-decoration: underline;
  color: #EEE600;
}

#footer a img { /* Het log-in-knopje */
  margin: 4px;
  padding: 0px;
  float: left;
  border: 0px;
}


/* Stijlen: Tekst en content ----------------------------------------------- */

.page-title { /* De titels voor de hoofdtekst */
  margin: 0px;
  padding: 0px 0px 10px 0px;
}

.kop { /* De kleinere koppen in de hoofdtekst */
  margin: 8px 0px 5px 0px;
  padding: 0px;
  font-size: 14px;
  font-weight: bold;
  line-height: 100%;
  color: #002F9A;
  border-bottom: 1px solid #DDDDDD;
}

.kop2 { /* Nog kleinere koppen */
  font-size: 12px;
  font-weight: bold;
  line-height: 100%;
  color: #002F9A;
  margin: 0px 0px 10px 0px;
  padding: 0px;
}

p { /* Paragraven in de hoofdtekst */
  margin: 0px 0px 20px 0px;
  padding: 0px;
  line-height: 135%;
  font-size: 12px;
}

ul { /* Lijsten in de hofdtekst */
  list-style-image: url(images/bullet.gif);
  font-size: 12px;
  margin: 0px 0px 20px 10px;
  padding: 0px;
}

li { /* Lijst-items in de hoofdtekst */
  margin: 14px 10px;
  padding: 0px;
}

img {
  border: 0px;
}

a { /* Algemene stijl voor links */
  color: #0038B7;
  text-decoration: underline;
}

a:hover { /* Algemene stijl voor links (on mouseover) */
  color: #3A6EE4;
}

#box p { /* De tekst in de textbox onder het menu */
  margin: 0px;
  padding: 4px 5px;
  font-size: 10px;
  color: #002B8C;
}

#box div { /* De titels in de textbox onder het menu */
  font-weight: bold;
  padding: 5px;
  font-size: 11px;
  color: #002B8C;
}

#info_box p { /* De tekst in de informatiie-box in de rechter bovenhoek van het scherm */
  padding: 0px;
  margin: 0px;
  color: #002F9A;
  line-height: 140%;
  font-size: 10px;
  font-weight: bold;
}

#photo-box img { /* De foto's in de foto-box */
  margin: 0px;
  padding: 0px;
}


/* Stijlen: Tabellen ------------------------------------------------------- */

.data { /* Tabellen waar data inzit */
  background-color: #EDF3FE;
  border: 1px solid #0038B7;
}

.data td { /* Tabelcellen voor data-tabellen */
  padding: 8px;
  font-size: 11px;
}

.data .table-header td { /* Tabelheaders voor data-tabellen */
  background-color: #A6BCEE;
  font-weight: bold;
  padding: 4px 8px;
}

.data .light td { /* Zorgt voor het zebra-effect in de data-tabellen */
  background-color: #FFFFFF;
}


/* Stijlen: Formulieren ---------------------------------------------------- */

form { /* Algemene stijl voor formulieren */
  margin: 0px;
  padding: 0px;
}

label { /* Algemene stijl voor labels */
  margin: 0px;
  padding: 0px;
  font-weight: bold;
  color: #0038B7;
  line-height: 1.5em;
  font-size: 11px;
}

input, textarea { /* Algemene stijl voor formulier-elementen */
  margin: 0px 0px 10px 0px;
  padding: 2px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

select {
  margin: 0px 0px 10px 0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

#login { /* Stijlen voor het log-in formulier */
  width: 149px;
  margin: 10px 100px;
  padding: 0px 10px;
  border-left: 2px dotted #0038B7;
  border-right: 2px dotted #0038B7;
}

.knop { /* de knoppen in de formulieren */
  margin: 0px 0px 0px 5px;
  padding: 3px;
  background-color: #EDF3FF;
  border: 1px solid #0038B7;
  color: #0038B7;
  font-size: 12px;
  text-decoration: none;
  cursor: hand;
}

a.a_knop { /* Links die op knoppen moeten lijken */
  margin: 0px 0px 0px 5px;
  padding: 4px 10px 4px 10px;
  background-color: #EDF3FF;
  border: 1px solid #0038B7;
  color: #0038B7;
  font-size: 12px;
  text-decoration: none;
  line-height: 100%;
}

a.a_knop:hover {
  color: #0038B7;
}

.a_knop_klein { /* Kleine knoppen */
  margin: 0px;
  padding: 2px;
  background-color: #EDF3FF;
  border: 1px solid #0038B7;
  color: #0038B7;
  font-size: 10px;
  text-decoration: none;
}


/* Stijlen: Welkom-pagina -------------------------------------------------- */

.nieuws {
  width: 150px;
  background-color: #DBE6FF;
  padding: 5px;
  margin: 3px;
  color: #002B8C;
  float: right;
}

.nieuws ul {
  margin: 0px;
  padding: 0px;
}

.nieuws li {
  margin: 8px 0px 0px 17px;
  padding: 0px;
  font-size: 11px;
}


/* Stijlen: Contact-pagina ------------------------------------------------- */

.contact_info { /* de contactinformatie op de contact-pagina */
  background-color: #DBE6FF;
  border: 0px;
  margin: 10px 10px 20px 10px;
  font-size: 11px;
}

.contact_info_td { /* idem */
  margin: 0px;
  padding: 5px;
  vertical-align: top;
  color: #002B8C;
}

.contact_info_td div { /* idem */
  margin: 0px 0px 10px 0px;
  color: #002B8C;
  font-weight: bold;
}

.error {
  color: #DD0000;
  font-weight: bold;
}


/* Stijlen: Aanbod-pagina -------------------------------------------------- */

.aanbod_foto { /* De fotootjes in de lijst van aangeboden campers */
  float: left;
  border: 1px solid #0038B7;
}

.aanbod_categorie { /* de categorie-aanduiding in de lijst van aangeboden campers */
  margin: 10px 0px 0px 0px;
  padding: 0px;
  color: #666666;
}


/* Stijlen: Details-pagina ------------------------------------------------- */

.details h1 { /* Blauwe titels op de detail-pagina's */
  margin: 0px 0px 3px 0px;
  padding: 0px;
  font-weight: bold;
  color: #0038B7;
  font-size: 12px;
}

.details td {
  margin: 0px;
  padding: 5px;
}

.details div {
  margin: 0px;
  padding: 0px;
  font-size: 12px;
  line-height: 130%;
}

.details .omlijnd {
  border: 1px solid #DBE6FF;
}


/* Stijlen: Verhuur-pagina ------------------------------------------------- */

.verhuurtabel {
  background-color: #DBE6FF;
  border: 1px solid #002B8C;
  font-size: 12px;
  margin: 15px 10px;
}

.verhuurtabel td {
  padding: 3px;
}

td.verhuurtabel_header {
  background-color: #A6BCEE;
  font-weight: bold;
  color: #002B8C;
}


/* Stijlen: Info-pagina ---------------------------------------------------- */

.box_adres {
  width: 270px;
  margin: 20px 50px;
  padding: 5px;
  background-color: #DBE6FF;
}

.box_adres p {
  margin: 0px 0px 5px 0px;
  padding: 0px;
  line-height: 135%;
  font-size: 12px;
  color: #002B8C;
}


/* Stijlen: Overig --------------------------------------------------------- */

.clearing {
  clear: both;
  line-height: 0px;
}

#rdw { /* De link naar de RDW en naar Auto Jansma */
  float: right;
  clear: none;
  width: 210px;
  margin: 10px 0px 0px 0px;
}

.float_right {
  float: right;
}

.strong {
  font-weight: bold;
}

@media all { /* Een oplossing voor een foutje in Internet Explorer */
* html a.menu-item {height: 1em;}
}