@charset "UTF-8";
@import 'grid.less';


// Specify the number of columns and set column and gutter widths
@columns: 12;
@column-width: 60px;
@gutter-width: 30px;

// Remove the definition below for a pixel-based layout
@total-width: 980;


/*default
-----------------------------------*/
body,h1, h2, h3, h4, h5, h6,
p, pre, blockquote,form,input,textarea,fieldset,
ul, ol, dl, li,dt,dd,address,caption {
    margin: 0;
    padding: 0;
	
}

table{
	border-collapse:collapse;
	}
p{
	margin-bottom:1em;
	}
	
body{
	color: #333;
	font-size:75%;
	line-height:1.5;
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka","メイリオ","ＭＳ Ｐゴシック",Arial,Helvetica,Verdana,sans-serif;
	background-image: url(http://basehold.it/i/24);
	
}
address,em,caption,th{	
	font-style:normal;
	font-weight:normal;
	text-align:left;
	}
img{
	vertical-align:bottom;
	border:none;
	max-width: 100%;
	}
	
li{	list-style-type:none;	}



/*link
-----------------------------------*/
a{	color:#2929b3;	}
a:hover,a:active{	color:#000080;	}
a:visited{	color:#000080;	}


@color-red: #ff0000;
@color-white: #fff;

/*common style
-----------------------------------*/
.clearfix {zoom:1;}
.clearfix:after{
    content: ""; 
    display: block; 
    clear: both;}


.alignRight{	text-align:right;	}
.alignLeft{		text-align:left;	}
.floatRight{	float:right;	}
.floatLeft{		float:left;		}

.border-radius( @radius: 3px ) {    
	-webkit-border-radius: @radius;    
	-moz-border-radius: @radius;    
	border-radius: @radius; 
}
.box-shadow( @shadow: 5px ) {    
	-webkit-box-shadow: 0px 0px @shadow 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px @shadow 0px rgba(0, 0, 0, 0.3);
}
.text-shadow( @shadow: 1px){
	text-shadow: 1px 1px @shadow #000000;
	filter: dropshadow(color=#000000, offx=1, offy=1);
}



#grid{
	width: 90%;
	margin: 0 auto;
	background: url(http://griddle.it/940-12-20?num=false) repeat-y center top;
	background-size: contain;
	overflow: hidden;
}
/*wrapper
-----------------------------------*/
#wrapper{
	width: 100%;
	margin:0 auto;
	}


/*headre
-----------------------------------*/
#header{
	h1{
	margin: 0.5em 0;
	font-size: 400%;
	text-align: center;
	letter-spacing: 0.1em;
	font-family: 'Ultra', serif;
	}
}
	
/*navi
-----------------------------------*/
#navi ul{
	overflow:hidden;
}
	#navi ul li a{
		display: block;
		width: 25%;
		padding :10px 0;
		text-align: center;
		float:left;
		background: #333;
		color: @color-white;
		text-decoration: none;
		i{
			margin-right: 5px;
		}
	}


/*container
-----------------------------------*/
#container{
	
	}
	


/*content
-----------------------------------*/
#content{
	width: 100%;
	margin: 0 0 2em;
	/*background:rgba(0,0,0,0.2);*/

	h2{
		margin: 1em 0 0.2em;
		font-size: 250%;
		letter-spacing: 0.1em;
		font-family: 'Cutive', serif;
		.text-shadow(1px);
	}
	>h2:first-child{
			margin-top: 0;
		}
	#topColumn{
		overflow: hidden;
	}
	.floatLeft{
		width: 50%;
	}
	.floatRight{
		width: 50%;
		float: right !important;
	}
		.floatLeft dl,
		.floatRight dl{
			padding: 10px;
		}
		.floatLeft dt,
		.floatRight dt{
			margin: 0 0 10px;
			text-align: center;
		}

}

/*side
-----------------------------------*/
#side{
	width: 100%;
	background: #fff;
	.box-shadow(5px);
	}
	#sideInner{
		padding: 10px;
	}


/*footer
-----------------------------------*/
#footer{
	width: 100%;
	margin: 5em 0 0 0;
	padding: 2em;
	text-align: center;
	color: @color-white;
	background: #000;
	}


/*style
-----------------------------------*/
dl.tnList{
	overflow: hidden;
	margin: 0 0 1em 0;
	dt{
		float: left;
		width: 26.666%;
	}
	dd{
		margin: 0 0 0 30%;
	}
}
	

@media only screen and (min-width: 481px){
	#content{
		float: left;
		width: 65.9574%;
	}
	#side{
		width: 31.9148%;
		float: right ;
	}


}