/*
Filename: sitewide.css
Author: Greg Buchmann
Description: ITWP 1050 Designing with Cascading Style Sheets
Assignment: Project 3 - Yummy Thanksgiving Recipes
*/

	
/* body and layout styles */


/*
a. The margins should be set as follows: top 5 pixels, right 0, bottom 5
pixels, and left 0.
b. The padding should be set to zero on all sides.
c. Apply a font-size of 90% and add the !important declaration.
d. Set the font color to black using the rgba color value for black. Be sure
the black is 100% opaque.
e. Set a minimum width of 770 pixels.
f. Apply a background image (cornucopia.jpg) and be sure it repeats both
horizontally and vertically.
g. Set the font family to Arial, Helvetica, sans-serif.
*/


body {
margin: 5px 0px 5px 0px;
padding: 0 0 0 0;
font-size: 90%;
color: rgba( 0%, 0%, 0%, 1 );
min-width: 770px;
background: url(images/cornucopia.jpg) repeat 0 0;
font-family: Arial, Helvetica, sans-serif;
}



/*
Using CSS comment marks, create a comment that reads heading
styles.
b. Create a style rule for the h3 HTML selector:
i. Set the font color to dark green using the rbga color value:
rgba(153,153,0,1)
c. Create a style rule for the h5 HTML selector:
i. Italicize the font.
*/

/* heading styles */

h3 {
color: rgba(153,153,0,1);
}

h5 {
font-style: italic;
}





/*
Create an HTML form selector with the following properties and values:
a. Apply a 1 pixel, solid, orange border using the rgba(255,204,1,1) color
value.
b. Set the background color to a dark orange color using the
rgba(255,190,51,1 color value.
c. Apply a padding of 2 pixels to the entire form.
d. Apply a 5 pixels margin to the entire form.
e. Create a box shadow with a 2 pixel x and y offset, 5 pixel blur, and a
black color shadow that is completely opaque using the rgba color value.
*/


form {
border: 1px solid rgba( 255, 204, 1, 1 );
background-color: rgba( 255, 190, 51, 1 );
padding: 2px 2px 2px 2px;
margin: 5px 5px 5px 5px;
box-shadow: 2px 2px 5px rgba( 0%, 0%, 0%, 1 );
}



/*
2. Create an HTML input selector with the following properties and values:
a. Set the font size to 10 pixels and font family to Arial, Helvetica, sans-serif
within a single declaration. (Pages 152-154)
b. Set the background color to a light yellow using the rgba(255,255,204,.8)
color value.
*/


input {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
background-color: rgba( 255, 255, 204, 0.8 );
}







/* header and navigation */

/*
a. Title the ID header.
b. Set the background to white using the rgba color value for white. Be sure
the white is 100% opaque.
c. Apply a background image (topbanner.jpg).
d. Do not repeat the background image.
e. Set the header height to 95 pixels and width to 550 pixels.
*/

#header {
background-color: rgba( 100%, 100%, 100%, 1 );
background: url(images/topbanner.jpg) no-repeat 0 0;
height: 95px;
width: 550px;
}


/*
Create an ID for the main navigation bar area and title it nav.
a. Apply a 1 pixel solid border of white using the rgba color value for white.
Be sure the white is 100% opaque.
*/

#nav {
border: 1px solid rgba( 100%, 100%, 100%, 1 );
}


/*
Define the unordered list descendent of the nav ID with the following properties
and values (Pages 70-75):
a. Define a width of 100%.
b. Set the background color to rgba(255,204,1,1).
c. Set the padding on the left to zero.
d. Set the margins to zero on all sides.
e. Float the list to the left.
*/

#nav ul {
width: 100%;
background-color: rgba( 255, 204, 1, 1 );
padding-left: 0px;
margin: 0px 0px 0px 0px;
float: left; 
}


/*
HINT: #nav ul li:
Set the display to inline
*/


#nav ul li {
display: inline;
}



/*
Define the link state for the list item of the unordered list using the nav ID with
the following properties and values:
a. Float left.
b. Set the color of the text to black using the rgba color value for black.
c. Set the padding to 6 pixels top, 12 pixels right, 6 pixels bottom and 12
pixels left.
b. Apply a 1 pixel solid white border to the right using the rgba color value
for white. Be sure the white is 100% opaque.
d. Set the width to auto
*/

#nav ul li a {
float: left;
color: rgba( 0%, 0%, 0%, 1);
padding: 6px 12px 6px 12px;
border-right: 1px solid rgba( 100%, 100%, 100%, 1 );
width: auto;
}


#nav ul li a:link {
float: left;
color: rgba( 0%, 0%, 0%, 1);
padding: 6px 12px 6px 12px;
border-right: 1px solid rgba( 100%, 100%, 100%, 1 );
width: auto;
}


/*
Define the hover state for the list item of the unordered list using the nav ID with
the following properties and values:
a. Set the background color to rgba(255,255,153,1).
b. Set the padding to 6 pixels top, 12 pixels right, 6 pixels bottom and 12
pixels left.
c. Apply a 1 pixel solid white border to the right using the rgba color value
for white.
*/

#nav ul li a:hover {
background-color: rgba( 255, 255, 153, 1 );
padding: 6px 12px 6px 12px;
border-right: 1px solid rgba( 100%, 100%, 100%, 1 );
}





/* table styles */

/*
Create a rule for the HTML table selector with the following properties and
values:
a. Set the border to none.
b. Apply a font-size of 12px and set the font family to Arial, Helvetica, sansserif using the single font property. (Pages 152-154)
c. Add a top margin of 0 pixels, a right margin 2 pixels, a bottom margin of 2
pixels and left margin of 2 pixels.
d. Set the table layout to auto.
e. Show the empty cells. (Page 225)
*/


table {
border: none;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
margin: 0px 2px 2px 2px;
table-layout: auto;
empty-cells: show;
}


/*
Create an ID selector with the name of recipetable with the following properties
and values:
a. Add a padding of 10 pixels on each side.
b. Set the position to relative with 5 pixels from the left and –20 pixels from
the top.
c. Set the display to inline-table.
*/

#recipetable {
padding: 10px 10px 10px 10px;
position: relative;
left: 5px;
top: -20px;
display: inline-table;
}





/* images */

/*
Create a class selector with the name of recipephoto and add the following
properties and values:
a. Float left.
b. Apply a 1 pixel solid black border using the rgba color value for black. Be
sure the black is 100% opaque.
c. Add a top margin of 0 pixels, a right margin 5 pixels, a bottom margin of 5
pixels and left margin of 10 pixels.
d. Add a width of 140 pixels.
*/


.recipephoto {
float: left;
border: 1px solid rgba( 0%, 0%, 0%, 1 );
margin: 0px 5px 5px 10px;
width: 140px;
}


/*
Create an ID selector with the name of cornbread_stack and add the following
properties and values:
a. Float right.
b. Apply relative positioning with a top position of -145 pixels. (Pages 288-
291)
c. Add a top margin of 2 pixels, a right margin 5 pixels, a bottom margin of 5
pixels and left margin of 0 pixels.
d. Apply a border radius of 5 pixels.
e. Apply a box shadow that has an x and y offset of 1 pixel, a 3 pixel blur,
and a shadow color of black with a 50% opacity using the rgba color
value for black. (Pages 302-304)
*/

#cornbread_stack {
float: right;
position: relative;
/* top: -145px; */    /* My positioning looks better and matches the example result image better ;-) *wink* - At least in my Firefox session */
top: -160px;
right: 15px;
margin: 2px 5px 5px 0px;
border-radius: 5px;
box-shadow: 1px 1px 3px rgba( 0%, 0%, 0%, 0.50 );
}






/*  ingredients and directions */


/*
Create an ID selector and name it ingredients.
a. Set the margin to 5 pixels on all four sides.
b. Bold the font.
c. Set the background color to rgba(255,153,0,.4).
d. Set the padding to 10 pixels on all four sides.
e. Create rounded corners with a 10-pixel border radius.
f. Add relative positioning.
g. Set the height to auto.
*/


#ingredients {
margin: 5px 5px 5px 5px;
font-weight: bold;
background-color: rgba( 255, 153, 0, 0.40 );
padding: 10px 10px 10px 10px;
border-radius: 10px;
position: relative;
height: auto;
}


/*
Create an ID selector and name it directions.
a. Set the margin to 10 pixels on all four sides.
b. Add a 1 pixel solid border with the color of rgba(255,51,0,1).
c. Set the top margin to 10 pixels.
d. Add 5 pixels of padding to all four sides.
*/

#directions {
margin: 10px 10px 10px 10px;
border: 1px solid rgba( 255, 51, 0, 1 );
margin-top: 10px;
padding: 5px 5px 5px 5px;
}



/*
Create an HTML selector for the horizontal rule element.
a. Add a 1 pixel solid black border with a 50% opacity using the rgba color
value for black.
b. Add a 15 pixel margin to the bottom of the horizontal rule.
*/


hr {
border: 1px solid rgba( 0%, 0%, 0%, 0.50 );
margin-bottom: 15px;
}







/* pre supplied CSS settings */


	
#wrap {
	background-color: rgba(255,255,255,1); /* white */
	margin: 0 auto; /* centers page */
	width: 770px;
	padding: 10px;
	border-radius: 10px; /* rounds the corners */
	box-shadow: rgba(0,0,0,.75) 2px 0 4px; /* applies box shadow */
}




/* recipe content area */	
	
#main {
	background: rgba(255,255,255,1); /* white */
	float: left;
	width: 550px;
	margin-bottom: 25px;
}



#main h2, #main h3, #main p {
	padding: 0px 10px;
}




/* right side bar */

#sidebar {
	background: rgba(255,255,255,1); /* white */
	float: right;
	width: 195px;
	padding: 10px;
	min-height: 350px;
}


/*
Define the unordered list descendent for the sidebar ID with the following
properties and values:
a. Set the bottom margin to zero
*/

#sidebar ul {
margin-bottom: 0px;
}



/*
Define the unordered list list item descendent for the sidebar ID with the
following properties and values:
a. Set the font size to 12 pixels.
b. Use pieicon.gif as the image bullet for each list item (all images are
located inside the images directory).
*/

#sidebar ul li {
font-size: 12px;
list-style-image: url(images/pieicon.gif);
}



/*
Define a paragraph descendent for the sidebar ID with the following properties
and values:
a. Set the top padding to zero, the right padding to 10 pixels and the bottom
and left padding to zero.
*/


#sidebar p {
padding: 0px 10px 0px 0px;
}



/*
5. Create an ID selector named side_image.
a. Add a box shadow with a 2 pixel x and y offset, a blur of 5 pixels, and an
opaque black shadow using the rgba color value.
*/


#side_image {
box-shadow: 2px 2px 5px rgba( 0%, 0%, 0%, 1 );
}



/*
6. Create an ID selector named facts.
a. Set the display to block.
b. Set the width to 190 pixels and the height to 250 pixels.
c. Set the overflow to auto. (Pages 259-261)
i. NOTE: The scroll bars do not display in Chrome on the Mac even
though overflow is set to auto. This is a browser issue.
d. Set the background color to rgba(251,220,71,.25).
e. Apply margins of 10 pixels on the top, 0 on the right and bottom, and 5
pixels on the left. (Pages 265-267)
f. Set the font size to 90%;
g. Apply padding of 0 on the top and left sides and 3 pixels on the right and
bottom sides.
*/


#facts {
display: block;
width: 190px;
height: 250px;
overflow: auto;
background-color: rgba( 251, 220, 71, 0.25 );
margin: 10px 0px 0px 5px;
font-size: 90%;
padding: 0px 3px 3px 0px;
}





/*
7. Define the heading 3 descendent for the facts ID with the following properties
and values:
a. Set the left margin to 20 pixels.
b. Set the text color to rgba(204,102,0,1).
c. Transform the text to uppercase. (Pages 164-165)
d. Use an inherit value for the font size.
*/

#facts h3 {
margin-left: 20px;
color: rgba( 204, 102, 0, 1 );
text-transform: uppercase;
font-size: inherit;
}







/*
Create a class named logo and set the border to none.
a. You will be using this for the validation logos within the footer area.
*/



.logo {
border: none;
}



/*
2. Create an ID selector for the footer area and title it footer with the following
properties and values:
a. Set the background color to the rgba(255,153,0,1) color value.
b. Set the clear property to both. (Page 264)
*/


#footer {
background-color: rgba( 255, 153, 0, 1 );
clear: both;
}




/*
3. Define a paragraph descendent for the footer ID with the following properties
and values:
a. Set the font size to 9 pixels.
b. Italicize the font.
c. Add a padding of 5 pixels to all four sides.
d. Add a top margin of 10 pixels and a right, left and bottom margin of zero.
e. Align the text to the center. (Pages 171-173)
*/


#footer p {
font-size: 9px;
font-style: italic;
padding: 5px 5px 5px 5px;
margin: 10px 0px 0px 0px;
text-align: center;
}








/*
Be sure you create the style rules in the order to follow.
1. Create an HTML selector for the default anchor tag style:
a. Set the color to orange using the rgba(255,153,0,1) color value.
b. Set the text decoration to underline.
2. Create the link state with the following properties and values:
a. Set the color to orange using the rgba(255,153,0,1) color value.
b. Set the text decoration to underline.
3. Create the visited state with the following properties and values:
a. Set the color to light orange using the rgba(255,204,0,1) color value.
b. Set the text decoration to underline.
4. Create the hover state with the following properties and values:
a. Set the color to dark orange using the rgba(255,102,0,1) color value.
b. Set the text decoration to none.
c. Bold the font.
5. Create the active state with the following properties and values:
a. Set the color to dark orange using the rgba(255,102,0,1) color value.
b. Set the text decoration to underline.
c. Bold the font.
*/




/* Html a anchor selectors */
/* hyperlink styles */

a {
color: rgba( 255, 153, 0, 1 );
text-decoration: underline;
}

a:link{
color: rgba(255,153,0,1);
text-decoration: underline;
}

a:visited{
color: rgba(255,204,0,1);
text-decoration: underline;
}

a:hover{
color: rgba(255,102,0,1);
text-decoration: none;
font-weight: bold;
}

a:active{
color: rgba(255,102,0,1);
text-decoration: underline;
font-weight: bold;
}