/* -----------------------------------------------------------
   Stellar Forged LLC
   style.css

   Logo colours:  navy #173f66   light blue #47b2e1
   Page is built for an 800 x 600 window, 780px content.
   ----------------------------------------------------------- */


/* --- elements --- */

body {
	font: 13px Arial, Helvetica, sans-serif;
	line-height: 1.45;
	color: #000;
	margin: 0;
	padding: 12px 8px 24px 8px;

	/* photo, knocked back so the boxes stay readable */
	background: #16304a url(images/background.jpg) no-repeat center center;
	background-image:
		linear-gradient(rgba(14,36,60,0.68), rgba(14,36,60,0.68)),
		url(images/background.jpg);
	background-size: cover;
	background-attachment: fixed;
	}

p { margin: 0 0 8px 0; }

h1 {
	font: bold 16px Arial, Helvetica, sans-serif;
	color: #173f66;
	margin: 0 0 9px 0;
	padding-bottom: 3px;
	border-bottom: 1px solid #000;
	}

h2 {
	font: bold 13px Arial, Helvetica, sans-serif;
	color: #173f66;
	margin: 15px 0 4px 0;
	}

h3 {
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #000;
	margin: 11px 0 2px 0;
	}

ul { margin: 0 0 9px 0; padding-left: 19px; list-style-type: square; }
li { margin-bottom: 2px; }

hr { border: 0; border-top: 1px solid #8a97a4; height: 0; margin: 11px 0; }
#footer hr { border-top-color: #5c748c; }

img { border: 0; }

.small   { font-size: 12px; }
.caption { font-size: 12px; color: #333; line-height: 1.35; }
.note    { font-size: 12px; color: #333; }


/* --- links --- */

a:link    { color: #14548c; text-decoration: underline; }
a:visited { color: #5b2d8e; text-decoration: underline; }
a:hover, a:active { color: #a03000; text-decoration: underline; }


/* --- page frame --- */

#page { width: 780px; margin: 0 auto; }


/* --- masthead --- */

#masthead {
	background: #fff;
	background: rgba(255,255,255,0.96);
	border: 1px solid #000;
	border-bottom: 0;
	padding: 7px 11px 6px 11px;
	overflow: hidden;
	}

#masthead img { display: block; float: left; }

#masthead .tagline {
	float: right;
	color: #3d5570;
	font-size: 10px;
	line-height: 1.4;
	text-align: right;
	padding-top: 13px;
	}

/* --- button navigation --- */

#nav-main {
	background: #d6dce2;
	background: rgba(214,220,226,0.94);
	border: 1px solid #000;
	border-top: 0;
	padding: 4px 4px;
	overflow: hidden;
	}

#nav-main ul { margin: 0; padding: 0; list-style: none; }
#nav-main li { float: left; margin-right: 3px; }

#nav-main ul a,
#side ul a {
	display: block;
	padding: 3px 8px;
	border: 1px solid;
	border-color: #9fc4e2 #0d2942 #0d2942 #9fc4e2;
	background: #2b6da3;
	color: #fff;
	font-size: 11px;
	text-align: center;
	text-decoration: none;
	}

#nav-main ul a:hover,
#side ul a:hover { background: #a03000; color: #fff; text-decoration: none; }

#nav-main ul strong a,
#nav-main ul strong a:hover,
#side ul strong a,
#side ul strong a:hover {
	font-weight: normal;
	background: #173f66;
	color: #fff;
	border-color: #0d2942 #9fc4e2 #9fc4e2 #0d2942;	/* pressed in */
	}


/* --- side column and main column --- */

#body { overflow: hidden; margin-top: 10px; }

#side { float: left; width: 142px; }

#side ul { margin: 0 0 10px 0; padding: 0; list-style: none; }
#side li { margin-bottom: 2px; }
#side ul a { text-align: left; }

#side .sidebox {
	border: 1px solid #000;
	background: #fff;
	background: rgba(255,255,255,0.93);
	margin-bottom: 10px;
	}

#side .sidebox b {
	display: block;
	background: #173f66;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 7px;
	}

#side .sidebox span {
	display: block;
	padding: 7px;
	font-size: 12px;
	line-height: 1.45;
	}

#side .sidebox a { word-wrap: break-word; }

#main {
	margin-left: 154px;
	background: #fff;
	background: rgba(255,255,255,0.94);
	border: 1px solid #000;
	padding: 12px 15px;
	}


/* --- pictures --- */

.shots { overflow: hidden; }
.shots .shot { float: left; width: 240px; margin: 0 14px 12px 0; }
.shots .shot img { border: 1px solid #000; display: block; }
.shots .shot p { margin: 4px 0 0 0; }

.figure { margin: 4px 0 12px 0; }
.figure img { border: 1px solid #000; display: block; }
.figure p { margin: 4px 0 0 0; }


/* --- tables --- */

table.data {
	border-collapse: collapse;
	width: 100%;
	margin: 4px 0 10px 0;
	font-size: 12px;
	border: 1px solid #000;
	}

table.data th {
	background: #173f66;
	color: #fff;
	text-align: left;
	font-weight: bold;
	padding: 4px 7px;
	border: 1px solid #173f66;
	}

table.data td { border: 1px solid #94a1ae; padding: 4px 7px; vertical-align: top; }
table.data tr.alt td { background: #eef1f5; }

td.lbl { width: 30%; font-weight: bold; color: #173f66; }

.stars { color: #173f66; letter-spacing: 1px; }


/* --- footer --- */

#footer {
	text-align: center;
	font-size: 12px;
	color: #dce6ef;
	line-height: 1.6;
	margin-top: 10px;
	padding-top: 2px;
	}

#footer a:link, #footer a:visited { color: #b5d3ea; }
#footer a:hover { color: #fff; }
#footer .tnav { margin-bottom: 4px; }


/* --- narrow windows --- */

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

	#page { width: auto; }
	#side { float: none; width: auto; overflow: hidden; }
	#main { margin-left: 0; }

	#side ul { overflow: hidden; }
	#side li { float: left; margin: 0 3px 3px 0; }
	#side ul a { text-align: center; }

	#side .sidebox {
		float: left;
		width: 48%;
		margin: 0 4% 10px 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		}
	#side .sidebox + .sidebox { margin-right: 0; }

	#masthead img { float: none; width: 100%; max-width: 440px; height: auto; }
	#masthead .tagline { float: none; text-align: left; padding-top: 6px; }

	#nav-main { display: none; }

	body { background-attachment: scroll; }

	.shots .shot { width: 100%; max-width: 240px; float: none; margin-right: 0; }
	}