/* ----- Main Divs ----- */

body {
    background-image: url("../../media/background/grey-repeating-background.png");
}

#black-header {
	background-color:rgba(0,0,0,0.8);
	top:0;
}

#blue-header, #blue-footer {
	background-color:rgba(37,80,116,0.8);
}

#blue-header,  #black-header {
	left:0;
	width:100%;
	position:absolute;
}

#blue-footer {
	width:100%;
}

#outer {
	position:absolute;
	left:0;
	width:100%;
}

#inner {
	background-color:rgba(204,204,204,0.5);
	margin:0 auto;

	overflow:hidden;
}

#main {
	margin:20px;
}

.inner-wrap {
	margin:0 20px;

}
.inner-wrap h3{
	color:#fff;
}

/* ----- Black Header Parts ----- */

#black-header #home-icon, #black-header #website-title , #left-black-header{
	float:left;
}
#right-black-header, #change-language-top, #change-language-icon {
	float:right;
	z-index:20;
	cursor:pointer;
}

/* ----- Main title Parts ----- */

#inner #main-title {
	float:left;
}

#inner #main-title h1 {
	font-size:8vw;
	color:#000;
	text-align:center;
}

#main-title {
	width:100%;
}


/* ----- Main menu ----- */

#main-menu {
	float:left;
	margin:50px 0 0 50px;
}
#main-menu li {
	margin:0 0 40px 0;
	clear:both;
}
#main-menu li .menu-item:hover {
	-webkit-transition: background 0.5s ease-in-out;
	-moz-transition: background 0.5s ease-in-out;
	-ms-transition: background 0.5s ease-in-out;
	-o-transition: background 0.5s ease-in-out;
	transition: background 0.5s ease-in-out;
	background:rgba(0,0,0,.8);
}

#main-menu li .menu-item {
	background:rgba(0,0,0,0.5);
	margin:0 0 50px 0;
	padding:10px 20px;
}

/* --------------- Main Body ------------------ */

#content-wrapper {
	width:100%;
	position:relative;
	margin-top:-5px;
}

#main {

}

#main-content-wrapper {
	width:calc(100% - 40px);
	margin:20px;
	color:#fff;
}
#main-content-wrapper p {
	margin:15px 0;
}
#main-content-wrapper h4 {
	font-size:1.8em;
	color:#FDCF09;
}

#main-content {
	background-color:rgba(0,0,0,0.7);
	overflow:hidden;
}

#welsh-bacc-title{
	width:100%;
	text-align:center;
	bottom:-3%;
}

#global-citz-title{
	bottom:4%;
}

#natural-env-title {
	bottom:12%;
}

#main article {
	background-color:rgba(0,0,0,0.8);
	overflow:hidden;
	width:100%;

}
#main article:first-of-type {
	/*margin-top:-10px;*/
}



/* --------------- Navigation ------------------ */

#navigation {
	background-color:rgba(0,0,0,0.5);
	position:absolute;
    top: 0;
    left: 0;
	width:100%;
	color:#fff;

	z-index:5;
	/*border-bottom:#fff solid 1px;*/
}

#navigation ul {
	display:inline;
}

#navigation ul li {
	float:left;
	height:100%;
	overflow:hidden;
}

#navigation ul li a {
	color:#Fff;
	height:100%;
	padding:18px 20px;
	font-weight:bold;
	vertical-align: middle;
}

#navigation ul li a:hover {
	background-color:#416480;
	color:#FCCF0B;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}


/* --------------- Main Body Classes ------------------ */

.text-body {
	margin:20px 10px 10px 10px;
}

.trans-layer {
	background-color:rgba(0,0,0,0.6);
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;

}
.image-layer .sub-title{
	color:#fccf0b;
	right:2%;
}

.image-layer {
	position: relative;
	overflow:hidden;
	width:100%;
	height:auto;
}

.image-layer h2 {
	position: absolute;
}

.text-layer h3 {
	position: absolute;
    top: 10px;
    right: 10px;
	font-size:2.5em;
}
.content-body {
	position:relative;
}
.content-body {
	margin:20px 20px 20px 20px;
}
.content-body p {
	margin:10px 0 40px 0;
}

.content-body .full-width {

	width:100%;
	height:auto;
}

.content-body .line {
	width:100%;
	background-color:#fccf0b;
}
.content-body .divide {
	margin:10px 0;
}

/* --------------- think tank ------------------ */

#think-tank {
	width:100%;
	overflow:hidden;
}

#think-tank li{
	float:left;
}

/* --------------- Info Boxes ------------------ */

.info-box {
	margin:20px 20px 20px 20px;

	overflow:hidden;
	-webkit-border-radius: 15px 15px 0px 0px;
	-moz-border-radius: 15px 15px 0px 0px;
	border-radius: 15px 15px 0px 0px;

}

.info-box p {
	margin:10px;
}

.info-box .info-title p {
	color:#000;
	text-align:center;
}

.info-box .info-title {
	border:solid 5px #fccf0b;
	background-color:#fccf0b;
	-webkit-border-radius: 15px 15px 0px 0px;
	-moz-border-radius: 15px 15px 0px 0px;
	border-radius: 15px 15px 0px 0px;
}

.info-box .info-body {
	background-color:#426581;
	border:solid 5px #fccf0b;
	-webkit-border-radius:  0px 0px15px 15px;
	-moz-border-radius:  0px 0px 15px 15px;
	border-radius:  0px 0px 15px 15px;
}


/*---------------Link Box---------------*/

.link-box {
	width:100%;
}

.link-box-wrapper {
	position:relative;
	overflow:hidden;
	margin:0px 0px 0px 0px;
	-webkit-border-radius: 10px 0px 0px 10px;
	-moz-border-radius: 10px 0px 0px 10px;
	border-radius: 10px 0px 0px 10px;
}


.link-box-wrapper .link-text {
	float:left;
	width:20%;
	border:solid 5px #fccf0b;
	background-color:#fccf0b;
	-webkit-border-radius: 10px 0px 0px 10px;
	-moz-border-radius: 10px 0px 0px 10px;
	border-radius: 10px 0px 0px 10px;

}
.link-box-wrapper .link-text p {
	color:#000;
	text-align:center;
}
.link-box-wrapper .link-box {
	float:left;
	width:80%;
	margin-right:0px;
	background-color:#426581;
	border:solid 5px #fccf0b;
	-webkit-border-radius:  0px 10px10px 0px;
	-moz-border-radius:  0px 10px 10px 0px;
	border-radius:  0px 10px 10px 0px;

}

.link-box-wrapper .link-main-box {
	position:relative;
}
.link-box-wrapper .link-main-box a {
	overflow:hidden;
}

.link-box-wrapper .link-box p{
	color:#fff;
	padding-left:20px;
}

.link-box-wrapper .link-box:hover{
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	background:rgba(0,0,0,0.5);
}

.link-main-box img {
	position:absolute;
	/*right:140px;*/
	top:-12px;
}
.link-main-box {
	position:relative;
	margin:30px 0;
}
.link-box-wrapper p {
	margin:0 0 0 0;
}

.find-out-more {
	margin:40px 0;
}

/* ----- Footer ----- */

#blue-footer #atebol-footer {
	position:absolute;
	left:50%;
	margin-left:-6vw;
	width:12vw;
}

#blue-footer #atebol-footer :hover {
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	background:rgba(0,0,0,0.5);
}

#blue-footer #atebol-footer p {
	color:#fff;
	text-align:center;

}

#outer-pat-logo {
	z-index:100;
	position:fixed;
	bottom:0;
	right:0;
	width:100%;
}

#one-fifty-logo {
	display:none;
	position:absolute;
	right:0px;
	bottom:0px;

}

#lower-footer {
	background-color:rgba(0, 0,0,0.7);
    overflow:show;
	margin:0;
	padding:0;
}



/* ----- Tables ----- */



.standard-table {
	margin-top:-20px;
	overflow:hidden;
	border:solid 4px #FCCF0B;
	font-size:18px;
	background-color:#416480;
}

.standard-table ul {
	clear:both;
}
.standard-table ul li{
	display:inline;
	padding:10px 0 10px 5px;
}
.standard-table ul li p{
	font-size:20px;
	margin:0;
}


.table-titles li, .table-titles li p{
	background-color:#FCCF0B;
	color:#000;
	font-weight:bold;
}

.standard-table ul li:first-child {
	background-color:#FCCF0B;
	color:#000;
	text-align:center;
}

.table-heading {
	position:absolute;
	padding:20px 0;
	color:#fff;
}

.table-wrapper img {
	margin-top:12px;
}


/* ----- Maps ----- */

.map {
	position:relative;
	padding:10px 0;
	overflow:hidden;
}

.map .viewport {
	border-left:4px solid #FCCF0B;
	position:relative;
}
.map .viewport img{

}
.map .map-text .title-text {
	color:#fff;
	margin:40px 0 20px;
}
.map .map-text img{
	margin:20px 0;
}
.map .map-text h3{
	text-align:center;
}


/*---------time line---------*/

/*addition by gwern - modified some of the heights, margin, and padding to accommodate larger paragraphs*/

.timeline{
	margin-bottom: 20px;
}

.timeline li{
	height: 150px;
}

.timeline li ul {
	width:100%;
	height:150px;
}
.timeline li ul li{
	float:left;
	margin:0 10px;
}

.timeline li ul li p {
	border:5px dotted #FCCF0B;
	padding:7px 4px;
	margin:10px 10px;
	width:700px;
	height:120px;
}

.timeline li ul li h3 {
	line-height:120px;
	width:200px;
}

.time-line {
	background-color:#416480;
	width:20px;
	height:150px;
	position:relative;
}

.circle {
	width: 48px;
	height: 48px;
	background-color:#FCCF0B;
	-moz-border-radius: 24px;
	-webkit-border-radius: 24px;
	border-radius: 24px;
}

.time-line-circle {
	position:absolute;
	top:38px;
	left:-14px;
}

/* ----------Quotations----------*/

.quotation h3{
	line-height: 140%;
}

.quotation h3.author{
	float:right;
	color:#fff;
}
/*--------------Nav Buttons--------------*/

.bottom-nav {
	position:realtive;
	width:100%;
	padding-bottom:4%;
	padding-top:25px;
	margin-bottom:10px;

}

.nav-button {
	background-color:#FCCF0B;
	overflow:hidden;
	position:absolute;
	top:0;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.nav-button:hover {
	opacity:0.5;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

.nav-button ul {
	display:inline;
}

.nav-button ul li{
	height:100%;
	margin:0px 20px 0px 20px;
	float:left;
}

.nav-button ul li.arrow {
	background-color:#416480;
	padding:10px;
	margin:5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.nav-button ul li p {
	margin:10px 0px;
	color:#000;
	font-size:1.6em;
}

#back.nav-button {
	left:0;
}

#next.nav-button {
	right:0;
}


/*-------------Video------------*/

.videoWrapper {
	position:relative;
	padding-bottom:56.25%; /* 16:9 */
	padding-top:25px;
	height:0;
}
.videoWrapper iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;

}
.videoWrapper img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



/* ----- Classes ----- */

.strip .centre-strip {
	position:absolute;
	position:absolute;
	left:50%;
	top:0;

}

.ease {
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

.relative {
	position:relative;
}

.images {
	width:100%;
	height:auto;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

:hover {
	cursor:hand;
}

.bullet-points {
	padding-left:30px;
	margin-top:-20px;
	margin-bottom:40px;
}

.bullet-points li{
	list-style-type: square;
}

.poem p{

	margin:0;
	text-align:center;
}
.poem ul {
	margin:30px 0;
}
.author {
	font-style:italic;
	padding-left:55%;
}

.poem .title {
	font-style:bold;
	text-decoration:underline;
}


.bullet-points li p {
	margin:0 0 10px 0;
}

#chlanguage {
	overflow:hidden;
}

.caption {
	text-align:center;
	font-style: italic;
}

.caption p {
	margin:10px 0;
}


.title-layer {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:40%;
	background-color:rgba(0,0,0,0.5);
}

.title-layer h2 {
	position:absolute;
	left:0;
	top:30%;
	width:100%;
	text-align:center;

}

.title-menu {
	position:absolute;
	left:50%;
	margin-left:-250px;
	top:45%;
	width:500px;
}

.title-menu ul li{
	margin:10px 0;
	width:100%;
}

.title-menu ul li a {
	display:block;
	padding:10px 20px;
	font-size:2em;
	text-align:center;
	background-color:rgba(0,0,0,0.9);
	width:100%;
	color:#426581;
}

.title-menu ul li a:hover {
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	color:#FCCF2B;
	background-color:rgba(0,0,0,0.6);
}


.title-layer span {
	    font-family: Tondu;
		color:#FCCF2B;
}

.opaque {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:calc(100% - 5px);
	background-color:rgba(0,0,0,0.3);
}

.menu-layer {
  z-index:100;
}

.rslides img {
  width:100%;
  height:auto;

}

#canvas {
  width:1360px;
  height:743px;

}

/* --------------maps---------------*/

.map .viewport img {
    width:100%;
    height:auto;

}


#chlanguage:hover{
    cursor:hand;

}


#lower-footer .site-info {

    border-right:3px #fff solid;
}

#lower-footer .site-info h3 {
    color:#fff;
    font-size:2.2em;
    padding-bottom:4px;
    border-bottom:2px solid #fff;

}

#lower-footer .centre-strip {
    padding-top:20px;


}

#lower-footer .centre-strip .site-info ul {
    margin-top:30px;

}
#lower-footer .centre-strip .site-info ul li {
    margin:5px;
}
#lower-footer .centre-strip .site-info  ul li a {
    color:#fff;
    font-size:1.4em;
}

.footer-logos li {
    float:left;
    margin:0 10px 10px;
}

.final-footer  {
    margin:20px;
    border-top:3px solid #fff;

}

.final-footer h4 {
    margin:10px;
    text-align:center;
    color:#fff;
    font-size:2.4em;
}
.contact-info {

    clear:both;
}

.contact-info ul{
    clear:both;

    padding:10px 0;

}
.contact-info ul li{
    float:left;

}
.contact-info ul li h3 {
    margin:0 0 0 20px;
    line-height:40px;
    font-size:2.0em;
    color:#fff;
}

/*addition by gwern - centring images, maybe better to use JS or something to give single images a container and use that to centre the image*/
.image-padding{
	width:100%;
	padding: 0px 15%;
}