a:focus {
  outline: 0 !important; }

body, html {
  background: url(/brag/images/bg-ricepaper-low.jpg) 0 0 repeat scroll #d0bba8;
  color: #464646;
  font-family: Verdana, Helvetica, sans-serif; }

h1, h2 {
  color: #900;
  font-family: Helvetica, Verdana, sans-serif;
  font-size: 2em;
  line-height: 1.15em; }

ul, dl, ol {
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 1em; }


p {
  font-size: 16px; }

header {
  height: 61px;
  background-color: #990000;
  border-bottom: 1px solid #eeddcc;
  color: #FFF; }

header a {
  color: #FFF;
  text-decoration: underline; }

header a:hover {
  color: #FFF;
  text-decoration: none; }

.exclaim {
  background: url(/brag/images/graphix.png) no-repeat scroll -232px 0 rgba(0, 0, 0, 0);
  height: 121px;
  margin: 0 auto;
  padding-bottom: 1em;
  width: 46px; }

#cycleContainer {
  margin-left: 50px !important;
  margin-top: 10px !important;
  padding: 0 !important;
  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  transition: all 0.15s linear; }

.cycleBlock {
  background-color:transparent !important;
  margin: 0 auto !important; }
  
.cycleBlock > div {
  margin: 0 auto !important; }

.cycleBlock h1 {
  text-shadow: 1px 1px 0 #EEDDCC;
  font-size: 2em;
  line-height: 1.15em;
  font-weight: normal; }

.cycleBlock p {
  line-height: 1.35em;
  padding: 0.5em 0;
  font-size: 16px; }

.cycleBlock a {
  color: #C05502;
  text-decoration: underline; }
.cycleBlock a:visited {
  color: #936241; }
.cycleBlock a:focus {
  color: #D17702;
  outline: thin dotted; }
.cycleBlock a:hover, .cycleBlock a:active {
  color: #FF9000;
  outline: 0 none; }

#btnNext {
  width: 41px;
  height: 101px;
  background: url(/brag/images/graphix.png) no-repeat scroll -42px 0 transparent;
  position: absolute;
  right: 10px;
  margin-top: 100px;
  z-index: 50;
  cursor: pointer; }

#btnPrev {
  width: 41px;
  height: 101px;
  background: url(/brag/images/graphix.png) no-repeat scroll 0 0 transparent;
  position: absolute;
  left: 10px;
  margin-top: 100px;
  z-index: 50;
  cursor: pointer; }

#home p {
  font-size: 1.15em;
  line-height: 1.35em;
  padding: 0.5em 0; }

#navButtons {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px; }

#btnStartOver {
  position: relative;
  top: -19px; }

#thumbnails {
  text-align: center; }

#thumbnails a {
  width: 220px;
  height: 220px;
  margin: -1px -2px 0 -3px;
  display: inline-block; }

#social {
  padding-bottom: 15px; }

.social {
  min-width: 216px;
  padding: 15px 20px 70px 0;
  width: auto; }

.social input {
  background: url(/brag/images/sprites-social.png) -195px center no-repeat scroll white;
  border: 0;
  border-radius: 4px;
  box-shadow: -1px -1px 0px #bbb;
  font-size: 0.85em;
  margin: 9px 0;
  padding: 0.35em 0.35em 0.35em 2.25em;
  width: 208px; }

.social input:focus {
  background: url(/brag/images/sprites-social.png) no-repeat scroll -195px center #FFFFFF !important; }

a.fb, a.tw, a.email, a.link {
  background: url(/brag/images/sprites-social.png) 0 0 no-repeat scroll transparent;
  height: 28px;
  margin-right: 6px;
  vertical-align: top; }

a.fb {
  width: 83px; }

a:hover.fb, a:focus.fb {
  background-position: 0 -29px; }

a.tw {
  background-position: -84px 0;
  width: 76px; }

a:hover.tw, a:focus.tw {
  background-position: -84px -29px; }

a.email {
  background-position: -161px 0;
  width: 28px; }

a:hover.email, a:focus.email {
  background-position: -161px -29px; }

a.link {
  background-position: -190px 0;
  width: 28px; }

a:hover.link, a:focus.link {
  background-position: -161px -29px; }

footer {
  padding: 26px 10px 20px;
  text-align: center; }

footer p {
  line-height: 1.35em;
  padding: 0.5em 0; }

footer a {
  color: #C05502;
  text-decoration: underline; }
footer a:visited {
  color: #936241; }
footer a:focus {
  color: #D17702;
  outline: thin dotted; }
footer a:hover, footer a:active {
  color: #FF9000;
  outline: 0 none; }

@media screen and (max-width: 1000px) {
  /* <= 1000px (max-width+padding of outermost section) */
  .swipe-wrap div div {
    padding: 0 60px; } }

@media screen and (max-width: 767px) {
  /* <= 767px */
  /*.cycleBlock{margin-left:15px !important;}*/
  #cycleContainer {
    margin-left: 50px !important;
    margin-top: 20px !important; }
  .column, .columns {
    padding-top: 0 !important;
    padding-bottom: 0 !important; }
  header > div > div {
    padding-top: 0 !important;
    margin-top: 11px !important; }
  div.social {
    padding: 0 20px 20px 0;
    width: 100%; }
  div#social {
    text-align: left; }
  .swipe-wrap div#home div {
    padding: 0 50px; }
  .swipe-wrap div h1 {
    clear: left; }
  .swipe-wrap div#home p, .swipe-wrap div#home noscript {
    text-align: left; }
  .swipe-wrap div div {
    margin: 24px 0 3em;
    padding: 0 50px; }
  .swipe-wrap div b {
    width: 100%; }
  div#brags nav ul {
    top: 12em; }
  .swipe-wrap div img {
    width: 80%;
    display: block;
    margin: 0 auto 10px;
    float: none; }
  .social input {
    display: none; }
  a.email {
    margin-right: 0 !important; }
  nav a.more {
    left: 0; }
  a.begin {
    left: 0;
    margin-bottom: 1em;
    top: -2em; }
  #thumbs b.img {
    width: 50%; } }

/* =============================================================================
   Non-semantic helper classes
   ========================================================================== */
noscript, .error, .error a, .error a:visited {
  color: red; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible {
  visibility: hidden; }

.offscreen {
  position: absolute;
  left: -9999px; }

.phark {
  display: inline-block;
  text-indent: -9999px;
  background-color: transparent;
  background-repeat: no-repeat;
  overflow: hidden; }

/* http://en.wikipedia.org/wiki/Fahrner_Image_Replacement */
.hide {
  display: none; }

.floatleft {
  float: left; }

img.floatleft, .floatleft img {
  float: left;
  padding: 0 0.5em 0.5em 0; }

.floatright {
  float: right; }

img.floatright, .floatright img {
  float: right;
  padding: 0 0 0.5em 0.5em; }

.clear {
  clear: both; }

.clearleft {
  clear: left; }

.clearright {
  clear: right; }

/* Nifty buttons! */
a.btn, a.btn:visited, a.btn:hover, button, input[type=submit] {
  background-color: #d17702;
  border: 0 none;
  box-shadow: 3px 3px 0 #ccc;
  color: #fff;
  display: inline-block;
  line-height: 1em;
  margin-bottom: 1em;
  padding: 0.3em 0.5em 0.5em;
  text-decoration: none; }

a.btn.large {
  font-size: 1.25em; }

a.btn:hover, a.btn:focus, button:hover, button:focus, input[type=submit]:hover, input[type=submit]:focus {
  background-color: #ff9000;
  outline: none; }