/* 
	BACKSTAGE | OORLOGSMUSEUM OVERLOON

	2016 - Cybox Backstage CMS

	Cybox internet & communicatie - Boxmeer
	www.cybox.nl
*/

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic,700,700italic,900,900italic);
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
/* reset */  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 	margin: 0; 	padding: 0; 	border: 0; 	outline: 0; 	font-size: 100%; 	vertical-align: baseline; 	background: transparent; } body { 	line-height: 1; } ol, ul { 	list-style: none; } blockquote, q { 	quotes: none; } blockquote:before, blockquote:after, q:before, q:after { 	content: ''; 	content: none; }  /* remember to define focus styles! */ :focus { 	outline: 0; }  /* remember to highlight inserts somehow! */ ins { 	text-decoration: none; } del { 	text-decoration: line-through; }  /* tables still need 'cellspacing="0"' in the markup */ table { 	border-collapse: collapse; 	border-spacing: 0; }
/* clearfix  */   .cf:before, .cf:after {     content: " "; /* 1 */     display: table; /* 2 */ }  .cf:after {     clear: both; }  /**  * For IE 6/7 only  * Include this rule to trigger hasLayout and contain floats.  */ .cf {     *zoom: 1; }


html,
body {
   margin:0;
   padding:0;
   -webkit-font-smoothing: antialiased;
}
body {
    font-family:  "Oswald", Arial, Verdana, sans-serif;
    font-size: 0.9em;
    line-height: 1.7;
    background: #2B251D;
	  color: #999;
    background-image: url('../images/bg.jpg');
    background-position: 50% 0;
    background-attachment: fixed;
}


/* links */
a {
    text-decoration: none;   
    color: #999;
}
a:hover {
    color: #ccc;
}

div {
	box-sizing: border-box;
}

#home-frame {
    position: fixed;
    top: 80px; left: 0; right: 0; bottom: 0;

}
#home {
    border: 0;
    position: absolute;
    width: 100%; height: 100%;
}

#content {
  width: 90%;
  max-width: 1180px;
  margin: 0 auto;
  /*min-height: 1000px;*/
  /*border: 1px dashed #475532;*/
  padding-top: 80px;
}


#content .top-bar {
  height: 55px; 
  background: #5a6548;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
#content .top-bar a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url('../images/pattern.png');
}
#content .top-bar a:before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0; top: 0;
  opacity: 0.7;
  z-index:2;
  background-image: url('../images/backgrounds/header-bottom-overlay.png');
}
#content .top-bar a:after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0; top: 0;
  background-image: url('../images/backgrounds/opmars.png');
  background-size: 110%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 0.9;
  z-index: 1;
  transition: background 300ms;
}
#content .top-bar a:hover:after {
  background-size: 120%; 
}
#content .top-bar a span {
  position: absolute;
  right: 0;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #fff;
  text-transform: uppercase;
  padding-right: 65px;
  background-image: url('../images/icons/arrow.png');
  background-repeat: no-repeat;
  background-position: 90% 50%;
  background-size: 16px;
  z-index: 2;
}
#content .breadcrumbs {
  padding: 6px 0;
  font-family: Arial;
  font-size: 0.9em;
  color: #8f8a83;
  margin-bottom: 35px;
}
#content .breadcrumbs a {
  color: #8f8a83;
  text-decoration: underline;
}
#content .breadcrumbs a:hover {
  color: #694E31;
}



/* disable selection */
#menu, #header
{
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}