/* CSS */

body {
	font-family: Arial, sans-serif;
	font-size: 100%;
	background: url('screens/container_bg.png');
}

#contents {
	width: 100%;
	max-width: 1024px;
	height: 218px;
}

#contents .left {
	width: 40%;
}

#contents .left p {
	width: 85%;
	margin: 10px 0 0 15%;
	height: 208px;
	float: left;
}

#contents .right {
	width: 55%;
	height: 218px;
	margin: 10px 3% 0 0;
	float: right;
	line-height: 32px;
}

#contents .right .text1 {
	font-size: 26px;
}

#contents .right .text2 {
	margin-top: 10px;
	font-size: 1.0em;
	line-height: 140%;
}

#contents .right.cl { color: #67B2D9; }
#contents .right.dl { color: #52BA97; }
#contents .right.dummy { color: #754CC6; }


/* ==========================================================================
   max-width:800px
   ========================================================================== */

@media only screen and (max-width:800px){

    #contents .right {
	line-height: 30px;
}

    #contents .right .text1 {
	font-size: 24px;
	}


/* ==========================================================================
   max-width:480px
   ========================================================================== */

@media only screen and (max-width:480px){

    #header {
	width: 100%;
	height: 40px;
	}

    #header h2 {
	width: 300px;
	margin: 0 auto;
	font-size: 20px;
	line-height: 1.5em;
	}

    #contents {
	width: 100%;
	height: 200px;
	}
	
    #contents .left {
	width: 40%;
	float: left;
	}

    #contents .left p {
	width: 100%;
	height: 150px;
	margin: 10px 0 0 8%;
	}

    #contents .right {
	width: 56%;
	height: 150px;
	float: right;
	line-height: 25px;
	}

    #contents .right .text1 {
	font-size: 20px;
	font-weight: bold;
	}

	#contents .right .text2 {
	margin-top: 7px;
	font-size: 0.9em;
	}

}