/*  HTML5 ? Boilerplate  */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, 
menu, nav, section, summary, time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}                  
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display:block;
}
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }


body { font:13px/1.231 Verdana, Arial, Helvetica, sans-serif; *font-size:small; } 
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }

body, select, input, textarea {   color: #444; }
h1,h2,h3,h4,h5,h6 { font-weight: bold; }
html { overflow-y: scroll; }

a:hover, a:active { outline: none; }
a, a:active, a:visited { color: #607890; }
a:hover { color: #BB5316; }

ul, ol { margin-left: 1.8em; }
ol { list-style-type: decimal; }

nav ul, nav li { margin: 0; } 
small { font-size: 85%; }
strong, th { font-weight: bold; }
td, td img { vertical-align: top; } 
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }
pre {  padding: 15px;  white-space: pre;  white-space: pre-wrap;  white-space: pre-line;  word-wrap: break-word; }
textarea { overflow: auto; } 
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
label, input[type=button], input[type=submit], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:invalid, textarea:invalid { border-radius: 1px;  -moz-box-shadow: 0 0 5px red; -webkit-box-shadow: 0 0 5px red;  box-shadow: 0 0 5px red; }
.no-boxshadow input:invalid, 
.no-boxshadow textarea:invalid { background-color: #f0dddd; }

::-moz-selection{ background: #BB5316; color:#fff; text-shadow: none; }
::selection { background:#BB5316; color:#fff; text-shadow: none; } 
section[role="banner"] ::-moz-selection{ background: #394C5F; color:#fff; text-shadow: none; }
section[role="banner"] ::selection { background:#394C5F; color:#fff; text-shadow: none; } 

a:link { -webkit-tap-highlight-color: #FF5E99; } 

button {  width: auto; overflow: visible; }

.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; } 
.visuallyhidden { position: absolute !important; clip: rect(1px 1px 1px 1px);  clip: rect(1px, 1px, 1px, 1px); }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after {  content: "\0020"; display: block; height: 0; visibility: hidden; } 
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


/* font dragr styles */
 
@font-face {
    font-family: 'VomZom';
    src: url('/gallery/VomZom/vomzom.eot?') format('?'),
        url('/gallery/VomZom/vomzom.woff') format('woff'),
        url('/gallery/VomZom/vomzom.ttf') format('truetype'),
        url('/gallery/VomZom/vomzom.svg#VomZom') format('svg');
}
/* Subset fonts for gallery - only contain glyphs: abcd */
@font-face {
    font-family: 'VomZom-subset';
    src: url('/gallery/VomZom/vomzom.eot?') format('?'),
        url('/gallery/VomZom/vomzom.woff') format('woff'),
        url('/gallery/VomZom/vomzom.ttf') format('truetype'),
        url('/gallery/VomZom/vomzom.svg#VomZom') format('svg');
}
@font-face {
    font-family: 'Strato-subset';
    src: url('/gallery/Subset/Strato/Strato-subset.eot?') format('?'),
        url('/gallery/Subset/Strato/Strato-subset.woff') format('woff'),
        url('/gallery/Subset/Strato/Strato-subset.ttf') format('truetype'),
        url('/gallery/Subset/Strato/Strato-subset.svg#Stratolinked') format('svg');
}
@font-face {
    font-family: 'Lobster-subset';
    src: url('/gallery/Subset/Lobster/Lobster-subset.eot?') format('?'),
        url('/gallery/Subset/Lobster/Lobster-subset.woff') format('woff'),
        url('/gallery/Subset/Lobster/Lobster-subset.ttf') format('truetype'),
        url('/gallery/Subset/Lobster/Lobster-subset.svg#Lobster') format('svg');
}
@font-face {
    font-family: 'ReenieBeanie-subset';
    src: url('/gallery/Subset/ReenieBeanie/ReenieBeanie-subset.eot?') format('?'),
        url('/gallery/Subset/ReenieBeanie/ReenieBeanie-subset.woff') format('woff'),
        url('/gallery/Subset/ReenieBeanie/ReenieBeanie-subset.ttf') format('truetype'),
        url('/gallery/Subset/ReenieBeanie/ReenieBeanie-subset.svg#ReenieBeanie') format('svg');
}
@font-face {
    font-family: 'Tangerine-subset';
    src: url('/gallery/Subset/Tangerine/Tangerine_Regular-subset.eot?') format('?'),
        url('/gallery/Subset/Tangerine/Tangerine_Regular-subset.woff') format('woff'),
        url('/gallery/Subset/Tangerine/Tangerine_Regular-subset.ttf') format('truetype'),
        url('/gallery/Subset/Tangerine/Tangerine_Regular-subset.svg#Tangerine') format('svg');
}
@font-face {
    font-family: 'Vollkorn-subset';
    src: url('/gallery/Subset/Vollkorn/Vollkorn_Regular-subset.eot?') format('?'),
        url('/gallery/Subset/Vollkorn/Vollkorn_Regular-subset.woff') format('woff'),
        url('/gallery/Subset/Vollkorn/Vollkorn_Regular-subset.ttf') format('truetype'),
        url('/gallery/Subset/Vollkorn/Vollkorn_Regular-subset.svg#Vollkorn') format('svg');
}
@font-face {
    font-family: 'Null-subset';
    src: url('/gallery/Subset/Null/NullFree-subset.eot?') format('?'),
        url('/gallery/Subset/Null/NullFree-subset.woff') format('woff'),
        url('/gallery/Subset/Null/NullFree-subset.ttf') format('truetype'),
        url('/gallery/Subset/Null/NullFree-subset.svg#NullFreeRegular') format('svg');
}
@font-face {
    font-family: 'Berenika-subset';
    src: url('/gallery/Subset/Berenika/BerenikaRegular-subset.eot?') format('?'),
        url('/gallery/Subset/Berenika/BerenikaRegular-subset.woff') format('woff'),
        url('/gallery/Subset/Berenika/BerenikaRegular-subset.ttf') format('truetype'),
        url('/gallery/Subset/Berenika/BerenikaRegular-subset.svg#BerenikaRegular') format('svg');
}
@font-face {
    font-family: 'Ubuntu-subset';
    src: url('/gallery/Subset/Ubuntu/ubuntu-regular-subset.eot?') format('?'),
        url('/gallery/Subset/Ubuntu/ubuntu-regular-subset.woff') format('woff'),
        url('/gallery/Subset/Ubuntu/ubuntu-regular-subset.ttf') format('truetype'),
        url('/gallery/Subset/Ubuntu/ubuntu-regular-subset.svg#UbuntuRegular') format('svg');
}

.vomzom { font-family: 'VomZom'; }

[draggable=true] {
  -khtml-user-drag: element;
  -webkit-user-drag: element;
  -khtml-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.button, .button:visited {
    display: inline-block;
    vertical-align: baseline;
    margin: 0 2px 25px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 700 14px/100% Verdana, Arial, Helvetica, sans-serif;
    padding: .5em 1em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    color: #d9eef7;
    border: solid 1px #0076a3;
    background: #00adee; /* Old browsers */
    background: -moz-linear-gradient(top, #00adee 0%, #0078a5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00adee), color-stop(100%,#0078a5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #00adee 0%,#0078a5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #00adee 0%,#0078a5 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #00adee 0%,#0078a5 100%); /* IE10+ */
    background: linear-gradient(top, #00adee 0%,#0078a5 100%); /* W3C */
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    background: #0095cc; /* Old browsers */
    background: -moz-linear-gradient(top, #0095cc 0%, #00678e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0095cc), color-stop(100%,#00678e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #0095cc 0%,#00678e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #0095cc 0%,#00678e 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #0095cc 0%,#00678e 100%); /* IE10+ */
    background: linear-gradient(top, #0095cc 0%,#00678e 100%); /* W3C */
    color: #d9eef7;
}
.button:focus {
    position: relative;
    top: 1px;
    background: #0078a5; /* Old browsers */
    background: -moz-linear-gradient(top, #0078a5 0%, #00adee 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0078a5), color-stop(100%,#00adee)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #0078a5 0%,#00adee 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #0078a5 0%,#00adee 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #0078a5 0%,#00adee 100%); /* IE10+ */
    background: linear-gradient(top, #0078a5 0%,#00adee 100%); /* W3C */
    color: #80bed6;
}

.loaded, .loaded:visited, .loaded:focus, .loaded:hover { 
    background: #519548;
    color: #d9eef7;
    border: solid 1px #519548;
}

body {
    background: #394C5F;
    color: #ECECEC;
}

.content .hr01, .hr01 {
    border-top: 3px solid #28889F;
    line-height: 0.5em;
    text-align: center;
    margin: 1.5em 0 2em;
}
    .hr01 span { background: #394C5F; padding: 0 10px; position: relative; top: -0.35em; }

.grid {
    position: relative;
    width: 960px;
    margin: 0 auto;
}
    .grid .colx1, .grid .colx4, .grid .colx6, .grid .colx8, .grid .colx12  {
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 1em;
        float: left;
        width: 60px;
    }
    .grid .colx4 {
        width: 300px;
    }
    .grid .colx6 {
        width: 460px;
    }
    .grid .colx8 {
        width: 620px;
    }
    .grid .colx12 {
        width: 940px;
    }
    .grid .alpha{ margin-left:0; }
    .grid .omega{ margin-right:0; }

.container {
    width: 960px;
    margin: 0 auto;
}

header {
    padding: 15px;
    border-bottom: 3px solid #BB5316;
<<<<<<< HEAD
    background: #394C5F url(/assets/gr_pattern.gif) 0 0 repeat;
=======
    background: #394C5F url(/images/gr_pattern.gif) 0 0 repeat;
>>>>>>> angular
}
    header .container .logo {
        font-family: VomZom, Verdana, Arial, Helvetica, sans-serif;
        background-color: #BB5316;
        color: #ECECEC;
        float: left;
        font-size: 3.077em; /* 40px */
        line-height: 1em;
        padding: 36px 10px 5px;
        margin: -15px 20px 0 10px;
        text-shadow: 1px 1px 3px #394C5F;
        width: 60px;
        text-align: center;
        
        -webkit-border-bottom-right-radius: 5px;
        -webkit-border-bottom-left-radius: 5px;
        -moz-border-radius-bottomright: 5px;
        -moz-border-radius-bottomleft: 5px;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
    }
    header .container hgroup {
        overflow: hidden;
    }
    header .container h1 {
        font-family: VomZom, Verdana, Arial, Helvetica, sans-serif;
        font-size: 4.615em; /* 60px */
    }
    header .container h2 {
        position: relative;
        top: -1.231em;
        text-transform: uppercase;
    }
    header .container ul[role="tablist"] {
        float: right;
        margin-right: 10px;
    }
        header .container ul[role="tablist"] li {
            float: left;
            margin: 0 0 -15px 5px;
            padding: 5px 10px;
            font-weight: 700;
            font-size: 1.077em;
            background: #ECECEC;
            list-style: none;
            -webkit-border-top-left-radius: 5px;
            -webkit-border-top-right-radius: 5px;
            -moz-border-radius-topleft: 5px;
            -moz-border-radius-topright: 5px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
            header .container ul[role="tablist"] a {
                color: #8F8F8F;
                text-decoration: none;
            }
            header .container ul[role="tablist"] .active {
                background: #BB5316;
            }
            header .container ul[role="tablist"] .active a {
                color: #ECECEC;
            }

section[role="banner"] {
    background: #BB5316;
    padding: 20px;
    margin-bottom: 20px;
}
    section[role="banner"] h1 {
        font-size: 1.923em; /* 25px */
        color: #ececec;
        width: 600px;
        float: left;
    }
    section[role="banner"] #fontname {
        font-size: 3.846em; /* 50px */
        line-height: 2em;
        margin-bottom: 0;
<<<<<<< HEAD
=======
        text-shadow: 2px 2px 2px #394C5F;
>>>>>>> angular
    }
    section[role="banner"] aside {
        float: right;
    }
    
.content {
    margin-bottom: 20px;
}
    .content h1, .content h2 {
        font-size: 1.538em; /* 20px */
        margin: 0 0 1em;
    }
    .content p {
        margin: 0 0 1em;
    }
    
.fonts {
    margin: 0 0 1em;
    width: 300px;
    float: left;
}
    .fonts li {
        cursor: pointer;
        list-style: none;
        padding: 5px 10px;
        font-size: 1.538em;
    }
    .fonts li:first-child {
        border: none;
    }
    .fonts li:hover, .fonts li:focus {
        text-shadow: 1px 1px 1px #394C5F;
    }
    .fonts li.active    {
        background: #394c5f; /* Old browsers */
        background: -moz-linear-gradient(top, #394c5f 0%, #28889f 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#394c5f), color-stop(100%,#28889f)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #394c5f 0%,#28889f 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #394c5f 0%,#28889f 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, #394c5f 0%,#28889f 100%); /* IE10+ */
        background: linear-gradient(top, #394c5f 0%,#28889f 100%); /* W3C */
    }
    .info01 {
<<<<<<< HEAD
        background: url(/assets/info.png) 0 6px no-repeat;
=======
        background: url(/images/info.png) 0 6px no-repeat;
>>>>>>> angular
        font: normal 0.6em/1.333em Verdana, Arial, Helvetica, sans-serif;
        width: 16px;
        height: 20px;
        display: inline-block;
        position: relative;
        margin: 0 5px;
        float: right;
    }
        .info01 ul {
            display: none;
            z-index: 1;
        }
            .fonts .info01 .title, .info01 .title {
                font-size: 16px;
                margin-bottom: 5px;
            }
                .info01 .title strong {
                    float: none;
                    width: auto;
                }
            
            .fonts .info01 li, .info01 li {
                font-size: 12px;
                padding: 0;
                border: none;
                cursor: default;
                text-align: left;
                background: none;
                list-style: none;
            }
            .info01 a {
                overflow: hidden;
                display: block;
            }
            .info01 strong {
                display: block;
                float: left;
                width: 65px;
            }
        
        .info01:hover ul,
        .info01:focus ul    {
            background: #394C5F;
            display: block;
            position: absolute;
            top: 0;
            width: 278px;
            right: -5px;
            padding: 10px;
            border: 1px solid #28889F;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
        }
        
.gallery {
    
}
    .gallery .item {
        overflow: hidden;
        border-bottom: 3px solid;
    }
    .content .preview {
        font-size: 4.615em; /* 60px */
        margin: 0 0 10px;
    }

footer[role="contentinfo"] {
    padding: 10px 20px;
}
    footer[role="contentinfo"] .grid {
        border-top: 1px solid #28889F;
        padding: 10px 0;
    }
    footer[role="contentinfo"] .colx8 {
        text-align: right;
    }

@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none !important; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; } 
  abbr:after { content: " (" attr(title) ")"; }
  .ir a:after { content: ""; }  
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }  
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}
/*! http://webfontspecimen.com/ */

/* Headings & labels
----------------------------------------------- */
#wfs h1 {
	font: 36px/48px Verdana;
	font-weight: normal;
	}
#wfs h2 {
	font: normal 13px/18px Verdana, sans-serif;
	color: #BB5316;
	}
#wfs h2, #wfs p { margin: 18px 0; }
	
#wfs span {
	color: #ECECEC;
	}

		
/* Text sample, reusable sizes
-----------------------------------------*/
#wfs .s { line-height: 1.4em; }
#wfs .ls { letter-spacing: 0.05em; }

#wfs .s9 { font-size: 9px; }
#wfs .s10 { font-size: 10px; }
#wfs .s11 { font-size: 11px; }
#wfs .s12 { font-size: 12px; }
#wfs .s13 { font-size: 13px; }
#wfs .s14 { font-size: 14px; }
#wfs .s16 { font-size: 16px; }
#wfs .s18 { font-size: 18px; }
#wfs .s21 { font-size: 21px; }
#wfs .s24 { font-size: 24px; }
#wfs .s30 { font-size: 30px; }
#wfs .s36 { font-size: 36px; }
#wfs .s42 { font-size: 42px; }
#wfs .s50 { font-size: 50px; }
#wfs .s56 { font-size: 56px; }
#wfs .s60 { font-size: 60px; }
#wfs .s96 { font-size: 96px; }

#wfs .s span {
	display: block;
	float: left;
	width: 80px;
	margin-left: -96px;
	margin-right: 0;
	font-size: 13px;
	font-family: Verdana, sans-serif;
	text-align: right;
	}
		
	
/* Characters
-----------------------------------------*/
#wfs .charset .s {
	margin: 10px 0;
	line-height: 1.1em;
}
	
	
/* Body size comparison
-----------------------------------------*/
#wfs .bodysize {
	overflow: hidden;
	background: #fff url(/images/grid.gif) -5px 9px repeat;
	}
#wfs .bodysize table {
	width: 100%;
	font-size: 90px;
	line-height: 140px;
	}
#wfs .bodysize table th {
	padding: 0 0 6px 12px;
	border-bottom: 1px #eeeee2 solid;
	font: normal 13px Verdana, sans-serif;
	text-align: left;
	color: #333;
	background-color: #fff;
	}
#wfs .bodysize a { padding-bottom: 1px; }
#wfs .bodysize a:link,
#wfs .bodysize a:visited {
	color: #999;
	background-color: transparent;
	}
#wfs .bodysize a:hover {
	color: #c00;
	background-color: transparent;
	}
#wfs .bodysize a:active {
	color: #fff;
	background-color: #000;
	}

#wfs .bodysize table td {
	padding: 6px;
	}
#wfs .bodysize table td span {
	margin: 0;
	padding: 0;
	color: #333;
	background-color: transparent;
	}
#wfs .bodysize table td span:hover {
	background-color: rgba(255,255,200,0.2);
	border-top: 1px #c00 solid;
	border-bottom: 1px #c00 solid;
	}
#wfs .bodysize .typeface2 { font-family: Arial, Helvetica, sans-serif; }
#wfs .bodysize .typeface3 { font-family: "Times New Roman", Times, serif; }
#wfs .bodysize .typeface4 { font-family: Georgia, "New Century Schoolbook", "Nimbus Roman No9 L", serif; }


/* Grayscale
-----------------------------------------*/
#wfs .grayscale {
	clear: both;
	}
#wfs .grayscale p span {
	display: block;
	width: 80px;
	font-size: 13px;
	font-family: Verdana, sans-serif;
	color: #ECECEC;
	}
#wfs .white p span {
	float: left;
	margin-left: -96px;
	margin-right: 0;
	text-align: right;
	}
#wfs .black p span {
	float: right;
	margin-left: 0;
	margin-right: -96px;
	text-align: left;
	}
#wfs .c000 { color: #000; }
#wfs .c333 {	color: #333; }
#wfs .c666 {	color: #666; }
#wfs .c999 {	color: #999; }
#wfs .cCCC {	color: #ccc; }
#wfs .cFFF {	color: #fff; }


/* Size
-----------------------------------------*/
#wfs .ulc p span.text {
	white-space: nowrap;
	overflow: hidden;
	display: static;
	float: none;
	width: auto;
	margin: 0;
	font-size: inherit;
	font-family: inherit;
	text-align: left;
	color: #ECECEC;
	}
#wfs .ulc .upp p span.text {
	text-align: right;
	text-transform: uppercase;
	letter-spacing: 1px;
	}
#wfs .upp span {
	display: block;
	float: right;
	width: 80px;
	margin-right: -96px;
	text-align: left;
	}
#wfs p.upp {
	text-align: left;
	}
	
#wfs .ulc section {
	margin-bottom: 0;
}
@media (max-width: 1170px) {
	.grid {
	    width: 100%;
	    margin: 0 auto;
	}
	    .grid .colx1, .grid .colx4, .grid .colx6, .grid .colx8, .grid .colx12  {
	        padding-left: 10px;
	        padding-right: 10px;
	        margin: 0 0 1em;
	        -moz-box-sizing: border-box;
	        -webkit-box-sizing: border-box;
	        box-sizing: border-box;
	    }	
	    .grid > .colx4, .colx12 > .colx4, .ulc .colx4, .gallery .colx4 {
	        width: 33%;
	    }
	    .grid .colx8 {
	        width: 66.7%;
	    }

	.grid .colx6, .grid .colx8 .colx4 {
		width: 50%;
	}

	.grid .alpha{ padding-left:0; }
    .grid .omega{ padding-right:0; }
	

	section[role="banner"] {
		padding-left: 0;
		padding-right: 0;
	}

	.grid .colx8 .colx4.omega {
		padding: 0 0 0 10px;
	}

	.grid .colx4 img { max-width: 100%; }

	.container,
	.grid .colx12,
	.grid .colx4 iframe, .fonts {
	    width: 100%;
	    height: auto;
	}

	footer[role="contentinfo"] {
		padding: 10px;
	}

	/* Editor page changes */
	#wfs .white p span, #wfs .black p span, #wfs .s span { display: none; }
	#wfs .ulc p span.text { display: block; }
}

@media (max-width: 500px) {
	/* Fluid baby */
	header {
		padding: 15px 0 0;
	}
	header .container .logo {
		margin: -19px 20px 10px 10px;
		font-size: 2.5em;
	}
	header .container h1 {
		font-size: 2.308em;
	}
	header .container h2 {
		font-size: 0.692em;
		top: -0.8em;
	}
	header .container ul[role="tablist"] {
		float: none;
		width: 100%;
		clear: both;
		letter-spacing: -0.31em;
	}
		header .container ul[role="tablist"] li {
			float: none;
			display: inline-block;
			width: 33%;
			margin: 0;
			text-align: center;
			font-size: 1.5em;
			-moz-border-radius: 0;
			-webkit-border-radius: 0;
			border-radius: 0;
			white-space: nowrap;
			letter-spacing: normal;
			-moz-box-sizing: border-box;
	        -webkit-box-sizing: border-box;
	        box-sizing: border-box;
		}
		header .container ul[role="tablist"] li:last-child {
			margin: 0 -1px 0 0;
		}

	section[role="banner"] {
		padding: 20px 0 0;
	}
		section[role="banner"] .grid .colx4,
		section[role="banner"] .grid .colx8 {
	        width: 100%;
	        overflow-x: auto;
	    }
	    section[role="banner"] .grid .colx4 {
	        margin: 0;
	        overflow-x: visible;
	    }
	    section[role="banner"] h1 {
	    	font-size: 1.5em;
	    }

	.grid section[role="region"] { display: none; }
	.grid section[role="main"],
	.grid section[role="region"].colx6,
	.grid .colx8 .colx4, .grid .colx12 .colx8, .grid .colx12 .colx4, .gallery .colx4 {
		width: 100%;
	}
	.grid .colx8 .colx4.omega, .grid .colx12 .colx4 {
		padding: 0;
	}
	.grid section[role="region"].charset { display: block; }

	.content h1 {
		xfont-size: 1.154em;
	}
	.content .hr01 {
		line-height: 1.2em;
		margin: 1.2em 0 1em;
	}
	.content .hr01 span {
		top: -1.3em;
		width: 80%;
		display: inline-block;
	}
	.content .preview {
		overflow:hidden;
	}

	footer .grid > .colx4, footer .grid > .colx8 {
		float: none;
		width: 100%;
		text-align: left;
	}
}