/* Layout
------------------------------------------------------------------*/
.cccAdminWrap{
	display: table;
	margin: 15px 10px;
	
	.cccMainArea{
		//float: left;
		//display: inline;
		display: table-cell;
		width: 90%;
		vertical-align: top;
	}
	
	.cccSideArea{
		//float: right;
		//display: inline;
		width: 10%;
		display: table-cell;
		vertical-align: top;		
		
		
		.cccSide{
		background-color: #f5f5f5;
		border: 1px solid #ccc;
		#border-radius();
		
			.inner{
				margin: 5px;
			}
			
			.box{
				margin: 25px 0;
			}
		}
	}
	
}



/* Table
------------------------------------------------------------------*/

/* type01 */
table.type01{
	width:95%;
	//border: 1px solid #ccc;
	border-top:1px dotted #ccc;
	margin:0 0 15px 0;
	
	caption{
		font-weight:bold;
	}
	
	th,
	td{
		padding:10px 10px;
		border-bottom:1px dotted #ccc;
		vertical-align: middle;
		text-align: left;
	}
	
	thead{
		th{
			background-color:#ead6d2;
			font-weight: bold;
		}
		td{
			//
		}
	}
	
	tbody{
		th{
			width:30%;
			font-weight: bold;
			color: #333;
			//border-right: 1px dotted #ccc;
		}
		table.type01 tbody td{
			background-color: #fff;
		}
	}
	
	tfoot{
	}
}




/* font
------------------------------------------------------------------*/
.supp{
	font-size: 80%;
}
.errors{
	list-style: disc;
	padding: 10px 20px;
	li{
		color: #f90;
	}
}

/* width
------------------------------------------------------------------*/
.p20{
	width: 20%;
}
.p80{
	width: 80%;
}




/* snippet
------------------------------------------------------------------*/	

hr {
   border-color: #ccc;
   border-style: dotted;
   border-width: 1px 0px 0px 0px;
   height: 1px;
   margin:25px 0;

   &.solid{
   	border-style: solid;
   }
}

.vT{
	vertical-align: top;
}
.vM{
	vertical-align:middle;
}
.vB{
	vertical-align: bottom;
}

table {
	border-collapse:collapse;
	border-spacing:0;
	empty-cells:show;
	font-size:inherit;
	font:100%;
}

/* .clearfix|clearfix */
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .clearfix {zoom: 1;}
*:first-child+html .clearfix {zoom: 1;}
/* // .clearfix|clearfix */



/* Form */
input{
}

select option{
	padding-right:15px;
}

* html select option{
	padding-right:0;
	_padding-right:15px;
}

label{
	cursor: pointer;
}

fieldset{
	border:none;
}


/* Mixins
ex: https://github.com/twitter/bootstrap/blob/master/less/mixins.less
------------------------------------------------------------------*/	
/* clearfix */
#clearfix{
	*zoom: 1;
	&:before,
	&:after {
		display: table;
		content: "";
		line-height: 0;
	}
	&:after {
		clear: both;
	}
}


/* 角丸 
#header {
  .border-radius;
}
#footer {
  .border-radius(10px);
}
*/
#border-radius (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}




/* ボックスシャドウ */
#box-shadow(@hor: 1px, @ver: 1px, @shade:1px, @color: #ccc) {
  -webkit-box-shadow: @hor @ver @shade @color;
     -moz-box-shadow: @hor @ver @shade @color;
      -ms-box-shadow: @hor @ver @shade @color;
          box-shadow: @hor @ver @shade @color;         
}

/* テキストシャドウ */
#text-shadow(@hor: 1px, @ver: 1px, @shade:0px, @color: #666){
	text-shadow: @hor @ver @shade @color;
}



/* グラデーション
div {
  #gradient > .horizontal(#FFFFFF,#000000);
  #gradient > .vertical(#FFFFFF,#000000);
}
*/
#gradient {
  .horizontal(@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
  }
  .vertical(@startColor: #555, @endColor: #333) {
    background-color: mix(@startColor, @endColor, 60%);
    background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
  }
  .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
    background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
  }
  .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
    background-color: mix(@midColor, @endColor, 80%);
    background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
    background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
    background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
    background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
    background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
    background-repeat: no-repeat;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
  }

  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
    background-color: mix(@midColor, @endColor, 80%);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
    background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
    background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-repeat: no-repeat;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
  }
  .radial(@innerColor: #555, @outerColor: #333) {
    background-color: @outerColor;
    background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
    background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
    background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
    background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
    background-repeat: no-repeat;
  }
  .striped(@color: #555, @angle: 45deg) {
    background-color: @color;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  }
}


/* 1行からあふれた場合に文末を「…」にして省略する */
#text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*最後をmagin:0に*/
#last0 {
	&:last-child{
		margin-bottom: 0;
	}
}