@charset "utf-8";

/*  File: DavidLordanIndexStyle_v2.css
    91.461 GUI Programming 1, Assignment 3: Styling Your First Web Page With CSS
    David Lordan, UMass Lowell Computer Science, david_lordan@student.uml.edu
    Created on September 18, 2014, Updated on September 23, 2014 5:50 PM

    This CSS file serves as the style sheet to the file "DavidLordan_indexv2.html", which is the index
    page to my website for the 91.461 course. The index serves to give personal information as
    well as to provide navigation to all pages/assignments created over the length of the course. 

NOTE: This is the updted version of the css file taken from assignment 2 for assignment 3.
Alteration include a navigation bar for different pages, as well as some
formatting changes, such as the font and spacing. 

    

    

    This is a font that was imported from google fonts. It is used for all text on the site other than the nav bar. */
@import url('http://fonts.googleapis.com/css?family=Ubuntu');


/* Style for entire content of index page. Adds a border around the content along
with some padding for space. Radius on border corners. Also applies font imported from google.  */
body{
    font-family: 'Ubuntu', sans-serif;                   
    padding-top: 10px;
    border-style: solid;
    border-radius: 10px;
    padding: 15px;
    margin: 15px;
    height:100%

}



/* Style for top banner. Creates a black background (likely to change in future versions),
black text, and a border with radius on corners. A bit of shadowing was added to add some depth.   */
#header{
    background-color: black;
    color: white;
    text-align: center;
    border-style: groove;
    border-width: 2px;
    box-shadow: 5px 5px 7px #888888;
    border-radius: 15px ;
    margin-bottom: 11px;

}


/* General theme for each page on the site. Light blue background, rounded border.
   Padding for space.*/
.main_layout{

    padding-left: 20px;
    background-color: #DDFFFF;
    border-style: solid;
    padding-bottom: 20px;
    border-radius: 5px ;
}

/* Additional space added for lenghty sections of text. */
.main_layout p {
    padding-left: 20px;
    padding-bottom: 8px;
    padding-right: 20px;
    line-height: 1.4em; 
}


/* Style for placing pictures in the main_layout box. Solution was found at:
http://stackoverflow.com/questions/10989238/center-align-image-within-div-horizontally
Used the code provided by member mk.hd.    */
.main_layout img {
    margin-top: 35px;
    margin-bottom: 25px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*Style for contact icons, such as email, Facebook and Twitter. Creates a mild
zoom effect when the cursor is held over the icons. */
#Contact{
    text-align: center;
}
#Contact img{
    margin-top: 0px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
    width:45px; 
    height: auto;
    margin-bottom: 5px;

}

#Contact img:hover{
    width: 50px;
    margin-bottom: 0px;
}


/* Style section for navigation bar. A similar zoom effect is used whent he cursor
is placed over a particular link. Unfortunately, this causes the main_layout section
below it to jump as a particular navigation box expands. After spending a long time
trying to fix this, I realized that hovering over the links would need to force
an effect on the parent p tag. After doing some research, it doesn't seem possible
to do this with CSS, but it can be done with JavaScript, so this will be implemented
later.'*/
.Nav_bar p{
    margin-top: 20px;
    margin-bottom: 20px;
}

.Nav_bar a{
    font-family: Arial, sans-serif;
    letter-spacing: .1em;
    font-size: .7em;
    color: black;
    padding: 10px;
    background: #DDFFFF;
    text-decoration: none;
    border-style: groove;
    border-width: 2px;
    box-shadow: 5px 1.5px 10px #888888;



}

li {
    line-height: 2em;
    color: black;

}

li a{
    color: black;
}
li a:visited{
    color: black;
}

.Nav_bar.p a:hover{
    margin-bottom: 100px;
}


.Nav_bar a:hover{
    font-weight: bold;
    font-size: 1.1em;
}

.Nav_bar a:active { 
    background-color: #55AADD;
    color: white;
}