/* -------------------------------------------------------------- 
   
   BLUEPRINT CSS
    * Filename:        grid.css
    * Version:         0.7.1 (2008-02-25) YYYY-MM-DD
    * Website:         http://code.google.com/p/blueprintcss/

   Generated by:
    * Blueprint CSS Grid Generator (2009-08-11) [http://kematzy.com/blueprint-generator/]

   Based on work by:
    * Olav Bjorkoy      [bjorkoy.com]
    * Nathan Borror     [playgroundblues.com]
    * Jeff Croft        [jeffcroft.com]
    * Christian Metts   [mintchaos.com]
    * Khoi Vinh         [subtraction.com]

   == STRUCTURE: ========================
    * Page width:            983 px
    * Number of columns:     8
    * Column width:          115 px
    * Margin width:          9 px
   ======================================

   By default, the grid is 983px wide, with 8 columns 
   spanning 115px, and a 9px margin between columns.

   If you need fewer or more columns, use this formula to calculate
   the new total width: 

   Total width = (number_of_columns * column_width) - margin_width

   Read more about using a grid here:
   * subtraction.com/archives/2007/0318_oh_yeeaahh.php
   
-------------------------------------------------------------- */

/* A container should group all your columns. */
.container {
  width: 983px;
  margin: 0 auto;
}

/* Use this class on any div.span / container to see the grid. */
.showgrid { 
  background: url(src/grid.png); 
}

/* Body margin for a sensile default look. */
body {
  margin:1.5em 0;	
}


/* Columns
-------------------------------------------------------------- */

/* Sets up basic grid floating and margin. */
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8 {float:left;margin-right: 9px;}

/* The last column in a row needs this class. */
div.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1  { width: 115px;}
.span-2  { width: 239px;}
.span-3  { width: 363px;}
.span-4  { width: 487px;}
.span-5  { width: 611px;}
.span-6  { width: 735px;}
.span-7  { width: 859px;}
.span-8, div.span-8 { width: 983px; margin: 0; }


/* Add these to a column to append empty cols. */
.append-1  { padding-right: 124px;}
.append-2  { padding-right: 248px;}
.append-3  { padding-right: 372px;}
.append-4  { padding-right: 496px;}
.append-5  { padding-right: 620px;}
.append-6  { padding-right: 744px;}
.append-7  { padding-right: 868px;}


/* Add these to a column to prepend empty cols. */
.prepend-1  { padding-left: 124px;}
.prepend-2  { padding-left: 248px;}
.prepend-3  { padding-left: 372px;}
.prepend-4  { padding-left: 496px;}
.prepend-5  { padding-left: 620px;}
.prepend-6  { padding-left: 744px;}
.prepend-7  { padding-left: 868px;}



/* Border on right hand side of a column. */
div.border {
  padding-right:3.5px;
  margin-right:4.5px;
  border-right: 1px solid #eee;
}

/* Border with more whitespace, spans one column. */
div.colborder {
  padding-right:113.5px;
  margin-right:110.5px;
  border-right: 1px solid #eee;
}

/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column.  */

.pull-1 { margin-left: -124px;}
.pull-2 { margin-left: -248px;}
.pull-3 { margin-left: -372px;}
.pull-4 { margin-left: -496px;}
.pull-5 { margin-left: -620px;}
.pull-6 { margin-left: -744px;}
.pull-7 { margin-left: -868px;}
.pull-8 { margin-left: -992px;}

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


.push-1 { margin: 0 -124px 1.5em 124px;}
.push-2 { margin: 0 -248px 1.5em 248px;}
.push-3 { margin: 0 -372px 1.5em 372px;}
.push-4 { margin: 0 -496px 1.5em 496px;}
.push-5 { margin: 0 -620px 1.5em 620px;}
.push-6 { margin: 0 -744px 1.5em 744px;}
.push-7 { margin: 0 -868px 1.5em 868px;}
.push-8 { margin: 0 -992px 1.5em 992px;}

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



/* Misc classes and elements
-------------------------------------------------------------- */

/* Use a .box to create a padded box inside a column.  */ 
.box { 
  padding: 1.5em; 
  margin-bottom: 1.5em; 
  background: #E5ECF9; 
}

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.45em;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}


/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.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;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; height: 1px;}

/* -------------------------------------------------------------- 
  
   reset.css
   * Resets default browser 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; 
  z-index: 0;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }

a, a:active {
  outline: none;
}

/* -------------------------------------------------------------- 
  
   style.css
   * Custom styles for DeluxeCode
-------------------------------------------------------------- */

@font-face {
	font-family: Candara; 	
	src: url('Candara.ttf') format("truetype"); 
} 

body{
	background: url(../../i/fibre.png) repeat;
	font-family: Georgia, "New Century Schoolbook", "Nimbus Roman No9 L", serif;
}

h1{
	font-family: Candara, Corbel, "Segoe UI", "Trebuchet MS", Arial, sans-serif;
	font-size: 2em;
	font-weight: bold;
	line-height: 1.8;
}

h2{
	font-family: Candara, Corbel, "Segoe UI", "Trebuchet MS", Arial, sans-serif;
	font-size: 1.5em;
	font-weight: bold;
}

p{
	margin: 1em 0;
	font-size:1.25em;
	line-height:1.5;
}


.fibre{
	background: url(../../i/bg-grad.png) repeat-x;
}

.container{
	background: url(../../i/bg-dot-flourish.png) no-repeat bottom right #FFF;
}

.drop-shadow{
		background: url(../../i/bg-shadow.png) repeat-y center;
}

.header{
	float: left;
	height: 99px;
	background: url(../../i/header-bg.png) repeat-x;
	border-bottom: 1px solid #4b4b4c;
}

.logo{
	background:transparent url(../../i/logo.png) no-repeat scroll 0 50%;
	float:left;
	height:50px;
	margin:-61px 0 0 40px;
	text-indent:-9999%;
	width:308px;
}

.titlebar{
	background: url(../../i/title-bg.png) no-repeat center;
	float: left;
	width: 984px;
	height: 179px;
}

.titlebar h1{
	color:#FFFFFF;
	float:right;
	font-family:Georgia,"New Century Schoolbook","Nimbus Roman No9 L",serif;
	font-size:1.333em;
	margin-right:15px;
	margin-top:135px;
	opacity:0.6;
	font-weight:normal;
	line-height:1;
}

/* Horizontal Navigation */

.navigation{

		float: right;
		background: url(../../i/nav-right-sharpy.png) no-repeat right -2px;
		height: 86px;
}
.navigation ul{
	list-style: none;
	background:transparent url(../../i/nav-left-sharpy.png) no-repeat scroll left center;
	float:right;
	font-family:"Gill Sans MT","Gill Sans","DejaVu Sans",sans-serif;
	font-weight: bold;
	font-size:0.75em;
	height:51px;
	margin-right:86px;
	margin-top:22px;
	padding-left:31px;

}

.navigation ul li{
	background: url(../../i/nav-bg.png) repeat-x;
	height: 51px;
	float: left;
	padding: 0 18px;
}

.navigation ul li a{
	text-decoration: none;
	color:#aaa;
	display: block;
	margin-top: 17px;
}

.navigation ul li a:hover, .navigation ul li a:active, #home a.active{
	color: #e82238;
}

#portfolio a:hover,#portfolio a:active, #portfolio a.active{
	color: #9bed4a;
}

#services a:hover, #services a:active, #services a.active{
	color: #E88D22;
}

#about a:hover, #about a:active, #about a.active{
	color: #BF006F;
}

#contact a:hover, #contact a:active, #contact a.active{
	color: #25b2f8;
}

/* Main */
.main, .sidebar{
	background: #f4f4ef;
	border: 3px solid #d2d2d1;
	font-size: .75em;
	min-height: 300px;
	margin-bottom: 40px;
	z-index: 0;
}
.main{
	float:left;
	margin:15px;
	margin-right: 0;
	width: 684px;
	margin-bottom: -37px;
	padding: 15px;
}

.flourish-pad{
	margin-bottom: 60px;
}

.main h1{

}

/* Portfolio Specifics */

div.portfolio{
	padding-right: 0;
}

.page .main{	
	padding: 0;
	width: 917px;
	margin-bottom: -4px;
	min-height: 1px;
}

.page h2{
	clear: left;
	margin-left: 15px;
	margin-top: 15px;
}

#showcase-title:hover{
	color: #E82238;
}

#cms-title:hover{
	color: #9BED4A;	
}

#ecommerce-title:hover{	
	color: #BF006F;
}

#generic-title:hover{
	color: #25B2F8;
}

#magento, #wordpress, #showcase, #other{
	float: left;
	margin: 15px 0px 15px 15px;
}

#cms-container, #ecommerce-container, #generic-container{ display: none; /* for toggle */}
#showcase li, #magento li, #wordpress li, #other li{
	float:left;
	padding:0 15px 0 0;
	width:210px;
	list-style: none;
}

#showcase li h3, #magento li h3, #wordpress li h3, #other li h3{
	text-align: center;
	font-weight: bold;
	margin-bottom: 5px;
}

.page img{
	border: 1px solid #ccc;
}

.page ul li a img:hover{
	border: 1px solid #25B2F8;
}

.page ul li a h3:hover{
	color: #25B2F8;
}
	

#showcase ul{
	float: left;
	margin:0;
	margin-top: 10px;
}

.expanded-portfolio{
	display:block;
}

/* Sidebar */

.sidebar a{
	text-decoration: none;
}


.sidebar{
	float:left;
	margin:15px 15px 15px 10px;
	width:217px;
}

.sidebar a{
	text-decoration: none;
}

.sidebar h1{
	font-size: 1.5em;
	background: url(../../i/sidebar-header-bg.png) repeat-x;
	padding-left: 15px;
	color: #323232;
	text-transform: uppercase;
	margin-bottom: 15px;
}

.sidebar .news p{
	margin-top: 0;
	padding: 0 15px;
}

.sidebar .secondary-nav ul{
	margin: 0 1em 1em 1em;
	list-style: none;
}

.sidebar .secondary-nav ul p{
	font-weight: bold;
	line-height: 1.5;
}

.sidebar .secondary-nav li ul li{
	line-height: 2;
}
.sidebar .portfolio-list ul{
	margin: 0;
	list-style: none;
}

.sidebar .portfolio-list ul ul{

}

.sidebar .portfolio-list ul ul li{
	background:transparent url(../../i/bullet.png) no-repeat center left;
	font-size:0.9em;
	line-height:1.2;
	margin:10px 0;
	padding-left:25px;
}

.page h1{
	background:transparent url(../../i/sidebar-header-bg.png) repeat-x scroll 0 0;
	color:#323232;
	font-size:1.5em;
	padding-left:15px;
	text-transform:uppercase;
	clear: left;
}

/* Footer */

.footer{
	font-family:"Gill Sans MT","Gill Sans","DejaVu Sans",sans-serif;
	background: url(../../i/footer-bg.png) repeat-x;
	height: 63px;
	float: left;
}

.footer-left-flourish{
	background:transparent url(../../i/footer-left-flourish.png) no-repeat scroll 0 0;
	float: left;
	/* bottom:-424px;
	height:140px;
	left:-29px; 
	position:relative; */
	text-indent:-9999%;
	width:177px;
	height: 140px;
	z-index: 1;
}

.sidebar-flourishwrap{			
	background:transparent url(../../i/sidebar-under-flourish.png) no-repeat scroll center bottom;
	float:right;
	padding-bottom:90px;		
}

.footer ul, .footer ul li{
	list-style: none;
	color: #9BED4A;
	font-size: .85em;
	float: left;
}

.footer li {
	padding: 0 10px 0 10px;
}

.footer li a{
	text-decoration: none;
	color: #25B2F8;
}

.footer p{
	color:#9F0019;
	float:right;
	font-size:0.85em;
	line-height:1.5;
	margin:20px 10px 0;
	text-align:center;
	text-transform:lowercase;
}

.footer .year{
	font-size: .8em;
	line-height: 2.22em;
}

.footer span{
	float: left;
}

.footer ul{
	margin-top: 20px
}


/* About Page */

.about .main{	
	width: 917px;
}

#pika, #pixel, #quartz{
	float: left;
	width: 200px;
	margin: 0 30px 0 0
}

#max, #angelina{
	width: 50%;
	float: left;
}

#auxillary{
	border: 1px solid red;
	float: left;
}

#auxillary h2{
	font-size: 2em;
}

#pika h3, #pixel h3, #quartz h3{
	font-weight: bold;
	line-height: 1;
}

#pika p, #pixel p, #quartz p{
	float: left;
}

/* Contact Form */

.contact-form .main{
	width: 917px;
}

.contact-form .main iframe{
	height: 1320px;
	width: 917px; !important;
	overflow-y:hidden;
}


#chat {

}

/* Services Page */

#marketing, #design, #development{
	float: left;
	width: 30%;
	margin: 15px;
}

#marketing h2, #design h2, #development h2{
	margin: 0 0 15px 0;
}

#marketing ul li, #design ul li, #development ul li{
	list-style: none;
	line-height: 2;
}

/* Landing Page */

.landing .main{ padding: 15px;}

.landing .main h2{margin-left: 0;}

.landing-logo{margin-top: -118px;}