@import url(http://fonts.googleapis.com/css?family=Open+Sans:regular,600,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:regular,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
/*  CSS Reset  - Meyer - removed b,u,i, center, table, tr, th, td, li, div,ul,img, tbody  */
    html, body, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,

    dl, dt, dd, ol,
    fieldset, form, label, legend,
    caption, tfoot, thead,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
/*    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }*/
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
/*    table {
    border-collapse: collapse;
    border-spacing: 0;
    }*/





H1 {

/*  This is the main page header */
    margin:0 auto;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    margin-bottom:20px;
    font-size:130%;
	font-weight:bold;
    font-family: Verdana, Arial, Times New Roman;
    text-align:center;
    text-decoration: underline;

}

H2 {

/*  This is a header inside of a text box */
    margin:0;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    margin-bottom:10px;
    font-size:110%;
	font-weight:bold;
    font-family: Verdana, Arial, Times New Roman;
    text-align:center;
    text-decoration: underline;


}

H3{
 /* Use this for Youtube video highlighting */
    margin:0;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    margin-bottom:10px;
    font-size:110%;
	font-weight:bold;
    font-family: Verdana, Arial, Times New Roman;
    text-align:center;




}

H4{
 /* Use this for under an image text */
}






	html, body {

				font-family: Tahoma,
			}
			#example {
				height: 700px;
				overflow: hidden;
				margin-top: 50px;
			}
			#example .mSButtons {
				height: 80%;
			}
			#example .frame {
				width: 100%;
				height: 100%;
			}
			#example .frame .slide_element {
				height: 100%;
			}
			#example .frame .slide_element > div {
				float: left;
				height: 100%;
				overflow: hidden;
			}
			#example .frame .mSCover img {
				max-width: none;
			}
			#example .credit {
				position: absolute;
				bottom: 10px;
				left: 10px;
				font-size: 11px;
				line-height: normal;
				font-weight: 300;
				text-shadow: rgba(0,0,0,0.7) 0 1px 0px;
				color: #CCC;
				background: #000;
				background: rgba(0,0,0,0.6);
				padding: 0 4px;
				white-space: nowrap;
				z-index: 1002;
				text-transform: uppercase;
			}
			#example .credit a {
				color: #FFF;
				font-weight: 400;
			}
			.infoBlock {
				position: absolute;
				top: 80px;
				right: 30px;
				left: auto;
				max-width: 30%;
				padding-bottom: 0;
				background: #FFF;
				background: rgba(255, 255, 255, 0.6);
				overflow: hidden;
				padding: 20px;
				z-index: 1002;
			}
			.infoBlockLeftBlack {
				color: #FFF;
				background: #000;
				background: rgba(0,0,0,0.55);
				left: 90px;
				right: auto;
				opacity: 0;
			}
			.infoBlock2 {
				top: 90px;
				left: 100px;
			}
			.infoBlock h4 {
				font-size: 16px;
				font-weight: 600;
				line-height: 1.2;
				margin: 0;
				padding-bottom: 3px;
				color: inherit;
				text-align: left;
			}
			.infoBlock p {
				font-size: 16px;
				font-weight: 300;
				margin: 4px 0 0;
			}
			.infoBlock a {
				color: #FFF;
				text-decoration: underline;
			}

			@media (max-width: 979px) {
				#example {
					height: 400px;
					margin-top: 0;
				}
				.infoBlock {
					min-width: 40%;
				}
			}

			@media (max-width: 768px) {
				#example {
					margin: 0 -20px;
					height: 300px;
				}
				.infoBlock {
					padding: 10px;
					height: auto;
					max-height: 100%;
				}
				.infoBlock h4 {
					font-size: 14px;
					line-height: 17px;
				}
				.infoBlock p {
					font-size: 12px;
				}
			}

.navbar
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;

}


.invbox {            /* Standard transparent text box */


    padding: 15px;
/*height: 100px;*/
    width:  55%;
    position: relative;
    margin:0 auto;
    margin-left:auto;
    margin-right:auto;
    margin-top:15px;
    margin-bottom:15px;
    font-family: "Times New Roman", Times, serif;
    font-weight:normal;
    left: 0;
    outline: none;
    border: 0px solid #000000;
    border-color: rgba(0,0,0);
    background-color: ;
    font-size: 100%;
    word-wrap:break-word;
    text-align:left;
    /* default fallback */
    background: rgb(204, 204, 204) transparent;
    /* nice browsers */
    background: rgba(255, 255, 255, 0.55);
    /* IE 6/7 */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF);
    /* IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)";
}

.tbox1 {     /* Green boxes */

    padding: 15px;
/*height: 100px;*/
    width:  85%;
    position: relative;
    margin:0 auto;
    margin-top:15px;
    margin-bottom:15px;
    margin-left:auto;
    margin-right:auto;
    font-family: "Times New Roman", Times, serif;
    font-weight:normal;
    left: 0;
    outline: none;
    border: 1px solid #000000;
    border-color: rgba(0,0,0);
    background-color: #CCFF99;
    font-size: 100%;
    border-radius:20px; /*use this to create rounded corners*/
    word-wrap:break-word;
    text-align:left;
 }

.body {
	max-width: 1120px;
	margin: 0 auto;
    margin-top:20px;
    margin-bottom:40px;
}


.container {
width: 95%;
max-width: 50%;
margin: 0 auto; /* to center the container */
}

.container img {
width: 100%;
height: auto;
margin: 0 auto;
}

.container75 {
width: 95%;
max-width: 75%;
margin: 0 auto;
margin-left:auto;
margin-right:auto;
display:block;
text-align:center;
position:relative;
}

.container75 img {
width: 100%;
height: auto;
margin: 0 auto;
text-align:center;
margin-left:auto;
margin-right:auto;
display:block;
border-style:solid;
border-width:2px;

}

.side_img_container {
width: 100%;
max-width: 100%;
margin: 0 auto; /* to center the container */
}

.side_img_container img {
width: 100%;
height: auto;
margin: 0 auto;
}


.invbox_center {
    padding: 15px;
/*height: 100px;*/
    position: relative;
    width: 75%;
    margin:0 auto;
    margin-left:auto;
    margin-right:auto;
    font-family: Verdana, Arial, Times New Roman;
    font-weight:normal;
    left: 0;
    outline: none;
    border: 0px solid #000000;
    border-color: rgba(0,0,0);
    font-size: 100%;
    word-wrap:break-word;
    /* default fallback */
    background: rgb(255, 255, 255) transparent;
    /* nice browsers */
    background: rgba(255, 255, 255, 0.55);
    /* IE 6/7 */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF);
    /* IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)";
}

ul.invbox_center li {
    display:inline-block;
    *display: inline;
    *zoom:1;
    padding: 15px;
    width:  125px;
    vertical-align:top;
    font-family: Verdana, Arial, Times New Roman;
    font-weight:bold;
    border: 0px solid #000000;
    border-color: rgba(0,0,0);
    font-size: 100%;
    word-wrap:break-word;
    text-align:center;
    background: #CED8F6;

}

 .img_floatleft_resp
{
    float: left;
    width: 25%;
    margin: 2% 2% 0 0;
    background-color: #E0D8BE; /*   fff - gray*/
    padding: 2%;  /* Padding for image background - maybe I will remove*/
    border-top: 1px solid #999;  /* Border for image and background */
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
}

div.img_floatleft_resp img    /* Border for the image and border -- maybe remove*/
{
    border-top: 1px solid #999;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    text-align:center;
    margin:0 auto;

}

.eyestable {             /* World Heritage List Table */
    font-family: Arial, Helvetica, sans-serif;
    width: 600px;
    border-collapse: collapse;
    margin-left:auto;
    margin-right:auto;
}

.eyestable td, .eyestable th {
    font-size: 1.1em;
    border: 1px solid #979CD8;
    padding: 3px 7px 2px 7px;

}

.eyestable th {
    font-size: 1.3em;
    padding-top: 5px;
    padding-bottom: 4px;
/*    background-color: #E0E0E0;*/ /*gray */
    background-color:#B8E09E;
    color: #000000;
    text-align:center;
}

.eyestable th:nth-child(2) {

    background-color:#DB8062;

}

.eyestable th:nth-child(3) {

    background-color:#8076E0;

}

.eyestable th:nth-child(4) {

    background-color:#F2F466;

}

.eyestable tr td:nth-child(odd) {
    color: #000000;
    background-color: #C5E8DF;
    text-align:center;
    width:120px;
    font-weight:bold;

}

.eyestable tr td:nth-child(even) {
    color: #000000;
    background-color: #FFFFFF;
    text-align:center;
}

.eyestable tr td:nth-child(5){
    font-style:italic;
}

.eyestable2 {             /* World Heritage List Table */
    font-family: Arial, Helvetica, sans-serif;
    width: 700px;
    border-collapse: collapse;
    margin-left:auto;
    margin-right:auto;
}

.eyestable2 td, .eyestable2 th {
    font-size: 1.1em;
    border: 1px solid #979CD8;
    padding: 3px 7px 2px 7px;

}

.eyestable2 th {
    font-size: 1.3em;
    padding-top: 5px;
    padding-bottom: 4px;
/*    background-color: #E0E0E0;*/ /*gray */
    background-color:#B8E09E;
    color: #000000;
    text-align:center;
}

.eyestable2 th:nth-child(2) {

    background-color:#DB8062;

}

.eyestable2 th:nth-child(3) {

    background-color:#8076E0;

}

.eyestable2 th:nth-child(4) {

    background-color:#F2F466;

}

.eyestable2 tr td:nth-child(1) {
    color: #000000;
    background-color: #C5E8DF;
    text-align:center;
    width:120px;
    font-weight:bold;

}

.eyestable2 tr td:nth-child(2) {
    color: #000000;
    background-color: #FFFFFF;
    text-align:center;
}

.eyestable2 tr td:nth-child(3) {
    color: #000000;
    background-color: #D5FFA4;
    text-align:center;
}

.eyestable2 tr td:nth-child(4) {
    color: #000000;
    background-color: #FFFFFF;
    text-align:center;
}

.eyestable2 tr td:nth-child(5){
    background-color: #FAFF63;
    font-style:italic;
    font-weight:bold;
}
.whlist {             /* Jante Law Table */
    font-family: Arial, Helvetica, sans-serif;
    width: 600px;
    border-collapse: collapse;
    margin-left:auto;
    margin-right:auto;


}

.whlist td, .whlist th {
    font-size: 1.1em;
    border: 1px solid #979CD8;
    padding: 3px 7px 2px 7px;

}

.whlist th {
    font-size: 1.3em;
    padding-top: 5px;
    padding-bottom: 4px;
/*    background-color: #E0E0E0;*/ /*gray */
    background-color:#B8E09E;
    color: #000000;
    text-align:center;
}

/*.whlist th:nth-child(2) {

    background-color:#D4DC7A;

}*/

.whlist tr td:nth-child(odd) {
    color: #000000;
    background-color: #C5E8DF;
    text-align:center;
    width:120px;
    font-weight:bold;

}

.whlist tr td:nth-child(even) {
    color: #000000;
    background-color: #FFFFFF;
    text-align:center;
}