/* This is a CSS page for Cocoa Site. */

body {
    background-color: rgb(54, 38, 28); 
    font-family: Arial, Helvetica, sans-serif;
    color: hsl(26, 41%, 14%);
}

#container {
    background-color: rgb(207, 192, 176);
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

p.firstpar::first-letter {
    color: #194b26;
    font-size: xx-large;
}

nav ul {
    list-style-type: none;
    text-align: center;
    padding:0;
    margin:0;
}

nav ul li {
    display: inline-block;
    width: 200px;
    border:thick solid #49352d;
    background-color: rgba(167, 106, 54, 0.486);
    text-align: center;
    padding-top:10px;
    padding-bottom:10px;
    font-family: Arial, Helvetica, sans-serif;
    font-variant: small-caps;
    color: #49352d;
    font-size: 1.5em;   
    box-shadow: 10px 10px 5px hsla(0, 0%, 0%, 0.19);
}

nav a:hover {
    font-style: oblique;
}

h1 {
    background-color: #49352d;
    color: gainsboro;
    font-family: 'Architects Daughter', cursive;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    box-shadow: 10px 10px 5px hsla(0, 0%, 0%, 0.19);
}

h1, h2, h3 {
    font-variant: small-caps;
}

h3 {
    font-family: sf_cartoonist_handitalic;
    font-size: 1.5em;
}    

h3, h4 {
    margin-left: auto;
    margin-right: auto;
    border-top-style: groove;
    border-width: 5px;
    padding: 10px;
}

@font-face {
    font-family: 'sf_cartoonist_handitalic';
    src: url('fonts/SF_Cartoonist_Hand_Italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

div.a {
    text-align: center;
}
div.b {
    width: 700px;
    margin: auto;         
}

a:link {
color: brown
}

a:visited {
color: blue;
}

a:hover {
color: green;
}

img.floatleft {
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    border-style:groove;
    border-color: #49352d;
    padding: 2px;
    box-shadow: 10px 10px 5px hsla(0, 0%, 0%, 0.19);
}

img.floatright {
    float: right;
    margin-left: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    border-style:groove;
    border-color: #49352d;
    padding: 2px;
    box-shadow: 10px 10px 5px hsla(0, 0%, 0%, 0.19);
}

.clearfloat {
    clear: both;
}

img.center {
    margin-left: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    border-style:groove;
    border-color: #49352d;
    padding: 2px;
    box-shadow: 10px 10px 5px hsla(0, 0%, 0%, 0.19);
}