/**
 * Coffee Hosting Styles
 * -----------------------------------------------------------------------------
 * This stylesheet defines styles that are site-wide. When creating new styles,
 * be sure that they follow the rules below.
 *
 * Our website color scheme is composed of the following colors:
 * - #342818 (background color)
 * - #B17336 (accent color)
 * - #D7A46E (second accent color, rarely used)
 * - #fff    (headings and paragraphs on dark background)
 *
 * We use the following fonts throughout the website:
 * - Arvo      (headings and navigation items)
 * - Open Sans (paragraphs)
 *
 * Other notes:
 * - If you'd like to make a button from a non-button element, add the class
 *   "action-button" to the element
 * - Don't worry about "display: flex" or "::after" if you don't know what they
 *   are.
 */

body {
	margin: 0;
	background-color: #342818;
}

#master-container {
	display: block;
	position: relative;
	background-color: #342818;
}

/* ==========================================================================
   Navigation bar
   ========================================================================== */

/*holds entirety of navigation bar*/
#navigation-container {
	display: block;
	position: relative;
	width: 100%;
	height: 80px;
	border-bottom: 5px solid #B17336;
	z-index: 3;
}

/*used for clearing floats contained in the navigation bar and other elements*/
#navigation-container::after,
#page-container::after,
#footer-container::after {
	display: block;
	content: ' ';
	clear: both;
}

/*logo is floated to the left*/
#logo {
	display: inline-block;
	position: relative;
	width: 200px;
	height: 65px;
	padding: 7.5px 0;
	float: left;
}

/*navigation items are floated right and centered vertically*/
nav {
	display: flex;
	position: relative;
	height: 80px;
	float: right;
	align-items: center;
}

/*style navigation items*/
nav a {
	display: inline;
	position: relative;
	margin: 10px 20px;
	font-family: "Arvo", serif;
	font-size: 18px;
	color: #fff;
	text-decoration: none;
}

/*needs special styling to account for chevron placed beside it*/
.dropdown-text {
	margin: 10px 33px 10px 20px;
}

/*psuedo-element is used to display chevron*/
.dropdown-text::after {
	display: block;
	position: absolute;
	content: ' ';
	width: 13px;
	height: 8px;
	background-image: url("resource/chevron-dropdown.png");
	top: 8px;
	right: -20px;
}

/*needed when moving mouse from "Hosting" text to submenu to ensure menu doesn't
disappear*/
#hosting-submenu:hover {
	padding: 20px 0;
}

/*make submenu visible on hover by changing display from none to block*/
#hosting-submenu:hover .submenu {
	display: block;
	transform: scale(1);
}

/*other elements should not be affected by placement of submenu*/
#hosting-submenu .submenu {
	display: block;
	position: absolute;
	background-color: #fff;
	border-radius: 10px;
	margin-top: 15px;
	transform: scale(0);
	-ms-transform: scale(0);
	-webkit-transform: scale(0);
    transform-origin: 50px 0%;
    -ms-transform-origin: 50px 0%;
	-webkit-transform-origin: 50px 0%;
    transition: all 0.7s;
}

/*psuedo-element used for decorative arrow on top of submenu*/
#hosting-submenu .submenu::after {
	display: block;
	position: absolute;
	content: ' ';
	width: 10px;
	height: 10px;
	background-color: #fff;
	top: -5px;
	left: 50px;
	transform: rotate(45deg);
}

/*ensures each submenu item stays on its own line and is black on white*/
.submenu a {
	display: block;
	color: #000;
}

/*used on text links that should look like buttons. I call them "action links"
 * To use "action links", use the following format:
 * <a href="page-name.htm" class="action-button"
 * data-text="Button Text">Button Text</a>
 */
.action-button {
	position: relative;
	display: inline-block;
	font-family: "Arvo", serif;
	font-size: 20px;
	color: #fff;
	text-decoration: none;
	padding: 5px 10px;
	background-color: #B17336;
	border-radius: 5px;
	color: rgba(0,0,0,0);
	overflow: hidden;
	border: 0;
    cursor: pointer;
}

/*part of cool hover effect*/
.action-button::after {
	content: attr(data-text);
	position: absolute;
	display: block;
	top: 5px;
	color: #fff;
	transition: all 0.5s;
}

/*part of cool hover effect*/
.action-button::before {
	content: attr(data-text);
	position: absolute;
	display: block;
	top: -30px;
	color: #fff;
	transition: all 0.5s;
}

a.action-button {
	color: rgba(0,0,0,0) !important;
}

/*part of cool hover effect*/
.action-button:hover::before { top: 5px; }
.action-button:hover::after  { top: 40px; }

/* ==========================================================================
   Page content
   ========================================================================== */

/*changing z-index so as to keep submenu visible when hovered*/
#page-container {
	z-index: 2;
}

/*styling for large headers*/
h1 {
	font-family: "Arvo", serif;
	font-size: 50px;
	font-weight: normal;
	color: #fff;
	margin: 10px 0;
	text-align: center;
}

h2,
h3 {
	font-family: "Arvo", serif;
	font-size: 25px;
	font-weight: normal;
	color: #fff;
	margin: 10px 0;
	text-align: left;
}

h3 { font-size: 18px; }

/*styling for body text*/
p,
li,
label {
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	color: #fff;
	margin: 10px 0;
}

#page-container a {
	color: #fff;
}

.body-text {
	width: 100%;
}

/*used for images that are floated left*/
.img-float-left {
	float: right;
	width: 40%;
	height: auto;
	margin-left: 10px;
	margin-bottom: 10px;
}

/* Used for background images that should take up the full width of browser.
 * Content placed inside will be centered.
 * To change the image in HTML, use style attribute like so:
 * - style="background-image: url('resource/name-of-image.jpg')"
 */
.fullscreen-container {
	display: flex;
	width: 100%;
	height: 360px;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	overflow: hidden;
	background-image: url("resource/fullscreen-splash.png");
	background-size: cover;
	background-position: center;
}

/* Feature sections
   ========================================================================== */

/*Used when placing icons beside each other, used on homepage*/
.feature-section .page-width {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 30px auto 20px auto;
}

/*for individual icons and supporting text*/
.feature-block {
	width: 200px;

}

/*the icon itself*/
.feature-block img {
	width: 100px;
	height: 100px;
	margin: 0 50px;
	border: 10px solid #fff;
	border-radius: 100%;
	background-color: #B17336;
}

/*centered text looks better below icons*/
.feature-block p {
	text-align: center;
}

/* Hosting options
   ========================================================================== */

.hosting-options .page-width {
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	margin: 30px auto;
}

.option-block {
	width: 280px;
    background-color: #fff;
    border: 10px solid #B17336;
    border-radius: 10px;
}

.option-block .option-header {
	background-color: #B17336;
    padding: 0 10px 10px;
}

.option-block h2 {
	font-family: "Arvo", serif;
	font-size: 20px;
	font-weight: normal;
	color: #fff;
	margin: 0;
	text-align: center;
}

.option-block ul {
	padding-left: 0;
	list-style-position: inside;
	margin: 0;
}

.option-block li {
	color: #000 !important;
	margin: 0 !important;
	padding: 10px;
}

.option-block li:nth-child(2n) {
	background-color: #D7A46E;
}

.option-center {
	margin: 10px auto 8px auto;
    display: table;
    position: relative;
    text-align: center;
}

/* Footnotes
   ========================================================================== */

.footnotes ol {
	padding-left: 0;
	list-style-position: inside;
}

.footnotes li {
	font-size: 12px !important;
}

/* Order Now Form
   ========================================================================== */

form {
	position: relative;
	display: inline-block;
	width: 400px;
	padding: 20px;
	background-color: #fff;
	margin: 10px 0;
	border-radius: 10px;
	float: left;
}

fieldset {
	border: none;
	margin: 10px 0;
	padding: 0;
}

legend {
	font-family: "Arvo", serif;
	font-size: 25px;
	font-weight: normal;
	color: #fff;
	margin: 10px 0;
	text-align: left;
}

.field {
	position: relative;
	display: inline-block;
	margin-right: 10px;
	float: left;
}

.field label {
	display: block;
	margin: 5px 0 !important;
}

.field input {
	width: 100px;
	height: 35px;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	color: #000;
	padding: 5px;
	box-sizing: border-box;
}

.full-line {
	display: block;
	width: 400px;
	float: none;
	clear: both;
}

.full-line input {
	width: 400px;
}

.checkbox {
	display: block;
	width: 400px;
	float: none;
	clear: both;
	padding: 10px 0;
}

.field label,
.checkbox label,
legend,
label a {
	color: #000 !important;
}

.radio input[type="radio"] {
	width: 15px;
	height: 15px;
    display: inline;
    margin: 0;
}

.radio label {
	display: inline-block;
	vertical-align: baseline;
	margin-right: 30px !important;
}

#form-aside {
	float: left;
	display: block;
	margin-left: 20px;
	width: 540px;
}

#order-price {
	position: absolute;
	bottom: 0;
	right: 0;
	margin-right: 20px;
	margin-bottom: 10px;
}

#order-price p {
	color: #000;
}

/* ==========================================================================
   Miscellaneous
   ========================================================================== */

.fullscreen-container p,
.fullscreen-container h1,
.page-width {
	position: relative;
	width: 1000px;
	margin: 0 auto;
}

.floating {
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Footer
   ========================================================================== */

#footer-container {
	display: block;
	position: relative;
	width: 100%;
	border-top: 5px solid #B17336;
	z-index: 1;
}

#footer-container footer,
#footer-container a {
	font-family: "Open Sans", sans-serif;
	font-size: 12px;
	color: #fff;
	margin: 10px;
}

#footer-container footer { float: left; }
#footer-container a { float: right; }