/***************************

ANONANON CSS FRAMEWORK 1.0.1
http://anonanon.org

 * Copyright 2011 Matt Lambert & Cardeo.
 * Feel free to use, edit, abuse this framework anyway you see fit.
 * Credit appreciated but not required
 * Author website: http://mattlambert.org

***************************/

/***************************
CONTENTS

00. RESET
00. ALL
01. LAYOUT
02. TYPOGRAPHY
03. LINKS
04. LISTS
05. TABLES
06. FORMS
07. SPECIAL CLASSES
08. BUTTONS
09. MEDIA QUERIES - RESPONSIVE WEB DESIGN, MOBILE
10. TABS
11. ALERTS
12. TOGGLE

***************************/

/***************************
00. RESET
***************************/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend
{
 margin:0;
 padding:0;
 border:0;
 font-weight:inherit;
 font-style:inherit;
 font-size:100%;
 font-family:inherit;
 vertical-align:baseline;
}

body { line-height:1.5; }

/*table {
 border-collapse:separate;
 border-spacing:0;
}*/

/*caption, th, td {
 /*text-align:left;*/
 /*font-weight:normal;
}*/

table, td, th { vertical-align:middle; }
blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote, q { quotes:"" ""; }
a img { border:none; }

/***************************
00. ALL
***************************/

body {
 font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
 font-size: 13px;
 font-style: normal;
 font-variant: normal;
 font-weight: normal;
 line-height: 18px;
 color: #333; 
}

img {
 border: 0;
}

.hidden {
 display: none;
}

.clear {
 clear: both;
 display: block;
 font-size: 0;
 height: 0;
 line-height: 0;
 width:100%;
}

.clearfix { 
 display: block;
}

/***************************
01. LAYOUT
***************************/

/*** GRID STYLES ***/

.container {
 clear: both;
 max-width: 100%;
 margin: 0 auto;
 /*overflow: auto;*/
 width: 100%;
}

/*** USE A NEW WRAPPER FOR EVERY DIV ROW ***/
.gridWrapper {
 float:left;
 margin-bottom:auto;
 position:relative;
 width: 100%;
}

.gridOne, .gridTwo, .gridThree, .gridFour, .gridFive, .gridSix, .gridSeven, .gridEight, .gridNine{
 float: left;
 margin-right: 2%;
 position: relative;
}
.gridThirtyThree {
 float: left;
 margin-right: 0%;
 position: relative;
}
.gridOne {width: 8%;}
.gridTwo {width: 18%;}
.gridThree {width: 28%;}
.gridFour {width: 38%;}
.gridFive {width: 48%;}
.gridSix {width: 58%;}
.gridSeven {width: 68%;}
.gridEight {width: 78%;}
.gridNine {width: 88%;}
.gridTen {width: 100%;}
.gridThirtyThree{width: 33%;}
/*** USE THESE AT THE END OF A ROW ***/
.gridOneLast {width: 10%;}
.gridTwoLast {width: 20%;}
.gridThreeLast {width: 30%;}
.gridFourLast {width: 40%;}
.gridFiveLast {width: 50%;}
.gridSixLast {width: 60%;}
.gridSevenLast {width: 70%;}
.gridEightLast {width: 80%;}
.gridNineLast {width: 90%;}

.gridOneLast, .gridTwoLast, .gridThreeLast, .gridFourLast, .gridFiveLast, .gridSixLast, .gridSevenLast, .gridEightLast, .gridNineLast {
 float: left; 
 margin-right: 0;
 position:relative;
    top: 0px;
    left: 5px;
}

/*** GRID BUMPS ***/

.bumpOne {margin-left: 10%;}
.bumpTwo {margin-left: 20%;}
.bumpThree {margin-left: 30%;}
.bumpFour {margin-left: 40%;}
.bumpFive {margin-left: 50%;}
.bumpSix {margin-left: 60%;}
.bumpSeven {margin-left: 70%;}
.bumpEight {margin-left: 82%;}
.bumpNine {margin-left: 90%;}

/*** GRID CUTS ***/

.cutOne {margin-right: 10%;}
.cutTwo {margin-right: 20%;}
.cutThree {margin-right: 30%;}
.cutFour {margin-right: 40%;}
.cutFive {margin-right: 50%;}
.cutSix {margin-right: 60%;}
.cutSeven {margin-right: 70%;}
.cutEight {margin-right: 80%;}
.cutNine {margin-right: 90%;}

.gridOne p:last-child, .gridTwo p:last-child, .gridThree p:last-child, .gridFour p:last-child, .gridFive p:last-child, .gridSix p:last-child, .gridSeven p:last-child, .gridEight p:last-child, .gridNine p:last-child, gridTen p:last-child,
.gridOneLast p:last-child, .gridTwoLast p:last-child, .gridThreeLast p:last-child, .gridFourLast p:last-child, .gridFiveLast p:last-child, .gridSixLast p:last-child, .gridSevenLast p:last-child, .gridEightLast p:last-child, .gridNineLast p:last-child, .gridTen p:last-child {
 margin: 0;
}

#footer {
 clear: both;
 padding-bottom: 15px;
 padding-top: 15px;
}

/***************************
02. TYPOGRAPHY
***************************/

h1 {
/*font-size: 36px;*/
 line-height: 36px;
 margin-bottom: 18px;
}


h2 {
 font-size: 21px;
 line-height: 18px;
 margin-bottom: 18px;
}

h3 {
 font-size: 18px;
 line-height: 18px;
 margin-bottom: 18px;
}

h4 {
 font-size: 16px;
 line-height: 18px;
}

h5 {
 font-size: 14px;
 line-height: 18px;
}

h6 {
 font-size: 12px;
 line-height: 18px;
}

p, ul, ol, dl, dd, address {
 margin-bottom: 18px;
}

strong {
 font-weight: bold;
}

blockquote {
 background: #ebebeb;
 color: #666;
 font-family: georgia, serif;
 font-size: 18px;
 font-style:italic;
 line-height: 24px;
 margin-bottom: 18px; 
 padding: 18px;
}

blockquote, q {
 quotes: none;
}

address {
 font-style: italic;
}

abbr, acronym, dfn {
 cursor: help;
 border-bottom: 1px dotted #666;
}

em, dfn, cite {
 font-style: italic;
}

sup {
 font-size: 9px;
 vertical-align: top;
}

small {
 font-size: 9px;
}

del {
 text-decoration: line-through;
}

ins {
 text-decoration: underline;
}

var, kbd, samp, code, pre {
 font-size: 12px;
 font-family: monospace; 
}

pre, code { 
 color: #666; 
 clear: both;
 overflow: auto; 
 padding: 0px 18px;
 white-space: pre;
}

.divider {
 border-top: 5px solid #ebebeb;
 clear: both;
 display: block;
 margin: 0px 0px 31px 0px;
 padding: 0;
 width: 100%;
}

.quiet {
 font-family: georgia, serif;
 color: #666;
}

/***************************
03. LINKS
***************************/

a, a:link, a:visited {
 color: #000;
 text-decoration: none;
}

a:hover {
 color: red;
 text-decoration: none;
}

a.selected {
 background: #cff;
 color: #333;
 padding: 3px 0px;
 text-decoration: none;
}

a img {
 float: left;
}


/***************************
04. LISTS
***************************/

ul, ol, dl {
 margin: 0px 0px 18px 18px;
 padding: 0;
}

li {
 margin: 0px 0px 0px 18px;
 line-height: 18px;
 padding: 0;
}

ul.inline,
ul.noBullet {
 list-style: none;
 margin: 0px 0px 18px 0px;
 padding: 0;
}

ul.inline li {
 display: inline;
 float: left;
 margin-left: 0;
 margin-right: 18px;
}

ul.inline li.right {
 float: right;
 margin-right: 0;
 margin-left: 18px;
}

ul.noBullet li {
 line-height: 18px;
 margin: 0;
 padding: 0;
}

/***************************
05. TABLES
***************************/

table {
 clear: both;
 margin-bottom: 18px;
 /*width: 100%;*/
}

tr {
 /*height: 36px;*/
}

th { 
 background: #ccc;
 font-weight: bold;
 padding: 5px;
 vertical-align: top;
}

td {
 padding: 5px;
 vertical-align: top;
}

td.center, th.center {
 text-align: center;
}

td.right, th.right {
 text-align: right;
}

.alt { 
 background-color: #ebebeb;
}

/***************************
06. FORMS
***************************/

form {
 overflow:visible;
 width:100%;
}
 
fieldset {
 border: 0;
}

fieldset.last {
 margin-bottom: 0;
}

label {
 display: block;
 font-weight: bold;
 position: relative;
 line-height: 36px;
 margin: 0;
 padding: 0;
 width: 100%;
}

legend {
 color: #666;
 font-family: georgia, serif;
 font-size: 18px;
 font-weight: bold;
 font-style: italic;
 line-height: 36px;
 margin: 0;
 padding: 0;
}

input {
 font-size: 11px;
}

input[type=text],
input[type=password],
input[type=select],
input[type=search] {
 border: 1px solid #ccc;
 border-collapse: collapse;
 height: 16px;
 margin: 0;
 padding: 0;
 width: 80%;
}

input[type=radio] {
 margin: 0px 6px 0px 0px;
}

input[type=checkbox] {
 margin: 0 6px 3px 1px;
}

input[type=file] { 
 margin: 0px 6px 0px 0px;
}

input[type=submit],
input[type=reset],
input[type=button] {
 margin-bottom: 18px;
}

select {
 margin-bottom: 16px;
 position: relative;
 top: -4px;
}

textarea {
 border: 1px solid #ccc;
 border-collapse: collapse;
 clear: left;
 display: block;
 height: 83px;
 line-height: 18px;
 overflow: auto;
 margin: 0px 0px 16px 0px;
 width: 98%;
}

input:focus, textarea:focus {
 background: #ebebeb;
}

span.required {
 color: #666;
 font-family: georgia, serif;
 font-size: 10px;
 font-style: italic;
 height: 18px;
 line-height: 18px;
 padding-left: 9px;
 position: relative;
 top: -2px;
}

/***************************
07. SPECIAL CLASSES
***************************/

.hidden {
 display: none;
}

.alignLeft { 
 float: left; 
}

.alignRight { 
 float: right; 
}

.alignCenter {
 margin-left: auto;
 margin-right: auto;
 display: block;
 clear: both;
}

img.alignLeft {
 display: block;
 float: left;
 margin: 0px 18px 18px 0px;
}

img.alignRight { 
 display: block;
 float: right;
 margin: 0px 0px 18px 18px;
}

img.alignCenter {
 display: block;
 clear: both;
 margin-left: auto;
 margin-right: auto;
} 

/***************************
08. BUTTONS
***************************/

a.button {
 cursor: pointer;
 display: inline-block;
 font-weight: bold;
 outline: none;
 padding: 8px 40px;
 text-align: center;
 text-decoration: none;

 text-shadow: 0 1px 1px rgba(0,0,0,0.3);
 border-radius: 5px;
 -moz-border-radius: 5px;
 -o-border-radius: 5px;
 box-shadow: 0 1px 2px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
 -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

a.button:hover {
 text-decoration: none;
}

a.button:active {
 position: relative;
 top: 1px;
}

a.button { 
 text-decoration: none;
}

.orange {
 color: #fef4e9!important;
 border: solid 1px #da7c0c;
 background: #f78d1d;
 background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
 background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
}

.orange:hover {
 background: #f47c20;
 background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
 background: -moz-linear-gradient(top,  #f88e11,  #f06015);
}

.orange:active {
 background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
 background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
}

.red {
 color: #fef4e9!important;
 border: 1px solid #c33;
 background: #c00;
 background: -webkit-gradient(linear, left top, left bottom, from(#ff6666), to(#cc0000));
 background: -moz-linear-gradient(top,  #ff6666,  #cc0000);
}

.red:hover {
 background: #900;
 background: -webkit-gradient(linear, left top, left bottom, from(#ff3333), to(#b11519));
 background: -moz-linear-gradient(top,  #ff3333,  #b11519);
}

.red:active {
 background: -webkit-gradient(linear, left top, left bottom, from(#cc3333), to(#ff6666));
 background: -moz-linear-gradient(top,  #cc3333,  #ff6666);
}

.blue { 
 color: #fef4e9!important;
 border: 1px solid #39c;
 background: #09c;
 background: -webkit-gradient(linear, left top, left bottom, from(#66ccff), to(#0099cc));
 background: -moz-linear-gradient(top,  #66ccff,  #0099cc);
}

.blue:hover {
 background: #069;
 background: -webkit-gradient(linear, left top, left bottom, from(#33ccff), to(#0c8eba));
 background: -moz-linear-gradient(top,  #33ccff,  #0c8eba);
}

.blue:active {
 background: -webkit-gradient(linear, left top, left bottom, from(#3399cc), to(#66ccff));
 background: -moz-linear-gradient(top,  #3399cc,  #66ccff);
}

.green {
 color: #fef4e9!important;
 border: 1px solid #6c3;
 background: #3c0;
 background: -webkit-gradient(linear, left top, left bottom, from(#99ff66), to(#33cc00));
 background: -moz-linear-gradient(top,  #99ff66,  #33cc00);
}

.green:hover {
 background: #390;
 background: -webkit-gradient(linear, left top, left bottom, from(#66ff33), to(#339900));
 background: -moz-linear-gradient(top,  #66ff33,  #339900);
}

.green:active {
 background: -webkit-gradient(linear, left top, left bottom, from(#66cc33), to(#99ff66));
 background: -moz-linear-gradient(top,  #66cc33,  #99ff66);
}

/***************************
09. MEDIA QUERIES - RESPONSIVE WEB DESIGN, MOBILE
***************************/

@media handheld, only screen and (max-width: 767px) {
  .container {
   clear: both;
   float: none;
   margin-left: 1%;
   margin-right: 1%;
   width: auto;
   width: -moz-available;
  }
  .gridOne, .gridTwo, .gridThree, .gridFour, .gridFive, .gridSix, .gridSeven, .gridEight, .gridNine, .gridTen,
  .gridOneLast, .gridTwoLast, .gridThreeLast, .gridFourLast, .gridFiveLast, .gridSixLast, .gridSevenLast, .gridEightLast, .gridNineLast,.gridThirtyThree {
   clear: both;
   float: left;
   margin: 0px 0px 5px 0px;
   padding: 0;
   width: 100%;
   width: -moz-available;
  }
  .gridWrapper {
   margin: 0;
  }
  blockquote {
   background: #ebebeb;
   color: #666;
   font-family: georgia, serif;
   font-size: 12px;
   font-style:italic;
   line-height: 18px;
   margin-bottom: 18px; 
   padding: 18px;
  }
}

/***************************
10. TABS
***************************/

ul.tabNavigation {
 display: block;
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.tabNavigation li {
 float: left;
 position: relative;
 margin-right: 3px;
}

ul.tabNavigation li a { 
 display: block;
 padding: 0px 20px;
 background-color: #ccc;
 color: #666;
 text-decoration: none;
 height: 18px;
 line-height: 18px;
}

ul.tabNavigation li a.selected,
ul.tabNavigation li a:hover {
 background: #ebebeb;
}

ul.tabNavigation li a:focus {
 outline: 0;
}

.tabs div {
 background: #ebebeb;
 clear: both;
 padding: 18px;
 width: auto;
}

.tabs div p:last-child {
 margin: 0;
}

.tabs li {
 margin: 0;
}

/***************************
11. ALERTS
***************************/

.error, .notice, .success, .box {
 font-family: georgia, serif;
 height: 16px;
 padding: 18px 0px;
 text-align: center;
 font-style: italic;
 width: 100%;
}

.error {
 background: #fcc;
 border-top: 1px solid #f99;
 border-bottom: 1px solid #f99;
 border-collapse: collapse;
 color: #c66;
}

.notice {
 background: #ffc;
 border-top: 1px solid #ff6;
 border-bottom: 1px solid #ff6;
 border-collapse: collapse;
 color: #993;
}

.success {
 background: #cfc;
 border-top: 1px solid #9f9;
 border-bottom: 1px solid #9f9;
 border-collapse: collapse;
 color: #363;
}

.box {
 background: #ebebeb;
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 border-collapse: collapse;
 color: #666;
}

.error span, .notice span, .success span, .box span {
 font-size: 18px;
}

/***************************
12. TOGGLE
***************************/

.trigger a {
 background: #ebebeb;
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 border-collapse: collapse;
 color: #666;
 font-family: georgia, serif;
 font-style: italic;
 padding: 9px 20px;
 text-decoration: none;
}

.trigger a:hover {
 background: #999;
 color: #fff;
}

h3.trigger { 
 font-size: 12px;
}

.toggle_container {
 margin-top: 18px;
}