/*
File: pacific.css
GUI Assignment: Style a Site with External CSS
Halleluia Zeyohannes, UMass Lowell Computer Science, halleluia_zeyohannes@student.uml.edu
Copyright (c) 2022 by Halleluia Zeyohannes. All rights reserved. May be freely copied or exerpted 
for educational purposes with credit to the author.
updated by HZ on 9/27/22 1:25am.

This file is used to externally style the site elements in index.html according to the instructor 
provided images.

Comments below describe the main goal of each CSS rule.
*/

header, hgroup, nav, footer, figure, figcaption, aside, section, article {
	display: block;
}

/*
    Add in gradient background image(ptrbackground) and ensure that the bottom of the page 
    is the solid color #00569f once scrolled past the image.
*/
body {
	background: #00569f url(ptrbackground.jpg) repeat-x;
	color: #666666;
	font-family: Arial, Helvetica, sans-serif;
}

/*
    Add background image to header(sunset.jpg) and make sure it doesn't repeat through the 
    width of the header element. Background color blends into the image for a cohesive 
    appearance.
*/
header {
	background-image: url(sunset.jpg);
	background-repeat: no-repeat;
	background-position: right;
	background-color: #000033;
	color: #FFFFFF;
}

/*
   Ensure that the navbar takes up only some space on the left hand side of the centered 
   box on the site.
*/
nav {
	width: 200px;
	float: left;
}

/*
    Style the list so that there are no bullet points.

    Learned about list properties from here:
    https://www.w3schools.com/css/css_list.asp 
*/
nav ul {
	font-size: 1.2em;
	list-style-type: none;
	padding: 15px;
	margin: 0;
}

/*
    Style links so that they are bold, one color, and not underlined.

    Learned about removing underlines for links here: 
    https://www.w3schools.com/css/css_text_decoration.asp
*/
nav a {
	font-weight: bold;
	text-decoration: none;
	color: #000033;
}

/*
   Following 4 rules given by instructor. 
   
   For this rule, when hovering over the links in the navbar, 
   they will become white.
*/
nav a:hover {
	color: #FFFFFF;
}

h1 {
	margin-bottom: 0;
	padding: 10px;
}

h2 {
	color: #3399CC;
}

h1,
h2 {
	font-family: Georgia, "Times New Roman", serif;
}

/*
    Keeps images on the left so that other elements will wrap around it.
    This was accomplished using float. I learned about it from here: 
    https://www.w3schools.com/css/css_float.asp
*/
img {
	float: left;
	margin-right: 30px;
	margin-bottom: 30px;
}

#contact {
	font-size: 0.9em;
}

dt {
	color: #000033;
}
/*
    Italicize footer and make background white so that it doesn't 
    default to the light blue color set by #wrapper below.
*/
footer {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 0.8em;
	font-style: italic;
	margin-left: 200px;
	padding: 30px;
	background-color: #FFFFFF;
}

/*
    Styles resort name by setting the color and making the text a light blue.
*/
.resort {
	font-weight: bold;
	color: #799cbb
}

/*
    Styles the center 'box' given by the div element with this class. Defines 
    the width, centers it on the website, and sets the background color to 
    a light blue. 
*/
#wrapper {
	width: 80%;
	min-width: 600px;
	background-color: #90c7e3;
	margin-left: auto;
	margin-right: auto;
}

/*
    Style elements in wrapper outside of the nav element. Set background to 
    white so that it doesn't inherit the light blue color and set left margin 
    so that content is on the right of the navbar.
*/
#content {
	margin-left: 200px;
	padding: 1px 30px 15px 30px;
	background-color: #FFFFFF
}

/*
    Style the bulleted list in content. Uses marker.gif as the bullet points 
    and positions it to line up with the paragraph above it.
*/
#content > ul {
	list-style-image: url(marker.gif);
	list-style-position: inside;
	margin: 10px;
}