body {
    margin: 0;
    padding: 0;
}

.container {
    display: block;
    margin: auto;
}

.content {
    padding: 20px;
}

.layout {
    float: left;
    display: inline-block;
}

/* the default layout */
.pc, .pc-tablet {
	display: block;
}

.tablet, .phone, .phone-tablet {
	display: none;
}

.container {
    width: 960px;
}

.full {
    width: 100%;
}

.half {
    width: 50%;
}

.third {
    width: 33.333%;
}

.qtr {
    width: 25%;
}

.fifth {
    width: 20%;
}

.eighth {
	width: 12.5%
}

.threeqtrs {
    width: 75%;
}

.twothirds {
    width: 66.66%;
}

.threefiths {
    width: 60%;
}

.twofifths {
	width: 40%;
}

.clear {
	clear: left;
}

/* the layout on a tablet */
@media only screen and (max-width:768px) {
	.tablet, .pc-tablet, .phone-tablet {
		display: block;
	}
	
	.pc, .phone {
		display: none;
	}

    .container {
        width: 100%;
    }
    
    .eighth {
		width: 25%;
	}

    .half, .third, .qtr, .fifth, .twothirds, .threefifths, .twofifths  {
        width: 50%;
    }
    
    .threeqtrs, .mobile-full {
        width: 100%
    }
    
    /* the layout for the nested classes */
    .twothirds .half, .half .half, .threefifths .third, .twofifths .half {
		width: 100%;
	}

}

/* the layout on a phone */
@media only screen and (max-width: 480px) {
	.phone, .phone-tablet {
		display: block;
	}

    .tablet, .pc, .pc-tablet {
		display: none;
	}

    .container {
        width: 100%;
    }

    .half, .third, .qtr, .fifth, .eighth, .twothirds, .threefifths, .threeqtrs, .twofifths, .mobile-full  {
        width: 100%;
    }
    
    .mobile-half {
	 	width: 50% !important;
	}
    
    .content {
		padding: 10px;
	}
	
}