/* PAGE LAYOUT */

div.page-window {
  width: 960px;
  background-color: #dddddd;
  /*padding: 10px;*/
  /*min-height: 400px;*/
  margin-left: auto;
  margin-right: auto;
}

div.website-banner {
  background-color: #bbbbbb;
  padding: 10px;
}

div.mobile_nav {
  display: none;
}

div.page-content {
  padding: 10px;
  /*background-color: #dddddd;*/
  min-height: 400px;
  /* rgba(100 ,100 ,100 ,0.8); */
}

div.page-footer {
  background-color: #333333;
  padding: 10px;
  color: #ffffff
}



/* CONTENT LAYOUT */
div.content-block {
  border: thin solid black;
  padding: 10px;
}  
div.services-block {
  width: 60%;
}


/* Content entries layout is now in the content-entry css file */

/* 
 The .laid-out-outer and .laid-out-inner are something introduced in
 page-template-research-v3c and d. 
*/
	  .laid-out-outer {
	    margin: 10px;
		padding: 10px;
		border: thin dotted black;
	  }
	  .laid-out-inner {
	    margin: 5px;
		padding: 5px;
		border: thin dotted blue;
	  }




/* SLOT-ONS */
/* Copy CSS from Slot-ons and past here. */


/*-------------------Responsive Design-----------------------*/


/*------------------------Tablet Device---------------------------- */
@media screen and (max-width: 900px) {
div.page-window {
  width: 95%;
}
}

/*------------------------Tablet Device END---------------------------- */
/*------------------------Mobile Device---------------------------- */
@media screen and (max-width: 500px) {
	
div.services-block {
  width: 100%;
}

div.desktop_nav {
  display: none;
}

div.mobile_nav {
  display: block;
  min-height: 30px;
}
button.menu_trigger {
	width: 100px;
	float: right;
	/*text-align: right;*/
}
ul.mobile_nav_list {
	/*clear: both;*/
}
/*ul.mobile_nav_list .opened { */
ul.opened { /*How to write a CSS target like on the above line? */
  display: block;
}
/*ul.mobile_nav_list .closed { */
ul.closed {
	/*clear: both;*/
  display: none;
}


}
/*------------------------Mobile Device END---------------------------- */





/*------------------------Gallery-------------------------------------- */
/* 2 column layout. Modified from the Balamb Garden 3 column layout. */
div.gallery_div {
	width: auto;
}
div.gallery_div div.float_left {
	width: 40%;
	float: left;
	height: 100%;
}
/*
div.gallery_div div.float_right {
	width: 30%;
	float: right;
}
*/
div.gallery_div div.middle {
	margin-left: 50%;
	width: 40%;
	height: 400px;
}
div.gallery_div a {
	
}
div.gallery_div img {
	/*width: 100%;*/
}
div.gallery_div h3 {
	/*margin-top: 30px;*/ /*The answer may be not to control this but to put margin bottom on the row div. */
	/*clear: both; */
	/* Oh, this one actually works. And it fulfils the original purpose of those h3 elements, to help separate each line. */
	/* Another idea would be to have each gallery line in seperate div elements. Or might just do that now even with these h3 elements here. */
}
/*div.gallery_div div {*/
div.gallery_div div.row-div {
	clear: both; 
	/*height: 100px; */ /*It does matter if put a custom size on this. */
	/*height: 600px; */
	min-height: 400px;
}
div.gallery_div div.row-for-h2 {
	min-height: 30px;
}


@media screen and (max-width: 900px) {
.gallery_div {
	
}
div.gallery_div div.float_left {
	width: 48%;
	float: none;
}
/*
.float_right {
	width: 48%;
	float: right;
	margin: 5px 0px 5px 0px;
}
*/
div.gallery_div div.middle {
	margin-left: 0px;
	width: 48%;
	height: auto;
	margin: 5px 0px 5px 0px;
}
}
@media screen and (max-width: 500px) {
div.gallery_div div.float_left {
	width: auto;
	float: none;
	margin: 10px;
}
/*
.float_right {
	width: auto;
	float: none;
	margin: 10px;
}
*/
div.gallery_div div.middle {
	margin-left: 0px;
	margin: 10px;
	width: auto;
}
}
/*------------------------Gallery End---------------------------------- */



/*------------------------Background Image---------------------------------- */
div.bg_img1 {
	background-image: url(../images/background/background-image.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
	background-attachment: scroll;
	/*background: url(../new_background_image.jpg) cover center center no-repeat fixed;*/
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;	
	z-index: -1;
	position: absolute;
	/*width: 1550px;*/
	min-width: 100%;
	min-height: 100%;
	top: 0px;
	left: 0px;
}
/*------------------------Background Image End---------------------------------- */