/*****    Card Basics    *****/

.card{
    background-color: white;
    margin: 15px 0px 20px;
    padding: 10px;
    overflow: hidden ;
    box-shadow: 0px 2px 3px rgb(153, 153, 153);
    }

.content{ margin: 0px 0px 10px 0px; }

.content.left{ text-align: left; }

.content.center{ 
    text-align: center; 
    margin: 0% 5% 10px;
}
.content.right{ text-align: right; }


/*****    Blog Presets    *****/
.content.title{ text-align: center;
    font-size: 30pt;
    }
.content.blog{ margin: 0% 15%; }

.post{
	text-align: left;
	margin: 0% 15%;
}
.post.left{
	text-align: left;
}
.post.center{
	text-align: center;
}

.post.right{
	text-align: right;
}

.card_list{
	list-style: none;
	margin: -1px 0px 0px -40px;
	padding: 0px;
}

/*****    Positioning Layouts    *****/
.card.left{
    position: relative;
    float: left;
    max-width: 49.5%;
    }

.card.right{
    position: relative;
    float: right;
    max-width: 49.5%;
    }


/*****    Fixed Heights    *****/
.small{ height: 100px; }

.medium{ height: 170px; }

.large{ height: 260px; }


/*****    Headers    *****/
.header{
    background-color: rgb(37, 77, 37);
    color: rgb(255, 255, 255);
    text-align: center;
    width: 200px;
    font-weight: normal;
}

/* Full Width Headers */
.header.full{ 
    width: 103%;
    margin: -10px 0px 10px -10px;	
}
.header.left{ margin: -10px auto 10px -10px; }
.header.center{ margin: -10px auto 10px auto; }
.header.right{ margin: -10px -10px 10px auto; }

/* Half Width Headers */
.header.left.half{ margin: -10px auto 10px -10px; }
.header.center.half{ margin: -10px auto 10px auto; }
.header.right.half{ margin: -10px -10px 10px auto; }


/*****    Footers    *****/
.footer{
    font-size: 14pt;
    background-color: rgb(37, 77, 37);
    color: rgb(255, 255, 255);
    text-align: center;
    width: 200px;
    }

/* Full Width Footers */
.footer.left{ margin: 10px auto -10px -10px; }
.footer.center{ margin: 10px auto -10px auto; }
.footer.right{ margin: 10px -10px -10px auto; }


/* Half Width Footers */
/* NOT YET SUPPORTED  */


.footer.left.half{ margin: 0px auto 0px -10px; }

.footer.center.half{ margin: 0px auto -10px auto; }

.footer.right.half{ margin: 0px -10px -10px auto; }


/*****          Card Colors          *****/
/*****         In Development        *****/

.yellow{ background-color: rgb(255,255,0); }
.lightYellow{ background-color: rgb(255,255,150); }

.green{ background-color: rgb(0,180,0); }
.lightGreen{ background-color: rgb(130,180,0); }
.darkGreen{ background-color: rgb(0,130,0); }

.clear{clear:both;}


/*****  Responsive Code  *****/

/* 1920*1080 at half screen */
@media all and (max-width: 960px){

    .card.left{
        max-width: 49.5%;
    }

    .card.right{
        max-width: 49.5%;
    }
    
    .card.small{
        height: 120px;
    }
    .card.medium{
        height: 220px;
    }
    .card.large{
        height: 310px;
    }
}

/*  Nexus 7 2012  */
@media all and (max-width: 800px){

    .card.left{
        max-width: 49.5%;
    }

    .card.right{
        max-width: 49.5%;
    }

    /* Full Width Headers */
    .header.full{ 
        width: 110%;
        margin: -10px 0px 10px -10px;
    }
    
    .card.small{
        height: 160px;
    }
    .card.medium{
        height: 300px;
    }
    .card.large{
        height: 460px;
    }
    
}

/* 1152 * 864 at half screen */
@media all and (max-width: 576px){
    .card.left{
        max-width: 49.5%;
    }

    .card.right{
        max-width: 49.5%;
    }
    .card.small{
        height: 180px;
    }
    .card.medium{
        height: 300px;
    }
    .card.large{
        height: 500px;
    }
}

/* 1024 * 768 at half screen */
@media all and (max-width: 512px){
    .card.left{
        position: none;
        float: none;
        max-width: none;
        box-sizing: content-box;
        height:100%;
    }

    .card.right{
        position: none;
        float: none;
        max-width: none;
        box-sizing: content-box;
        height:100%;
    }
}

/*   Nexus 5   */
@media all and (max-width: 360px){
    .card.left{
        position: none;
        float: none;
        max-width: none;
        box-sizing: content-box;
    }

    .card.right{
        position: none;
        float: none;
        max-width: none;
        box-sizing: content-box;
    }

}