﻿.floatLeft 
{
	float:left;
}
.floatRight
{
	float:right;
}	
.clearBoth 
{
	clear:both;
}

.nineteenPercent 
{
    width:18%;
    float:left;
}
.fivePercent 
{
    width:5%;
    float:left;
}
.tenPercent
{
    width:10%;
    float:left;
}
.ninetyPercent {
    width:90%;
    float:left;
}
.ninetyFivePercent 
{
    width:95%;
    float:left;
}
.fifteenPercent 
{
    width:15%;
    float:left;
}
.eightyFivePercent 
{
    width:85%;
    float:left;
}		
.twentyPercent 
{
    width:20%;
    float:left;
}
.seventyPercent {
    width:70%;
    float:left;
}
.eightyPercent 
{
    width:80%;
    float:left;
}
.fiftyfifty 
{
  	width: 50%;
	float: left;	
}
.oneThird 
{
    width: 33%;
    float: left;
}
.twoThirds 
{
    width: 67%;
    float: left;
}
.oneQuarter 
{
    width: 25%;
    float: left;
}
.threeQuarter
{
    width:75%;
    float:left;
}
.twoThirdsInTheMiddle 
{
    width: 66%;
    margin-right:auto;
    margin-left:auto;
}
.fiftyInTheMiddle 
{
    width:50%;
    margin-right:auto;
    margin-left:auto;
}
.threeQuarterInTheMiddle 
{
    width:75%;
    margin-right:auto;
    margin-left:auto;
}


/* --------- iphone portrait -----------  */
/*@media screen and (max-width: 320px) {*/
@media screen and (max-width: 540px) {
	.fiftyfifty 
    {
        width:100%;
    }
    .oneQuarter
    {
        width:100%;
    }
    .oneThird 
    {
        width:100%;
    }
    .threeQuarter 
    {
        width:100%;
    }
    .fifteenPercent 
    {
        width:100%;
    }
    .twentyPercent 
    {
        width:100%;
    }
    .eightyFivePercent 
    {
        width:100%;
    }
    .twoThirds 
    {
        width:100%;
    }
    .nineteenPercent 
    {
        width:100%;   
    }
    .threeQuarterInTheMiddle 
    {
        width:100%;
    }
    .fiftyInTheMiddle 
    {
        width:100%;
    }

}

/* --------  iphone landscape-----------  */

@media screen and (min-width: 321px) and (max-width: 540px) {
	    	
}

/* --------- ipad portrait -------------  */

/*
    I think covering both portrait and landscape at once will be fine.
    @media screen and (min-width: 481px) and (max-width: 1366px) and (orientation:portrait) {
    @media screen and (min-width: 481px) and (max-width: 1366px) and (orientation:landscape) {
*/
@media screen and (min-width: 481px) and (max-width: 1366px) {

}