/* base.css */
/* http://carsonified.com/blog/design/setting-rather-than-resetting-default-styling/ */
/* http://developer.yahoo.com/yui/fonts/ */
/* http://developer.yahoo.com/yui/base/ */

/* Font Reset from YUI http://developer.yahoo.com/yui/fonts
If you want this size in pixels (px)	Declare this percent (%)
                  10	                        77
                  11	                        85
                  12	                        93 (was 93)
                  13	                        100
                  14	                        108 (was 107)
                  15	                        116 (was 114)
                  16	                        123.1 (was 122)
                  17	                        131 (was 129)
                  18	                        138.5 (was 136)
                  19	                        146.5 (was 144)
                  20	                        153.9 (was 152)
                  21	                        161.6 (was 159)
                  22	                        167
                  23	                        174
                  24	                        182
                  25	                        189
                  26	                        197
*/

body{
  font:13px/1.231 arial,helvetica,clean,sans-serif; /* YUI Font Reset */
  *font-size:small;     /* YUI Font Reset */
  *font:x-small;        /* YUI Font Reset */
  height: 100%;
  background: #fff;    /* not all browsers set white as the default background color  */
  color: #444;         /* color is set to create not too much contrast with the background color */
  line-height: 1.4;    /* line-height is to ensure that text is legible enough ( enough space between the lines) */
}

select,input,button,textarea,button {
  font:99% arial,helvetica,clean,sans-serif;
}

table {
  font-size:inherit;
  font:100%;
  border-collapse: collapse;
  border-spacing: 0;
}

pre,code,kbd,samp,tt {
  font-family:monospace;
  *font-size:108%;
  line-height:100%;
}

/* YUI Base css http://developer.yahoo.com/yui/base/ */

h1 {
	/*18px via YUI Fonts CSS foundation*/
	font-size:138.5%;
}

h2 {
	/*16px via YUI Fonts CSS foundation*/
	font-size:123.1%;
}

h3 {
	/*14px via YUI Fonts CSS foundation*/
	font-size:108%;
}

/* margin and padding values are reset for all these elements
 * you could remove from there elements you do not used in your documents, but I don't think it'd worth it
 */
body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, blockquote, th, td {
  margin: 0;
  padding: 0;
}

h1,h2,h3,h4,h5,h6,p,blockquote,ul,ol,dl {
	/* top & bottom margin based on font size */
	margin:1em 0;
}

h1,h2,h3,h4,h5,h6,strong,th,dt,b {
	/*bringing boldness back to headers and the strong element*/
	font-weight:bold;
}

abbr,acronym {
	/*indicating to users that more info is available */
	border-bottom:1px dotted #000;
	cursor:help;
}

em,blockquote, q, em, cite, dfn, i, cite, var, address {
	/*bringing italics back */
	font-style:italic;
}

ol,ul,dl {
	/*bringing lists on to the page with breathing room */
	margin-left:2em;
}

ol li {
	/*giving OL's LIs generated numbers*/
	list-style: decimal outside;
}

ul li {
	/*giving UL's LIs generated disc markers*/
	list-style: disc outside;
}

dl dd {
	/*giving UL's LIs generated numbers*/
	margin-left:1em;
}

th,td {
	/*borders and padding to make the table readable*/
	border:1px solid #000;
	padding:.5em;
}

/* all th should be centered unless they are in tbody (table body) */
th {
	/*distinguishing table headers from data cells*/
	text-align:center;
}

tbody th {text-align: left;}

/* caption and summary are very important for tabular data but because caption is nearly impossible to style across browsers many authors do not use it or use display:none to "hide" it (which is almost the same as not using it).
 * so to prevent such workaround, I am positioning this element off-screen
 */
caption {
  position: absolute;
  left: -999em;
}

/* this is to prevent border from showing around fieldsets and images (i.e., images inside anchors)
 */
fieldset, img {
  border: 0;
}

/* to prevent a gap from showing below images in some browsers
 */
img {vertical-align: top;}

/* color is to make that element stands out (see color set via body)
 * padding is used so Internet Explorer does not cut-off descenders in letters like p, g, etc.)
 */
legend {
  color: #000;
  padding-bottom: .5em;
}

/* See Eric Meyer's article about Fixed Monospace Sizing
 * http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
 */
code {color: #06f;}
code, pre {font-family: "Courier New", monospace, serif; font-size: 1em;}

/* to prevent some browsers from inserting quotes on "q" and "p" ("p" in blockquotes) */
blockquote p:before, blockquote p:after, q:before, q:after {content: '';}

ins {
  text-decoration: none;
  border-bottom: 3px double #333;
}

del {text-decoration: line-through;}

abbr,acronym {
  border-bottom: 1px dotted #333;
  font-variant: normal;
}

/* we use margin for hr for the same reason we do for table */
hr {
  margin-right: 30px;
  margin-left: 30px;
  border-style: inset;
  border-width: 1px;
}

/* line height helps to set the vertical alignment of radio buttons and check boxes (remember to group these in fieldsets)
 */
fieldset {line-height: 1;}

/* vertical alignment of checkboxes (a different value is served to IE 7)
 */
input[type="checkbox"] {
  vertical-align: middle;
  *vertical-align: middle;
}

/* vertical alignment of radio buttons */
input[type="radio"] {vertical-alignhttp://github.com/kfaustino/rails-templater/blob/master/templater.rb: middle;}

/* vertical alignment of input fields for IE 6 */
input {_vertical-align: middle;}

/* a specific font-size is set for these elements */
input, button, textarea, select, optgroup, option {
  font-size: 100%;
}

/* this is to fix IE 6 and 7 which create extra right/left padding on buttons
 * IMPORTANT: because IE 6 does not understand the first selector below, you need to apply the class "inputButton" to all input of type="button" in your documents
 * the first declaration is for IE 6 and 7, the second one for IE 6 only, the third one is for all browsers.
 */
button,
input[type="submit"],
input[type="reset"],
input[type="button"],
.inputButton {
  *overflow: visible;
  _width: 0;
  padding: .2em .4em;
}

/* styling for links and visited links as well as for links in a hovered, focus and active state
 * make sure to keep these rules in that order, with :active being last
 * a:focus and :focus are used to help keyboard users, you may change their styling, but make sure to give users a visual clue of the element's state.
 * outline:none used with the pseudo-class :active is to avoid the sticky outline when a user clicks on a link, but choose to not follow it
 * note that the last rule does not do anything in IE as this browser does not support "outline" (besides, it treats :active and :focus the same)
 */
a:link, a:visited {color: #000;}
a:focus,:focus {outline: 1px dotted #000;}
a:active, input:active, select:active, textarea:active {outline: none;}

/* slightly enhanced, universal clearfix hack */
.grouped:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.grouped { display: inline-block; }
/* start commented backslash hack \*/
* html .grouped { height: 1%; }
.grouped { display: block; }
/* close commented backslash hack */

.notice, .alert {
  margin-top: 0px;
  padding: 5px;
}
.notice {
  border: solid 1px #99cc99;
  background-color: #e2f9e3;
  color: #006600;
}

.alert {
  border: 1px solid #cc0000;
  background-color: #eeaaaa;
  color: #cc0000;
}

label {
  width: 120px;
  display: inline-block;
}

abbr {
  cursor: default;
  border: none;
}

input, textarea {
 font-size:110%;
}

select {
  font-size:120%;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="file"]:focus,
input[type="email"]:focus,
textarea:focus, select:focus {
  border:2px solid #2c2c2c;
}

input[type="text"],
input[type="password"],
input[type="file"],
input[type="email"],
textarea, select {
  width: 300px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border:2px solid #D2D1CF;
  color:#555555;
  outline: 0 none;
  padding:5px;
}

form .input label {
  vertical-align: middle;
}

form .input.text label {
  vertical-align: top;
}

.field_with_errors input[type="text"],
.field_with_errors input[type="password"],
.field_with_errors input[type="file"],
.field_with_errors textarea,
.field_with_errors select {
  border:2px solid #E0A7A7;
}
.field_with_errors input[type="text"]:focus,
.field_with_errors input[type="password"]:focus,
.field_with_errors input[type="file"]:focus,
.field_with_errors textarea:focus {
  border:2px solid #B22222;
}

.field_with_errors .error {
  padding-left: 10px;
}