/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
 
* {overflow: hidden} 
html { overflow-y: scroll;}
body {
	font-size: 100%;
	color: #666666;
	font-family: 'Exo 2', sans-serif, Tahoma, Geneva, sans-serif;
	background-color: #ffffff;
	background-image: url(../../layout_images/hiddencitybglong.jpg);
	background-repeat: no-repeat;

}
ol, ul { list-style: none; margin: 0;}
h1 { margin-bottom: 10px; color: #111111;}	
h3 {margin-left: 17px; font-size: 1.4em;}
a, img { outline: none; border:none; color: #000;}
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1em;}
img { display: block; margin-bottom: 10px;}
aside { font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display: block;
	}
	
	.credits {
	font-size: 0.7em;
	color: #666;
	line-height: 0.5em;
	position: relative;
	clear: both;
	margin: 0px;
	padding: 0px;
}

#onfb {
	margin-left: 4.5px;
	margin-top: 15px;
	font-size: 140%;
}	
	
	
/* Structure */
#wrapper {
	width: 98%;
	max-width: 1220px;
	margin: auto;
	padding-left:1%;
	padding-right:1%;
	padding-top:2%;
	padding-bottom:2%;
	} 

	#main {
	width: 65%;
	margin-right: 5%;
	float: left;
	background-color: #FFF;
	
		}	
	
	section {background-color: #FFF;
		}	
		
	aside {
		width: 30%;
		float: right;
		}
		#aside2 {
		width: 40%;
		float: left;
		}
		
#main2 {
	width: 100%;
	float: left;
	background-color: #FFF;
}
#main3 {
	width: 107%;
	float: left;
	background-color: #FFF;
}
.clear {
	clear: both;
	background-color: #FFF;
}

/* styling */
header h1 {
	font-size: 1.1em;
	font-weight: normal;
	padding-left: 20px;
	line-height: 1.2em;
	letter-spacing: 0.23em;
}
#wrapper header h1 a {
	color: #999;
	text-decoration: none;
}
#main p {
	font-size: 1.15em;
	margin-right: 5%;
	margin-left: 17px;
	line-height: 1.9em;
}
#main h1 {
	margin-left: 17px;
}
#main h3 {
	margin-top: 45px;
	margin-bottom: 17px;
}
#main2 h1 {
	margin-left: 17px;
}

#main2 p
{
	font-size: 1.1em;
	margin-right: 5%;
	margin-left: 17px;
	line-height: 1.8em;
}
.removelinkline {
	text-decoration: none;
}
    .bgstyle {
	background-color: #E7E7E7;
	
}
    .bgstyle p {
	padding-left: 8%;
	padding-bottom: 18px;
}
    .bgstyle .archstyle a {
	padding-left: 5%;
	line-height: 1.4em;
	text-decoration:none;
		font-size: 1.3em;
}

    .bgstyle .archstyle ul {
	margin-bottom: 15px;
}
#picboxsq {
	background-color: #CCC;
	float: left;
	height: 300px;
	width: 300px;
	margin-left: 2%;
	margin-top: 30px;
	margin-right: 2%;
}
	.longhead {
	color: #CCC;
	background-color: #333;
	padding-top: 5px;
	padding-bottom: 9px;
	margin-bottom: 25px;
	padding-left: 8%;
}
.imagebox {
	margin-bottom: 30px;
	margin-left: 5%;
}
.imagebox img {
	margin-bottom: 10px;
}
.imagebox p {
	font-size: 90%;
}
.sidebarimagebox a {
	text-decoration: none;
	font-size: 1.2em;
	color: #333;
}
.sidebarimagebox  {
	font-size: 1.1em;	
}

.sidebarimagebox a:hover {
	text-decoration: none;
	font-size: 1.2em;
	color: #7B7B7B;
}
.sideimageborder {
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #3E3E3E;
	border-bottom-color: #3E3E3E;
	margin-left: 8%;
}
.adspace {
	font-size: 55%;
	color: #999;
	text-align: center;
	margin-bottom: 40px;
	margin-top: 5px;
}
.adspacewhite {
	font-size: 55%;
	color: #999;
	text-align: center;
	background-color: #FFF;
	padding-top: 30px;
	padding-bottom: 20px;
}

.toptext h1 {
	font-size: 2.6em;
	margin-left: 17px;
	margin-top: 20px;
}
.toptext h2 {
	font-size: 1.8em;
	margin-left: 17px;
		margin-right: 20px;
	margin-bottom: 15px;
}
.bookmarks {
	padding-left: 18px;
	width: 100%;
	clear: both;
	padding-top: 20px;
}
.bookmarks img {
	margin-right: 15px;
	float: left;
}

.greydividerbase {
	background-color: #666;
	clear: both;
	height: 20px;
	width: 97%;
	margin-top: 30px;
	margin-bottom: 30px;
	margin-left: auto;
		margin-right: auto;		
		
}


.tryfloat {
	height: auto;
	width: auto;
	position: absolute;
	left: 0px;
	top: 51%;
	padding-top: 7px;
	padding-right: 7px;
	padding-bottom: 7px;
	padding-left: 15px;
}
.floater {
	width: 80%;
	position: relative;
	top: -65px;
	left: 20px;
	clear: both;
	background-image: url(../../layout_images/transtext.png);
	color: #000;
	padding-top: 10px;
	padding-right: 7px;
	padding-bottom: 14px;
	padding-left: 7px;
}
	
/* Nav */

#menu-icon {
	display:none;
}
header nav {
	float: left;
	margin-top: 10px;
	}
	
	header nav li {
	display: inline;
	text-transform: uppercase;
		}
		
header nav2 {
	display: none;
	float: left;
}

#navme {display:none;
}
	#nav-wrap li {
	background-color: #999;
		}
		
		ul#list-nav {
	list-style:none;
	letter-spacing: 0.25em;
	font-size: 95%;
	padding-right: 15px;
	padding-bottom: 0px;
	margin: 0;
}
ul#list-nav li {
	display:inline;
	text-transform: lowercase;
}
ul#list-nav li a {
	text-decoration:none;
	width: inherit;
	color:#464646;
	float:left;
	text-align:center;
	border-left:1px solid #fff;
	font-weight: normal;
	margin-right: 8px;
	padding-top: 7px;
	padding-right: 20px;
	padding-bottom: 7px;
	padding-left: 20px;
	background-color: #E9E9E9;
}
ul#list-nav li a:hover {
	color:#000;
	font-weight: normal;
	background-color: #C8BFB2;
}
		
		
		
		
/* Banner */			
#banner {
	float: left;
	margin-bottom: 25px;
	width: 100%;
	}

	#banner img {
		width: 100%;
		max-width:850px 
		}
#bannerb {
	padding-bottom: 1.95%;
	margin-top: 20px;
	width: 100%;
	}

	#bannerb img {
		width: 100%;
		max-width:850px 
		}
		
		#bannerhalf {
	padding-bottom: 1.95%;
	padding-top: 1.95%;
	width: 75%;
	}

	#bannerhalf img {
		width: 100%;
		max-width:525px 
		}
		
		#bannerc {
	padding-bottom: 1.95%;
	padding-top: 1.95%;
	width: 100%;
	}

	#bannerc img {
		width: 100%;
		max-width:850px 
		}
		
		#twopics img {
		width: 100%;
		}
		
		#twopics {
	background-color: #FFF;
	height: auto;
	width: 100%;
	clear: right;
	float: left;
	max-width: 850px;
	padding-bottom: 1.95%;
	padding-top: 1.95%;
}
#twopictwo {
	width: 45%;
	float: left;
}
#twopicone {
	width: 45%;
	float: left;
	margin-right: 10%;
}
.clearplus {
	margin-bottom: 25px;
	margin-top: 25px;
}
.clearplusplus {
	margin-bottom: 30px;
}
.fb-comments, .fb-comments span, .fb-comments iframe { data-width: 100% !important; }

/* new stuff here */	

#picboxa {
	background-color: #666;
	float: left;
	height: 300px;
	width: 195px;
	margin-right: 40px;
}
.piccaption {
	position: relative;
	top: -75px;
	background-image: url(../../layout_images/transtext.png);
	background-repeat: repeat;
	padding: 5px;
	height: 65px;
	font-size: 90%;
	visibility: hidden;
}
.piccaptionb a {
		text-decoration:none;
	
}
.piccaption a {
		text-decoration:none;
	
}
.piccaptionb {
	position: relative;
	top: -45px;
	background-image: url(../../layout_images/transtext.png);
	background-repeat: repeat;
	padding: 5px;
	height: 35px;
	font-size: 90%;
	visibility: hidden;
}
#baseadpadtop {
	margin-left: 0.9%;
	margin-bottom: 25px;
}

#baseadpad {
	margin-left: 0.9%;
	font-size: 55%;
	color: #999;
}
.whitebg {
	background-color: #FFF;
	margin: 0px;
	padding: 0px;
}
.row {
	vertical-align: top;
	height:auto !important;
	padding-left: 15px;
	padding-bottom: 5px;
	letter-spacing: 0.11em;
}
.list {display:none;}
.list ul {
	font-size: 90%;
	letter-spacing: 0.11em;
}
.show {display:none;}
.hide:target + .show {display:inline;}
.hide:target {display:none;}
.hide:target ~ .list {display:inline;}
@media print {.hide, .show {display:none;}}

/* ==|== primary styles =====================================================
   Author: Luke Shumard (lukeshumard.com)
   ========================================================================== */
#content {
	width: auto;
	margin-top: auto;
	margin-right: 0px;
	margin-bottom: auto;
	margin-left: 0px;
	background-color: #FFF;	
}

.item {
	display: block;
	float: left;
	width: 230px;
	-webkit-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
	-moz-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
	-ms-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
	-o-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
	transition: left .4s ease-in-out, top .4s ease-in-out .4s;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 20px;
	margin-left: 10px;
}

.featured {
	width: 115px;
}

.item img {
	width: 230px;
	height: auto;
}

.featured img {
  width: 115px;
  height: auto;
}




/* attempt to lose rogue nav... */

@media screen and (min-width: 490px) {

#oops {
	display: none;
	}

/* attempt to lose rogue nav... */	

}	
@media screen and (max-width: 1024px) {
					body {
	background-image: url(../../layout_images/hiddencitybgmedium.jpg);
				}

		#main3 {
	width: 104%;
}
 .sidebarimagebox img{
  overflow:hidden;
  width:250px;
  height:100px; 
  }

/* THIS TO STOP BM OVERLAP HEADING IN KINDLE */	  
  .tryfloat {
	padding-top: 70px;
  }

}
@media screen and (max-width: 800px) {
	
				


	 
  .sidebarimagebox img{
  overflow:hidden;
  width:187px;
  height:100px; 
  }

				body {
	font-size: 95%;
	background-image: url(../../layout_images/hiddencitybgmedium.jpg);
				}	
				
				#bm {
		display: none;
		}
		#main3 {
	width: 100%;
}
	
}

@media screen and (max-width: 640px) {


	 
  .sidebarimagebox img{
  overflow:hidden;
  width:250px;
  height:100px; 
  }


	
}

@media screen and (max-width: 480px) {

#wrapper {
	padding-left:0.5%;
}


	header {
	display: block;
	margin-top: 8px;
	margin-bottom: 8px;
	font-size: 110%;
		}
	header nav, #main, aside {
		float: left;
		clear: left;
		margin: 0 0 10px; 
		width: 100%;
		}	
		header nav li {
			margin: 0;
			background: #efefef;
			display: block;
			margin-bottom: 3px;
			}
			header nav a {
	display: block;
	padding: 10px;
	text-align: center;
	text-decoration: none;
				}
				    .bgstyle {
	background-color: #fff;
}			
				body { font-size: 90%;
				}
				

/* this used to make berlin menu item disappear will need to show with more cities */
ul#list-nav li a {
	display: none;
line-height:0.1em;
}
	#main {
		margin-top:-40px;
	}
		  
 
/* try to make floating image gallery centre */
				#content {
	  margin-left: auto;
    margin-right: auto; }
	
#main3 {
	width: 100%;
}					    

#menu-icon {
	display:block;
	background-image: url(../../layout_images/menu-button.png);
	height: 30px;
	width: 30px;
	cursor:pointer;
	background-repeat: no-repeat;
	margin-top: 5px;
	margin-bottom: 29px;
	margin-left: 18px;
}

#navme {clear:both;
width:170px
background-color:#FC0;
display:none;
}

.bookmarks {
	margin-top: 35px;
}
/* RESIZING BASE IMAGES TO SMALLER HEIGHT */
.item {
	max-height: 160px;
				
}
.piccaptionb {
position: absolute;
    left: 0px;
    top: 0px;
	width: 100%;
	font-size: 115%;
	visibility: visible;
}
/* RESIZING SIDEBAR IMAGES WORKS */
 .sidebarimagebox img{
  overflow:hidden;
  width:270px;
  height:100px; 
  } 

}



/* ==|== media queries ======================================================
   EXAMPLE Media Query for Responsive Design.
   This example overrides the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}



/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { border:0; font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }

  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}