/* @override http://localhost/public/docs/css/screen.css */

body {
	color: #222;
	font: 18px/1.2em "MyriadPro-Regular", "Myriad Pro Regular", MyriadPro, "Myriad Pro", Helvetica, Arial, sans-serif;
	margin: 0px 0px 25px;
	padding: 0px;
	text-align: center;
	background: #444 url(../../images/abs.jpg) repeat;
}

em { font-size: 14px; font-style: italic; letter-spacing: -0.01em; color: #777;}
h1, h2 { font-size: 19px; font-weight: normal; }
a { text-decoration: none; color: #eeeeee; padding: 0px 2px; }

/* Layout */

div#container { margin: 0px; padding: 0px; text-align: left; }

img {
  max-width: 100%;
}

.media {
  background: #ffffff;
  display: block;
  float: left;
  padding: 0px;
  width: 660px;
}

.footer {
	margin-top: 25px;
	margin-left: 25px;
}
.footer a, .media a {
  background: #4c4c4c;
}
.footer a:hover, .media a:hover {
  background: #4c4c4c;
  color: #35e800;
}

.content a {
	color: #444;
	text-decoration: underline;
}
.content a:hover {
	background: #4c4c4c;
	color: #35e800;
	text-decoration: none;
}

/* header bar */
.header {
	margin: 0;
	padding: 0;
	background-color: #ffffff;
	display: block;
	float: left;
	width: 100%;
}
.header canvas {
	outline: none;
}

/* content block titles */
div.content h4 {
	margin: 10px 0;
	text-align: left;
	padding: 2px 0 2px 4px;
	border-bottom: 1px dotted #000000;
	width: 25%;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-style: normal;
}

/* nav */
ul.nav {
	float: left;
	height: 30px;
	margin: 0px;
	padding: 0 0 0 11px;
}
ul.nav li {
	border-right: 1px dotted #b1b1b1;
	float: left;
	font-size: 20px;
	height: 32px;
	list-style-type: none;
	margin: 0px;
}
ul.nav li.title, ul.nav a {
	color: #000000;
	display: block;
	font-weight: normal;
	padding: 5px 7px 4px;
}
ul.nav a:hover {
	background-color: #ccf9bf;
}
ul.nav a.herenow {
	background-color: #35e800;
	color: #000000;
}

.content {
  background: #ffffff;
  display: block;
  float: left;
  padding: 10px;
  width: 640px;
  -webkit-box-shadow: 2px 2px 5px hsla(0,0%,0%,.15);
     -moz-box-shadow: 2px 2px 5px hsla(0,0%,0%,.15);
          box-shadow: 2px 2px 5px hsla(0,0%,0%,.15);
}
.content p {
	padding-right: 10px;
}

.box {
  background: #4c4c4c;
  display: block; 
  float: left; 
  margin: 0px;
  overflow: hidden; 
  padding: 0px;
  position: relative;
  width: 330px;
  -webkit-box-shadow: 2px 2px 5px hsla(0,0%,0%,.15);
     -moz-box-shadow: 2px 2px 5px hsla(0,0%,0%,.15);
          box-shadow: 2px 2px 5px hsla(0,0%,0%,.15);
}
.box img {
  border: 0px;
  display: block;
}
.box a {
	color:  #ffffff;
	padding: 0;
}
.box a:hover {
	color: #35e800;
	padding: 0;
}

.caption {
	background-color: rgba(0,0,0,0.7);
	padding: 5px;
	bottom: 0;
	left: 0;
	position: absolute; 
}

hr {
  display: block;
  clear: both;
  margin: 0px 0px 1px 0px;
  padding: 0px;
  height: 0px;
  overflow: hidden;
  visibility: hidden;
	width: 100%;
}

/* mobile layout */

@media only screen and (max-width: 659px) {
  div#container { width: 318px; }
  .media { width: 318px; }
  .box { width: 318px; }
  .content { width: 298px; }
}