style.css

/* 

	Hi!  Welcome to style.css.  CSS stands for cascading style sheet - we recommend http://www.w3schools.com/css/ for the nitty gritty of CSS syntax.  But basically, what you should know is:

	 - Which part of a web page the css is referring to is specified by either ids or classes in the .html file.  For instance, a div with id="signup" will be styled by the element #signup below.  # means ID, and . means class in .css files.

	 - Elements inside of other elements inherit their style, unless the .css file specifies otherwise.  For instance, if you have the html: <div id="outside">Hello <div id="inside">world!</div></div>, and 'Hello' is specified in css (#outside) as being in bold font, 'world!' will also be bold unless you add a #inside element to your css.

 	-  Fun style elements to play with that won't mess with the structure of the page include color, font, and background.  When playing with colors, you can consult http://hexcolor.com/.  Colors can be specified by name ("black", "white") or hexadecimal notation (#000000, #FFFFFF).

*/

/* Imports the font that is used on this page. */
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700);

/* Remove the browser's default spacing around the page */
html, body {
margin: 0;
padding: 0;
}

/* Set the default appearance of the webpage */
body {
font: 130%/1.4 TrebuchetMS, Arial, sans-serif; /* Default font and line spacing */
text-align: left; /* Align text to the left */
color: #102a43; /* Dark blue text for readability */
background: #f6f2e8; /* Light tan background inspired by Santa Cruz beaches */
padding-bottom: 20px; /* Add space at the bottom of the page */
}

/* Style all hyperlinks */
a {
color: #0055a4; /* UC Santa Cruz style blue */
text-decoration: none; /* Remove the underline */
font-weight: bold; /* Make links easier to see */
}

/* Main page title */
h1 {
font: bold 2.1em 'Source Sans Pro', Arial, Sans-Serif;
text-align: left;
color: #ffcc33; /* Golden yellow title color */
}

/* Section headings */
h2 {
font: bold 1.1em 'Source Sans Pro', Arial, Sans-Serif;
padding: 0;
margin: 0 0 12px 0; /* Add spacing below headings */
}

/* Style shared by every content section */
div.section {
padding: 1.4em; /* Increase spacing inside sections */
margin: 0 auto 18px auto; /* Center sections with space between them */
max-width: 1000px; /* Prevent content from stretching too wide */
text-align: justify; /* Keep paragraph edges aligned */
border-radius: 12px; /* Rounded corners */
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18); /* Light shadow for depth */
}

/* Apply the same style to the "plan" and "more" sections */
#plan,
#more {
background: #0055a4; /* Blue background */
color: #ffffff; /* White text for contrast */
font: 'Source Sans Pro', Arial, Sans-Serif;
background-image: none; /* No background image */
}

/* Style links inside the blue sections */
#plan a,
#more a {
color: #ffcc33; /* Gold links stand out on blue */
}

/* Style the interactive poem section */
#poem {
height: 110px;
background: #ffcc33; /* Gold background */
color: #102a43; /* Dark blue text */
text-align: center; /* Center the poem text */
}

/* Style the "Who We Are" section */
#whoweare {
background: #ffffff; /* White background */
color: #102a43; /* Dark blue text */
}

/* Style the image on the left side of the page */
.minileft {
float: left; /* Float image beside the text */
height: 100%;
margin-bottom: 1.5em; /* Space below image */
margin-right: 1em; /* Space between image and text */
border-radius: 10px; /* Rounded image corners */
}