/* Imports Majesti Font */
@font-face {
    font-family: Majesti-Banner-Bold;
    src: url('Fonts/Majesti-Banner-Bold.otf');
    src: format('opentype');
    
}

/* Imports Majesti Font */
@font-face {
    font-family: Majesti-Banner-Book;
    src: url('Fonts/Majesti-Banner-Book.otf');
    src: format('opentype');
}

/* Imports Majesti Font */
@font-face {
    font-family: Majesti-Banner-BookItalic;
    src: url('Fonts/Majesti-Banner-BookItalic.otf');
    src: format('opentype');
}

/* Sets html tag to full height and width */
html {
    height: 100%;
	width: 100%;
}

/* Styles for body */
body {
    margin: 0px;
    padding: 0px;
    height: 100%;
	width: 100;
}

/* Sets navigation bar height and width */
.navigation {
    width: 100%;
    height: 75px;
}

/* Changes the color of the currently selected tab on navigation bar */
.active {
    background-color: rgb(138, 140, 143);
}

/* Stylizes the logo */
#logo {
    float: left;
    height: 75px;
    width: 275px;
    display: inline;
	padding-left: 5px;
	position: relative;
	background-color: rgb(65, 57, 61);
}

/* Adjusts the location of the logo in header */
#logo-holder {
    float: left;
    width: 15%;
}

/* Stylizes the navigation bar unordered list */
.navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(65, 57, 61);
    display: inline-block;
    width: 85%;
    height: 75px;
}

/* Stylizes the unordered list items */
.navigation li {
    float: right;
	display: inline;
}

/* Stylizes the navigation bar links (buttons) */
.navigation a {
    color: white;
    padding: 25px 25px 25px 25px;
    text-decoration: none;
    font-size: 22px;
    float: right;
    font-family: majesti-banner-book;
}

/* Adjusts the color of buttons when mousing over them */
li a:hover {
    background-color: #111;
}

/* Stylizes Site Content div */
#content {
    width: 75%;
    float: left;
    height: 100%;
    background-color: #f2f2f2;
}

/* Stylizes h1 tags in content */
#content h1 {
    font-family: majesti-banner-bookitalic;
    padding-left: 10px;
    color: rgb(190, 30, 45);
    font-size: 40px;
}

/* Stylizes paragraph elements in content */
#content p {
    font-family: Majesti-Banner-Book;
    padding-left: 10px;
    font-size: 24px;
}

/*  Side content picture */
#sidecontent1 {
    width: 25%;
    height: 100%;
    background-image: url(Images/RestaurantTables.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
}

/*  Side content picture */
#sidecontent2 {
    width: 25%;
    height: 100%;
    background-image: url(Images/ZineOrange-Wall.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
}

/*  Side content picture */
#sidecontent3 {
    width: 25%;
    height: 100%;
    background-image: url(Images/PorkRavioli.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
}

/*  Side content picture */
#sidecontent4 {
    width: 25%;
    height: 100%;
    background-image: url(Images/FourBellyRamen.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
}

/*  Stylizes the footer */
footer {
    color: white;
    font-family: majesti-banner-bookitalic;
    background-color: rgb(65, 57, 61);
    display: inline-block;
    width: 100%;
    height: 75px;
    text-align: center;
	position: relative;
	clear: both;
	bottom: 0;
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
    width: 98%;
    padding: 12px; /* Some padding */  
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #ef4e22;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    width: 100%;
    height: 100%;
}

/* Creates floating bordered box */
.floating-box {
    float: left;
    width: 150px;
    height: 100px;
    margin: 10px;
    border: 2px solid black;
}

/* Creates larger floating  bordered box */
.floating-box-large {
	float: left;
	width: 300px;
	height: 200px;
	margin: 10px;
	border: 2px solid black;
	align-content: center;
}

/* Sets size of images in bordered box */
.floating-box-large img {
	height: 100%;
	width: 100%;	
}

/* Sets size of images in bordered box */
.floating-box img {
    height: 100%;
    width: 100%;
}

/* Changes font of h3 tags */
h3 {
	font-family: majesti-banner-book;
}