/* ---------------------------------------------------------------------------------------- */
/* - INFORMATION -------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/*   
/*   This file should contain no information about an element's colour, including border,
/*   gradients and the like.  Keep colour information in the separate
/*   style-colour-scheme.css file.
/*
/* ---------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- INFORMATION - */
/* ---------------------------------------------------------------------------------------- */

/* For identifying which stylesheet is active */
/*
@media all and (min-width:    0px) and (max-width: 319px) { header h1 { color: #f0f !important; } }
@media all and (min-width:  320px) and (max-width: 479px) { header h1 { color: #00f !important; } }
@media all and (min-width:  480px) and (max-width: 719px) { header h1 { color: #0f0 !important; } }
@media all and (min-width:  720px) and (max-width: 999px) { header h1 { color: #f00 !important; } }
@media all and (min-width: 1000px)                        { header h1 { color: #fff !important; } }
*/

/*
@media all and (min-width:    0px) and (max-width: 319px) { #book h2 { color: #f0f !important; } } /* Purple *
@media all and (min-width:  320px) and (max-width: 479px) { #book h2 { color: #00f !important; } } /* Blue *
@media all and (min-width:  480px) and (max-width: 719px) { #book h2 { color: #0f0 !important; } } /* Green *
@media all and (min-width:  720px) and (max-width: 1014px) { #book h2 { color: #bada55 !important; } } /* Red */
/* @media all and (min-width: 1000px)                        { #book h2 { color: #fff !important; } } /* White */



.clearboth { clear: both; }

/* ---------------------------------------------------------------- */
/* Images
/* ---------------------------------------------------------------- */

img.max100 { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- */
/* Fonts
/* ---------------------------------------------------------------- */

/* Google Fonts */
h1, h2, h3    { font-family: "Coda", cursive; }
p, ul, ol, li { font-family: "Roboto", Helvetica, Arial, sans-serif; }

/* Styles */
h1, h2, h3 { text-transform: uppercase; font-weight: normal; font-style: italic; }
nav p      { text-transform: uppercase; font-weight: bold; }
footer p   { text-transform: uppercase; font-weight: bold; text-align: center; }
p          { line-height: 25px; }
p.intro    { line-height: 34px; }

/* Margins */
h1               { margin-top: 60px; margin-bottom:  0px; }
header h2        { margin-top:  0px; margin-bottom:  0px; }
p                { margin-top:  0px; }
h2, h3, footer p { margin-top: 10px; margin-bottom: 10px; }

/* Text styles */
#book p, #crew p, #ship p, #biog p { text-align: justify; }
p.intro span.black { font-weight: 900; }
.italic { font-style:  italic; }
.bold   { font-weight: bold;   }

/* Font sizes */
header h1 { font-size: 50px; }
header h2 { font-size: 16px; }
p.intro   { font-size: 30px; }
footer p  { font-size: 14px; }

header h1, header h2 {
	text-align:     center;
	letter-spacing: 5px;
	color:          #fff;
}

/* Set standard font sizes and style for all sections. */
h2 { font-size: 40px; }
h3 { font-size: 26px; margin-top:  30px; }
p  { font-size: 20px; font-weight: bold; }

/* ---------------------------------------------------------------- */
/* Links
/* ---------------------------------------------------------------- */

a:link    { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover   { text-decoration: none; }
a:active  { text-decoration: none; }

/* ---------------------------------------------------------------- */
/* Page layout and sections setup
/* ---------------------------------------------------------------- */

body { margin: 0px; }

#starry-starry-night {
	width:  100%;
	height: 100%;
	background-image: url("../images/starfield.jpg");
	background-size: cover;
	position: fixed;
	z-index: -1;
}

/* ---------------------------------------------------------------- */
/* Persistant navbar
/* ---------------------------------------------------------------- */

nav, nav .container, nav .button { height: 50px; }

nav {
	width: 100%;
	background-color: rgba(10, 80, 165, 0.8);
	background-color: rgba(0, 0, 80, 0.5);
	background-color: #193782;
	background-color: #3359b8;
/* 	background-color: #193477; */
	z-index: 1;
	
	height: 58px;
	
	/* Make it sticky */
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;
	top: 0px;
}

nav .container {
	width: 320px;
	margin-left:  auto;
	margin-right: auto;
}

nav .button {
	width: 70px;
	margin-left:  5px;
	margin-right: 5px;
	float: left;
	margin-top: 5px;
}

nav .button {
	width: 48px;
	margin-left:  10px;
	margin-right: 10px;
	float: left;
}
nav .button.home { margin-left:  0px; }
nav .button.biog { margin-right: 0px; }

nav .button p {
	color: #fff;
	text-align: center;
	margin: 0px;
	padding-top: 16px;
	font-size: 16px;
}

/* ---------------------------------------------------------------- */
/* Header
/* ---------------------------------------------------------------- */

header {
	margin: 0px;
	padding: 20px 20px 34px 20px;
	padding: 20px 0px 34px 0px;
	height: 250px;
}

header #titles {
	width: 100%;
	margin-top: 90px;
}

header #logo {
	width: 100%;
	margin-top: 90px;
	width: 400px;
	margin-left:  auto;
	margin-right: auto;
}
header #logo img {
	width: 400px;
	margin-left:  auto;
	margin-right: auto;
}

header #path1000,
header #path0720,
header #path0480,
header #path0420,
header #path0320 {
	height: 200px;
	margin-left: auto;
	margin-right: auto;
}

header #path1000, header #path1000 img { max-width: 1000px; }
header #path0720, header #path0720 img { max-width:  720px; }
header #path0480, header #path0480 img { max-width:  480px; }
header #path0420, header #path0420 img { max-width:  420px; }
header #path0320, header #path0320 img { max-width:  320px; }

header #path1000 { margin-top: -85px; }
header #path0720 { margin-top: -85px; }
header #path0480 { margin-top: -85px; }
header #path0420 { margin-top: -85px; }
header #path0320 { margin-top: -85px; }

/* ---------------------------------------------------------------- */
/* Footer
/* ---------------------------------------------------------------- */

footer {
	height: 240px;
	background-image: linear-gradient( to top, #6a7b90, #536173 25%, #6b7c91 25%, #6f7f92 85%, #607083 90%, #424b57 100% );
	border-top: 20px solid #677b93;
	color: #4e6179;
	color: #3b4a5d;

	background-color: #fff;
	
	
/*
	background-image: url("http://danielpoore.com/images/institute_1.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
*/
}

footer #social-media {
	margin-top: -155px;
	margin-top: 85px;
	width: 48px; /* For a single social media icon */
	width: 156px; /* For three social media icons */
	margin-left: auto;
	margin-right: auto;
	
/* 	margin-top: 30px; */
}

footer #social-media img {
	float: left;
	margin-left:  10px;
	margin-right: 10px;
}

footer p {
	text-indent: 0px;
	color: #fff;
	
/* 	color: #000; */
}

/* ---------------------------------------------------------------- */
/* Footer background image
/* ---------------------------------------------------------------- */

#footer1000 {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
#footer1000 img {
	margin-top: 0px;
	z-index: 0;
}

/* ---------------------------------------------------------------- */
/* Sections' standard styling
/* ---------------------------------------------------------------- */

#book, #crew, #ship, #base, #biog { width: 100%; }

/* Set standard size for section content containers and centre them horizontally. */
#book .content,
#crew .content,
#ship .content,
#base .content,
#biog .content {
	padding:      50px 25px; /* Added 50px padding at the top to ensure the persistant navbar doesn't overlap the bottom of the content. */
	max-width:    1000px;
	margin-left:  auto;
	margin-right: auto;
}

/* ---------------------------------------------------------------- */
/* Book section
/* ---------------------------------------------------------------- */

/* Font and link colours */

#book                         { background-color: white;     } /* White */
#book                         { background-color: transparent; }
#book {
	width:  100%;
	height: 100%;
	background-image: url("../images/moon-png.png");
	background-size: cover;
/*
	position: fixed;
	z-index: -1;
*/
}

.earth {
	
}
#book h2, #book h3            { color:            #ec4549;     } /* For Sale red */
#book a:link, #book a:visited { color:            #ec4549;     } /* For Sale red */
#book a:hover                 { color:            #fd207c;     } /* Red alert */
#book p                       { color:            #53515a;     } /* ? */

#book p.intro           { color: #333; }
#book p.intro a:link,
#book p.intro a:visited { color: #ec4549; font-weight: bold; }
#book p.intro a:hover   { color: #3359b8; font-weight: bold; }
#book p.intro a:active  { color: #ec4549; font-weight: bold; }

#book p                 { color: #d7eee9; } /* Lunar blue */
#book p.intro           { color: #d7eee9; } /* Lunar blue */

/* Blurb to the left of the For Sale board */

#book p.intro          { font-weight: 700; }
#book .blurb p         { font-weight: 400; }
#book .blurb p.tagline { font-weight: 900; font-style: italic; }

.intro {
	margin-top:    36px;
	margin-bottom: 50px;
}

.blurb {
	float: left;
	width: 590px;
	width: 555px;
	
/*
	width: 515px;
	padding-left: 20px;
	padding-right: 20px;
*/
	
	background-color: rgba(0,0,0,0.5);
}

#book .blurb p {
	padding-left: 20px;
	padding-right: 20px;
}

.tagline {
	margin-top: 30px;
}

/* For sale board */

#for-sale-board {
	height: 400px;
	width:  360px;
	float: right;
	margin-left: 50px;
	position: relative;
	z-index: 0;
	
	padding-top: 45px;
}
#for-sale-board .content {
	position: absolute;
	left: 0;
	padding: 20px 20px 20px 20px;
	
	top: 125px;
	top: 170px;
}
#for-sale-board p {
	text-align: center;
	font-weight: bold;
	color: #476170;
	font-size: 17px;
	margin-top:  0px;
	margin-bottom:  0px;
}
#for-sale-board p.price {
	color: #e04040; font-size: 18px; margin-top: 10px; margin-bottom: 20px; text-transform: uppercase;
}

/* Remove bottom padding to sit For Sale board at the bottom of the section. */
#book .content { padding-bottom: 0px; }

/* ---------------------------------------------------------------- */
/* Crew
/* ---------------------------------------------------------------- */

/* Font and link colours */

#crew                         { background-color: #286ec3;     } /* Bold blue */
#crew h2, #crew h3            { color:            #ffffff;     } /* White */
#crew a:link, #crew a:visited { color:            #bada55;     } /* Badass green */
#crew a:hover                 { color:            #fd207c;     } /* Red alert */
#crew p                       { color:            #ffffff;     } /* White */

/* Characters' individual font colours */

#crew #marlow h3, #crew #marlow a:link, #crew #marlow a:visited { color: #41d4b9; } #crew #marlow a:hover { color: #75e9d4; }
#crew #julia  h3, #crew #julia  a:link, #crew #julia  a:visited { color: #fcbb73; } #crew #julia  a:hover { color: #ffd3a0; }
#crew #mollie h3, #crew #mollie a:link, #crew #mollie a:visited { color: #f36faa; } #crew #mollie a:hover { color: #ff97c6; }
#crew #rupert h3, #crew #rupert a:link, #crew #rupert a:visited { color: #6fc2f5; } #crew #rupert a:hover { color: #acdfff; }

/* ---------------------------------------------------------------- */
/* Ship section
/* ---------------------------------------------------------------- */

/* Font and link colours */

#ship                         { background-color: transparent; } /* Transparent */
#ship h2, #ship h3            { color:            #fd207c;     } /* Red alert */
#ship a:link, #ship a:visited { color:            #fd207c;     } /* Red alert */
#ship a:hover                 { color:            #a0d6d3;     } /* Readout green */
#ship p                       { color:            #ffffff;     } /* White */

/* Hazard bars */

.hazard {
	height: 20px;
	width: 100%;
	background-image: url("../images/hazard.jpg");
}

/* ---------------------------------------------------------------- */
/* Institute (base)
/* ---------------------------------------------------------------- */

/* Font and link colours */

#base                         { background-color: #ffffff;     } /* White */
#base h2, #base h3            { color:            #fff0f0;     } /* Infra Red */
#base a:link, #base a:visited { color:            #fff0f0;     } /* Infra Red */
#base a:hover                 { color:            #fff0f0;     } /* Red alert */
#base p                       { color:            #fff0f0;     } /* Infra Red */

#specs {
	clear: both;
	margin-left:  auto;
	margin-right: auto;
	width: 400px;
	
/*
	color: #f0284d;
	color: #720e20;
*/
}

#base p.hint {
	color: #66d08b;
	font-style: italic;
}

/* Hide secret content initially */
/*
#top-secret {
	display: none;
}
*/

/* ---------------------------------------------------------------- */
/* Biog section
/* ---------------------------------------------------------------- */

/* Font and link colours */

#biog                         { background-color: #2b3031;     } /* Charcoal */
#biog h2, #biog h3            { color:            #5eabed;     } /* Seabed */
#biog a:link, #biog a:visited { color:            #5eabed;     } /* Seabed */
#biog a:hover                 { color:            #e5f4e9;     } /* Glowworm green */
#biog p                       { color:            #a0d6d3;     } /* Readout green */


/* ---------------------------------------------------------------- */
/* Blog form
/* ---------------------------------------------------------------- */

#starry-starry-night.form {
	margin-top: -100px; /* This has to be the same (although negative) as the margin-top in .form_container. */
}

.form_container {
	margin-top: 100px;
	margin-left:  20px;
	margin-right: 20px;
}

form#blog_edit {
	margin-left:  auto;
	margin-right: auto;
	padding: 20px;
	max-width: 1000px;
	border-radius: 12px;
	background-color: rgba(255,255,255,0.7);
}

.form_container input#title,
.form_container textarea#blogpost {
	font-family : inherit;
	font-size   : 100%;
	width: 100%;
	height: 20px;
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	
	margin-top: 10px;
}

.form_container input#hour,
.form_container input#minute,
.form_container input#date,
.form_container input#month,
.form_container input#year {
	font-family : inherit;
	font-size   : 100%;
	width: 36px;
	height: 20px;

	font-family: "Roboto", Helvetica, Arial, sans-serif;
	text-align: center;
}

.form_container input#year {
	width: 50px;
}

.form_container input#title {
	height: 30px;
	font-size: 20px;
	
	margin-bottom: 20px;
}
.form_container textarea#blogpost {
	height: 120px;
	font-size: 14px;
}

.form_container label {
	font-family: "Roboto", Helvetica, Arial, sans-serif;
}

.my_button {
	padding-top:     0px;
	padding-bottom:  0px;
	padding-left:   10px;
	padding-right:  10px;
	border-radius:   4px;
	width:         100px;
	
	margin-top:      5px;
	margin-bottom:   5px;
}
.my_button p {
	font-size: 16px;
	text-align: center;
	margin: 0px;
}
.my_button:hover {
	cursor: pointer;
}
.my_button.now,
.my_button.tomorrow,
.my_button.online,
.my_button.offline,
.my_button.save {
	background-color: #afc;
}

.hide_me {
	display: none;
}