* {
	margin: 0;   
}

html, body {
    width:100%;
    height: 100%;
    background: linear-gradient(to right, lightyellow , lightblue);
}

/* -------------------------------------------------- */
/* MAIN CONTAINER */

.topdog {
    display: flex;  
    display: -webkit-box; 
    display: -moz-box;  
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction:row;
    max-width:960px;

    margin-top:0px;
    margin-bottom:0px;
    margin-left:auto;
    margin-right:auto;
    padding:0px;
    box-sizing:border-box;
}

@media screen and (max-width:960px){
    .topdog {
        flex-direction:column;
        max-width:600px;
    }
}

/* ----- LEFT COLUMN (menu and about)-----*/
.left-col {
    font-family: 'Source Sans Pro', sans-serif;
    width: 320px;
    float: left;
    margin:0px;
    padding: 10px;
    box-sizing:border-box;
}

/*----RIGHT COLUMN (MAIN CONTENT)---*/
.right-col {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    text-decoration: none;
    color: #c0c0c0;


    float: left;
    max-width: 600px;
    margin:0px;
    padding:10px;
    box-sizing:border-box;
}

@media (max-width:960px) and (min-width: 521px){
    .left-col {
        display:flex;
        flex-direction: row;
        width:100%;
        box-sizing:border-box;
    }
}

@media screen and (max-width: 520px){
    .left-col {
        width:100%;
    }

    .right-col {
        width:100%;
        padding-left:0px;
        padding-right:0px;
        margin-left:0px;
        margin-right:0px;        
    }
}

/* -------------------------------------*/
/*MENU*/
.menu {
    width: 300px;
}

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    width: 100%;
    }

.menu li {float: left;}

.menu li a {
    display: block;
    color: #333;
    text-align: left;
    padding: 12px 0px;
    text-decoration: none;
    font-weight: bold;
}

.menu li a:hover:not(.active) { color: blue;} 

/*ABOUT*/
.about {
    padding-top: 20px;
    color: darkgray;
    box-sizing:border-box;
}

.about h2 { color: darkgray;}
.about a { color: violet; }
.about a:hover { color: blue; }

@media (max-width:1000px) and (min-width: 653px){
    .menu { width:300px;}
    .menu ul li a { 
        font-family: 'Source Sans Pro', sans-serif;
        font-size:12px;
    }
    .about {
        padding-top:10px;
        max-width:300px;
        text-align:right;
    }
    .about p {
        font-size:12px;
    }
}

@media screen and (max-width: 652px){
    .menu { 
        width:100%;
        font-family: 'Source Sans Pro', sans-serif;
        color: #c0c0c0;
        font-weight: normal;        
    }
    .menu ul li a {
        font-size:12px;
        padding-top:5px;
        padding-bottom:5px;
        float: none;
    }

    .about p { 
        font-size:11px; 
        text-align:right;
    }
    .about h2 { 
        padding-top:0px;
        font-size:16px; 
        text-align:right;
        font-family: 'Source Sans Pro', sans-serif;
    }
}

/*Main "Releases" header */

.releases {
    font-family: 'Source Sans Pro', sans-serif;
    margin:0px;
    padding: 5px 0px 0px 0px;
    font-size: 20px;
    text-decoration: none;
    color: #c0c0c0;
    font-weight: normal;
    width: 100%;
}


@media screen and (max-width:480px) {
    .releases {
        padding-left:10px;
        box-sizing:border-box;
    }    
    .menu {
        display:none;
    }
}

/* ----------------------------------------------*/
/* ---------------------------------------------*/

/*Main layout*/

.card {
	padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    -webkit-column-break-inside: avoid; 
    page-break-inside: avoid;           
    break-inside: avoid-column;         
    display:table;                      
    font-family: 'Source Sans Pro', sans-serif;
    background: white;
    width: 100%;
    color: #000000;
    border-style: solid;
    border-width: 3px;
    border-color: black;
    box-sizing:border-box;
}

/*For any release where I present 
an image on the left and text on the right*/

.card .split {
    display:flex;
    flex-direction:row;
    padding:10px;
}

.split .left {
    display:flex;
}

.split .left img {
    max-width:200px;
    border: 1px solid #ccc;
}

.split .right {
    display:flex;
    text-align: justify;
}

@media screen and (max-width: 520px){
    .card {
        width:100%;
        padding-left:0px;
        padding-right:0px;
        margin-left:0px;
        margin-right:0px;
        border-left-width:0px;
        border-right-width:0px;
    }

    .card .split {
        flex-direction:column;       
    }
    .card .split .left .magpic {
       margin-left:auto;
       margin-right:auto;
    }


    .card .split .right p {
        padding-left:0px;
        padding-right:0px;
    }
}

.card h1 {
    margin:5px;
    padding:5px;
    padding-bottom:0px;
    font-size: 16px;
    font-weight:normal;
    font-family: 'Source Sans Pro', sans-serif,semi-bold;
}

.card h2 {
    margin:5px;
    padding:0px;
    padding-left:5px;
    font-size: 14px;
    font-family: 'Source Sans Pro', sans-serif;
}

.card p {
   	margin:0px;
	padding:5px;
	font-size: 12px;
	padding-left: 10px;
}

.card a:link {
    color: violet;
    text-decoration: underline;
    font-weight: bold;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 12px;
    border-style: none; 
}

.card a:visited {
    text-decoration: none;
    color: darkgray;
    text-decoration: underline;
    font-weight: bold;
}

.card a:hover {
    text-decoration: none;
    color: blue;
    font-weight: bold;
}

.card a:active {
    text-decoration: none;
    color: indigo;
    text-decoration: underline;
    font-weight: bold;
}


/*Image Galleries*/
.galleries {
    float:left;
    margin-left:5px;
    margin-right:5px;
    min-width:0px;
}

.galleries h2 { padding-left: 0px; }

.galleries .imageblock {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
}

.135pxgallery {
    width: 180px;
    height:135px;
}

.135pxgallery .imageblock img {
    width: 180px;
    height:135px;
}    

.100pxgallery {
    width: 180px;
    height:100px;
}

.100pxgallery  .imageblock img {
    width: 180px;
    height:100px;
}

@media screen and (max-width:600px) {
    .imageblock {
        width:120px;
    }
    .imageblock img {
        width:120px;
    }
}

/*These are supposed to do a better job of laying out embedded players but don't work.*/
.beavanplayback {
   margin-left:auto;
   margin-right:auto;
}

.printerplayback {
    margin:5px;
}