@charset "UTF-8";
/*------------------------------------*\
	INUIT.CSS
\*------------------------------------*/
/*
Author:             Harry Roberts
Twitter:            @inuitcss
Author URL:         csswizardry.com
Project URL:        inuitcss.com
Version:            3.2
Date:               24 November 2011

Copyright 2011 Harry Roberts

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

*/
/*------------------------------------*\
	CONTENTS
\*------------------------------------*/
/*
RESET
SHARED
MAIN
GRIDS
CLEARFIX
ISLAND
MEDIA
LOGO
NAV
TYPE
IMAGES
FORMS
TABLES
MESSAGES
MISC
CLASSES
DIAGNOSTICS
NARROW
MOBILE
PRINT
*/



.text-separator {padding: 0 5px;}
/*.wrapper-top {max-width: 1080px; margin: 0 auto; background-color:InactiveBorder;padding-right: 1em;padding-left: 1em;}
.wrapper-logo {padding:0px 0px 0px 0px; max-width: 1080px; margin: 0 auto; background-color:InactiveBorder; padding-right: 1em;padding-left: 1em;}*/
.smallertext { font-size: 0.9em; }
.addthis_toolbox {padding-top:2px; padding-bottom:2px; width:150px;}
h1 span { font-style:italic; color: #777; font-size: 0.6em;}
.imgtext {display: block; margin-bottom: 1em; color: #777; }
.bordered{ background-color: #FFF; border: 1px solid #DDD; padding: 3px; }
#map_canvas {height:340px;}
#newform, #forumcondclick { cursor:pointer; text-decoration:underline;  color: #937A60;}
.hidden { display:none;}
#form label{ width: 15em; float:left; text-align: left; margin-right: 0.5em; display: block; font-weight:normal;}
#form div {padding-bottom:10px; }
#form table { margin-bottom:0px; }
#form .captcha {width:40px;}
em { color:#7c7c7c; }

table.gsc-search-box td {background-color:#F3E9E0;border:0px;}
.cse input.gsc-search-button, input.gsc-search-button { height:auto; min-width: inherit; }
/*input.gsc-input { cursor: pointer; padding: 4px; }
td.gsc-search-button { padding-left:15px;} */
.cse .gsc-control-cse, .gsc-control-cse { padding: 0;}
.gs-snippet {font-size: .9em; }
select{margin:0px; width:200px;}
.dateinput{ margin:0px; width:190px;}
.autoinput{ margin:0px; width:200px; margin-right:9px;}
.cse input.gsc-search-button, input.gsc-search-button  { padding:3px;}
.cse .gsc-webResult.gsc-result, .gsc-webResult.gsc-result { border-color: #fffff5;}
.gsc-resultsbox-visible {padding:3px; background-color: #fffff5; border: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; border-left: 1px solid #CCCCCC;}
.gsc-cursor-box { margin-left: 5px; }

.tweet {padding: 3px; background:#EFEFEF;}
.tweet img {display:none;}
.tweet .text {margin: 0;}
.tweet .time a {font-size: 80%;	color: #888;white-space: nowrap;text-decoration: none;}
.tweet .time a:hover {text-decoration: underline;}
.tweet .text {line-height:normal;font-size:0.8em;}

/* `Widths
----------------------------------------------------------------------------------------------------*/
form {
 overflow: auto;
}

.input_tiny {
  width: 50px;
}

.input_small {
  width: 100px;
}

.input_medium {
  width: 150px;
}

.input_large {
  width: 200px;
}

.input_xlarge {
  width: 250px;
}

.input_xxlarge {
  width: 300px;
}

.input_full {
  width: 100%;
}

/*
  Added via JS to <textarea> and class="input_full".
  Applies only to IE7. Other browsers don't need it.
*/
.input_full_wrap {
  display: block;
  padding-right: 8px;
}

.divleft {float:left; width:320px;}
.divright {float:right; width:320px;}
.searchparam label {margin-left: 0.5em; font-weight:bold;}
.search {padding: 1em;}
.searchcolors {margin-left: 1.5em;}
.searchresultname {color: #937A60;font-weight:normal; font-size:1.6em; font-family:'Oswald', Arial, sans-serif;}
.g-ad { width: 728px;  margin-left: auto; margin-right: auto; margin-top:1em; }

.ixletters span {color: #FFF; font-weight:bold; font-size:1.6em; line-height:1.5em;font-family:'Oswald', Arial, sans-serif;}
.ixletters { margin-bottom:10px; padding:1em;}
.ixletters a {color: #937A60;}
.ixnewletter{border-bottom: 1px solid #937A60;list-style: none;font-weight:bold;color: #937A60;font-size:1.6em;}
.ixnewletter a { font-weight:normal; float:right; font-size:0.5em;  padding-top: 1.3em; }
ul.check li.thinner  {padding-top: 0; font-size:1em;}

/* forum */


.forum-section-title {
	background-color: #FFF6BF;
	border-top: 2px solid #FFD324;
	font: bold 1.1em sans-serif;
	margin-bottom: 5px;
	min-height: 0;
	padding: 5px 8px 6px;
}
.spacer1 { padding-left:90px; }
.spacer2 { padding-left:30px; }

.pagingcurrent { padding: 1px 3px 1px 3px;  font: 1.1em sans-serif; border:1px solid; line-height:40px;}
.paging { padding: 1px 3px 1px 3px; font: 1.0em sans-serif;}

.archive-separator {border-bottom: 1px solid #937A60;}

/* UI Consistency
----------------------------------------------------------------------------------------------------*/

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

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

input,
button,
select,
textarea {
  vertical-align: middle;
}

input[type="radio"],
input[type="checkbox"] {
  position: relative;
  vertical-align: top;
  top: 3px;
  /* IE8, IE9, IE10 */
  top: 0\0;
  /* IE7 */
  *top: -3px;
}

/* iPad */
@media (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 1024px) {
  input[type="radio"],
  input[type="checkbox"] {
    vertical-align: baseline;
    top: 2px;
  }
}

/* iPhone 3 */
@media (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 480px) {
  input[type="radio"],
  input[type="checkbox"] {
    vertical-align: baseline;
    top: 0;
  }
}

/* iPhone 4 */
@media (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px) {
  input[type="radio"],
  input[type="checkbox"] {
    vertical-align: baseline;
    top: 0;
  }
}

button,
input[type="reset"],
input[type="submit"],
input[type="button"] {
  -webkit-appearance: none;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
  background: #EAFFC4;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #EAFFC4));
  background: -moz-linear-gradient(top center, #fff 0%, #EAFFC4 100%);
  border: 1px solid;
  cursor: pointer;
  color: #5c5c5c;
  /*
    Helvetica Neue present, because it works better
    for line-height on buttons than Arial, on OS X.
  */
  font: bold 14px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
  outline: 0;
  overflow: visible;
  padding: 5px 6px;
  text-shadow: #fff 1px 1px 0;
  width: auto;

  /* IE7 */
  *padding-top: 2px;
  *padding-bottom: 0px;
	border-bottom-color: #cbcbcb;
	border-right-color: #c9c9c9;
	border-left-color: #c9c9c9;
	border-top-color: #d4d4d4;
}

button {
  /* IE7 */
  *padding-top: 1px;
  *padding-bottom: 1px;
}

textarea,
select,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="input"],
input[type="time"],
input[type="url"],
input[type="week"] {
  -webkit-appearance: none;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
  background-color: #fff;
  border: 1px solid;
  border-color: #848484 #c1c1c1 #e1e1e1;
  color: #000;
  outline: 0;
  padding: 2px 3px;
 /* font-size: 13px; */
  /*
    Leaving out Helvetica Neue, to not throw off size="..."
    on inputs. Arial is more reliable, on Windows and OS X.
  */
  font-family: Arial, 'Liberation Sans', FreeSans, sans-serif;
  height: 1.8em;

  /* IE7 */
  *padding-top: 2px;
  *padding-bottom: 1px;
  *height: auto;
}

/*
  Separate rule for Firefox.
  Separate rule for IE, too.
  Cannot stack with WebKit's.
*/
::-webkit-input-placeholder {
  color: #888;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #888;
}

input.placeholder_text,
textarea.placeholder_text {
  color: #888;
}

:invalid {
  /*
    Suppress red glow that Firefox
    adds to form fields by default,
    even when user is still typing.
  */
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

button:focus,
button:active,
input:focus,
input:active,
select:focus,
select:active,
textarea:focus,
textarea:active {
  -moz-box-shadow: #937A60 0 0 5px;
  -webkit-box-shadow: #937A60 0 0 5px;
  box-shadow: #937A60 0 0 5px;

  /* for Opera */
  z-index: 1;
}

input[type="file"]:focus,
input[type="file"]:active,
input[type="radio"]:focus,
input[type="radio"]:active,
input[type="checkbox"]:focus,
input[type="checkbox"]:active {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

select[disabled],
textarea[disabled],
input[type="date"][disabled],
input[type="datetime"][disabled],
input[type="datetime-local"][disabled],
input[type="email"][disabled],
input[type="month"][disabled],
input[type="number"][disabled],
input[type="password"][disabled],
input[type="search"][disabled],
input[type="tel"][disabled],
input[type="text"][disabled],
input[type="time"][disabled],
input[type="url"][disabled],
input[type="week"][disabled] {
  background-color: #eee;
}

button[disabled],
input[disabled],
select[disabled],
select[disabled] option,
select[disabled] optgroup,
textarea[disabled] {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: #888;
  cursor: default;
}

textarea,
select[size],
select[multiple] {
  height: auto;
}

/* Tweaks for Safari + Chrome. */
@media (-webkit-min-device-pixel-ratio: 0) {
  select {
    background-image: url(images/select_arrow.gif);
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 20px;
  }

  select[size],
  select[multiple] {
    background-image: none;
    padding: 0;
  }

  ::-webkit-validation-bubble-message {
    box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666), color-stop(1, #000));
    border: 1px solid;
    border-color: #747474 #5e5e5e #4f4f4f;
    color: #fff;
    font: 11px/1 'Lucida Grande', Arial, 'Liberation Sans', FreeSans, sans-serif;
    padding: 15px 15px 17px;
    text-shadow: #000 0 0 1px;
  }

  ::-webkit-validation-bubble-arrow,
  ::-webkit-validation-bubble-top-outer-arrow,
  ::-webkit-validation-bubble-top-inner-arrow {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #666;
    border: 0;
  }
}

textarea {
  min-height: 40px;
  overflow: auto;
  resize: vertical;
  width: 100%;
}

optgroup {
  color: #000;
  font-style: normal;
  font-weight: normal;
}

/* `IE6
----------------------------------------------------------------------------------------------------*/

/*
  Everything below this line is for IE6.
  Delete it if you don't support it! :)

  Classes are added dynamically via JS,
  because IE6 doesn't support attribute
  selectors: .ie6_button, .ie6_input, etc.

  Note: These style rules are somewhat
  duplicated because IE6 bombs out when
  it sees attribute selectors. Example:

  .ie6_button {
    This works in IE6.
  }

  .ie6_button,
  input[type=submit] {
    This doesn't work.
  }
*/

.ie6_button,
* html button {
  background: #ddd url(images/button.png) repeat-x;
  border: 1px solid;
  border-color: #ddd #bbb #999;
  cursor: pointer;
  color: #333;
  font: bold 12px/1.2 Arial, sans-serif;
  padding: 2px 10px 0px;
  overflow: visible;
  width: auto;
}

* html button {
  padding-top: 1px;
  padding-bottom: 1px;
}

.ie6_input,
* html textarea,
* html select {
  background: #fff;
  border: 1px solid;
  border-color: #848484 #c1c1c1 #e1e1e1;
  color: #000;
  padding: 2px 3px 1px;
  font-size: 13px;
  font-family: Arial, sans-serif;
  vertical-align: top;
}

* html select {
  margin-top: 1px;
}

.placeholder_text,
.ie6_input_disabled,
.ie6_button_disabled {
  color: #888;
}

.ie6_input_disabled {
  background: #eee;
}

/* Gallery */

.galleryMovieDiv, .galleriImageDiv
{
    float:left;
    overflow:hidden;
    padding:10px;
    border:1px solid #ccc;
    margin:5px;
    height:60px;
    width:90px;
    position:relative;
}

.galleryMovieDiv img, .galleriImageDiv img
{
    height:60px;
    width:90px;    
}

.galleryMovieIconDiv
{
    width:20px;
    height:60px;
    position:absolute;
    top:10px;
}

img.galleryMovieIcon
{
    width:20px;
    height:60px;
}

.galleryImageIconDiv
{
    width:24px;
    height:24px;    
    position:absolute;
    top:10px;
}

img.galleryImageIcon
{
    width:24px;
    height:24px;
}

#galleryDiv p
{
    clear:both;
}

/* Autocomplete */

.ac_results {
	padding: 0px;
	border: 1px solid black;
	background-color: white;
	overflow: hidden;
	z-index: 99999;
}

.ac_results ul {
	width: 100%;
	list-style-position: outside;
	list-style: none;
	padding: 0;
	margin: 0;
}

.ac_results li {
	margin: 0px;
	padding: 2px 5px;
	cursor: default;
	display: block;
	/* 
	if width will be 100% horizontal scrollbar will apear 
	when scroll mode will be used
	*/
	/*width: 100%;*/
	/*font: menu;*/
	/*font-size: 12px;*/
	/* 
	it is very important, if line-height not setted or setted 
	in relative units scroll will be broken in firefox
	*/
	/*line-height: 16px;*/
	overflow: hidden;
}

.ac_loading {
	background: white;
}

.ac_odd {
	background-color: white; 
}

.ac_over {
	background-color: #F3E9E0;
	/*color: white;*/
}

/*------------------------------------*\
	$RESET
\*------------------------------------*/
/*
A more considered reset; more of a restart... csswizardry.com/2011/10/reset-restarted
*/
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,
a,abbr,address,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strong,sub,sup,tt,var,
b,u,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;
}
article,aside,details,figcaption,figure,footer,
header,hgroup,menu,nav,section{
	display:block;
}
h1,h2,h3,h4,h5,h6{
	font-size:1em;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
strong,b,mark{
	font-weight:bold;
	font-style:inherit;
}
em,i,cite,q,address,dfn,var{
	font-style:italic;
	font-weight:inherit;
}
abbr[title],dfn[title]{
	cursor:help;
	border-bottom:1px dotted;
}
ins{
	border-bottom:1px solid;
}
a,u,ins{
	text-decoration:none;
}
del,s{
	text-decoration:line-through;
}
pre,code,samp,kbd{
	font-family:monospace;
}
small{
	font-size:0.75em;
}
img{
	border:none;
	font-style:italic;
}
input,
select,option,optgroup,
textarea{
	font:inherit;
}





/*------------------------------------*\
	$SHARED
\*------------------------------------*/
/*
Rather than repeating declarations over and over, let’s make a shared section.
*/
h1,h2,h3,h4,h5,h6,
ul,ol,dl,p,address,figure,pre,fieldset,table,hr,
.nav,.island,.media{
	margin-bottom:15px;
	margin-bottom:1rem;
	/*margin-bottom:24px;
	margin-bottom:1.5rem;*/
}
figcaption,small{
	font-size:12px;
	font-size:0.75rem;
}
ul,ol,dd{
	margin-left:1.5em; margin-right:1em; margin-top:1em;
}
small,code{
	line-height:1;
}
pre,code,
input,textarea{
	font:inherit;
}





/*------------------------------------*\
	$MAIN
\*------------------------------------*/
html{
	overflow-y:scroll; /* Force scrollbars 100% of the time */
	font-size:90%; /* Use 16px as per informationarchitects.jp/en/100e2r/ and wilsonminer.com/posts/2008/oct/20/relative-readability/ */
	line-height:1.5; /* A safe default for type of any size. */
	/* You should always specify a colour and background, override these in your own stylesheet if desired. */
	background-color:#fff;
	color:#888;
}
body{
	min-height:100%;
}





/*------------------------------------*\
	$GRIDS
\*------------------------------------*/
/*
Build a custom grid-system igloo at inuitcss.com
Include this igloo in igloos.css
*/





/*------------------------------------*\
	$CLEARFIX
\*------------------------------------*/
/*
Fix clearing issues as per: nicolasgallagher.com/micro-clearfix-hack/
*/
.cf,
.grids,
.media{
	zoom:1;
}
.cf:before,
.grids:before,
.media:before,

.cf:after,
.grids:after,
.media:after{
	content:"";
	display:table;
}
.cf:after,
.grids:after,
.media:after{
	clear:both;
}





/*------------------------------------*\
	$ISLAND
\*------------------------------------*/
/*
Use a class of .island whenever you want to box off an area of content as per: csswizardry.com/2011/10/the-island-object/
Extend with classes like .promo to apply different colours etc to draw attention.
*/
.island{
	padding:1.5em;
}
	.island > :last-child{
		margin-bottom:0;
	}





/*------------------------------------*\
	$MEDIA
\*------------------------------------*/
/*
Based on @stubbornella’s media object: stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
<a class="media promo">
	<img src=product.jpg alt="" class=img>
	<p class=body>Get Product for half price!</p>
</a>
*/
.media{
	display:block;
}
	.media .img{
		float:left;
		margin-right:10px;
	}
	.media .body{
		overflow:hidden;
		margin-bottom:0;
	}





/*------------------------------------*\
	$LOGO
\*------------------------------------*/
/*
Your logo is an image, not a h1: csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/
*/
.logo,
.logo img{
	display:block;
	width:auto; /* Width of your logo in pixels (ideally a round grid-number) */
	height:auto; /* Height of your logo in pixels */
}
/* Based on the fact that we need to use an <img /> in our markup, let’s hide the actual image and use a background on the <a>--this gives us semantically sound markup and the ability to use sprites for hover effects! */
.logo{
	background:url(/path/to/logo);
}
	.logo:hover{
		/* Hover states */
		background-position:0 -00px;
	}
.logo img{
	position:absolute;
	left:-99999px;
}





/*------------------------------------*\
	$NAV
\*------------------------------------*/
/*
Create an abstraction, as per: csswizardry.com/2011/09/the-nav-abstraction/
*/
.nav{
	list-style:none;
}
.nav li{
	display:inline;
}
.nav a{
	display:inline-block;
}





/*------------------------------------*\
	$TYPE
\*------------------------------------*/
/*--- HEADINGS ---*/
h1,.alpha{
	font-size:2em;			/* 32px */
	line-height:1.5;		/* 48px */
}
h2,.beta{
	font-size:1.5em;		/* 24px */
	line-height:1;			/* 24px */
}
h3,.gamma{
	font-size:1.25em;		/* 20px */
	line-height:1.2;		/* 24px */
}
h4,.delta{
	font-size:1.125em;		/* 18px */
	line-height:1.333;		/* 24px */
}
h5,.epsilon{
	font-weight:bold;
}
h5,.epsilon,
h6,.zeta{
	font-size:1em;			/* 16px */
	line-height:1.5;		/* 24px */
}

/*--- PARAGRAPHS ---*/
/*
Mo’ robust paragraph indenting: csswizardry.com/2010/12/mo-robust-paragraph-indenting/
Uncomment to activate
p+p{
	text-indent:2em;
	margin-top:-1.5em;
}
*/

/*--- FIGURES ---*/
figure img{
	display:block;
	margin-bottom:0;
}

/*--- LINKS ---*/
/*
Say no to negative hovers: csswizardry.com/2011/05/on-negative-hovers/
A negative hover is one whose appearance is subtracted from on hover rather than added to.
*/
a:visited{
	opacity:0.8; /* A bit basic, but it’s a bare minumum... */
}
a:hover{
	text-decoration:underline;
}
a:current-tab,
a:focus{
	/* Give clicked links a depressed effect. */
	position:relative;
	top:1px;
}

/*--- LISTS ---*/
li > ul,
li > ol{
	/* Let’s take care of lists in lists */
	margin-bottom:0;
}

/*
A numbered list is NOT the same as an ordered one: csswizardry.com/2011/09/ordered-and-numbered-lists-the-differences/
Use this class when you want a list to be numbered but it has no order.
*/
ul.numbered{
	list-style:decimal outside;
}
dt{
	font-weight:bold;
}

/*--- QUOTES ---*/
/*
Big up @boblet: html5doctor.com/blockquote-q-cite/
*/
q{ quotes:"‘" "’" "“" "”"; }

q:before{ content:"‘"; content:open-quote; }
q:after{ content:"’"; content:close-quote; }

q q:before{ content: "“"; content: open-quote; }
q q:after{ content: "”"; content: close-quote; }

blockquote{ quotes: "“" "”"; }
blockquote p:before{ content: "“"; content: open-quote; }
blockquote p:after{ content: ""; content: no-close-quote; }
blockquote p:last-of-type:after{ content: "”"; content: close-quote; }

blockquote{
	text-indent:-0.4em;
}

/*
Mark up the source of a quote with .source:
<blockquote>
	<p>Lorem ipsum dolor sit amet. <b class=source>Joe Bloggs</b></p>
</blockquote>
*/
.source{
	display:block;
	text-indent:0;
	margin-top:-24px;
	margin-top:-1.5rem;
}
	.source:before{
		content:"—";
	}

/*--- GENERAL ---*/
mark{
	background-color:#ffc;
	color:#333;
}

/*--- CODE ---*/
pre,
code{
	font-family:"Inconsolata", "Monaco", "Consolas", "Courier New", Courier, monospace;
}
pre{
	overflow:auto;
	line-height:24px; /* Having to define explicit pixel values :( */
}





/*------------------------------------*\
	$IMAGES
\*------------------------------------*/
img{
	max-width:100%;
	height:auto;
	/* Give it some text styles to offset alt text */
	color:#c00;
}
/*
img.left	{ margin:0 1.5em 0 0; }
img.right	{ margin:0 0 0 1.5em; } */

/*--- FLASH/VIDEO ---*/
/*
object,
embed,
video{
	max-width:100%;
	height:auto;
}*/

/*------------------------------------*\
	$FORMS
\*------------------------------------*/
/*
Unfortunately, and somewhat obviously, forms don’t fit the baseline all too well. Perhaps in a later version...
*/
/*fieldset{
	padding:1.5em;
	border:1px solid #ccc;
}
label{
	display:block;
}
.text-input{

}
label,
.text-input,
textarea,
.btn{
	cursor:pointer;
}
	.text-input:active,
	.text-input:focus,
	textarea:active,
	textarea:focus{
		cursor:text;
	}

.check-list{
	width:100%;
	overflow:hidden;
	list-style:none;
	margin-left:0;
}
.check-list li{
	width:25%;
	float:left;
}
.check-label{
	display:inline;
}
fieldset > :last-child{

	margin-bottom:0;
}*/

/*------------------------------------*\
	$TABLES
\*------------------------------------*/
/*
Unfortunately, and somewhat obviously, tables don’t fit the baseline all too well. Perhaps in a later version...
*/
table{
	width:100%;
	max-width:100%;
}
thead tr:last-of-type th{
	/* Thicker border on the table-headers of the last row in the table head. */
	border-bottom-width:1px;
}
tbody th{
	/* Thicker right border on table-headers in the table body. */
	border-right-width:2px;
}
th:empty{
	/* Hide the borders on any empty table-headers. */
	border:none;
}
td{
	vertical-align:top;	
	padding: 0.3em; border:0;
}
th{
	font-weight:bold;
	text-align:left;
	padding: 0.3em;
	border-bottom:1px solid #ccc;
}
table [colspan]{
	text-align:center;
}
table [rowspan]{
	vertical-align:middle;
}

.chblistColors {margin-top: 1em;}
/*
Assuming IE has an 'implied' colspan of one on cells without an explicit colspan attribute, fix/undo it.
See jsfiddle.net/csswizardry/UJJay/
*/
[colspan="1"]{
    text-align:left;
}
[rowspan="1"]{
    vertical-align:top;
}
tbody tr:nth-of-type(odd){
	background:rgba(0,0,0,0.05);
}
tfoot{
	text-align:center;
}
tfoot td{
	border-top-width:2px;
}





/*------------------------------------*\
	$MESSAGES
\*------------------------------------*/
/*
Unfortunately feedback messages don’t fit the baseline all too well. Perhaps in a later version...
*/

	/*
	With multiple errors it’s nice to group them:
	<ul class=message>
		<li>Please provide a surname.</li>
		<li>Please enter a valid email address.</li>
	</ul>
	*/
	ul.message{
		list-style:decimal outside; /* It’s also handy to number them. However, they might not necessarily be in a particular order, so we spoof it by putting numbers on an unordered list */
		padding:10px 10px 10px 56px;
	}
.error{
	background:url(../img/css/icons/error.png) top no-repeat #fab;
	background-position:12px 12px;
	font-weight:normal;
	display:block;
	padding:10px 10px 10px 36px;
	border:1px solid #fb5766;
	margin-left:0;
}
.success{
	background:url(../img/css/icons/success.png) top no-repeat #d1feba;
	background-position:12px 12px;	
	font-weight:normal;
	display:block;
	padding:10px 10px 10px 36px;
	border:1px solid #83ba77;
	margin-left:0;
}
.info{
	background:url(../img/css/icons/info.png) top no-repeat #c4dbec;
	background-position:12px 12px;	
	font-weight:normal;
	display:block;
	padding:10px 10px 10px 36px;
	border:1px solid #85a5be;
	margin-left:0;
	
	
}
.warning{
	background:url(../img/css/icons/warning.png) top no-repeat #fef8c4;
	background-position:12px 12px;
	font-weight:normal;
	display:block;
	padding:10px 10px 10px 36px;
	border:1px solid #d8d566;
	margin-left:0;
}

div#pop-up1, div#pop-up2, div#pop-up3 {
  display: none;
  position: absolute;
  z-index:1000;
}

.infoclick1, .infoclick2, .infoclick3  
{
    width:90px; font-weight:bold;
	font-family: 'Oswald', Arial, sans-serif;
	font-weight: 500;
	color: #937A60;
	font-size:1.2em;
}
.uline {text-decoration:underline; padding-left:1em; font-size:0.9em; font-weight: 300; cursor:pointer;}

/*------------------------------------*\
	$MISC
\*------------------------------------*/
.accessibility{
	/* Hide content off-screen without hiding from screen-readers. N.B. This is not suited to RTL languages */
	position:absolute;
	left:-99999px;
}
.more-link:after{
	/* Too many people use &raquo; in their markup to signify progression/movement, that ain’t cool. Let’s insert that using content:""; */
	content:" »";
}





/*------------------------------------*\
	$CLASSES
\*------------------------------------*/
/*
Some not-too-pretty and insemantic classes to do odd jobs.
*/
.left	{ float:left; }
.right	{ float:right; }
.clear	{ clear:both; float:none; }

.text-left		{ text-align:left; }
.text-right		{ text-align:right; }
.text-center,
.text-centre	{ text-align:center; }





/*------------------------------------*\
	$DIAGNOSTICS
\*------------------------------------*/
/*
Apply a class of .debug to the html element ONLY WHEN YOUR SITE IS ON DEV.
*/

/*
Red border 		== 	something is wrong
Yellow border 	== 	something may be wrong, you should double check.
Green border 	== 	perfect, nice one!
*/

/*--- STYLES ---*/
.debug [style],
.debug style{
	/* Inline styles aren’t great, can this be avoided? */
	outline:5px solid yellow;
}
	.debug style{
		display:block;
	}

/*--- IMAGES ---*/
.debug img{
	/* Images without alt attributes are bad! */
	outline:5px solid red;
}
.debug img[alt]{
	/* Images with alt attributes are good! */
	outline-color:green;
}
.debug img[alt=""]{
	/* Images with empty alt attributes are okay in the right circumstances. */
	outline-color:yellow;
}

/*--- LINKS ---*/
.debug a{
	/* Links without titles are yellow, does your link need one? */
	outline:5px solid yellow;
}
.debug a[title]{
	/* Links with titles are green, title attributes can be very useful! */
	outline-color:green;
}
.debug a[href="#"]{
	/* Were you meant to leave that hash in there? */
	outline-color:yellow;
}
.debug a[target]/*,
.debug a[onclick],
.debug a[href*=javascript]*/{
	/* What were you thinking?! */
	outline-color:red;
}

/*--- CLASSES/IDS ---*/
.debug [class=""],
.debug [id=""]{
	/* Is this element meant to have an empty class/ID? */
	outline:5px solid yellow;
}





/*------------------------------------*\
	$NARROW
\*------------------------------------*/
/*
CSS for tablets and narrower devices
*/
@media (min-width: 721px) and (max-width: 960px){
}
/*--- END NARROW ---*/





/*------------------------------------*\
	$MOBILE
\*------------------------------------*/
/*
CSS for mobile devices.
Linearise it!
*/
@media (max-width: 720px){
/*------------------------------------*\
	MAIN
\*------------------------------------*/
html{
	font-size:1.125em; /* Make text slightly larger for smaller devices to improve readability. */
}
body{
	-webkit-text-size-adjust:none;
}
.wrapper, .wrapper-top, .wrapper-logo{
	width:auto;
}
.grids{
	margin:0;
	width:auto;
}
[class^="grid-"],
.grids [class^="grid-"]{
	width:auto;
	float:none;
	margin:0;
}

.hidenarrow { display:none;}


/*------------------------------------*\
	LOGO
\*------------------------------------*/
.logo{
	margin-left:auto;
	margin-right:auto;
}





/*------------------------------------*\
	TYPE
\*------------------------------------*/
/*--- LISTS ---*/
ul,
ol,
dl{
	margin-left:1.5em;
}





/*------------------------------------*\
	IMAGES
\*------------------------------------*/
img.left,
img.right	{ max-width:50%; height:auto; }
}
/*--- END MOBILE ---*/





/*------------------------------------*\
	$PRINT
\*------------------------------------*/
/*
Good ol’ fashioned paper...
*/
@media print{
/*------------------------------------*\
	MAIN
\*------------------------------------*/
/*
Give everything some decent contrast.
*/
*{
	background-color:#fff;
	color:#000;
	text-shadow:none!important;
}
/*
Set a nice measure and take the font down to print-acceptable sizes.
*/
body{
	font-size:0.75em; /* 12px (if base font-size was 16px) */
}
.wrapper, .wrapper-top, .wrapper-logo{
	width:75%;
	margin:0 auto;
}
/*
A list of things you don’t want printing. Add to/subtract from as necessary. 
*/
.nav,
.footer{
	display:none;
}
.logo img{
	position:static;
}
/*
Linearise
*/
.grids{
	width:auto;
}
[class^="grid-"]{
	width:auto;
	float:none;
	clear:both;
}
/*
Don’t let images break anything.
*/
img{
	max-width:100%;
	height:auto;
}
/*
Messages look odd with just borders.
*/
.message{
	border:none;
	font-weight:bold;
}
/*
Display the href of any links.
*/
a:link:after,a:visited:after{
	content:" (" attr(href) ")";
	font-size:smaller;
}
/*
Any links that are root relative to your site need prepending with your URL.
*/
a[href^="/"]:after{
	content:" (http://yoururlhere.com" attr(href) ")";
	font-size:smaller;
}
/*
Any Flash/video content can’t be printed so leave a message.
*/
object:after{
	content:"Flash/video content. Head to http://yoururlhere.com/ to view this content.";
	display:block;
	font-weight:bold;
	margin-bottom:1.5em;
}
}
/*--- END PRINT ---*/




/*
Page container
*/
.wrapper, .wrapper-top, .wrapper-logo{
	max-width:1080px;
	margin:0 auto;
	padding:1.5em 1em;
	background:url(../img/bg.jpg) repeat;
}
.wrapper-top, .wrapper-logo {padding:0; padding-right: 1em;padding-left: 1em;}

/*------------------------------------*\
	GRIDS
\*------------------------------------*/
/*
Most frameworks rely on class="end" or similar to remove the margin from the last column in a row of grids. We don't want to do that so we use a combination of margin- and negative margin-left. It's clever...
We also allow you to use grid items as stand alone columns or in a series of columns. To use a series just wrap them all in <div class="grids">...</div>
*/
.grids{
	max-width:1120px;
	clear:both;
	margin:0 0 0 -2.679%;
	list-style:none; /* So we can make grids out of lists. */
}

/*
Here we are using an attribute selector to detect the string 'grid-' in an element's class.
This works by assuming that anything we call grid- we also want to be a grid item. It means less code and less for you to remember!

Ensure any grid item's FIRST class is a grid- class. e.g.
VALID: class="grid-4 text-centre"
INVALID: class="left grid-4"
*/
[class^="grid-"]{
	float:left;
	margin:0 2.679% 0 0;
}
.grids [class^="grid-"]{
	margin:0 0 0 2.679%;
}

/*
Nested grids won't work with fluid layouts :(
*/

.grid-1{ width:3.571% }
.grid-2{ width:9.821% }
.grid-3{ width:16.071% }
.grid-4{ width:22.321% }
.grid-5{ width:28.571% }
.grid-6{ width:34.821% }
.grid-7{ width:41.071% }
.grid-8{ width:47.321% }
.grid-9{ width:53.571% }
.grid-10{ width:59.821% }
.grid-11{ width:66.071% }
.grid-12{ width:72.321% }
.grid-13{ width:78.571% }
.grid-14{ width:84.821% }
.grid-15{ width:91.071% }
.grid-16{ width:97.321%; margin:0; }




@charset "utf-8";
/*------------------------------------*\
	eve-styles.css
\*------------------------------------*/

/* Design of Template ResponseEve (eve-styles.css) by Silvia Gamsjäger (SiGa)*/
/*
Twitter:            @sg_layout
Author URL:         sg-layout.com
Project URL:        sg-layout.com
Version:            1.0
Date:               January 2012
License:			MIT License (X11)
					http://www.opensource.org/licenses/MIT

Copyright (c) 2012 Silvia Gamsjäger (SiGa)

You´ll find a copy of the license in the files
you´ve downloaded.
*/

/*------------------------------------*\
	MAIN
\*------------------------------------*/
html{font-family: Arial, sans-serif;color: #444;}
/*body{background:url(../img/bg.jpg) repeat;}*/
body{background-color:#efefef;}

.social {text-align: right; position: relative;  margin: 4px 0;}
.social img {margin-bottom: 0;}

#footer {border-radius: 10px; background-color: #A5C100; color: #fff; padding: 10px 0;}
#footer p {margin: 0; padding: 10px 0;}

/*------------------------------------*\
	LOGO
\*------------------------------------*/

#logo, #logo img{display:block;width:200px; height:100px;}
#logo{float: left; background:url(../img/logo.png) top center no-repeat; position: relative; margin: 0; z-index: 120; display: inline; /* fixes IE6 margin bug */}
#logo img{position:absolute; left:-99999px;}

/*------------------------------------*\
	TOP NAVIGATION
\*------------------------------------*/
.nav {list-style:none; margin:0 0 1.5em 0;}

/*Add a class of centred/centered to create a centred nav.*/

#nav.main{
	/*float: right;
	text-align:center; */
	margin: 0.5em 0 0 0;
	/*padding: 0.4em 0;*/
	font-family:'Oswald', Arial, sans-serif;
}
#nav.main li {display:inline; float:none; padding: 0.2em;}

#nav.main a{
	display:inline-block;
	padding: 0.6em 1.2em;
	background-color: #EFEFEF;
	border-radius: 10px;
	border-right: 1px solid #bbb;
	border-bottom: 2px solid #bbb;
	color: #666;text-decoration:none; 
	text-transform:uppercase; 
	text-shadow: 1px 1px 1px #fff;
	font-size: 1.1em;
	/*margin: 0 0 0.6em 0;	*/
}
#nav.main a:hover{color: #666; text-shadow: 1px 1px 0px #fff; background-color: #F3E9E0; }

#nav.main a.current-tab{color: #fff; text-shadow: 1px 1px 1px #333; font-weight: bold; background-color: #937A60; letter-spacing: 1px;}

#nav li span {display: block; font-size: 10px; color: #666; text-shadow: none; line-height: 8px;}

/*------------------------------------*\
	TYPE
\*------------------------------------*/
/* @font-face kit by Fonts2u (http://www.fonts2u.com/oswald.schriftart) */
/* Font Oswald, SIL-licenced, author Vernon Adams */  
@font-face {font-family:"Oswald";src:url("Oswald.eot?") format("eot"),url("Oswald.woff") format("woff"),url("Oswald.ttf") format("truetype"),url("Oswald.svg#Oswald") format("svg");font-weight:normal;font-style:normal;}

/*--- HEADINGS ---*/
h1, h2, h3, h4, h5, h6 {
	font-family: 'Oswald', Arial, sans-serif;
	font-style: normal;
	font-weight: 500;
	color: #937A60;
	/*text-shadow: 1px 1px 0px #6D8901;*/
}

h1{/*font-size:2.5em;*/	margin-bottom:0.75em; line-height:1.5;}
h2{font-size:2.3em;	margin-bottom:1em; line-height:1.4em;}
h3{font-size:2em; margin-bottom:1em; line-height:1.3;}
/*h4{font-size:1.5em;	margin-bottom:0.8em; line-height:auto; text-shadow: none; font-weight:bold;}*/
h4{margin-bottom:0.8em; line-height:auto; text-shadow: none;}
h5{font-size:1.3em; margin-bottom:0.6em; text-shadow: none; line-height:auto;}
h6{font-size:1.2em; margin-bottom:0.6em; text-shadow: none; line-height:auto;}
/*------------------------------------*\
	CLASSES
\*------------------------------------*/
/*
Some not-too-pretty and insemantic classes to do odd jobs.
*/
.left	{ float:left!important; }
.right	{ float:right!important; }

.intro {padding: 10px 0; color: #999;}
.intro h2 {font-size: 3em; line-height: 1em; letter-spacing: -1px; text-transform:uppercase; padding-right:15px; margin: 0 0 20px 0;}
.intro p {font-family: 'Oswald', Arial, sans-serif; font-size: 1.9em; line-height: 1.2em; letter-spacing: -2px; padding-right: 15px;}

.quote {font-family: Arial, sans-serif; font-size: 1.4em; letter-spacing: -1px; font-style: italic; line-height: 1.3em; } /*a styled quote in addition to blockquote*/
.quote span {display: block; font-size: 0.7em; padding-top: 10px; font-style: normal;}

/*Colored boxes, green and grey*/
.green, .grey {-webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; zoom: 1; border-top: 1px solid #fff; border-bottom: 1px solid #fff; margin-bottom: 15px!important;}
.green {background-color: #F3E9E0;}
.grey {background-color: #EFEFEF;}
.green p, .grey p {padding:10px 20px 0;}
.green h2, .grey h2, .green h3, .grey h3, .green h4, .grey h4 {border-bottom: 3px solid #937A60 /*#fff*/; margin-bottom: 0; }
.green h2, .grey h2, .green h3, .grey h3, .green h4, .grey h4, .green h5, .grey h5, .green h6, .grey h6 {padding: 0px 20px; line-height: 1.7em;}

/*Additional whitespace top,bottom or both for any element. You don´t have to use hr or lots of <br />*/
.top {margin-top: 30px!important;}
.bottom {margin-bottom: 30px!important;}
.searchresult {padding: 0.5em 1em 0.5em 1em;  margin-bottom: 0 !important;}
.ticker {border: none!important; background: none!important; line-height: auto;}
.firstcomment { border: 3px solid #e7e7e7;}

/*------------------------------------*\
	LINKS and BUTTON
\*------------------------------------*/

a{ color: #937A60;text-decoration:underline;}

a.button {
	font-family: Arial, sans-serif;
	font-size: 1em;
	line-height: auto;
	background-color: #6D8901;/* fallback for browsers that don´t support gradients */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A5C100), to(#6D8901));/* Safari 4+, Chrome 1-9 */
	background-image: -moz-linear-gradient(top, #A5C100, #6D8901);/* Firefox 3.6+ */
	background-image: -o-linear-gradient(top, #A5C100, #6D8901);/* Opera 11.10+ */
	background-image: -webkit-linear-gradient(top, #A5C100, #6D8901);/* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background-image: -ms-linear-gradient(top, #A5C100, #6D8901);/* IE 10+ */
    border: 1px solid #799C01;
    border-radius: 5px;
    box-shadow: 0 1px 0 0 #9BCB76 inset;
    color: white;
    position: relative;
    text-shadow: 0 1px 0 #424F1C;
	text-decoration: none;
	margin: 15px 0;
	text-align: center;
	font-weight: bold;
	padding: 0.3em 0.7em;
	display: inline-block;}
	
a.button:hover {
	background-color: #A5C100;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6D8901), to(#A5C100));
	background-image: -moz-linear-gradient(#6D8901, #A5C100);
	background-image: -moz-linear-gradient(top, #6D8901, #A5C100);
	background-image: -o-linear-gradient(top, #6D8901, #A5C100);
	background-image: -webkit-linear-gradient(top, #6D8901, #A5C100);
	background-image: -ms-linear-gradient(top, #6D8901, #A5C100);}

/*------------------------------------*\
	LISTS
\*------------------------------------*/
ul.check {list-style:none;
	list-style-image:url(../img/check.png);
	list-style-position: inside;
	}
ul.check li { padding-top:0.5em; }
/*------------------------------------*\
	IMAGES
\*------------------------------------*/
img{margin-bottom: 10px;}
img.left	{ margin:0 20px 5px 0; }
img.right	{ margin:0 0 5px 20px; }
/* due to article of Chris Coyier 
http://css-tricks.com/441-resizeable-images-at-full-resolution/ */
img.expand { width: 24em; margin: 0; }

/*-------------------------------------------*\
	No borders and background for form-tables
\*-------------------------------------------*/
.form th, .form td {border:none; background:none; padding: 0.75em 0;}
.searchparam tbody tr:nth-of-type(odd), #form tbody tr:nth-of-type(odd){background:none;}
/*------------------------------------*\
	hr with image (leaf)
\*------------------------------------*/
hr{margin:1em 0; width: 100%; height: 26px; background: url(../img/hr.png) no-repeat top center; border:none;}

/******************************************************************************************************
TABS by Sohtanaka, CSS tweaked by SiGa
*******************************************************************************************************/
ul.tabs {
 margin: 0;
 padding: 0;
 list-style: none;
 height: 32px; /*--Set height of tabs--*/
 width: 100%;
 display: block;
}
ul.tabs li {
 float: left;
 margin: 0;
 padding: 0;
 height: 32px; 
 line-height: 32px; /*--Vertically aligns the text within the tab--*/
 border-bottom: 1px solid #fff;
 border-left: 1px solid #fff;
 overflow: hidden;
 position: relative;
 background: #CECECE;
}
ul.tabs li a {
 text-decoration: none;
 color: #666;
 display: block;
 font-size: 1.1em;
 padding: 0 15px;
 outline: none;
}
ul.tabs li a:hover {
 background: #E0E0E0;
}
html ul.tabs li.current-tab, html ul.tabs li.current-tab a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
 background: #EFEFEF; border: none; border-bottom: 1px solid #EFEFEF;
}
.tab_container {
 background: #EFEFEF;
 overflow: hidden;
 clear: both;
float: left; width: 100%; margin-bottom: 25px;
}
.tab_content {
 padding: 15px 18px 10px;
 font-size: inherit;
}
.tab_content p {margin-bottom: 1em;}

/*------------------------------------*\
	NARROW  Media queries
\*------------------------------------*/
/*
CSS for tablets and narrower devices
*/

@media (min-width: 721px) and (max-width: 960px)
{
.input_xlarge {width: 190px;}
#logo{margin:0 auto 1em; width: 100%;}
#nav.main{margin: 0 auto;float: none; padding: 0.4em 0 0 0}
.intro h2 {font-size: 2.5em; line-height: 1em; letter-spacing: -1px; text-transform:uppercase; padding-right:15px; margin: 0 0 20px 0;}
.intro p {font-family: 'Oswald',"Helvetica Neue", Arial, sans-serif;font-size: 1.6em; line-height: 1.2em; letter-spacing: -2px; padding-right: 20px;}	
.social {text-align: center; margin: 30px 0 15px 0;}
.wrapper, .wrapper-logo{width:auto!important; padding:15px!important;}
.chblistColors th, td {padding: 0;}
}

/*------------------------------------*\
	MOBILE  Media queries
\*------------------------------------*/
/*
CSS for mobile devices.
Linearise it!
*/


@media (max-width: 960px)
{
    .hidead {display:none;}
}

@media (max-width: 720px){    
.ixnewletter a {float:none; padding-left: 4em;}
.chblistColors th, td {padding: 0;}
.debug, .debug body{background:none!important;}
body{-webkit-text-size-adjust:none;}

.wrapper, .wrapper-top, .wrapper-logo{line-height: 1.5em; width:auto!important; padding:10px!important;}
.wrapper p {font-size:0.9em;}
.social {text-align: center; margin: 30px 0 15px 0;}

#nav.main a{display:inline-block;padding: 0.8em 1.2em;font-size: 0.9em;letter-spacing: 2px;}
#nav.main{padding: 0.4em 0 0 0; float: none; margin: 0 auto; background-image: none; font-size: 100%;}

#subheader {margin: 110px 0 20px;}

h1{font-size:1.9em;margin-bottom:0.75em;line-height:1.7;}
h2{font-size:1.7em;margin-bottom:1em;line-height:1.5;}
h3{font-size:1.5em;	margin-bottom:1em;line-height:1.3em;}
h4{font-size:1.1em;	margin-bottom:0.8em;line-height:auto;font-weight:bold;}
h5,h6{font-size:1em;margin-bottom:0.8em;line-height:auto;}

.intro p {font-size: 1.2em; line-height: 1.2em; letter-spacing: -1px;}
.intro h2 {font-size: 2em;}	

#footer p {margin: 0; padding: 0 10px;}
	
.grids{margin:0!important;width:auto!important;}
[class^="grid-"],
.grids [class^="grid-"]{
	width:auto!important;
	float:none!important;
	margin:0!important;
}

.imgtext {display: none; }
/*------------------------------------*\
	LOGO
\*------------------------------------*/
#logo{margin:0 auto 1em; width: 100%;}

/* =============================================
 
    MediaQuery-Reporter Styles
	Uncomment and use this to display the screen 
	sizes while developing your media queries!
	http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-basic-responsive-grid-plus-handy-css3-media-query-reporter/
 
================================================ */
 
/*body:after {
    content: "less than 320px";
    font-size: 300%;
    font-weight: bold;
    position: fixed;
    bottom: 60px;
    width: 100%;
    text-align: center;
    background-color: hsla(1,60%,40%,0.7);
    color: #fff;
}
@media only screen and (min-width: 320px) {
    body:after {
        content: "320 to 480px";
        background-color: hsla(90,60%,40%,0.7);
    }
}
@media only screen and (min-width: 480px) {
    body:after {
        content: "480 to 768px";
        background-color: hsla(180,60%,40%,0.7);
    }
}
@media only screen and (min-width: 768px) {
    body:after {
        content: "768 to 1024px";
        background-color: hsla(270,60%,40%,0.7);
    }
}
@media only screen and (min-width: 1024px) {
    body:after {
        content: "1024 and up";
        background-color: hsla(360,60%,40%,0.7);
    }
}
*/