
body {
    margin: 0 10px 0 10px;
    background-image: url('images/subtle_white_feathers.png');
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    color: #333375;
}

div.Wrapper {
    max-width: 780px;
    min-width: 320px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    border: 4px solid #333375;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    color: #333375;
    background-color: #F7F7F7;
}

h1, div.Wrapper h1 {
    margin-top: 0px;
    margin-bottom: 8px;
    text-align:center;
}

div.Wrapper h2 {
    margin-top: 0px;
    margin-bottom: 0px;
    text-align:center;
}

div.Wrapper h3 {
    margin-top: 0px;
    margin-bottom: 0px;
    text-align:center;
}

div.Wrapper img {
    border: 1px solid #333375;
}

/* Photos */
div.Wrapper div.Photos {
    min-width: 260px;
    overflow: hidden;
}

div.Wrapper div.Photos p {
    text-align: center;
}

div.Wrapper div.Photos p strong {
    color: #750000;
}

div.Wrapper div.Photos p.SwapPhotos a:hover {
    cursor: pointer;
}


/* Features */
div.Wrapper div.Features {
    overflow: hidden;
    min-width: 280px;
}

/*** Responsive Settings ***/
@media (min-width: 850px) {     /* full width */

    body {
        margin: 30px 60px 40px 60px;
    }

    div.Wrapper {
        padding: 10px 50px 10px 50px;
    }

    div.Wrapper div.Photos {
        width: 40%;
        float: left;
    }

    div.Wrapper div.Features {
        width: 56%;
        float: right;
    }
}   /* full width */

@media (max-width: 850px) {     /* up to 850 px wide */

    body {
        margin: 10px 10px 20px 10px;
    }

    div.Wrapper {
        padding: 10px 10px 10px 10px;
    }

    div.Wrapper div.Photos {
        width: 100%;
        float:none;
    }

    div.Wrapper div.Features {
        width: 100%;
        float: none;
    }
}   /* up to 859 px wide */
