/* 
    Document   : grid
    Created on : Nov 15, 2011, 9:05:17 PM
    Author     : Steven C Crouch - http://crouchcreative.com
    Description:
        Reset styles and include 960 grid framework
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

/************************************************/
/*                                              */
/*                  TYPOGRAPHY                  */
/*                                              */
/************************************************/


@font-face { font-family: 'Gotham-Bold';
             src: url('/fonts/Gotham-Bold.eot');
             src: local('Gotham-Bold'), url('/fonts/Gotham-Bold.woff') format('woff'), url('/fonts/Gotham-Bold.ttf') format('truetype'), url('/fonts/Gotham-Bold.svg#Gotham-Bold') format('svg');
}

/* * * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * *  RESET  * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * * */

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,b,u,i,center,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-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

/* * * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * *  SITE GRID SYSTEM   * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * * */

body {min-width:960px;}
.container {margin:0 auto;width:960px}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {display:inline;float:left;margin:0 10px;}
.push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4, .pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7, .push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10, .push_11, .pull_11, .push_12, .pull_12 {position:relative}

.first 					{margin-left:0}
.last 					{margin-right:0}

.container .grid_1 		{width:60px}
.container .grid_2 		{width:140px}
.container .grid_3 		{width:220px}
.container .grid_4 		{width:300px}
.container .grid_5 		{width:380px}
.container .grid_6 		{width:460px}
.container .grid_7 		{width:540px}
.container .grid_8 		{width:620px}
.container .grid_9 		{width:700px}
.container .grid_10 	{width:780px}
.container .grid_11 	{width:860px}
.container .grid_12 	{width:940px}

.container .prefix_1 	{padding-left:80px}
.container .prefix_2 	{padding-left:160px}
.container .prefix_3 	{padding-left:240px}
.container .prefix_4 	{padding-left:320px}
.container .prefix_5 	{padding-left:400px}
.container .prefix_6 	{padding-left:480px}
.container .prefix_7 	{padding-left:560px}
.container .prefix_8 	{padding-left:640px}
.container .prefix_9 	{padding-left:720px}
.container .prefix_10 	{padding-left:800px}
.container .prefix_11 	{padding-left:880px}

.container .suffix_1 	{padding-right:80px}
.container .suffix_2 	{padding-right:160px}
.container .suffix_3 	{padding-right:240px}
.container .suffix_4 	{padding-right:320px}
.container .suffix_5 	{padding-right:400px}
.container .suffix_6 	{padding-right:480px}
.container .suffix_7 	{padding-right:560px}
.container .suffix_8 	{padding-right:640px}
.container .suffix_10 	{padding-right:800px}
.container .suffix_11 	{padding-right:880px}
.container .suffix_9 	{padding-right:720px}

.container .push_1 		{left:80px}
.container .push_2 		{left:160px}
.container .push_3 		{left:240px}
.container .push_4 		{left:320px}
.container .push_5 		{left:400px}
.container .push_6 		{left:480px}
.container .push_7 		{left:560px}
.container .push_8 		{left:640px}
.container .push_9 		{left:720px}
.container .push_10 	{left:800px}
.container .push_11 	{left:880px}

.container .pull_1 		{left:-80px}
.container .pull_2 		{left:-160px}
.container .pull_3 		{left:-240px}
.container .pull_4 		{left:-320px}
.container .pull_5 		{left:-400px}
.container .pull_6 		{left:-480px}
.container .pull_7 		{left:-560px}
.container .pull_8 		{left:-640px}
.container .pull_9 		{left:-720px}
.container .pull_10 	{left:-800px}
.container .pull_11 	{left:-880px}


.clear {clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:before, .clearfix:after {content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after {clear:both}
.clearfix {zoom:1}


/* * * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * *  TYPOGRAPHY   * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * * */

/* The font_size percentage is of 16px. (0.75 * 16px = 12px) */
html {font-size:16px; height:100%;}
body {height:100%; font-size:100%; line-height:24px; color:#706552; background:url('../img/template/body_bg_tile.gif') center top #eae6db repeat; font-family:Georgia, "Times New Roman", Times, serif;}


/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 {font-weight: normal; color: #fff; text-transform:uppercase; font-family:"Gotham-Bold"; }


h1 {font-size: 2em; font-weight:light; line-height: 1; margin-bottom: 0.5em;}
h2 {font-size: 1.5em; margin-bottom: 0.75em;}
h3 {font-size: 1.75em; line-height: 1; margin-bottom: 1em;}
h4 {font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em;}
h5 {font-size: 1em; font-weight: bold; margin-bottom: 1.5em;}
h6 {font-size: 1em; font-weight: bold;}

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin: 0;}


/* Text elements
-------------------------------------------------------------- */

p           	{margin: 0 0 1.5em;}

/* These can be used to pull an image at the start of a paragraph, so that the text flows around it (usage: <p><img class="left">Text</p>) */
.left  			{float: left !important;}
p .left			{margin: 1.5em 1.5em 1.5em 0; padding: 0;}
.right 			{float: right !important;}
p .right 		{margin: 1.5em 0 1.5em 1.5em; padding: 0;}

a:focus,
a:hover     	{color: #336600;}
a           	{color: #A3511F; text-decoration: none;}

blockquote  	{margin: 1.5em; color: #666; font-style: italic;}
strong,dfn		{font-weight: bold;}
em,dfn     	 	{font-style: italic;}
sup, sub    	{line-height: 0;}

abbr,
acronym     	{border-bottom: 1px dotted #666;}
address     	{margin: 0 0 1.5em; font-style: italic;}
del         	{color:#666;}

pre         	{margin: 1.5em 0; white-space: pre;}
pre,code,tt 	{font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5;}


/* Lists
-------------------------------------------------------------- */

li ul,
li ol       	{margin: 0;}
ul, ol      	{margin: 0 1.5em 1.5em 0; padding-left: 1.5em;}

ul          	{list-style-type: disc;}
ol          	{list-style-type: decimal;}

dl          	{margin: 0 0 1.5em 0;}
dl dt       	{font-weight: bold;}
dd          	{margin-left: 1.5em;}


/* Misc classes
-------------------------------------------------------------- */

.small      	{font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em;}
.large      	{font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em;}
.hide       	{display: none;}

.quiet      	{color: #666;}
.loud       	{color: #000;}
.highlight  	{background:#ff0;}
.added     	 	{background:#060; color: #fff;}
.removed    	{background:#900; color: #fff;}

.first      	{margin-left:0; padding-left:0;}
.last       	{margin-right:0; padding-right:0;}
.top        	{margin-top:0; padding-top:0;}
.bottom     	{margin-bottom:0; padding-bottom:0;}

/* * * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * *  FORMS  * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * * */

/* 
	A special hack is included for IE8 since it does not apply padding 
	correctly on fieldsets
 */ 
label       { font-weight: bold; }
fieldset    { padding:0 1.4em 1.4em 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend      { font-weight: bold; font-size:1.2em; margin-top:-0.2em; margin-bottom:1em; }

fieldset, #IE8#HACK { padding-top:1.4em; } 
legend, #IE8#HACK { margin-top:0; margin-bottom:0; }

/* Form fields
-------------------------------------------------------------- */

/* 
  Attribute selectors are used to differentiate the different types 
  of input elements, but to support old browsers, you will have to 
  add classes for each one. ".title" simply creates a large text  
  field, this is purely for looks.
 */
input[type=text], input[type=password],
input.text, input.title,
textarea {
  background-color:#fff;
  border:1px solid #bbb;
}
input[type=text]:focus, input[type=password]:focus,
input.text:focus, input.title:focus,
textarea:focus {
  border-color:#666;
}
select { background-color:#fff; border-width:1px; border-style:solid; }

input[type=text], input[type=password],
input.text, input.title,
textarea, select {
  margin:0.5em 0;
}

input.text,
input.title   { width: 300px; padding:5px; }
input.title   { font-size:1.5em; }
textarea      { width: 390px; height: 250px; padding:5px; }

/* 
  This is to be used on forms where a variety of elements are 
  placed side-by-side. Use the p tag to denote a line. 
 */
form.inline { line-height:3; }
form.inline p { margin-bottom:0; }


/* Success, info, notice and error/alert boxes
-------------------------------------------------------------- */

.error,
.alert, 
.notice,
.success, 
.info 				{ padding: 0.8em; margin-bottom: 1em; border: 2px solid #ddd; }

.error, .alert 		{ background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
.notice     		{ background: #fff6bf; color: #514721; border-color: #ffd324; }
.success    		{ background: #e6efc2; color: #264409; border-color: #c6d880; }
.info 				{ background: #d5edf8; color: #205791; border-color: #92cae4; }
.error a, 
.alert a				{ color: #8a1f11; }
.notice a   		{ color: #514721; }
.success a  		{ color: #264409; }
.info a				{ color: #205791; }