/* ------------------------------------------------------ */
/* I start with a small (<30em) screen size and make that */
/* look good, then we define some breakpoints for larger  */
/* screens and add some CSS to make it prettier           */
/* ------------------------------------------------------ */
html { font-size: 100%; }

body {
    font-family: 'PT Sans', Verdana, Arial; 
    margin: 0;
    padding: 0;
    background-color: white;
    }

img {
    display: inline;
    margin: 0;
    padding: 0;
    }


#content {
    padding: 1rem 0.5rem 0 0.5rem;
	background-color: white;
    border: none;
	}

h1,h2,h3 {
    font-family: 'PT Sans', Georgia, Arial, sans-serif;
    }

p.hdr {
    padding-left: 0; 
    font-family: Arvo, Georgia, serif;
    font-size: 140%; 
    color: #C00; 
    border-bottom: thin solid; 
    border-color: black;
    }

a { text-decoration: none;
    padding: 0 0.2rem;
    color: blue;
    }

a:hover {
    background-color: red;
    color: white; 
    padding: 0 0.2rem;
    text-decoration: none;
    border-radius: 0.2rem;
    }

em {color: #C00; 
    font-weight: bold;
    font-style: normal;
    }

input[type="button"] {
    position: relative;
    margin-top: -1rem;
    font-family: Arvo, Georgia, serif;
    font-size: 1rem; 
    background-color: green;
    color: white;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    border: 1px solid #000;
    margin-bottom: 0rem;
    box-shadow: 3px 3px 3px 0px #8C8C8C;
    }

a.plain,
a.plain:hover {
    text-decoration: none;
    background-color: white;
    font-size: 100%;
    color: green; 
    }

p { padding-left: 0.25rem;
    padding-right: 0.25rem;
	}

.title {
    font-weight: bold;
    vertical-align: top;
    }

.indent	{
    margin-left: 3rem;
    margin-right: 3rem;
    }


.PageTop1 {
    text-align: center;
    font-size: 250%;
    font-family: 'PT Sans', Georgia, Verdana, Arial; 
	text-decoration: none;
	color: green;
    padding: 1rem 0 0 0.5rem;
	}

a.PageTop1:hover {
    color: green; 
    background-color: white;
    text-decoration: none;
    }

.PageTop2 {
    padding: 1rem 0 0 0.5rem;
    text-align: center;
	}

.headshot {
    border: 1px solid black; 
    border-radius: 0.75rem; 
    width: 10rem;
    max-width: 10rem;
    cursor: alias;
    display: inline;
    }
a.headshot,
a.headshot:hover {
    background-color: white;
    text-decoration: none;
    cursor: alias;
    padding: 0;
    width: 30%;
    max-width: 30%;
    display: inline;
    }

.sm {
    font-size:8pt;
    color: #CC0000; 
    }

br.page {
    page-break-after:	always;
	}

.float-left {
    float: left;
    margin: 0 3em;
    text-align: center;
    border: 1px solid green;
    }
.float-right { 
    float: right;
    margin: 0 3em;
    text-align: center;
    border: 1px solid red;
    }

.center { text-align: center; }
.top { vertical-align: top; }

.year {
    float: none;
    font-weight: bold;
    margin-left: 0.25rem;
    width: 3.5rem;
    vertical-align: top;
    }
.trips {
    overflow: hidden;
    margin: 0.25rem .25rem 1rem 0.5rem;
    }
.mylist {
    margin: 0 1rem 0 0.8rem;
    text-indent: -0.8rem;
    }

@media only screen and (min-width: 1em) {
}
/* ====================================================== */
/* Small screens with year on a line by itself, and the   */
/* trips aligned below the year.  My name and photo are   */
/* stacked and centered.  This has the Narrowest margins. */
/* ====================================================== */
@media only screen and (min-width: 30em) {
    body {
        background: none;
        padding: 0;
        }
    #content {
        border: none;
        padding: 1rem;
        }
    .PageTop1, 
    .PageTop1 a {
        padding: 0;
        }
    p { padding-left: 0.5rem;
        padding-right: 0.5rem;
        }
    .year {
        margin-left: 1rem;
        float: left;
        font-weight: bold;
        }
    .trips {
        margin: 0.25rem 0.5rem 1rem 2rem;
        }
    .mylist {
        margin-left: 0;
        text-indent: -0.8rem;
        }
    .float-left {
        float: left;
        }
    .float-right { 
        float: right;
        text-align: right;
        }
    .headshot {
        width: 30%;
        max-width: 30%;
        }
    a.plain,
    a.plain:hover {
        font-size: 150%;
        }
}


/* ===================================================== */
/* Slightly larger screen, so I make the years and links */
/* to the slide shows & photo essays be more table-like. */
/* ===================================================== */
/* @media only screen and (max-width: 58rem) {  < 928/16 */
@media only screen and (min-width: 45em) {
    body {
        padding: 2rem;
        background: url("images/gray-grid.gif");
        }
    #content {
        border: 1px solid black;
        border-radius: 1rem;
        padding: 0 1rem 0 1rem;
        padding: 1rem 2rem 0 2rem;
        }
    /*
    .PageTop1, 
    .PageTop1 a {
        font-size: 300%;
        padding: 0;
        }
    */
    p { padding-left: 1rem;
        padding-right: 1rem;
        }
    .year {
        float: left;
        width: 3.5rem;
        }
    .float-left {  float: left;  }
    .float-right { 
        float: right;
        text-align: right;
        }
}


/* ======================================================= */
/* For much larger screens I set the content panel to have */
/* a fixed width, and keep it centered.  The rest of the   */
/* CSS remains the same as 'normal'.                       */
/* ======================================================= */
@media only screen and (min-width: 60em) {
    body {
        background: url("images/gray-grid.gif");
        }
    #content {
        width: 50rem;
        margin-left: auto;
        margin-right: auto;
        }
}