/* 

Sunita Reizen css
Copyright Michiel de Boer 2010 - www.mdbsite.com

*/

/* ALGEMENE OPMAAK 
__________________________________________________________________________________________________ */

@charset "utf-8";

* { /* Chrome (3.0) heeft additionele p {margin: 0;}  benoemingen nodig */
	padding: 0px;
	margin: 0px;
}
html {
	height: 100%;
	margin: 0px;
}
a:link,
a:visited {
	text-decoration: underline;
}
a:active,
a:hover {
	text-decoration: none;
}
a img {
	border: 0;
}
body {
	padding: 0px;
	margin: 0px;
	height: 100%;
	width: 100%;
	background: url(img/bg-boven.png) repeat-x top #578DD3;
	font: 12px/16px "Tahoma", "Geneva", sans-serif ;
}
#container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100%;
	background: url(img/bg-onder.png) repeat-x bottom;
}
#inhoud {
	position: relative;
	top: 0;
	margin: 0 auto; 
	text-align: left;
	width: 950px;
	min-height: 845px; /* moet ivm achtergrond fades!! */
}
#logo {
	width: 950px;
	height: 62px;
	background: url(img/sunita-reizen-12half-jaar.gif) no-repeat top;
} 
#logoprint {
	display:none !important;
} 
.bold {
	font-weight: bold;
}
.italic {
	font-style: italic;
	color: #262e6a;
}
hr { /* horizontale lijn, alle waardes zijn nodig voor cross-browser */
	height: 4px;
	border-width: 0;
	color: #ffe080;
	background: #ffe080;
	margin: 4px 0 12px 0;
}
.sgrlogo,
.calamiteitenlogo {
	margin-right: 10px;
}

/* MENU 
__________________________________________________________________________________________________ */

#menu {
	width: 950px; 
	height: 41px;
}
#menu a {
	color: #000000;
}
/* Witte achtergrond per onderwerp: */
#nepal a.nepal,
#tibet a.tibet,
#india a.india,
#bhutan a.bhutan,
#china a.china,
#mongolie a.mongolie,
#kirgizie a.kirgizie,
#oezbekistan a.oezbekistan,
#myanmar a.myanmar,
#vertrekgarantie a.vertrekgarantie,
#nieuws a.nieuws,
#contact a.contact {
	background: #ffffff;
}
#menucontentlinks {
	font: 15px/31px "Arial", "Helvetica", sans-serif;
	width: 622px; /* blijft 300px over voor rechter menu */
	height: 33px; /* 41 min border */
	float: left;
	background: #ffe080;
	border: 4px solid #ffe080;
}
#menucontentlinks div {
	float: left;
	height: 33px;
	border: 0 5px 0 5px;
	text-align: center;
}
#menucontentlinks div a {
	display: block;
	width: 100%;
}
#menucontentrechts {
	font: 15px/31px "Arial", "Helvetica", sans-serif;
	width: 300px;
	height: 33px; /* 41 min border */
	float: left;
	background: #ffe080;
	border: 4px solid #ffe080;
	text-align: right;
}
#menucontentlinks a,
#menucontentrechts a {
	text-decoration: none;
	display: inline-block;
	height: 100%;
}
#menucontentlinks a:hover,
#menucontentrechts a:hover {
	background: #ffffff;
}
#menurandlinks {
	background: url(img/menu-rand-links.png) no-repeat;
	width: 6px;
	height: 41px;
	float: left;
}
#menurandrechts {
	background: url(img/menu-rand-rechts.png) no-repeat;
	width: 6px;
	height: 41px;
	float: right;
}

/* INTRO FOTOS  (home foto staat onder home)
__________________________________________________________________________________________________ */

#landfoto {
	width: 950px; 
	height: 310px; /* 314 - 4 */
	background: url(img/landfoto-kader.png) no-repeat 0px 14px;
	text-indent: 4px;
	padding-top: 18px; 
}
#reissoortfoto {
	width: 950px; 
	height: 250px; /* 254 - 4 */
	background: url(img/reissoortfoto-kader.png) no-repeat 0px 14px;
	text-indent: 4px;
	padding-top: 18px; 
}
#onderwerpfoto {
	width: 950px; 
	height: 165px; /* 169 - 4 */
	background: url(img/onderwerpfoto-kader.png) no-repeat 0px 14px;
	text-indent: 4px;
	padding-top: 18px; 
}

/* HOME 
__________________________________________________________________________________________________ */

#homefoto {
	width: 950px;
	height: 261px; /* 391 */
	background: url(img/homefoto.jpg) left bottom;
	padding-top: 130px;
}
#homefoto p {
	padding-bottom: 9px;
	margin: 0;
}
#homefoto a {
	color: #FFFFFF;
}
#homefototekstlinks {
	float: left;
	position: relative;
	padding: 0px 14px 0px 31px;
	width: 500px;
	font: bold italic 13px/17px "Arial", "Helvetica", sans-serif;
	color: #FFFFFF;
	/*border-right: solid 4px;*/
}
#homefotologos {
	position: absolute;
	top: 187px;
	}
#homefototekstrechts {
	float: left;
	position: relative;
	padding: 0px 27px 0px 0px;
	width: 378px;
	line-height: 17px; /* om zelfde regelafstand als links te maken */
	color: #FFFFFF;
	text-align: right;
}
#homefotoboven {
	width: 950px;
	background: url(img/homefoto-kader-boven.png) no-repeat left bottom;
	height: 18px; 
}
#homefotoonder {
	width: 950px;
	height: 4px;
	background: url(img/homefoto-kader-onder.png) no-repeat left top;
}
.homefotoknop {
	float: right;
	background: url(img/homefotoknop.png) 0px 5px no-repeat;
	width: 200px;
	height: 18px;
	color: #000000;
	padding-top: 5px;
	text-align: center;
}
#homefototekstrechts .homefotoknop a {
	text-decoration: none;
	color: #4066a4;
	display: inline-block;
	height: 18px;
	width: 200px;
}
#homefototekstrechts .homefotoknop a:hover {
	color: #799acf;
}

/* hometekst wordt niet meer gebruikt, is wit blokje met blauwe tekst */
#hometekst {
	width: 201px; /* 227 minus padding */
	background: url(img/blok-borders-bg.png) repeat-y #ffffff;
	padding: 9px 13px 0px 13px;
	font: bold italic 13px/17px "Arial", "Helvetica", sans-serif;
	color: #262e6a;
}
#hometekst p {
	padding-bottom: 9px;
}
#hometekstboven {
	width: 227px;
	height: 5px;
	background: url(img/grote-knop-geelwit.png) -227px 0px no-repeat;
}
#hometekstonder {
	width: 227px;
	height: 7px;
	background: url(img/grote-knop-geelwit.png) -227px bottom no-repeat;
}


/* KOPPEN 
__________________________________________________________________________________________________ */

.groteknop {
	height: 41px;
	width: 227px;
	background: url(img/grote-knop-geelwit.png) 0 0 no-repeat;
	font: bold italic 18px/41px "Arial", "Helvetica", sans-serif;
	color: #ad0f15;
	text-align: center;
}
.koptitel {
	height: 41px;
	width: 227px;
	background: url(img/tab-geelwit.png) 0 0 no-repeat;
	font: bold italic 18px/41px "Arial", "Helvetica", sans-serif;
	color: #ad0f15;
	text-align: center;
}
.groteknop a,
.koptitel a {
	text-decoration: none;
	color: #ad0f15;
	display: block;
	height: 100%;
}
.groteknop a:visited,
.koptitel a:visited {
	color: #d1723f;
}
.groteknop:hover,
.koptitel:hover {
	background-position: -227px 0;
}
.kopfoto {
	width: 227px;
	height: 146px;
	background: url(img/blok-borders-bg.png) repeat-y #ffffff;
	text-indent: 4px;
}
.koptekst {
	width: 201px; /* 227 minus padding */
	background: url(img/blok-borders-bg.png) repeat-y #ffffff;
	padding: 7px 13px 7px 13px;
	color: #262e6a;
}
.koptekst a {
	color: #262e6a;
	display: block;
	height: 100%;
	text-decoration: none;
}
.koptekst a:hover {
	color: #4d69a4;
}
.koptekstreiscode {
	color: #ad0f15;
	font-size: 11px;
	text-align: right;
	position: relative;
	width: 214px; /* 227 - 13px dient als padding rechts */
	height: 0px;
	top: -23px;
}
.koponder {
	width: 227px;
	height: 5px;
	background: url(img/grote-knop-geelwit.png) -227px bottom no-repeat;
}
.kopruimte {
	width: 227px;
	height: 14px;
}
.rij1 {
	width: 227px;
	float: left;
	padding-top: 14px;
}
.rij234 { /* dus rij 2, 3 en 4 MAAR OOK het tekstvlak */
	width: 227px;
	padding-left: 14px;
	padding-top: 14px;
	float: left;
}

/* REISINFO BLOKJE 
__________________________________________________________________________________________________ */

.reisinfo {
	width: 201px; /* 227 minus padding */
	background: url(img/blok-borders-bg.png) repeat-y #ffffff;
	padding: 9px 13px 0px 13px;
	color: #ad0f15;
	font-size: 11px;
}
.reisinfo a {
	color: #ad0f15;
}
.reisinfo p {
	margin: 0;
}
.reisinfotabellinks {
	float: left;
	width: 85px;
}
.reisinfotabelrechts {
	float: left;
	width: 116px;
}
.reisinfotabelrechts img {
	padding-top: 4px;
}
.reisinfotabelprijs {
	float: left;
	width: 116px;
	font: bold italic 18px "Arial", "Helvetica", sans-serif;
}
.reisinfotekstenter { /* div voor nieuwe regel en afsluiting. Anders werkt het niet in FF en Chrome */
	clear: both;
	height: 0;
}
.reisinfoboven {
	width: 227px;
	height: 5px;
	background: url(img/grote-knop-geelwit.png) -227px 0px no-repeat;
}
.reisinfoonder {
	width: 227px;
	height: 15px;
	background: url(img/grote-knop-geelwit.png) -227px bottom no-repeat;
}
.reisinfoknop {
	font: bold italic 13px/20px "Arial", "Helvetica", sans-serif;
	background: url(img/blok-borders-bg.png) repeat-y #ffffff;
	padding: 0px 8px 5px 8px;
	height: 21px;
	text-indent: 5px;
}
.reisinfoknop a {
	text-decoration: none;
	color: #ffffff;
	display: block;
	height: 100%;
	background-color: #c60d14;
}
.reisinfoknop a:hover {
	background-color: #f05146;
}
/* oud 
.reisinfozwaarte {
	background: url(img/zwaarte-driehoekje.gif) 0px 3px no-repeat;
	width: 12px;
	height: 13px;
	float: left;
}
*/

/* PRINT BLOKJE (bij reizen)
__________________________________________________________________________________________________ */

.printblokje {
	display:none !important;
}

/* REIS EXTRA BLOKJE (voor eventuele latere toevoegingen die op alle reispagina's dan zichtbaar zijn)
__________________________________________________________________________________________________ */

.reisextra {
	display:none !important;
}

/* GEEL BLOKJE 
__________________________________________________________________________________________________ */

.geelblokboven {
	width: 227px;
	height: 25px;
	background: url(img/grote-knop-geelwit.png) 0px 14px no-repeat;
}
.geelblokonder {
	width: 227px;
	height: 11px;
	background: url(img/grote-knop-geelwit.png) left bottom no-repeat;
}
.geelblokknop {
	font: bold italic 13px/18px "Arial", "Helvetica", sans-serif;
	background-color: #ffe080;
	padding: 0px 4px 0px 4px;
	text-indent: 9px;
}
.geelblokknop a {
	text-decoration: none;
	display: block;
	color: #ad0f15;
}
.geelblokknop a:hover {
	background-color: #ffffff;
}
.geelbloktussenruimte {
	width: 227px;
	height: 5px;
	background-color: #ffe080;
}

/* POPUPS - DIV info popups, voorlopig even vervallen.
__________________________________________________________________________________________________ */

a#popup1 div {
	display: none; 
	background-color: #FFFFFF;
}
a#popup1:hover div {
	display: block; 
	position: absolute; 
	left: 223px; 
	top : 390px; 
	width: 200px; 
	border-top: 4px solid #ffe080;
	border-right: 4px solid #ffe080;
	border-bottom: 4px solid #ffe080; 
	padding: 5px 6px 7px 4px; 
	z-index: 1;
}
#ballonpopup1 {
	display: block; 
	position: absolute; 
	left: 50%; 
	top : 50%; 
	width: 310px; 
	z-index: 2;	
	font-size: 11px;
}
.ballonpopupbovenlinks {
	background: url(img/popup-boven-links.png) no-repeat;
	width: 260px; 
	height: 17px;
	float: left;
	padding: 10px 0px 0px 21px; 
}
.ballonpopupbovenrechts {
	background: url(img/popup-boven-rechts.png) no-repeat;
	float: left;
	width: 29px; 
	height: 27px;
}
.ballonpopupbovenrechts a {
	text-decoration: none;
	display: block;
	height: 100%;
}
.ballonpopupbovenrechts:hover {
	background-position: 0 -29px;
}
.ballonpopuptekst {
	width: 277px;
	padding: 0px 11px 7px 22px; 
	background: url(img/popup-midden.png) bottom left;
}
.ballonpopuponder {
	background: url(img/popup-onder.png) no-repeat;
	width: 310px; 
	height: 13px;
}

/* TEKST MET TABS 
__________________________________________________________________________________________________ */

#tekstcontainer1,
#tekstcontainer2,
#tekstcontainer3 {
	width: 709px;
	padding-left: 14px;
	padding-top: 14px;
	float: left;
	z-index: auto;
	position: relative;
}
#tekstcontainergroot1,
#tekstcontainergroot2,
#tekstcontainergroot3,
#tekstcontainergroot4 {
	width: 950px;
	padding-top: 14px;
	float: left;
	z-index: auto;
	position: relative;
}
.teksttab {
	height: 41px;
	width: 227px;
	background: url(img/tab-geelwit.png) -227px 0 no-repeat;
	font: bold italic 18px/41px "Arial", "Helvetica", sans-serif;
	color: #ad0f15;
	text-align: center;
	float: left;
}
.teksttab a {
	text-decoration: none;
	color: #ad0f15;
	display: block;
	height: 100%;
	background: url(img/tab-geelwit.png) 0 0 no-repeat;
}
.teksttab a:hover {
	background-position: -227px 0;
}
.teksttabruimte {
	width: 14px;
	height: 41px;
	background: url(img/tab-ruimte.gif) no-repeat bottom;
	float: left;
}
.teksttabruimtetweetabs {
	width: 241px;
	height: 41px;
	background: url(img/tab-ruimte-tweetabs.png) no-repeat bottom;
	float: left;
}
.teksttabruimtedrietabs { /* per ongeluk fout benoemd, is eigenlijk ruimte met 1 tab */
	width: 482px;
	height: 41px;
	background: url(img/tab-ruimte-drietabs.png) no-repeat bottom;
	float: left;
}
ul { 
	padding-left: 19px; /* trial and error waarde... */
	margin: 0 0 7px 0;
	list-style: outside;
}
ol { 
	padding-left: 19px; /* trial and error waarde... */
	margin: 0 0 7px 0;
	list-style: outside decimal;
}
ol.abclijst {
	padding-left: 19px; /* trial and error waarde... */
	margin: 0 0 7px 0;
	list-style: outside lower-alpha;
}
.tekst {
	background-color: #ffffff;
	border: 4px solid #ffe080;
	border-bottom: 0px;
	border-top: 0px;
	float: left;
	width: 683px; /* 709 min border en padding */
	padding: 13px 9px 5px 9px;
}
.tekstgroot {
	background-color: #ffffff;
	border: 4px solid #ffe080;
	border-bottom: 0px;
	border-top: 0px;
	float: left;
	width: 916px; /* 950 min border en padding */
	padding: 13px 13px 5px 13px;
}
.tekstlinks {
	float: left;
	width: 272px; /* xx min border en padding */
	padding: 13px 13px 5px 13px;
}
.tekstrechts {
	float: left;
	width: 622px; /* xx min border en padding */
	padding: 13px 9px 5px 13px;
}
.tekst a,
.tekstgroot a,
.tekstlinks a,
.tekstrechts a {
	color: #4d69a4;
}
.tekst p,
.tekstgroot p,
.tekstlinks p,
.tekstrechts p {
	padding-bottom: 9px;
	margin: 0;
	clear: both; /* zodat hij ook keurig onder Reis in het kort komt te staan. */
}
.tekst img,
.tekstgroot img,
.tekstlinks img,
.tekstrechts img {
	padding: 6px 0 3px 0;
}
.kleinetekst {
	font-size: 11px;
}
.tekstreiscode,
.tekstrood { /* Twee namen voor hetzelfde (zonder specifieke reden) */
	color: #ad0f15;
	font-size: 11px;
}
.blauwetekst,
.programma dt,
.tekst h4,
.tekstgroot h4,
.tekstlinks h4,
.tekstrechts h4 {
	font: bold italic 13px/17px "Arial", "Helvetica", sans-serif;
	color: #262e6a;
	margin: 0;
}
h3 {
	font: bold italic 18px/17px "Arial", "Helvetica", sans-serif;
	color: #262e6a;
	padding-bottom: 9px;
}
.programma dl {
	margin: 0;
}
.programma dd { /* bij reis per dag moet afbeelding in een dd staan voor goede regelafstafstand onder */
	margin: 0;
	padding-bottom: 9px;
}
.programma {
	float: left;
	margin: 0;
}
.tekstonder {
	width: 709px;
	height: 5px;
	background: url(img/tekst-border-onder.png) no-repeat;
	float: left;
}
.tekstondergroot {
	width: 950px;
	height: 5px;
	background: url(img/tekstgroot-border-onder.png) no-repeat;
	float: left;
}
.tekstbovengroot {
	width: 950px;
	height: 5px;
	background: url(img/tekstgroot-border-boven.png) no-repeat;
	float: left;
}
.tekstgeelwitboven {
	width: 950px;
	height: 5px;
	background: url(img/tekstgeelwit-border-boven.png) no-repeat;
	float: left;
}
.tekstgeelwitonder {
	width: 950px;
	height: 5px;
	background: url(img/tekstgeelwit-border-onder.png) no-repeat;
	float: left;
}
.tekstgeelwitvlak {
	background: url(img/tekstgeelwit-bg.png) repeat-y #ffffff;
	border: 4px solid #ffe080;
	border-bottom: 0px;
	border-top: 0px;
	float: left;
	width: 942px; /* 950 min border */
}
.tekstsubkopvlak {
	background-color: #ffffff;
	border: 4px solid #ffe080;
	border-bottom: 0px;
	border-top: 0px;
	float: left;
	width: 695px; /* 709 min border en padding */
	padding: 0px 0px 15px 6px;
}
.tekstsubkoprij1 {
	width: 342px; /* getal wat min padding overblijft voor exact twee naast elkaar.. */
	float: left;
}
.tekstsubkoprij2 {
	width: 342px; /* getal wat min padding overblijft voor exact twee naast elkaar.. */
	float: left;
	padding-left: 5px;
}
.tekstsubkoponder {
	width: 342px; /* getal wat min padding overblijft voor exact twee naast elkaar.. */
	height: 4px;
	float: left;
	background: url(img/tekst-subkop-onder.png) no-repeat;
}
.tekstsubkoptekst {
	background: url(img/tekst-subkop-boven.png) no-repeat;
	background-color: #fff0c1;
	font-size: 11px;
	padding: 5px 9px 5px 9px;
}
.tekstrij1 { /* Twee even brede kolommen tekst */
	width: 336px;
	float: left;
}
.tekstrij2 {
	width: 336px;
	float: left;
	padding-left: 11px;
}
.opsomming {
	float: left;
	font-size: 11px;
	padding-bottom: 10px;
	margin: 0;
}
.opsomming dl {
	padding: 13px 9px 5px 9px;
}
.opsomming dt {
	float: left;
}
.opsomming dd {
	margin: 0 0 0 32px;
}
.knopingeelvlak {
	font: bold italic 13px/23px "Arial", "Helvetica", sans-serif;
	float: left;
	background: url(img/knop-in-geelvlak.png) no-repeat;
	width: 151px;
	height: 14px;
	text-align: left;
}
.knopingeelvlak a {
	text-decoration: none;
	color: #ad0f15;
	display: inline-block;
	width: 151px;
	height: 23px;
}
.knopingeelvlak:hover {
	background-position: -151px 0px;
}
/* FORMULIER 
__________________________________________________________________________________________________ */

input {
	color: #000000;
	background: #fff7e0;
	border: 1px solid #000000;
	text-indent: 4px;
	height: 20px;
}
#voorletters,
#achternaam,
#straat,
#woonplaats,
#land,
#telefoon,
#email	{
	width: 200px;
	height: 20px;
}
#huisnummer,
#postcode {
	width: 60px;
	height: 20px;
}
fieldset {
	border: none;
}
.formdiv {
	width: 250px;
	float: left;
	font-size: 11px;
}
.formuliertekstrood {
	color: #ad0f15;
}

/* VOETNOOT 
__________________________________________________________________________________________________ */

#voetnoot {
	float: left;
	font-size: 11px;
	width: 100%; 
	height: 35px;
	position: relative;
	text-align: center;
	padding-top: 6px;
	bottom: 0;
}
#voetnoot a {
	color: #000000;
}
#voetnootlogos {
	position: relative;
	top: 4px;
}
