/* css style.css
layout.css
**/
*{box-sizing:border-box;} /* width: 50 px; width: 20%
                            relational sizing: X%; to parent container
                            <body>
                                <div style='width:50%'>
                                    <div style='width:50%>...</div>
                                </div>
                            </body>
                            */
Header{
    height: 100px;
    padding: 20px:
    Text-align: center;
    background-color:salmon;
}
nav ul{
    background-color:yellow;
    margin:5px;
}
nav ul{
    list-style-type:none;
    text-align:center;
    margin:5px
    padding:10px
}
nav ul li{
    display:inline;
    padding:5px 15px;
}
nav ul li a{
    color:blue;
    text-decoration:none;
    padding:10px;
}
nav ul li a:hover{
    background-color: red;
}
.row{margin: green 3px; height:400px;}
.row:after{ /*clearfix hack </div> <! - - end row - - > */
    display:table;
    content:"";
    clear:both;
}
.left {
    float:left;
    width:60%;
    height: 100%;
    padding:5px 20px
    background-color:gray;
}
.right {
    float:left;
    width:40%;
    height:100%
    padding:5px 20px;
    background-color:gray;
}
footer {
    padding:20px;
    background-color:#a34037;
}

a.clickableImg {
    margin-left:20%
    text-align:center;
}
img.thumbnail {
    width:40%;
    height:auto;
}
img.thumbnail:hover {
    width:43%;
} :w















    
















