/* CSS Document */

#COMLEFT {
    width: 48%; 
    margin: auto; 
    display: inline-block; 
    vertical-align: top;
}

#COMRIGHT {
    width: 48%; 
    margin: auto; 
    display: inline-block; 
    vertical-align: top; 
    padding-bottom: 2em;
}

#COMFULL {
    width: 98%; 
    margin: auto; 
    display: inline-block; 
    vertical-align: top; 
    padding-bottom: 2em;
}

#newsContainerTop {
    padding: 3rem; 
    padding-top: 0px;
}

.headshot {
	border:3px solid #76beea;
	border-radius: 75px; 
	width: 150px; 
	height: 150px;
}

.imageBracket img {
    width: 100%; 
    max-width: 300px; 
    max-height: 180px;
}

.newsContainer {
    padding-right:2rem; 
    padding-bottom:2rem;
}

.newsContainer .imageBracket {
    display:table-cell; 
    width:48%; 
    max-width:300px; 
    padding-right: 1em;
}

.newsContainerSide {
    display: inline-block;
    vertical-align: top;
    padding-right:2rem; 
    padding-bottom:2rem;
    max-width: 300px;
}


.normalStory {
    width: 98%; 
    text-align: left; 
    font-size: .9em; 
    padding-top: 1em;
}

.normalStoryBracket {
    display:table-cell; 
    width:48%; 
    max-width:350px; 
    vertical-align:top;
}

.normalStoryTitle {
    font-weight: bold; 
    color: #333; 
    font-size:1.3em; 
    text-align: left;
}

.share {
    padding: 5px;
    border:1px solid #c0c0c0;
    font-size: .7em;
}

.topStory {
    width: 98%; 
    text-align: left; 
    font-size: .9em; 
    padding-top: 1em;
}

.topStoryTitle {
    font-weight: bold; 
    color: #333; 
    font-size:1.5em; 
    text-align: left; 
    padding-top: 1em;
}

/*** MEDIA QUERIES ***/

@media only screen and (max-width: 800px) {
    
    #COMLEFT {
        width: 98%;
    }
    
    #COMRIGHT {
        width: 98%;
    }
}

@media only screen and (max-width: 500px) {
    
    .newsContainer {
        padding:0; 
        padding-bottom:2rem;
        width: 98%;
        margin: auto;
        text-align: center;
    }
    
    .newsContainer .imageBracket {
        display:block; 
        width:100%; 
        max-width:100%; 
        padding-right: none;
    }
    
    .imageBracket img {
        width: 300px; 
        max-width: none; 
        max-height: none;
        height: auto;
        text-align: center;
    }
    
    .normalStoryBracket {
        display:block; 
        width:98%;
        margin: auto;
    }
    
    .normalStoryTitle {
    font-weight: bold; 
    color: #333; 
    font-size:1.3em; 
    text-align: center;
}
}