/**********************************************************************************************

	Title: RawCommerce | Ecommerce 
	Author: Raw Marketing
	Date: 2010

  www.rawcommerce.com

  #333333 - Dark Grey     (body text)
  #24b1db - Blue          (highlight)
  #f6f5f4 - Light Grey    (sidebar background)
  #929191 - Midtone Grey  (links and sidebar text)
  #ffffff - White         (navigation and masthead text)

***********************************************************************************************

	1. CSS Reset
	2. General Elements
	3. Utility Classes
	4. Layout
		4.1 Header
		4.2 Navigation
		4.3 Masthead
		4.4 Body Services
		4.5 Sidebar
		4.6 Footer		
		
***********************************************************************************************/

/* 1. CSS 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, 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;
  line-height: inherit;
  font-weight: inherit;
  font-style: inherit;
  font-size: 14px;
  font-family: Calibri, Helvetica Narrow, sans-serif;
  vertical-align: baseline;
  }
 

/* 2. General Elements  */
body { background-image: url(/image/body_bg.jpg); background-repeat: repeat;} 
 
a { text-decoration: none; color: #bde042; }
a:hover { color: #929191; }
p { line-height: 22px; color: white; }
h1 { font-size: 30px; color: #ffffff; }
h2 { font-size: 30px; font-family: Georgia, Calibri, Helvetica Narrow; color: white; font-style: italic; }
h3 { font-size: 18px; font-family: Georgia, Calibri, Helvetica Narrow, sans-serif; color: #9ec32c; font-style: italic; }
h4 { font-size: 18px; font-family: Georgia, Calibri, Helvetica Narrow, sans-serif; color: #1b1b1b; font-style: italic; margin-bottom: 10px; }

/* 3. Utility Classes */
.float_left { float: left; }
.float_right { float: right; }
.clear { clear: both; }
.button	{ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(98,202,227))); }

.padding_top { padding-top: 35px; }
.large_body { font-size: 18px; color: #bde042; }


/* 4. Layout */
#topbar { background-image: url(/image/topbar_bg.jpg); background-repeat: repeat-x; height: 30px; }
.wrapper { width: 940px; margin: 0 auto; padding: 0 10px; position: relative; }
#about_text { float: left; background-image: url(/image/about_text.png); background-repeat: no-repeat; width: 580px; height: 230px; border: 1px solid #000000; padding: 20px; margin-bottom: 30px; }




 
.divider { background-image: url(/image/masthead_subdivide.jpg); background-repeat: no-repeat; height: 27px; }
.subdivider { background-image: url(/image/masthead_subdivide_bottom.jpg); background-repeat: no-repeat; height: 27px; margin: 0 0 20px 0; }



h1#logo { background-image: url(/image/logo.png); background-repeat: no-repeat; text-indent: -9999px; overflow: hidden; height: 82px; width: 307px; margin: 20px 0; }





/* 4.1 Navigation */
ul#top_navigation { float: right; margin-top: 5px; }
ul#top_navigation li { display: inline; text-align: right; margin: 0 0px 0px 20px; }
ul#top_navigation li a { color: #ffffff; }
ul#top_navigation li a:hover { color: #c3e550; }


/* 4.2 Masthead */
#scroll { clear: both; position: relative; width: 940px; height: 350px; background-image: url(/image/scroll_bg.jpg); background-repeat: no-repeat; margin: 20px 0; overflow: hidden; border: 1px solid #000000; }
#tools { position: absolute; width: 9999em; height: 346px; overflow: hidden; }
.tool { float: left; width: 936px; height: 346px; }
.tool h2 {  font-size: 42px; 
            font-family: Georgia, Times, Times New Roman, serif; 
            font-style: italic; 
            float: left; 
            margin: 90px 0 0 40px; 
            width: 300px; 
}
.tool h2.small_masthead_heading { font-size: 36px; }
.tool img.float_right { margin: 30px 40px 0 0; }



/* Quick Buttons */
ul#quick_buttons { float: right;  clear: right;  margin-bottom: 20px; }
ul#quick_buttons li { display: block; background-image: url(/image/quick_button_bg.jpg); background-repeat: no-repeat; height: 115px; width: 300px; margin: 0 0 20px; }
ul#quick_buttons li:hover { background-image: url(/image/quick_button_bg.jpg); background-position: 0% 100%; cursor: pointer; }
ul#quick_buttons li a { display: block; height: 115px; color: white; width: 150px; font-size: 18px; font-style: italic; font-family: Georgia, Times, Times New Roman, serif; text-transform: uppercase; }

ul#quick_buttons li a#callback_button { background-image: url(/image/callback_button_bg.png); background-repeat: no-repeat;  padding: 35px 10px 0 140px; background-position: 10% 30%; }
ul#quick_buttons li a#tour_button { background-image: url(/image/tour_button_bg.png); background-repeat: no-repeat;  padding: 35px 10px 0 140px; background-position: 10% 30%; }



/* Callback */
#callback { padding: 20px; }
.textbox { width: 310px; height: 30px; border: 1px solid #d9d9d9; padding: 0 0 0 10px; }



/* Services Bar */
.equal_height { width: 300px; margin: 0 20px 0 0; background-image: url(/image/vertical_divide.jpg); background-repeat: no-repeat; background-position: 100% 0; height: 380px; }

.equal_height ul { margin: 15px; color: white; list-style-image: url(/image/bulletpoint_bg.jpg); }
.equal_height li { margin: 0 0 10px; }

#bottom_bar { background-image: url(/image/bottom_bar_bg.jpg); background-repeat: repeat-x; height: 337px; padding-top: 20px; }
.bottom_equal_height { width: 300px; margin: 0 20px 0 0; background-image: url(/image/vertical_divide_bottombar.jpg); background-repeat: no-repeat; background-position: 100% 0; height: 340px; }
.bottom_equal_height h2 { font-size: 24px; }
.bottom_equal_height p span { color: #1b1b1b; }
.last { margin: 0 0 0; background-image: none; }

/* Blockquote */
blockquote { background-image: url(/image/blockquote_bg_open.jpg); background-repeat: no-repeat; padding: 0 0 0 40px; margin: 0 0 20px; }
blockquote p { background-image: url(/image/blockquote_bg_close.jpg); font-size: 16px; font-family: Georgia, Calibri, Helvetica Narrow, sans-serif; font-style: italic; background-repeat: no-repeat; background-position: 100% 100%; }
blockquote p span.highlight { color: #9ec32c; font-size: 20px; }


/* Social Network */
#twitter { color: white; background-image: url(/image/twitter_bg.jpg); background-repeat: no-repeat; padding: 15px 0 20px 60px; }
#facebook { color: white; background-image: url(/image/facebook_bg.jpg); background-repeat: no-repeat; padding: 15px 0 20px 60px; }

#social a { font-size: 18px; font-family: Georgia, Calibri, Helvetica Narrow, sans-serif; color: #1f1f1f; font-style: italic; }
#social a:hover { color: white; }
ul#twitter_update_list { list-style-type: none; padding: 10px 0; color: white;  }
ul#twitter_update_list a { color: #1b1b1b; }
ul#twitter_update_list a:hover { color: white;  }
.twitter_bird { float: right; margin-top: 60px;}

#footer { padding-bottom: 50px; }

/* the overlayed element */ 
.simple_overlay { 
    /* must be initially hidden */ 
    display:none; 
    /* place overlay on top of other elements */ 
    z-index:10000; 
    /* styling */ 
    background-color: white; 
    width:330px;     
    min-height:200px; 
    border:1px solid #666; 
    /* CSS3 styling for latest browsers */ 
    -moz-box-shadow:0 0 90px 5px #000; 
    -webkit-box-shadow: 0 0 90px #000;     
} 
 
/* close button positioned on upper right corner */ 
.simple_overlay .close { 
    background-image:url(/image/close.png);
    background-repeat: no-repeat; 
    position:absolute; 
    right:-15px; 
    top:-15px; 
    cursor:pointer; 
    height:35px; 
    width:35px; 
}