/* -------------------------------------------------------------------------------------------------

It's *strongly* suggested that you don't modify this file.  Instead, load a new stylesheet after
this one in your layouts (eg formtastic_changes.css) and override the styles to suit your needs.
This will allow you to update formtastic.css with new releases without clobbering your own changes.

This stylesheet forms part of the Formtastic Rails Plugin
(c) 2008 Justin French

--------------------------------------------------------------------------------------------------*/


/* NORMALIZE AND RESET - obviously inspired by Yahoo's reset.css, but scoped to just form.formtastic
--------------------------------------------------------------------------------------------------*/
form.formtastic, form.formtastic ul, form.formtastic ol, form.formtastic li, form.formtastic fieldset, form.formtastic legend, form.formtastic input, form.formtastic textarea, form.formtastic select, form.formtastic p { margin:0; padding:0; }
form.formtastic fieldset { border:0; }
form.formtastic em, form.formtastic strong { font-style:normal; font-weight:normal; }
form.formtastic ol, form.formtastic ul { list-style:none; }
form.formtastic abbr, form.formtastic acronym { border:0; font-variant:normal; }
form.formtastic input, form.formtastic textarea, form.formtastic select { font-family:inherit; font-size:inherit; font-weight:inherit; }
form.formtastic input, form.formtastic textarea, form.formtastic select { font-size:100%; }
form.formtastic legend { color:#000; }


/* FIELDSETS & LISTS
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset { }
form.formtastic fieldset.inputs { }
form.formtastic fieldset.buttons { padding-left:25%; }
form.formtastic fieldset ol { }
form.formtastic fieldset.buttons li { float:left; padding-right:0.5em; }

/* clearfixing the fieldsets */
form.formtastic fieldset { display: inline-block; }
form.formtastic fieldset:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
html[xmlns] form.formtastic fieldset { display: block; }
* html form.formtastic fieldset { height: 1%; }


/* INPUT LIs
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li { margin-bottom:1.5em; }

/* clearfixing the li's */
form.formtastic fieldset ol li { display: inline-block; }
form.formtastic fieldset ol li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
html[xmlns] form.formtastic fieldset ol li { display: block; }
* html form.formtastic fieldset ol li { height: 1%; }

form.formtastic fieldset ol li.required { }
form.formtastic fieldset ol li.optional { }
form.formtastic fieldset ol li.error { }
  

/* LABELS
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li label { display:block; width:25%; float:left; padding-top:.2em; }
form.formtastic fieldset ol li li label { line-height:100%; padding-top:0; }
form.formtastic fieldset ol li li label input { line-height:100%; vertical-align:middle; margin-top:-0.1em;}


/* NESTED FIELDSETS AND LEGENDS (radio, check boxes and date/time inputs use nested fieldsets)
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li fieldset { position:relative; }
form.formtastic fieldset ol li fieldset legend { position:absolute; width:25%; padding-top:0.1em; }
form.formtastic fieldset ol li fieldset legend span { position:absolute; }
form.formtastic fieldset ol li fieldset legend.label label { position:absolute; }
form.formtastic fieldset ol li fieldset ol { float:left; width:74%; margin:0; padding:0 0 0 25%; }
form.formtastic fieldset ol li fieldset ol li { padding:0; border:0; }


/* INLINE HINTS
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li p.inline-hints { color:#666; margin:0.5em 0 0 25%; }


/* INLINE ERRORS
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li p.inline-errors { color:#cc0000; margin:0.5em 0 0 25%; }
form.formtastic fieldset ol li ul.errors { color:#cc0000; margin:0.5em 0 0 25%; list-style:square; }
form.formtastic fieldset ol li ul.errors li { padding:0; border:none; display:list-item; }


/* STRING & NUMERIC OVERRIDES
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li.string input { width:74%; }
form.formtastic fieldset ol li.password input { width:74%; }
form.formtastic fieldset ol li.numeric input { width:74%; }


/* TEXTAREA OVERRIDES
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li.text textarea { width:74%; }


/* HIDDEN OVERRIDES
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li.hidden { display:none; }


/* BOOLEAN OVERRIDES
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li.boolean label { padding-left:25%; width:auto; }
form.formtastic fieldset ol li.boolean label input { margin:0 0.5em 0 0.2em; }


/* RADIO OVERRIDES
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li.radio { }
form.formtastic fieldset ol li.radio fieldset ol { margin-bottom:-0.6em; }
form.formtastic fieldset ol li.radio fieldset ol li { margin:0.1em 0 0.5em 0; }
form.formtastic fieldset ol li.radio fieldset ol li label { float:none; width:100%; }
form.formtastic fieldset ol li.radio fieldset ol li label input { margin-right:0.2em; }


/* CHECK BOXES (COLLECTION) OVERRIDES
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li.check_boxes { }
form.formtastic fieldset ol li.check_boxes fieldset ol { margin-bottom:-0.6em; }
form.formtastic fieldset ol li.check_boxes fieldset ol li { margin:0.1em 0 0.5em 0; }
form.formtastic fieldset ol li.check_boxes fieldset ol li label { float:none; width:100%; }
form.formtastic fieldset ol li.check_boxes fieldset ol li label input { margin-right:0.2em; }



/* DATE & TIME OVERRIDES
--------------------------------------------------------------------------------------------------*/
form.formtastic fieldset ol li.date fieldset ol li,
form.formtastic fieldset ol li.time fieldset ol li,
form.formtastic fieldset ol li.datetime fieldset ol li { float:left; width:auto; margin:0 .3em 0 0; }

form.formtastic fieldset ol li.date fieldset ol li label,
form.formtastic fieldset ol li.time fieldset ol li label,
form.formtastic fieldset ol li.datetime fieldset ol li label { display:none; }

form.formtastic fieldset ol li.date fieldset ol li label input, 
form.formtastic fieldset ol li.time fieldset ol li label input, 
form.formtastic fieldset ol li.datetime fieldset ol li label input { display:inline; margin:0; padding:0;  }


/* -------------------------------------------------------------------------------------------------

Load this stylesheet after formtastic.css in your layouts to override the CSS to suit your needs.
This will allow you to update formtastic.css with new releases without clobbering your own changes.

For example, to make the inline hint paragraphs a little darker in color than the standard #666:

form.formtastic fieldset ol li p.inline-hints { color:#333; }

--------------------------------------------------------------------------------------------------*/


/* @group Browser Reset 

html, body {
  font-size: 12.5px; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-family: helvetica, verdana, arial, sans-serif;
  font-style: inherit;
  font-weight: inherit;
  line-height: 1.25em;
  text-align: left;
  vertical-align: baseline; }

html {
  overflow-y: scroll; }

a img, :link img, :visited img {
  border: 0; }

strong {
  font-weight: bold; }

em {
  font-style: italic; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

ul {
  list-style: none; }

  /* @end */



#rails-env { position: fixed; left: 1em; font-weight: bold; padding: .2em 0.9em; text-transform: uppercase; opacity: 0.7; display: none }
#rails-env.staging { color: #000; background: #ffff00; border: 2px solid #cccc20; border-top: none; display: block }
#rails-env.development { color: #fff; background: #ff0000; border: 2px solid #cc2020; border-top: none; display: block }

/* CSS Document */

body { background:url(/images/pagebg.jpg); margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height:18px; }

#pagebg { width:100%; min-height:450px; background:url(/images/pagebg_top.jpg) repeat-x; }
#containerbg { width:980px; min-height:450px; background:url(/images/contentbg.jpg); margin-left:auto; margin-right:auto; }
.containershadow { float:left; width:10px; height:450px; background:url(/images/contentshadow.jpg); }
.clear { clear:both; }

#container { float:left; width:960px; }

/*** HEADER ***/

#header { width:960px; height:30px; background:#000000; }

/*** SIDE POD ***/

#sidepod { float:left; width:290px; min-height:450px; }
#sidepod #logo { width:290px; height:160px; background:url(/images/logo.jpg) no-repeat; }
#sidepod #nav { background:#793221 url(/images/navbg.jpg) no-repeat; padding:15px 0; }
#sidepod #nav ul { list-style:none; margin:0px; padding:0px; }
#sidepod #nav li { text-transform:uppercase; font-size:14px; }
#sidepod #nav li a { display:block; color:#efdcc1; text-decoration:none; line-height:22px; padding:0 0 0 55px; background:url(/images/navitembg.gif) no-repeat; background-position:25px 6px; }
#sidepod #nav li a:hover { background:#55281e url(/images/navitembg.gif) no-repeat; background-position:25px 6px; }

#sidepod .lifestraw { background:#7e7b48 url(/images/lifestrawbg.gif) no-repeat; width:245px; color:#e3dca4; padding:20px 20px 5px 25px; }
#sidepod .adopt-a-school { background:#71824e url(/images/adoptbg.gif) no-repeat; width:245px; color:#d8e59b; padding:20px 20px 5px 25px; }
#sidepod .friday-flik { background:#3e7788 url(/images/fridayflikbg.gif) no-repeat; width:245px; color:#bbdbea; padding:20px 20px 5px 25px; }
#sidepod .enduro-africa { background:#7e6c48 url(/images/endurobg.gif) no-repeat; width:245px; color:#eecc93; padding:20px 20px 5px 25px; }

#sidepod .lifestraw h1,
#sidepod .adopt-a-school h1,
#sidepod .friday-flik h1,
#sidepod .enduro-africa h1 { margin:0px; font-weight:normal; text-transform:uppercase; font-size:20px; }
#sidepod .lifestraw a,
#sidepod .adopt-a-school a,
#sidepod .friday-flik a,
#sidepod .enduro-africa a { color:#FFFFFF; }

/*** MAIN POD ***/

#mainpod { float:left; width:670px; min-height:450px; }
#mainpod .intro { background:#544430 url(/images/introbg.jpg) repeat-x; width:610px; color:#f8f4eb; padding:30px 30px 15px 30px; }
#mainpod .intro h1 { margin:0px; font-weight:normal; text-transform:uppercase; font-size:24px; }
#mainpod .intro a { color:#FFFFFF; }

#mainpod #content { width:610px; padding:15px 30px; color:#685f51; }
#mainpod #content h1 { color:#694e2c; font-weight:normal; text-transform:uppercase; font-size:24px; }
#mainpod #content h1 a { color:#694e2c; text-decoration:none; }
#mainpod #content h2 { color:#c95e17; font-weight:normal; text-transform:uppercase; font-size:18px; }
#mainpod #content h2 a { color:#c95e17; text-decoration:none; }
#mainpod #content h3 { color:#a5521b; font-weight:normal; text-transform:uppercase; font-size:14px; }
#mainpod #content h3 a { color:#a5521b; text-decoration:none; }
#mainpod #content h4 { color:#a66439; font-weight:normal; text-transform:uppercase; font-size:12px; }
#mainpod #content h4 a { color:#a66439; text-decoration:none; }
#mainpod #content a { color:#e84413; }
#mainpod #content a:hover { text-decoration:none; }
#mainpod #content a img { padding:5px; background:#d0be9b; border:0px; }
#mainpod #content a:hover img { background:#ca9d6c; }
#mainpod #content table { width:96%; margin:15px auto; border-collapse:collapse; font-size:11px; border-left:1px solid #9e886c; border-top:1px solid #9e886c; background:#ffffff; color:#705e42; }
#mainpod #content td { padding:2px 8px; margin:0px; border-right:1px solid #9e886c; border-bottom:1px solid #9e886c; }
#mainpod #content th { padding:2px 8px; background:#ad9372; font-weight:bold; color:#ffffff; text-align:left; font-size:12px; border-right:1px solid #9e886c; border-bottom:1px solid #9e886c; }
#mainpod #content p { margin-left:15px; }

#mainpod #content .news { padding-bottom:15px; }
#mainpod #content .news .image { float:left; width:150px; }
#mainpod #content .news .text { float:left; width:460px; margin:5px 0 10px 0; }
#mainpod #content .news img { margin:15px 20px 5px 0; }
#mainpod #content .news p { margin-left:0px; }

#mainpod #content .newslist { border-bottom:1px dotted #bbbbbb; }
#mainpod #content .newslist .image { float:left; width:150px; }
#mainpod #content .newslist .text { float:left; width:460px; margin:5px 0 10px 0; }
#mainpod #content .newslist h2 { font-size:16px; color:#482e0d; }
#mainpod #content .newslist img { margin:15px 20px 15px 0; }
#mainpod #content .newslist p { margin-left:0px; }

#mainpod #content .gallery { padding-top:5px;  }
#mainpod #content .gallery img { margin:0 10px 20px 10px; }

#mainpod #content .cm_image { text-align:center; }
#mainpod #content .cm_image_desc { color:#c95e17; font-style:italic; }

#mainpod #content .sponsorlist { float:left; width:50%; margin-bottom:10px; }

#mainpod #content .inputs { background:#e1dac6; width:80%; margin-left:auto; margin-right:auto; margin-bottom:10px; padding:20px; border:1px solid #c2bdb1; }
#mainpod #content .inputs ul { list-style:none; margin:0px; padding:0px; }
#mainpod #content .inputs li { margin:0 0 5px 0; padding:0px; }
#mainpod #content .inputs .errors { float:right; }
#mainpod #content .inputs label { font-size:12px; }
#mainpod #content .inputs input { padding:3px 5px; width:56%; }
#mainpod #content .inputs select { padding:3px 3px; width:58%; }
#mainpod #content .commit { list-style:none; text-align:center; }
#mainpod #content .commit input { padding:6px 15px; }

#mainpod #content .cashicons { background:#ffffff; width:80%; margin-left:auto; margin-right:auto; margin-bottom:15px; margin-top:15px; border:1px solid #c2bdb1; text-align:center; padding:20px; }
#mainpod #content .cashicons img { margin:0px 8px; }
/*** FOOTER POD ***/

#footer { clear:both; width:960px; height:40px; background:#312b29; }

 /* start: Message Boxes and Validation Summary */
.flash_info,
.flash_success,
.flash_warning,
.flash_error,
.flash_validation,
.errorExplanation   { border: 1px solid; margin: 10px 0px; padding:15px 10px 15px 50px; background: no-repeat 10px center;}
.flash_info         { color: #00529B; background-color: #BDE5F8; background-image: url('../images/info.png');}
.flash_success      { color: #4F8A10; background-color: #DFF2BF; background-image:url('../images/success.png');}
.flash_warning      { color: #9F6000; background-color: #FEEFB3; background-image: url('../images/warning.png');}
.flash_error,
.errorExplanation   { color: #D8000C; background-color: #FFBABA; background-image: url('../images/error.png');}
.errorExplanation   { padding: 5px 5px 5px 50px; }

.flash_info,
.flash_success,
.flash_warning,
.flash_error,
.flash_validation {margin:30px 5px 10px 0px;}

/* end: Message Boxes and Validation Summary */

/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}

.digg_pagination {
  background: white;
  /* self-clearing method: */ }
  .digg_pagination a, .digg_pagination span {
    padding: .2em .5em;
    display: block;
    float: left;
    margin-right: 1px; }
  .digg_pagination span.disabled {
    color: #999;
    border: 1px solid #DDD; }
  .digg_pagination span.current {
    font-weight: bold;
    background: #2E6AB1;
    color: white;
    border: 1px solid #2E6AB1; }
  .digg_pagination a {
    text-decoration: none;
    color: #105CB6;
    border: 1px solid #9AAFE5; }
    .digg_pagination a:hover, .digg_pagination a:focus {
      color: #003;
      border-color: #003; }
  .digg_pagination .page_info {
    background: #2E6AB1;
    color: white;
    padding: .4em .6em;
    width: 22em;
    margin-bottom: .3em;
    text-align: center; }
    .digg_pagination .page_info b {
      color: #003;
      background: #6aa6ed;
      padding: .1em .25em; }
  .digg_pagination:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; }
  * html .digg_pagination {
    height: 1%; }
  *:first-child+html .digg_pagination {
    overflow: hidden; }

.apple_pagination {
  background: #F1F1F1;
  border: 1px solid #E5E5E5;
  text-align: center;
  padding: 1em; }
  .apple_pagination a, .apple_pagination span {
    padding: .2em .3em; }
  .apple_pagination span.disabled {
    color: #AAA; }
  .apple_pagination span.current {
    font-weight: bold;
    background: transparent url('/images/apple-circle.gif') no-repeat 50% 50%; }
  .apple_pagination a {
    text-decoration: none;
    color: black; }
    .apple_pagination a:hover, .apple_pagination a:focus {
      text-decoration: underline; }

.flickr_pagination {
  text-align: center;
  padding: .3em; }
  .flickr_pagination a, .flickr_pagination span {
    padding: .2em .5em; }
  .flickr_pagination span.disabled {
    color: #AAA; }
  .flickr_pagination span.current {
    font-weight: bold;
    color: #FF0084; }
  .flickr_pagination a {
    border: 1px solid #DDDDDD;
    color: #0063DC;
    text-decoration: none; }
    .flickr_pagination a:hover, .flickr_pagination a:focus {
      border-color: #003366;
      background: #0063DC;
      color: white; }
  .flickr_pagination .page_info {
    color: #aaa;
    padding-top: .8em; }
  .flickr_pagination .prev_page, .flickr_pagination .next_page {
    border-width: 2px; }
  .flickr_pagination .prev_page {
    margin-right: 1em; }
  .flickr_pagination .next_page {
    margin-left: 1em; }
