/*CONTENTS*/
/*
RESET
SHARED
MAIN
AUTOCOMPLETE
CLEARFIX
ISLAND
MEDIA
LOGO
NAV
TYPE
IMAGES
TABLES
MESSAGES
MISC
CLASSES
DIAGNOSTICS
NARROW
MOBILE
PRINT
PAYPAL
*/
/*$RESET*/
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;
}
/*End Reset*/
/*SHARED*/
h1,h2,h3,h4,h5,h6,
ul,ol,dl,p,address,figure,pre,fieldset,table,hr,
.nav,.island,.media{
margin-bottom:24px;
margin-bottom:1.5rem;
}
figcaption,small{
font-size:12px;
font-size:0.75rem;
}
ul,ol,dd{
margin-left:3em;
}
small,code{
line-height:1;
}
pre,code,
input,textarea{
font:inherit;
}
/*End Shared*/
/*MAIN*/
html{
overflow-y:scroll; /* Force scrollbars 100% of the time */
font-size:100%; /* 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:#333;
}
body{
min-height:100%;
}
b{
color: #fff;
}
/*AUTOCOMPLETE*/
.ui-helper-hidden-accessible {
display: none;
}
.ui-widget-content {
padding: 0 0 2px 7px;
border: 1px solid grey;
background: #ffffff;
list-style: none;
color: #333333;
position: absolute;
cursor: default;
}
/*End Autocomplete*/
/*CLEARFIX*/
.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;
}
/*End Clearfix*/
/*ISLAND*/
.island{
padding:1.5em;
}
.island > :last-child{
margin-bottom:0;
}
/*End Island*/
/*MEDIA*/
.media{
display:block;
}
.media .img{
float:left;
margin-right:10px;
}
.media .body{
overflow:hidden;
margin-bottom:0;
}
/*End Media*/
/*LOGO*/
.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 */
}
.logo{
background:url(../path/to/logo.html);
}
.logo:hover{
/* Hover states */
background-position:0 -00px;
}
.logo img{
position:absolute;
left:-99999px;
}
/*End Logo*/
/*NAV*/
.nav{
list-style:none;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
}
/*End Nav*/
/*Location Links*/
.locations{
list-style:none;
}
.locations li{
padding:0 22px 0 22px;
display:inline;
font-weight:bold;
}
.locations a{
display:inline-block;
}
/*End Location Links*/
/*TYPE*/
/*--- HEADINGS ---*/
/*
h1,.alpha{
font-size:2em;
line-height:1.5;
}
h2,.beta{
font-size:1.5em;
line-height:1;
}
h3,.gamma{
font-size:1.25em;
line-height:1.2;
}
h4,.delta{
font-size:1.125em;
line-height:1.333;
}
h5,.epsilon{
font-weight:bold;
}
h5,.epsilon,
h6,.zeta{
font-size:1em;
line-height:1.5;
}
*/
/*--- FIGURES ---*/
figure img{
display:block;
margin-bottom:0;
}
/*--- LINKS ---*/
a:visited{
opacity:0.8; /* A bit basic, but it’s a bare minumum... */
}
a:hover{
text-decoration:none;
}
a:active,
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;
}
ul.numbered{
list-style:decimal outside;
}
dt{
font-weight:bold;
}
/*--- QUOTES ---*/
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;
}
.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 :( */
}
/*End Type*/
/*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;
}
/*End Images*/
/*TABLES*/
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:2px;
}
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;
}
th,td{
vertical-align:top;
padding:0.75em;
border:1px solid #ccc;
}
th{
font-weight:bold;
text-align:center
}
table [colspan]{
text-align:center;
}
table [rowspan]{
vertical-align:middle;
}
[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;
}
/*End Tables*/
/*MESSAGES*/
.message{
font-weight:normal;
display:block;
padding:10px 10px 10px 36px;
border:1px solid #ccc;
margin-left:0;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
-moz-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
}
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{
border-color:#fb5766;
background:url(../img/css/icons/error.png) 10px center no-repeat #fab;
}
.success{
border-color:#83ba77;
background:url(../img/css/icons/success.png) 10px center no-repeat #d1feba;
}
.info{
border-color:#85a5be;
background:url(../img/css/icons/info.png) 10px center no-repeat #c4dbec;
}
.warning{
border-color:#d8d566;
background:url(../img/css/icons/warning.png) 10px center no-repeat #fef8c4;
}
/*End Messages*/
/*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 » in their markup to signify progression/movement, that ain’t cool. Let’s insert that using content:""; */
content:" »";
}
.map{
width: 500px;
height: 400px;
}
/*End Misc*/
/*CLASSES*/
.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; }
/*End Classes*/
/*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;
}
/*End Debug*/
/*NARROW*/
@media (min-width: 721px) and (max-width: 960px){
}
/*End Narrow*/
/*MOBILE*/
@media (max-width: 720px){
/*MOBILE MAIN*/
html{
font-size:1.125em; /* Make text slightly larger for smaller devices to improve readability. */
}
body{
-webkit-text-size-adjust:none;
}
.wrapper{
width:auto;
}
.grids{
margin:0;
width:auto;
}
[class^="grid-"],
.grids [class^="grid-"]{
width:auto;
float:none;
margin:0;
}
/*End Mobile Main*/
/*LOGO*/
.logo{
margin-left:auto;
margin-right:auto;
}
/*End Mobile Logo*/
/*------------------------------------*\
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{
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;
}
}
/*Start Fluid-grid */
/*
Page container
*/
.wrapper{
max-width:1080px;
margin:0 auto;
padding:1.5em 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 ...
*/
.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; }
/*End Fluid-grid */
/*Start Eve-styles */
@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: #888;}
body{background:url(../img/bg.jpg) repeat;}
.social {text-align: right; position: relative; margin: 4px 0;}
.social img {margin-bottom: 0;}
#footer {border-radius: 10px; background-color: #00599A; 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: center;
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;}
#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: ##addcff; }
#nav.main a.active{color: #fff; text-shadow: 1px 1px 1px #333; font-weight: bold; background-color: #00599A; 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("Oswaldd41d.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: #00599A;
text-shadow: 1px 1px 0px #013e6b;
}
h1{font-size:2.5em; margin-bottom:0.75em; line-height:1.5em;}
h2{font-size:2.3em; margin-bottom:1em; line-height:1.4em;}
h3{font-size:1.3em; margin-bottom:1em; line-height:1.3em;}
h4{font-size:1.5em; margin-bottom:0.8em; line-height:auto; text-shadow: none; font-weight:bold;}
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;}
/*#paypal {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
*/
#paypal-container-NLREXGD33LBBN {
margin: auto;
width: 38%;
/* border: 1px solid red;*/
}
/*------------------------------------*\
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*/
.blue, .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;}
.blue {background-color: #ADDCFF;}
.grey {background-color: #EFEFEF;}
.blue p, .grey p {padding:10px 30px 0;}
.blue h2, .grey h2, .blue h3, .grey h3, .blue h4, .grey h4 {border-bottom: 5px solid #fff; margin-bottom: 0; }
.blue h2, .grey h2, .blue h3, .grey h3, .blue h4, .grey h4, .blue h5, .grey h5, .blue h6, .grey h6 {padding: 0px 30px; line-height: 1.7em;}
/*Additional whitespace top,bottom or both for any element. You don´t have to use hr or lots of
*/
.top {margin-top: 30px!important;}
.bottom {margin-bottom: 30px!important;}
.ticker {border: none!important; background: none!important; line-height: auto;}
/*------------------------------------*\
LINKS and BUTTON
\*------------------------------------*/
a{ color: #013E6B;text-decoration:none;}
a.button {
font-family: Arial, sans-serif;
font-size: 1em;
line-height: auto;
background-color: #013E6B;/* fallback for browsers that don´t support gradients */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00599A), to(#013E6B));/* Safari 4+, Chrome 1-9 */
background-image: -moz-linear-gradient(top, #00599A, #013E6B);/* Firefox 3.6+ */
background-image: -o-linear-gradient(top, #00599A, #013E6B);/* Opera 11.10+ */
background-image: -webkit-linear-gradient(top, #00599A, #013E6B);/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -ms-linear-gradient(top, #00599A, #013E6B);/* IE 10+ */
border: 1px solid #013E6B;
border-radius: 5px;
box-shadow: 0 1px 0 0 #1876bc inset;
color: white;
position: relative;
text-shadow: 0 1px 0 #02355a;
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: #00599A;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#013E6B), to(#00599A));
background-image: -moz-linear-gradient(#013E6B, #00599A);
background-image: -moz-linear-gradient(top, #013E6B, #00599A);
background-image: -o-linear-gradient(top, #013E6B, #00599A);
background-image: -webkit-linear-gradient(top, #013E6B, #00599A);
background-image: -ms-linear-gradient(top, #013E6B, #00599A);}
/*------------------------------------*\
LISTS
\*------------------------------------*/
ul.check {list-style:none;
list-style-image:url(../img/check.png);
list-style-position: inside;
}
/*------------------------------------*\
IMAGES
\*------------------------------------*/
img{margin-bottom: 10px;}
img.left { margin:0 20px 10px 0; }
img.right { margin:0 0 10px 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;}
.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.active, html ul.tabs li.active 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){
#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{width:auto!important; padding:15px!important;}
}
/*------------------------------------*\
MOBILE Media queries
\*------------------------------------*/
/*
CSS for mobile devices.
Linearise it!
*/
@media (max-width: 720px){
.debug, .debug body{background:none!important;}
body{-webkit-text-size-adjust:none;}
.wrapper{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;
}
/*------------------------------------*\
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);
}
}
*/
/*End Eve-styles */
/*--- END PRINT ---*/
/*--- PAYPAL ---*/