/*
 10px = 0.625em;     
*/
#size, #size:before{
	display:none;
}

* {
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
    /**behavior: url(../js/boxsizing.htc);*/
}

html {
	font-size: 100%;
	height: 100%;
	overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
	margin: 0 auto;
	min-height: 100%;
	
	-webkit-font-smoothing: antialiased;
	min-width:17.5em;
    font-family: sans-serif;
}

body, button, input, select, textarea {
	font-size: 1em;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, dialog {
	display: block;
}

audio[controls],canvas,video {
	display: inline;
	display: inline-block;
	zoom: 1;
}

video{
	display:block;
}

h1, .alpha,
h2, .beta,
h3, .gamma,
h4, .delta,
h5, .epsilon,
h6, .zeta {
    font-weight: 300;
    margin: 0;
}

h1, .alpha {
    font-size: 1.5em;
    line-height: 1.2em;
    margin-bottom: 0.5em;
}

h2, .beta {
    font-size: 1.4em;
    line-height: 1.3333333333333333em;
    margin: 0.6666666666666666em 0;
}

h3, .gamma {
    font-size: 1.1em;
    line-height: 1em;
    margin: 1em 0;
}

h4, .delta {
    font-size: 1em;
    line-height: 1.1428571428571428em;
    margin-bottom: 1.1428571428571428em;
}

h5, .epsilon {
    font-size: 1em;
    line-height: 1.3333333333333333em;
    margin-bottom: 1.3333333333333333em;
}

h6, .zeta {
    font-size: 1em;
    line-height: 1.5em;
    margin-bottom: 1.5em;
}

p, blockquote {
    font-size: 1em;
    margin: 0 0 1.5em;
    line-height: 1.5em;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

p, dl, ul, ol, blockquote, pre, td, th, label, form, table, fieldset, menu, address, hr, code, samp
{
    font-size: 1em;
    margin: 0 0 0.625em;
    padding: 0;
}

dd, dt, li {
    line-height: 1.5em;
    margin: 0;
}

pre {
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

pre, code, kbd, samp {
	font-family: Menlo, Consolas, 'DejaVu Sans Mono', Monaco, monospace;
	font-size: 1em;
	line-height: 1.5em;
	margin-bottom: 1.5em;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 1.5em;
}

th {
	text-align: left;
}

tr, th, td {
	border-bottom: 0;
	padding-right: 1.5em;
}

form {
	margin: 0;
}

fieldset {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
	vertical-align: top;
}

button, input, select, textarea {
	vertical-align: baseline;
	vertical-align: middle;
}
button, input {
	line-height: normal;
	overflow: visible;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
	cursor: pointer;
	-webkit-appearance: button;
}

input[type="checkbox"], input[type="radio"] {
	box-sizing: border-box;
}

input[type="search"] {
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

blockquote, q, cite {
	font-style: italic;
}

blockquote {
	border-left: 0.1875em solid #000;
	padding-left: 1.5em;
}

blockquote > p {
	padding: 0;
}

ul, ol {
    list-style-position: inside;
}

ul, ol {
	padding: 0;
}

li ul, li ol {
	margin: 0 1.5em;
}
dl dd {
	margin-left: 1.5em;
}

a {
	color: blue;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:focus {
	outline: thin dotted;
}

a:hover, a:active {
	outline: none;
}

figure {
	margin: 0;
}

img, object, embed, video {
	_width: 100%;
	max-width: 100%;	
}

img {
	border: 0;
	-ms-interpolation-mode: bicubic;
	height: auto;
}

svg:not(:root) {
	overflow: hidden;
}

abbr[title], dfn[title] {
	border-bottom: 0.0625em dotted #333;
	cursor: help;
}

ins, mark {
	text-decoration: none;
}

mark {
	background: #c47529;
}

ins {
	background: #d49855;
}
del {
	text-decoration: line-through;
}
strong, b, dt {
	font-weight: bold;
}
var, address {
	font-style: normal;
}
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}

.cf:before, .cf:after {
	content: "";
	display: table;
}
.cf:after {
	clear: both;
}
.cf {
	zoom: 1;
}

#content-wrapper, .container {
    padding:0 0.625em;
    overflow:hidden;
}

#content {
    width:100%;
    overflow:hidden;
}

#size {
	position:fixed;
	bottom:0.625em;
	left:0.625em;
	background:red;
	padding:0.625em;
	border:0.0625em solid #000;
	z-index:1000;
	color:#fff;
}

img.alignright, img.aligncenter, img.alignleft, a img.alignright, a img.alignleft, a img.aligncenter  {
    display: block;
    margin-left: auto; 
    margin-right: auto;
    margin-bottom:1em;
}

#size:before  {
	content: 'None';
}

textarea:focus, input:focus{
    outline: 0;
}

.f25 div, .f33 div, .f50 div, .f66 div {
	min-height: 1px;
}

/* 320px */
@media only screen and (min-width : 20em) {
	.f25, .f33, .f50, .f66 {
		width:100%;
		overflow:hidden;
	}

	.f25 > div {
		float:left;
		width:50%;
	}

	/*.f25 div div, .f33 div div, .f50 div div, .f66 div div {
		width:auto;
		float:none;
	} */

		
	#size:before {
	   content: "only screen and (min-width : 20em)";
	}
}

/* 480px */
@media only screen and (min-width : 30em) {
	#size:before {
	   content: "only screen and (min-width : 30em)";
	}	
}

/* 720px; */
@media only screen and (min-width : 45em) {
	
    body {
		font-size:87.5%;
	}

	img.alignright {
        float:right;
        margin:0 0 1em 1em
    }

    img.alignleft {
        float:left; 
        margin:0 1em 1em 0
    }

    img.aligncenter {
        display: block;
        margin-left: auto; 
        margin-right: auto
    }

    a img.alignright {
        float:right; 
        margin:0 0 1em 1em
    }

    a img.alignleft {
        float:left; 
        margin:0 1em 1em 0
    }

    a img.aligncenter {
        display: block; 
        margin-left: auto;
        margin-right: auto
    }
	
	.f25 > div {
        float:left;
        width:25%;
    }

    .f33 > div {
        float:left;
        width:33.3333%;
    }

    .f50 > div {
        float:left;
        width:50%;
    }    
    
    .f66 > div {
        float:left;
        width:66.6666%;
    }

    .f66 > .right {
        float:right;
        width:33.3333%;
    }
       
    #header .sub{
	    display:block;
	}

    #content-wrapper, .container {
        margin:0 auto;
        max-width: 71.5625em;
    }
    
    .with-side-right #content {
        margin-left: 19.75em;
        width:auto;
    }

    .with-side-right #sidebar { 
        float:right;
        width: 18.5em;
    }

    .with-side-right .wrap {
        float: left;
        width: 100%;
        margin-left: -18.5em; 12.5em
    }
    
    .with-side-left #content {
        margin-right: 21.5em;
        width:auto;
    }

    .with-side-left #sidebar { 
        float:left;
        width: 20.9em;
    }

    .with-side-left .wrap {
        float: right;
        width: 100%;
        margin-right: -21.5em;
    }

	#size:before {
	   content: "only screen and (min-width : 45em)";
	}
}

/*1024px */
@media only screen and (min-width : 64em) {

    body { font-size: 100%; }

	#size:before  {
		content: 'only screen and (min-width : 64em)';
	}	
}

@media print {
	* {
		background: transparent !important;
		color: black !important;
		filter: none !important;
		-ms-filter:none !important;
		text-shadow: none !important;
	}
	a, a:visited {
		color: #444 !important;
		text-decoration: underline;
	}
	a[href]:after {
		content: " (" attr(href) ")";
	}
	abbr[title]:after {
		content: " (" attr(title) ")";
	}
	.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
		content: "";
	}
	pre, blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}
	thead {
		display: table-header-group;
	}
	tr, img {
		page-break-inside: avoid;
	}
	img {
		max-width: 100% !important;
	}
	@page {
		margin: 0.5cm;
	}
	p, h2, h3 {
		orphans: 3;
		widows: 3;
	}
	h2, h3 {
		page-break-after: avoid;
	}
} 

.stacktable { width: 100%; }
.st-head-row { padding-top: 1em; }
.st-head-row.st-head-row-main { font-size: 1.5em; padding-top: 0; }
.st-key { width: 49%; text-align: right; padding-right: 1%; }
.st-val { width: 49%; padding-left: 1%; }



/* RESPONSIVE EXAMPLE */

.stacktable.large-only { display: table; }
.stacktable.small-only { display: none; }

@media (max-width: 800px) {
  .stacktable.large-only { display: none; }
  .stacktable.small-only { display: table; }
}