@charset "utf-8";
/* CSS Document */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
	display: block;
	margin:0;
	padding:0;
}
html { 
	font-size: 100%; 
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%;
}
body {
	margin: 0px;
	background: #FFC;
	color: #363;
	padding: 0px;
	font: 100%/1.2  Arial, Helvetica, sans-serif;
}
a, a:link, a:active, a:visited, a:focus {
	outline: 0;
	background: url(none);	/*dit voorkomt een achtergrondkleur op smartphone*/
	text-decoration: none;
	color: #363;
}
a:hover {
	text-decoration:underline;
	outline: 0;
	background: url(none);
}
b, strong { 
	font-weight: bold; 
}
ol, ul, li  {
	margin: 0;
	padding: 0;
	list-style: none;
}
img {
	-ms-interpolation-mode: bicubic;
	vertical-align: middle;
	max-width: 100%;
	height: auto;
	border: 0;
}
h1, h2, h3, h4, p {
	margin: 0px;
	padding: 0px;
	font-style: normal;
	font-weight: normal;
}
#wrapper {
	width: 960px;
	min-height: 670px;
	overflow:visible;
	margin-right: auto;
	margin-left: auto;
	background: #FFC url(images/gites-la-colline-kl.jpg) no-repeat 59px 31px;
}
.lt-ie9 #wrapper {
	height:790px;
}
#logo {
	width: 960px;
	height: 150px;
	background: url(images/giteslacolline-france-kl.jpg) no-repeat 65px top;	
}
ul.secondary {
	font-size: 15px;
	line-height: 1.7;
	text-transform: uppercase;
	position:relative;
	top:77px;
	left:67px;
	width:462px;
}
ul.secondary li a {
	color: #336633;
}
ul.navigation {
	font-size: 15px;
	line-height: 1.5;
	position:relative;
	top:77px;
	left:67px;
	width:462px;
	height:42px;
}
ul.navigation li {
	float:left;
	margin-right:25px;
}
ul.navigation li a {
	color: #336633;
}
#dot a { /*voor de link op de visited page*/
	border-bottom: dotted 1px  #363;
}
#dot a:hover {
	border-bottom: dotted 1px  #363;
	text-decoration: none;
}
.main {
	width:960px;
	position:relative;
}
.main-links {
	width: 740px;
	min-height:380px;
	background:#FFF;
	position: relative;
	top: -8px;
	left: 108px;
	padding:6px;
	border: 2px solid #C00;
}
.main-links img, .main-links a, .main-links span {
	padding: 8px 6px;
	width: 210px;
	max-height: 70px;
	font-size: 14px;
	text-align: left;
	white-space: nowrap;
}
.main-links span {
	background: #FFF;
	line-height:40px;
}
.main-links img.linkssmall {
	width: 160px;
}
h1, h2, p {
	width:426px;
	font-size: 13px;
	line-height:16px;
	text-align:right;
	padding-right:78px;
	padding-bottom:4px;
	padding-left:472px;
}	
h1:first-child {
	width:250px;
	padding-right:78px;
	padding-left:647px;
}
p {
	padding-top:6px;
}
.fotoindex {
	margin-top:5px;
	margin-left:125px;
	width:713px;/*ovale afbeelding positie*/
}
.lower {
	padding-top:359px; /*h1 lager*/
}
.photo-one {
	width: 730px;
	position:absolute;
	top:-24px;
	left:218px;
}
.photo-two {
	width: 782px;
	position:absolute;
	top:85px;
	left:136px;
}
.photo-three {
	width: 730px;
	position:absolute;
	top:200px;
	left:222px;
}
.lt-ie9 .photo-one, .lt-ie9 .photo-two, .lt-ie9 .photo-three {
	margin-top:-12px;
	margin-left:-10px;
}
.lt-ie8 .photo-one, .lt-ie8 .photo-two {
	margin-top:-18px;
	margin-left:-40px;
}
.lt-ie8 .photo-three {
	margin-top:-20px;
	margin-left:-32px;
}
.lowermin {
	padding-top:326px;/*h1 of main minder lager*/
}
.up {
	top: 5px;/*bij photo-two hoger*/
}
.lt-ie8 .up {
	margin-top:-17px;
	margin-left:-45px;
}
.down {
	top: 153px;/*bij photo-two lager*/
	left: 137px;
}
.rotatel, .leftrota  {
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	transform: rotate(-10deg);
	margin-right:-33px;
	width:190px;
	border: 2px solid #FFF;
}
.lt-ie9	.rotatel, .lt-ie9 .leftrota {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9848077530122081, M12=0.17364817766692991, M21=-0.17364817766692991, M22=0.9848077530122081, SizingMethod='auto expand')";
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=0.9848077530122081,
            M12=0.17364817766692991,
            M21=-0.17364817766692991,
            M22=0.9848077530122081,
            SizingMethod='auto expand');
}
.rotateri, .rightrota  {
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-o-transform: rotate(10deg);
	-ms-transform: rotate(10deg);
	transform: rotate(10deg);
	margin-right:-33px;
	width:190px;
	border: 2px solid #FFF;
}
.lt-ie9	.rotateri, .lt-ie9 .rightrota {
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9848077530122079, M12=-0.17364817766693127, M21=0.17364817766693127, M22=0.9848077530122079, SizingMethod='auto expand')";
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=0.9848077530122079,
            M12=-0.17364817766693127,
            M21=0.17364817766693127,
            M22=0.9848077530122079,
            SizingMethod='auto expand');
}
.rightrota, .leftrota {
	width:255px;/*voor de grote afbeelding op de ned/fr/eng homepage*/
}
.photo-four {
	width: 812px;
	position:absolute;
	top:33px;
	left:144px;
}
.lt-ie9 .photo-four {
	margin-top:-22px;
	margin-left:-20px;
}
.lt-ie8 .photo-four {
	margin-top:-26px;
	margin-left:-67px;
}
.lt-ie9 .iedown {
	margin-top:0px; 
	margin-left:0px;
}
.marge {
	margin-right:-55px;/*voor een andere marge bij photo-four en rightrota, leftrota*/
}
iframe {
	border: solid 2px #C00;
	margin-top:-46px;
	margin-left:-30px;
}
.lt-ie8 iframe {
	margin-top:0px;
	margin-left:0px;
	position:absolute;
	top:-50px;
	left:-40px;
}
.under {
	text-decoration:underline;
	line-height:30px;
}
.photo-five { 
	width: 230px;/*extra voor binnen*/
	position:absolute;
	top:478px;
	left:170px;
}
.norotate {
	width:190px;/*extra voor binnnen*/
	border: 2px solid #FFF;
	margin-bottom:29px;
}

/*slimbox*/
#lbOverlay {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 12%;
	width: 100%;
	height: 88%;
	background: #FFC;
	cursor: pointer;
}
#lbCenter, #lbBottomContainer {
	position: absolute;
	z-index: 9999;
	overflow: hidden;
	background-color: #FFC;
}
.lbLoading {
	background: #FFC url(loading.gif) no-repeat center;
}
#lbImage {
	position: absolute;
	left: 0px;
	top: 0px;
	background-repeat: no-repeat;
	border-top: 16px solid #FFC;
	border-right: 20px solid #FFC;
	border-left: 20px solid #FFC;
}
#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 100px;
	width:50%;
	height:38px;
	outline: none;
}
#lbPrevLink {
	left: 0px;
}
#lbPrevLink:hover {
	background: url(prevlabel.jpg) no-repeat 0% 15%;
}
#lbNextLink {
	right: 0px;
}
#lbNextLink:hover {
	background: url(nextlabel.jpg) no-repeat 100% 15%;
}
#lbBottom {
	color: #333;
	text-align: left;
	padding-top:8px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height:17px;
	margin-right:7px;
	margin-left:20px;
}
#lbCloseLink {
	display: block;
	float: right;
	width: 214px;
	height: 50px;
	background: url(closelabel.jpg) no-repeat center 20px;
	outline: none;
}

@media screen and (max-width: 924px) {
#wrapper {
	width: 760px;
	background: #FFC url(images/gites-la-colline-extra.jpg) no-repeat 59px 31px;
}
.main {
	width:760px;
	position:relative;
}
#logo {
	width: 760px;
	height: 100px;
	background: url(images/giteslacolline-france-extra.jpg) no-repeat 65px top;	
}
.fotoindex {
	margin-top:26px;
	margin-left:110px;
	width:545px;
}
h1, h2, p {
	width:390px;
	font-size: 12px;
	line-height: 15px;
	text-align:right;
	padding-right:78px;
	padding-left:308px;
}	
h1:first-child {
	width:240px;
	margin-top:12px;
	padding-right:78px;
	padding-left:458px;
}
ul.secondary, ul.navigation {
	top:55px;
	width:362px;
	font-size: 14px;
}
ul.navigation {
	line-height: 1.3;
}
.rotatel, .rotateri {
	width:157px;
}
.rightrota, .leftrota {
	width:195px;
	margin-right:-45px;
}
.photo-one {
	width: 525px;
	position:absolute;
	top:-5px;
	left:168px;
}
.photo-two {
	width: 642px;
	position:absolute;
	top:78px;
	left:103px;
}
.photo-three {
	width: 525px;
	position:absolute;
	top:171px;
	left:173px;
}
.lowermin {
	padding-top:271px;
}
.up {
	top: 12px;
}
.down {
	top: 123px;
}
.lower {
	padding-top:316px;
}
.photo-four {
	width: 550px;
	position:absolute;
	top:47px;
	left:125px;
}
iframe {
	width:560px;
	height:266px;
	margin-top:-42px;
	margin-left:-20px;
}
.photo-five { 
	width: 159px;/*extra voor binnen*/
	position:absolute;
	top:375px;
	left:110px;
}
.norotate {
	width:157px;/*extra voor binnen*/
	border: 2px solid #FFF;
	margin-bottom:22px;
}
.main-links {
	width: 548px;
	min-height:258px;
	background:#FFF;
	position: relative;
	top: 3px;
	left: 98px;
	padding:6px;
	border: 2px solid #C00;
}
.main-links img, .main-links a, .main-links span {
	padding: 6px 5px;
	width: 160px;
	max-height: 48px;
	font-size: 13px;
	text-align: left;
	white-space: nowrap;
}
.main-links span {
	background: #FFF;
	line-height:30px;
}
.main-links img.linkssmall {
 width: 110px;
}
}
@media screen and (min-width: 1250px) {
#wrapper {
	width: 1240px;
	min-height: 777px;
	background: #FFC url(images/gites-la-colline.jpg) no-repeat 75px 20px;
}
#wrapper-home {
	width:934px;
	height:410px;
}
.main {
	width:1240px;
}
#logo {
	width: 1240px;
	height: 162px;
	background: url(images/giteslacolline-logo.jpg) no-repeat 78px top;	
}
.fotoindex {
	margin-top:13px;
	margin-left:153px;
	width:934px;
}
h1, h2, p {
	width:460px;
	font-size: 16px;
	line-height: 19px;
	text-align:right;
	padding-right:85px;
	padding-left:709px;
}	
h1:first-child {
	width:320px;
	padding-right:85px;
	padding-left:849px;
}
ul.secondary, ul.navigation {
	top:80px;
	left:80px;
	width:560px;
	font-size: 18px;
	line-height: 1.7;
}
ul.navigation {
	line-height: 1.6;
	height:52px;
}
.rotatel, .rotateri {
	width:220px;
	margin-right:0px;
}
.rightrota, .leftrota {
	width:309px;
}
.photo-one {
	width: 920px;
	position:absolute;
	top:-14px;
	left:275px;
}
.photo-two {
	width: 1010px;
	position:absolute;
	top:132px;
	left:167px;
}
.photo-three {
	width: 920px;
	position:absolute;
	top:277px;
	left:285px;
}
.lowermin {
	padding-top:425px;
}
.up {
	top: 46px;
}
.down {
	top: 210px;
	left:176px;
}
.lower {
	padding-top:460px;
}
.photo-four {
	width: 950px;
	position:absolute;
	top:61px;
	left:173px;
}
.marge {
	margin-right:-26px; /*bij photo-four en leftrota*/
}
.recht {
	margin: 24px 17px 5px 17px;
	padding: 0;
	width: 220px; 
}
iframe {
	width:951px;
	height:448px;
	margin-top:-78px;
	margin-left:-30px;
}
.photo-five { 
	width: 224px;/*extra voor binnen*/
	position:absolute;
	top:620px;
	left:230px;
}
.norotate {
	width:220px;/*extra voor binnen*/
	border: 2px solid #FFF;
	margin-bottom:38px;
}
.main-links {
	width: 960px;
	min-height:428px;
	background:#FFF;
	position: relative;
	top: -10px;
	left: 128px;
	padding:6px;
	border: 2px solid #C00;
}
.main-links img, .main-links a, .main-links span {
	padding: 8px 6px;
	width: 240px;
	max-height: 80px;
	font-size: 15px;
	text-align: left;
	white-space: nowrap;
}
.main-links span {
	background: #FFF;
	line-height:40px;
}
#lbBottom {	
	font-size: 16px;
	line-height:19px;
}
}