html
{
    height: 100%;                       /* required to have background gradient not repeating */
}

body
{
    /*background: linear-gradient(hsl(210, 50%, 88%), white 1200px);*/
    background-color: hsl(210, 50%, 88%);

    font-family: arial, helvetica, verdana;
    font-size: 11pt;

    margin: 0;                          /* required to remove a gap at top */

    line-height: 1.2;                   /* must be explicitly set for uniform look on IE, chrome and FF */
}

a
{
    text-decoration: none;
    color: blue;
}

a:hover
{
    text-decoration: underline;
}

a img
{
    border: none;                       /* IE adds a border unless told not to */
}


h1
{
    font-size: 12pt;
    font-weight: bold;
    line-height: 120%;
}

h2
{
    font-size: 11pt;
    font-weight: bold;
    line-height: 120%;
}

h3
{
    font-size: 12pt;
    font-weight: normal;
    line-height: 120%;
}




/* ----------------------------------------------------------------------------- */  
/* Canvas, this is what everything is painted on                                 */  
/* ----------------------------------------------------------------------------- */  

#canvas
{
    margin: auto;						/* centers the element (together with position: relative) */
    position: relative;
    width: 1024px;

    background-color: rgb(250, 250, 250);
    border: solid silver 1px;
}


/* ----------------------------------------------------------------------------- */  
/* Header                                                                        */  
/* ----------------------------------------------------------------------------- */  

#header
{
    width: 1024px;
    height: 70px;
}

.logo
{
    position: absolute;
    left: 30px;

    line-height: 70px;          /* same as header size = center vertically */

    font-size: 26px;
    font-style: italic;

    color: green;
}

a.logo, a.logo:hover
{
    text-decoration: none;
}


/* ----------------------------------------------------------------------------- */  
/* Navigation                                                                    */  
/* ----------------------------------------------------------------------------- */  

body#news a#navNews,
body#projects a#navProjects,
body#ongoing a#navOngoing,
body#about a#navAbout,
body#references a#navReferences,
body#contact a#navContact
{
    background-color: blue;     /* highlight the current page in the menu */
}

#navigation
{
    width: 1024px;
    height: 22px;

    background-color: rgb(0, 127, 255);
}

#navigation a
{
    line-height: 22px;          /* vertical text alignment */
    text-decoration: none;
    font-size: 9pt;
    color: white;

    padding-left: 12px;
    padding-right: 12px;
}

#navigation #navLeft a
{
    position: relative;         /* move all links a few pixels to the right */
    left: 22px;
    float: left;                /* make links adjacent */
}

#navigation #navRight a
{
    position: relative;         /* move all links a few pixels to the left */
    right: 22px;
    float: right;
}

#navigation a:hover
{
    background-color: blue;
}


/* ----------------------------------------------------------------------------- */  
/* Content                                                                       */  
/* ----------------------------------------------------------------------------- */  

#content
{
    display: inline-block;
    position: relative;         /* absolute positioned element within a relative element will be positioned relative that element */
    width: 1024px;
    
    padding-top: 20px;
    padding-bottom: 20px;
}

.framedHeading                  /* The standard heading with a silver line at bottom */
{
    float: left;
    
    min-width: 964px;  

    margin-left: 20px;
    margin-right: 20px;
    
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    
    border-bottom: solid silver 1px;
}


/* ----------------------------------------------------------------------------- */  
/* Footer                                                                        */  
/* ----------------------------------------------------------------------------- */  

#footer
{
    width: 1024px;
    height: 45px;

    font-size: 10pt;

    border-top: solid rgb(0, 127, 255) 3px;

    line-height: 42px;          /* subtract border width */
    clear: both;                /* no floating elements on either side, necessary to push footer down when updating content of thumbnail div dynamically */
}

#footerLeft
{
    float: left;
    margin-left: 15px;
}

#footerRight
{
    float: right;
    margin-right: 15px;
}