/* 
    
  == STRUCTURE: ========================
   * Page width:            820 px
   * Number of columns:     7
   * Column width:          100 px
   * Margin width:          20 px
  ======================================
   
*/

/* reset.css */
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, table, caption, tbody, tfoot, thead, tr, th, td {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;}


/* grid.css */
.container {width:820px;margin:0 auto;}
.showgrid {background:url(src/grid.png);}
body {margin:1.5em 0;}
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7 {float:left;margin-right: 20px;}

div.last {margin-right:0;}
.span-1  { width: 100px;}
.span-2  { width: 220px;}
.span-3  { width: 340px;}
.span-4  { width: 460px;}
.span-5  { width: 580px;}
.span-6  { width: 700px;}
.span-7, div.span-7 { width: 820px; margin: 0; }

.append-1  { padding-right: 120px;}
.append-2  { padding-right: 240px;}
.append-3  { padding-right: 360px;}
.append-4  { padding-right: 480px;}
.append-5  { padding-right: 600px;}
.append-6  { padding-right: 720px;}

.prepend-1  { padding-left: 120px;}
.prepend-2  { padding-left: 240px;}
.prepend-3  { padding-left: 360px;}
.prepend-4  { padding-left: 480px;}
.prepend-5  { padding-left: 600px;}
.prepend-6  { padding-left: 720px;}

div.border{padding-right:9px;margin-right:10px;border-right:1px solid #eee;}
div.colborder { padding-right:91px;margin-right:90px;border-right:1px solid #eee;}
.pull-1 { margin-left: -20px;}
.pull-2 { margin-left: -40px;}
.pull-3 { margin-left: -60px;}
.pull-4 { margin-left: -80px;}
.pull-5 { margin-left: -90px;}
.pull-6 { margin-left: -100px;}
.pull-7 { margin-left: -120px;}

.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7 {float:left;position:relative;}

.push-1 { margin: 0 -120px 1.5em 120px;}
.push-2 { margin: 0 -240px 1.5em 240px;}
.push-3 { margin: 0 -360px 1.5em 360px;}
.push-4 { margin: 0 -480px 1.5em 480px;}
.push-5 { margin: 0 -600px 1.5em 600px;}
.push-6 { margin: 0 -720px 1.5em 720px;}
.push-7 { margin: 0 -840px 1.5em 840px;}

.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7 {float:right;position:relative;}


.clearfix:after, .container:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix, .container {display:inline-block;}
* html .clearfix, * html .container {height:1%;}
.clearfix, .container {display:block;}
.clear {clear:both;}

/* forms.css */
label {font-weight:bold;}
fieldset {padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
legend {font-weight:bold;font-size:1.2em;}
input.text, input.title, textarea, select {margin:0.5em 0;border:1px solid #bbb;}
input.text:focus, input.title:focus, textarea:focus, select:focus {border:1px solid #666;}
input.text, input.title {width:300px;padding:5px;}
input.title {font-size:1.5em;}
textarea {width:390px;height:250px;padding:5px;}
.error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
.error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}