/* -------------------------------------------------------------- 
	Site by Supermega Design
	supermegadesign.com

	Boilerplate Screen Styles			Less Framework 4 http://lessframework.com by Joni Korpi
	* Version:   0.5 (2007-11-19)		License: http://creativecommons.org/licenses/MIT/
   
   	COLORS:
	blue dark	113bb4
	blue light	4162c3
	red			b20f1d
	light bg	f9ffff
   
 --	Default Layout: 992px --
	Gutters: 24px Outer margins: 12px
	One-third: 276px;
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */


@import "lib/reset.css";
@import "lib/typography.css";
@import "lib/forms.css";

/* Specific Sites
-------------------------------------------------------------- */	
#ehsa { 	background-image: url(img/work-ehsa.jpg); }
#k4mn { 	background-image: url(img/work-k4mn.jpg); }
#gmcn { 	background-image: url(img/work-gmcn.jpg); }
#dfl { 		background-image: url(img/work-dfl.jpg); }
#fuc { 		background-image: url(img/work-fuc.jpg); }
#trott {	background-image: url(img/work-trott.jpg); }



/* Page
-------------------------------------------------------------- */

#page { 
	margin: 0 auto; width: 100%; 
	}
.contentspace {
	margin: 0 auto; width: 920px;   /* 896 from jkorpi + 24 */
	}

/* Fixed Footer
-------------------------------------------------------------- */
*, body {	margin: 0; padding: 0; 
			position: static;
			}
#wrap { 	display: block; position: absolute; 
			min-height: 100%; width: 100% 
			}
#content {	display: block; width: 100%; 
			margin-bottom: 260px; 
			}
#footer { 	position: absolute; display: block; 
			bottom: 0; width: 100%; 
			height: 260px;  
			}

/* My Stylin
-------------------------------------------------------------- */
body {
	background: url(img/bg.jpg) repeat top center;
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
	}
	body.admin-menu { 	background-position: 0 20px; }
	body#tinymce { 		background-color: #fff !important; background-image: none !important; }
	
/* Banner
-------------------------------------------------------------- */
#banner {
	background: #000 url(img/bg-banner.jpg) repeat-x top center;
	height: 178px;
	position: relative;
	margin-bottom: 2em;
	}
	#banner h1 { 
		position: absolute; top: 0; width: 100%;
		margin: 0; padding: 0;
		}
		#banner h1 a {
			display: block;
			height: 150px; width: 100%;
			background: url(img/SupermegaDesign-logos.png) no-repeat top center;
			text-indent: -9999px;
			}	
		#banner:after {
			content: "";
			display: block;
			width: 100%; height: 2px;
			background: black;
			position: absolute; top: 178px;
			 -moz-box-shadow: 0px 0px 6px #000000; 
		  -webkit-box-shadow: 0px 0px 6px #000000; 
		          box-shadow: 0px 0px 6px #000000; 
		    behavior: url(http://supermegadesign.com/lib/PIE.htc);      
			}		
/* Navigation 
-------------------------------------------------------------- */
#banner .links {
	position: absolute; top: 80px;
	min-width: 190px; 
	width: auto;
	list-style:none;
	margin:0; padding:0;
	background: #161616;
	border-top: 2px solid black;
	}
.links li { position: relative; }	
.links li a {
	color: white; text-transform: uppercase;
	display: inline-block;
	padding: 10px; font-size: 125%;
	position: relative;
-webkit-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
   -moz-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
     -o-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
        transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear */
	}
	.links li.active a {
				text-shadow: 1px 1px 0 #71858B, 2px 2px 0 #71858B, 3px 3px 0 #71858B, 4px 4px 0 #71858B, 5px 5px 0 #71858B, 6px 6px 0 #71858B;
				top: -3px; left: -3px;
				}
	.links li a:hover {
		text-shadow: 1px 1px 0 #86100E, 2px 2px 0 #86100E, 3px 3px 0 #86100E, 4px 4px 0 #86100E, 5px 5px 0 #86100E, 6px 6px 0 #86100E;
		text-decoration: none;
		top: -3px; left: -3px;
		}	
.primary-links {
	left: 0; right: 75%;
	text-align:right;
	
	     -moz-border-radius: 0 14px 14px 0; 
	  -webkit-border-radius: 0 14px 14px 0; 
	          border-radius: 0 14px 14px 0; 
	behavior: url(http://supermegadesign.com/lib/PIE.htc);
	}
	.primary-links  li {
		display:inline;
		padding: 0 0.5em 0 0;
		}
.secondary-links {
	left: 75%; right: 0;
	text-align:left;
		
	     -moz-border-radius: 14px 0 0 14px; 
	  -webkit-border-radius: 14px 0 0 14px;  
	          border-radius: 14px 0 0 14px;  
	behavior: url(http://supermegadesign.com/lib/PIE.htc);          
	}
	.secondary-links li {
		display: inline;
		padding: 0 0 0 0.5em;
		}
		.secondary-links li a { padding: 10px 0 10px 10px;}

/* Columns
-------------------------------------------------------------- */
#col-one {
	float: left; margin: 0 0 24px;
	display: inline;
	width: 100%;
	}
	
#col-two {	
	float: left; margin: 0;
	display: inline;
	width: 100%;
	position: relative;
	}		
	#col-two .contentspace { position: relative; }
#col-three {	
	float: left; margin: 0 0 24px;
	display: inline;
	width: 100%;
	position: relative;
	}
/*	#col-two img, #col-three img {
		width: 100%;
		margin-bottom: 0.5em;
		}	 */
		
#col-two	{
	background: url(img/strips.jpg) repeat top center;
	position: relative;
	padding: 36px 0 0;
	}

	#col-two:before {
		content: "";
		display: block;
		width: 100%; height: 35px;
		background: url(img/chromestrip.jpg) repeat-x top center;	
		position: absolute; top: 0;
		     -moz-box-shadow: 0px 0px 6px #333333; 
		  -webkit-box-shadow: 0px 0px 6px #333333; 
		          box-shadow: 0px 0px 6px #333333; 
		behavior: url(http://supermegadesign.com/lib/PIE.htc);          
		}
	#col-three:before {
		content: "";
		display: block;
		width: 100%; height: 35px;
		background: url(img/chromestrip.jpg) repeat-x top center;	
		     -moz-box-shadow: 0px 0px 6px #333333; 
		  -webkit-box-shadow: 0px 0px 6px #333333; 
		          box-shadow: 0px 0px 6px #333333; 
		behavior: url(http://supermegadesign.com/lib/PIE.htc);          
		}	
/* Nodes
-------------------------------------------------------------- */
.node {
	margin-bottom: 2em;
	}
.caption.left, 
.caption.right {
	width: 40%;
	background-color: #666;
	}
	.caption.left { float: left; margin: 0 1em 0.5em 0; }
	.caption.right { float: right; margin: 0 0 0.5em 1em; }
	.caption img {
		width: 100%;
		}
	.caption p {
		margin: 0 0 0.5em;
		padding: 0 0.5em;
		color: white
		}
.node h2, #col-one h2,
#block-block-3a h2 {
	text-align: center;
	color: #7F9296;
	text-shadow: 0 -1px 0 #ffffff, 0 1px 0 #000000;
	}				
#samples {
	display: block; float: right; 
	width: 508px; height: 285px;
	background: white;
	margin: 0 0 12px 24px; padding: 24px 12px 12px;
	     -moz-border-radius: 10px; 
	  -webkit-border-radius: 10px; 
	          border-radius: 10px; 
	border-width: 8px;
	border-style: solid;
	border-color: white;
	border-color: rgba(239,238,235,.5);
	behavior: url(http://supermegadesign.com/lib/PIE.htc);
	}	
	#samples img {
		width: 100%;
		}
	ul.slides {
		margin-bottom: 0;
		}	
#node-1 h3 {
	color: #86100E;
	text-align: center;
	font-size: 400%;
	text-shadow: -1px -1px 0 #999999, 1px 1px 0 #ffffff
	}
.about .node {
	-moz-column-count: 2;
	-moz-column-gap: 24px;
	-webkit-column-count: 2;
	-webkit-column-gap: 24px;
	column-count: 2;
	column-gap: 24px;
	width: 920px; 
	behavior: url(http://supermegadesign.com/lib/PIE.htc);
	}
	.about p span {
		color: #86100E;
		}
	.photograph {
		position: relative;
		width: 160px; height:160px;
					transform: rotate(2deg);
			-webkit-transform: rotate(2deg);
			   -moz-transform: rotate(2deg);
		float: right; 
		margin: 0 0 8px 4px;	
		behavior: url(http://supermegadesign.com/lib/PIE.htc);   
		}
		.photograph:after { 
			z-index: -1; 
			position: absolute; 
			background: transparent; 
			width: 50%; 
			height: 90%; 
			content: ''; 
			right: 23px; 
			bottom: 7px; 
			transform: skew(15deg) rotate(6deg);
			-webkit-transform: skew(15deg) rotate(6deg);
			-moz-transform: skew(15deg) rotate(6deg);
			box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
			-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
			-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
			behavior: url(http://supermegadesign.com/lib/PIE.htc);
			} 
			
			.photograph:before { 
			z-index: -2; 
			position: absolute; 
			background: transparent; 
			width: 60%; 
			height: 90%; 
			content: ''; 
			left: 21px; 
			bottom: 6px; 
			transform: skew(-15deg) rotate(-6deg); 
			-webkit-transform: skew(-15deg) rotate(-6deg); 
			-moz-transform: skew(-15deg) rotate(-6deg); 
			box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
			-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
			-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
			behavior: url(http://supermegadesign.com/lib/PIE.htc);
			}	
.contact .node h2, .contact .node p {
	text-align: center;
	}			
/* FORMS
-------------------------------------------------------------- 
form#form3 { width: 896px; margin-left: 12px;}*/	

#hidden_panel {
	display: none;
	}

form#form3 input { 
	width: 260px; 
	font-size: 1.5em; padding: 12px; margin-bottom: 1em;
	border: none; color: #71858B;
	
	     -moz-border-radius: 12px; 
	  -webkit-border-radius: 12px; 
	          border-radius: 12px; 
	
	     -moz-box-shadow:inset 0px 0px 6px #7F9296; 
	  -webkit-box-shadow:inset 0px 0px 6px #7F9296; 
	          box-shadow:inset 0px 0px 6px #7F9296; 
	          
	behavior: url(http://supermegadesign.com/lib/PIE.htc);
	
	}
	form#form3 div#fieldfive,
	form#form3 div#fieldseventeen { margin-right: 18px; width: 284px; float: left}
/*	form#form3 input#Field5 { margin-right: 18px; } */
	form#form3 div#fieldnineteen { float: right; margin-right: 24px; width: 284px; }
/*	form#form3 input#Field19 { float: right; margin-right: 24px } */
	form#form3 div#fieldseven { float: left; }
	form#form3 div#fieldseven, label#title7 { width: 872px;}
	form#form3 input#Field7 { width: 872px;}	
	form#form3 div#fieldten, form#form3 div#fieldfifteen {
		width: 872px;
		}
	
	form#form3 textarea#Field10, form#form3 textarea#Field15 { 
		width: 872px;
			     -moz-box-shadow:inset 0px 0px 6px #5e6f73; 
	  -webkit-box-shadow:inset 0px 0px 6px #5e6f73; 
	          box-shadow:inset 0px 0px 6px #5e6f73; 
	    behavior: url(http://supermegadesign.com/lib/PIE.htc);      
		}
	textarea#Field10, 
	textarea#Field15,
	fieldset {
		width: 872px;
		color: #71858B;
		background: white;
		background: rgba(255,255,255,0.75);
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		border: none;
		padding-top: 60px;
	     -moz-box-shadow:inset 0px 0px 6px #5e6f73; 
	  -webkit-box-shadow:inset 0px 0px 6px #5e6f73; 
	          box-shadow:inset 0px 0px 6px #5e6f73; 
	    behavior: url(http://supermegadesign.com/lib/PIE.htc);      
		}
			fieldset {
				width: 860px;
				}
		form#form3 fieldset input {
			width: 24px;
			}	
label,
fieldset textarea {
	font-size: 1.2em;
	color: #666;
	}
label#title5, label#title17, label#title19, label#title7, label#title19 {
	}



	
h2#dropdown {
	text-align: center;
	color: #86100E;
	text-shadow: 0 -1px 0 #ffffff, 0 1px 0 #000000;
	background: url(img/arrow.png) no-repeat top center;
	height: 40px; padding-top: 80px;
	position: relative;
	top:-65px;
	margin-bottom: 0;
	}	
	h2#dropdown a { color: #86100E; }
	h2#dropdown a:hover { color: #71858B; text-decoration: none;}
#send-btn {
    background: #a6a6a4 url(img/box-send4.jpg) no-repeat center center;
-webkit-border-radius: 28% 28% 28% 28% / 80% 80% 100% 100%;
-moz-border-radius: 28% 28% 28% 28% / 80% 80% 100% 100%;
border-radius: 28% 28% 28% 28% / 80% 80% 100% 100%;

-webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9) inset, 0 2px 6px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9) inset, 0 2px 6px rgba(0, 0, 0, 0.9);
box-shadow: 0 0 18px rgba(0, 0, 0, 0.9) inset, 0 2px 6px rgba(0, 0, 0, 0.9);

    margin: 20px auto 60px;
    padding: 24px 0;
    text-align: center;
    width: 200px;
    behavior: url(http://supermegadesign.com/lib/PIE.htc);
}
form#form3 input#saveForm,
#send-btn a {
	background: maroon url(img/btn-send.jpg) no-repeat center center;
	display: block;
	height: 72px; width: 72px;
-webkit-border-radius: 36px;
-moz-border-radius: 36px;
border-radius: 36px;

	line-height: 72px;
	margin: auto;
	border: solid black;
	border-width: 1px 2px 2px 1px;
-webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5) inset, 0 0 9px #000, 0 0 18px #000;
-moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5) inset, 0 0 9px #000, 0 0 18px #000;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.5) inset, 0 0 9px #000, 0 0 18px #000;

	font-family: museo-sans-rounded-1,museo-sans-rounded-2,sans-serif;
	font-style: normal; font-size: 90%;
	font-weight: 700;
	color: white;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: -1px -1px 2px #000, 1px 1px 2px #b94f4a;
	letter-spacing: 1px;
	behavior: url(http://supermegadesign.com/lib/PIE.htc);
}	
form#form3 input#saveForm:hover,
#send-btn a:hover {
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.5) inset, 0 0 9px #000;
	}
form#form3 input#saveForm:active,	
#send-btn a:active {
	text-shadow: -1px -1px 2px #b94f4a, 1px 1px 2px #b94f4a;
	}	
textarea { margin-bottom: 1em }	

legend {
	text-shadow: 0 -1px 0 #FFFFFF, 0 1px 0 #333333;
	}
span.req {

	color: #86100E;
	}				
/* Blocks
-------------------------------------------------------------- */	
.block {
	margin-bottom: 1em;
	}
		.block h2 { padding-top: 1em; }
#block-block-2a	{
	z-index: 100;
	display: block; 
	position: absolute;
	left: 12px; top: -48px;
	width: 344px; height: 344px;
	padding: 12px 0 0 12px;
  background-color: #cdd0d4;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6), to(#afb1b6)); 
  background-image: -webkit-linear-gradient(top, #e6e6e6, #afb1b6); 
  background-image:    -moz-linear-gradient(top, #e6e6e6, #afb1b6); 
  background-image:     -ms-linear-gradient(top, #e6e6e6, #afb1b6); 
  background-image:      -o-linear-gradient(top, #e6e6e6, #afb1b6); 
  background-image:         linear-gradient(top, #e6e6e6, #afb1b6);
     -moz-border-radius: 172px; 
  -webkit-border-radius: 172px; 
          border-radius: 172px; 
		     -moz-box-shadow: 0px 2px 8px #6B8085; 
		  -webkit-box-shadow: 0px 2px 8px #6B8085; 
		          box-shadow: 0px 2px 8px #6B8085;  
	behavior: url(http://supermegadesign.com/lib/PIE.htc);	          
	}
#block-block-2a	.content {
	width: 320px; height: 320px;
	background: #000 url(img/circle-bluegreen.jpg) no-repeat top left; 
	text-align: center;
	 -moz-border-radius: 160px; 
  -webkit-border-radius: 160px; 
          border-radius: 160px; 
		     -moz-box-shadow:inset 0px 0px 12px #333333; 
		  -webkit-box-shadow:inset 0px 0px 12px #333333; 
		          box-shadow:inset 0px 0px 12px #333333; 
	behavior: url(http://supermegadesign.com/lib/PIE.htc);	           
	}
	#block-block-2a	.content blockquote {
		display: block; float: left;
		padding: 0 14px 0.75em;
		color: white;
		font-family: futura-pt-1,futura-pt-2,sans-serif;
		font-style: normal;
		font-weight: 400;
		font-size: 85%;
		margin-bottom: 0;
		position: relative;
		text-rendering: optimizeLegibility; 
		text-shadow: 2px 6px 3px rgba(0,0,0,0.2);
		letter-spacing: 0.03em;
		} 
	#block-block-2a	.content p {
		padding: 0 24px; margin: 0 1.5em;
		font-family: futura-pt-1,futura-pt-2,sans-serif;
		font-style: normal;
		font-weight: 500;
		 font-size: 80%;
		 text-shadow: 1px 1px 0 rgba(255,255,255,0.2);
		}	
		/* Centering in the Unknown --------------------------- */		
		#block-block-2a .content:before {
			content: '';
			display: inline-block;
			height: 100%;
			vertical-align: middle;
			margin-right: -10px; width: 1px;
			}		
		#centrd {
			display: inline-block;
			vertical-align: middle;
			}		
#block-block-2b {
	float: right;
	width: 528px;
	}
	#block-block-2b h2 {
		text-align: center;
		color: #7F9296;
		text-shadow: 0 -1px 0 #ffffff, 0 2px 0 #000000;
		padding: 0.5em 0 0;
		}	
		#block-block-2b ul {
			list-style: none;
			width: 160px; float: left;
			margin: 0 12px 0 0; padding: 0;
			text-shadow: 0 -1px 1px #ffffff;
			}
			#block-block-2b ul#last { margin: 0; }	
			#block-block-2b li {
				margin-bottom: 0.5em;
				font-weight: 700;
				}
				#block-block-2b li, #block-block-2b li a { color: #580a09}
				#block-block-2b ul#first li, #block-block-2b ul#first li a,
				#block-block-2b ul#last li, #block-block-2b ul#last li a { color: black }
#block-block-2c {
	float: right;
	width: 896px;
	}
	#block-block-2c h2 {
		text-align: center;
		color: #7F9296;
		text-shadow: 0 -1px 0 #ffffff, 0 2px 0 #000000;
		padding: 0.5em 0 0;
		}	
		#block-block-2c ul {
			list-style: none;
			width: 194px; float: left;
			margin: 12px 24px 0 0; padding: 0;
			text-shadow: 0 -1px 1px #ffffff;
			}
			#block-block-2c ul#last { margin-right: 0; }	
			#block-block-2c li {
				margin-bottom: 0.5em;
				font-weight: 700;
				}
				#block-block-2c li, #block-block-2c li a { color: #580a09}
				#block-block-2c ul#first li, #block-block-2c ul#first a,
				#block-block-2c ul#last li, #block-block-2c ul#last a { color: black }				
#block-block-3a {
	background: url(img/hoodornament4.png) no-repeat 25em top; }
#block-block-3a, #block-block-3c {
	width: 528px; float: left;
	margin-top: 24px;
	}
	#block-block-3a h2, #block-block-3c h2 { text-align: left;}
	#block-block-3a h2 a, #block-block-3c h2  {
		text-align: left;
		color: #7F9296;
		text-shadow: 0 -1px 0 #ffffff, 0 2px 0 #000000;
		padding: 0.5em 0 0;
		}
		#block-block-3a h2 a:hover {
			text-decoration: none; color: #86100E;
			}
	#block-block-3a li {
		margin-bottom: 0.5em;
		}	
		#block-block-3a li a { color: #7F9296}
		#block-block-3a li span a { color: #000; text-shadow: 0 1px 0 #ffffff }
		#block-block-3a li a:hover { color: #86100E}	
#block-block-3b {
	width: 344px; float: right;
	margin-top: 24px;
	}	
	#block-block-3b p {
		font-size: 1.5em;
		}
		#block-block-3b p a {
		color: black;
		font-family: refrigerator-deluxe-1,refrigerator-deluxe-2,sans-serif;
		font-style: normal;
		font-weight: 700;
		}
	#block-block-3b h2  {
		background: url(img/redswirly.jpg) no-repeat center center;
		text-align: center;
		font-family: "corner-store-1","corner-store-2",sans-serif;  font-weight: normal; font-size: 3.5em; line-height: 1em;
		color: #ccc;
		border: 4px solid #afb1b6;
		padding: 36px 24px;
		     -moz-border-radius: 16px; 
  -webkit-border-radius: 16px; 
          border-radius: 16px; 
          text-shadow: 0 -2px 0 #ffffff, 0 2px 0 #000000;
             -moz-box-shadow: 1px 2px 8px #333333; 
		  -webkit-box-shadow: 1px 2px 8px #333333; 
		          box-shadow: 1px 2px 8px #333333;
        position: relative;
        behavior: url(http://supermegadesign.com/lib/PIE.htc);  
		}	
			#block-block-3b h2 a:hover {	
				text-decoration: none;
				}
#block-block-3c .photograph {
		position: relative;
		width: 120px; height:120px; 
		float: left; margin: 0 1em 1em 0;
					transform: rotate(-2deg);
			-webkit-transform: rotate(-2deg);
			   -moz-transform: rotate(-2deg);
		}
		#block-block-3c .photograph:before {
			bottom: 5px; left: 19px;
			height: 90%; width: 55%;
			}	
		#block-block-3c .photograph:after {
			bottom: 5px; right: 13px;
			height: 90%; width: 50%;
			}			
/* Quote blocks
-------------------------------------------------------------- */				
.about #col-two {
	background: #333 url(img/dots.gif) repeat top center;
	}
#quotes {
	padding: 12px 0;
	margin-left: 0; 
	}
.quote { 
	display: inline-block; float: left;
	background: #222;
	width: 436px;
	color: white;
	padding: 10px 0; margin: 0 24px 24px 0;
	position: relative;
	
	     -moz-box-shadow: 1px 2px 6px #333333; 
	  -webkit-box-shadow: 1px 2px 6px #333333;  
	          box-shadow: 1px 2px 6px #333333; 
		 -moz-border-radius: 36px; 
	  -webkit-border-radius: 36px; 
	          border-radius: 36px; 
	behavior: url(http://supermegadesign.com/lib/PIE.htc);          
	}
	
	.quote p {
		margin: 10px 0 10px 100px;
		position: relative; z-index: 200;
		}
	.quote blockquote {
		display: block;
		width: 398px; margin: 0 0 0 10px; padding: 10px;
		position: relative;
		z-index: 1;
		color: black;
		text-shadow: -1px -1px 1px #B7BFC2;
	     -moz-border-radius: 32px; 
	  -webkit-border-radius: 32px; 
	          border-radius: 32px; 
		
background: #b7bfc2; /* Old browsers */
background: -moz-linear-gradient(top, #b7bfc2 0%, #7f9296 53%, #7f9296 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7bfc2), color-stop(53%,#7f9296), color-stop(100%,#7f9296)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b7bfc2 0%,#7f9296 53%,#7f9296 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b7bfc2 0%,#7f9296 53%,#7f9296 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #b7bfc2 0%,#7f9296 53%,#7f9296 100%); /* IE10+ */
background: linear-gradient(top, #b7bfc2 0%,#7f9296 53%,#7f9296 100%); /* W3C */


		behavior: url(http://supermegadesign.com/lib/PIE.htc);
		}
		.quote blockquote:before {
			content: "";
			display: block; height: 90px; width: 90px;
			position: absolute; bottom: -36px; left: 28px;
			background: #7F9296;
		 -moz-border-radius: 45px; 
	  -webkit-border-radius: 45px; 
	          border-radius: 45px; 
	          z-index: -2;
	          behavior: url(http://supermegadesign.com/lib/PIE.htc);
			}
		.quote blockquote:after {
			content: "";
			display: block; height: 60px; width: 120px;
			position: absolute; bottom: -60px; left: 54px;
			background: #222;
		 -moz-border-radius: 0 0 60px 60px; 
	  -webkit-border-radius: 0 0 60px 60px;  
	          border-radius: 0 0 60px 60px;  
	          z-index: -1;
	          behavior: url(http://supermegadesign.com/lib/PIE.htc);
			}	
		/* Almost First and Almost Last
-------------------------------------------------------------- */	
#almost-first, #almost-last {
	width: 100%;
	clear: both;
	}
	#almost-first .block {
		margin: 0 12px 2em;
		height: 180px;
		}
		#almost-first .block h2 {
			text-align: center;
			padding-top: 80px;
			}	
/* Sites
-------------------------------------------------------------- */
.work .node {
	position: relative;
	}	
.sample {
	position: relative;
	display: block;
	width: 436px;
	float: left;
	margin: 0 24px 24px 0;
	}
	.sample .content {
		position: absolute; z-index: 2;
		top: 0px; right: -1px;
		width: 60px; height: 172px; padding-top: 120px;
		background: rgba(255,255,255,0.75);
		text-align: center;
		}
		.sample:hover .content { z-index: 20; }
		.node .sample .content p a {
			text-shadow: none;
			text-decoration: none;
			border-bottom: none;
			}
			.node .sample .content p a:hover {
				color: #86100E;
				}
		.sample .content span {
			display: block;
			font-size: 200%;
			}
	.sample p {
		margin: 0 0.5em;
		font-size: 0.9em;
		}	
.site {
	position: relative; z-index: 10;
	display: block;
	height: 291px; width: 436px;
	border: 1px solid white;
	background-position: top center;
	background-repeat: no-repeat;
	box-shadow: 0 6px 10px -8px #666666;
	behavior: url(http://supermegadesign.com/lib/PIE.htc);
	}	
/* Logos
-------------------------------------------------------------- */		
#block-block-3d {
	float: left;
	width: 528px;
	}
.logo {
	display: block;
	width: 160px; height: 160px;
	background: white;
	position: relative;
	text-align: center;
	box-shadow: 0 6px 10px -8px #666666;
	float: left; margin: 0 12px 12px 0;
	behavior: url(http://supermegadesign.com/lib/PIE.htc);
	}	
	.logo img {
		margin: 20px auto;
		}
		.nottall img { margin-top: 70px;}
	.logo h4 {
		text-align: center; width: 160px;
		position: absolute;
		bottom: -6px;
		font-size: 85%;
		color: #7F9296;
		font-family: "refrigerator-deluxe-1","refrigerator-deluxe-2","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif
		}  
/* Footer
-------------------------------------------------------------- */
#footer .contentspace {	
	height: 260px;
	color: #7F9296; 
	}
	#ftr-phone {
		display: block; height: 3em;
		background: url(img/SMD-icon.png) no-repeat top center;
		width: 164px; margin: 0 auto;
		padding-top: 124px;
		text-align: center;
		color: #86100E;
		text-shadow: 0 -1px 0 #ffffff, 0 1px 0 #000000; 
		}	
	.ftr-strip {
		display: block;
		width: 344px; height:24px; margin-top: 24px;
		background: #333;
		text-align: center;
		     -moz-border-radius: 12px; 
		  -webkit-border-radius: 12px; 
		          border-radius: 12px; 
		                    
		               -moz-box-shadow: -2px -2px 4px #666666, 2px 2px 4px #ffffff; 
		            -webkit-box-shadow: -2px -2px 4px #666666, 2px 2px 4px #ffffff;  
		                    box-shadow: -2px -2px 4px #666666, 2px 2px 4px #ffffff; 
          behavior: url(http://supermegadesign.com/lib/PIE.htc);
		          
		}
	#footer p { margin-bottom: 0; }	
	#footer .left  { float: left;}
	#footer .right { float: right; clear: right;}
	.ftr-strip.clear { clear: both; }

h3 span#num { display: none; }


/*	 --	Tablet Layout: 768px. --
		Gutters: 24px.
		Outer margins: 12px -dk
		Inherits styles from: Default Layout.
		One-third: 208px;
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	.contentspace {
		width: 736px;				/* 712 from jkorpi + 24 */	
		}
		#col-one {
			width: 100%;
			}
		#col-two {
			width: 100%;
			}	
		#col-three {
			width: 100%;
			}
		#banner .links { top: 20px; }	
		#block-block-3a { clear: both; width: 712px; }	
		#block-block-3b, #block-block-3c  {
			width: 344px;
			}
		.sample, .site { width: 344px; }	
		.sample .content { z-index: 20; }
		.quote { margin: 0 12px 12px 0; }
		.about .node { 
			-moz-column-count: 2;
			-moz-column-gap: 24px;
			-webkit-column-count: 2;
			-webkit-column-gap: 24px;
			column-count: 2;
			column-gap: 24px;
			width: 712px; 
			}
		#block-block-3d {
			width: 344px;
			}
		#block-block-2a {
			top:  380px;
			left: 0;
			}
		#block-block-2b, #block-block-2c {
			width: 712px;
			}	
		#block-block-2b ul {
			width: 220px; 	
			}
		#block-block-2c ul {
			width: 344px; margin-right: 12px;
			}	
		#block-block-3a h2{
			padding-right: 140px;
			}
		.ftr-strip { width: 252px; }	
		.quote { 
			margin: 0 24px 24px 0;
			min-height: 240px; width: 344px;
			}
			.quote blockquote {
				width: 304px;
				}
				
/*		form#form3 { 		width: 736px; }	*/
		form#form3 input { 	width: 330px; }	
		form#form3 input#Field7 { width: 330px;}	
form#form3 div#fieldfive, form#form3 div#fieldseventeen,
form#form3 div#fieldnineteen, form#form3 div#fieldseven {
		width: 350px;
		}
		form#form3 div#fieldnineteen {
			 float: right; margin-right: 17px }
		form#form3 textarea#Field10,
		form#form3 textarea#Field15,
		fieldset { width: 712px;}	
	
}

/*	 --	Wide Layout: 1104px. --
		Gutters: 24px.
		Outer margins: 12px -dk
		Inherits styles from: Default Layout.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10      11      12
px      68    160    252    344    436    528    620    712    804    896    988    1080    */

@media only screen and (min-width: 1128px){
	
	.contentspace {
		width: 1104px;				/* 1080 + 24 */	
		}
		#col-one {
			width: 100%;
			}
		#col-two {
			width: 100%;
			float: left;
			margin: 0;
			}	
		#col-three {
			width: 100%;
			float: right;
			margin: 0 0 12px;
			}
		.primary-links {  right: 70%; }
		.secondary-links { left: 70%; }	
		#block-block-3a {
			width: 712px;
			}	
		#block-block-2b {
			width: 712px;
			}	
		#block-block-2c	{ 
			width: 1080px; 
			}
		#block-block-2b ul {
			width: 220px; 	
			}
		#block-block-2c ul	{
			width: 252px;
			}
		.sample, .site { width: 344px; }	
		
		#block-block-3d {
			width: 712px;
			}		
		.quote.end { margin-right: 0; }	
		#quotes {
			width: 1080px; 
			margin-left: 0;
			}	
		.quote { 
			margin: 0 24px 24px 0;
			min-height: 240px; width: 344px;
			}
			.quote blockquote {
				width: 304px;
				}
/*		form#form3 { 		width: 1104px; }		*/
		form#form3 input#Field19 { margin-right: 0 }
		form#form3 input { 	width: 330px; }	
		form#form3 input#Field7,form#form3 textarea#Field10,
		form#form3 textarea#Field15 { width: 1080px;}	
				form#form3 div#fieldfive, 
		form#form3 div#fieldseventeen,
		form#form3 div#fieldnineteen { 	width: 354px; margin-right: 0;}
			form#form3 div#fieldfive { margin-right: 20px; }
		
		
		fieldset#budget, fieldset#timeframe {
			width: 516px; 
			float: left;
			}
			fieldset#timeframe {
				float: right;
				}

		label {
			color: #666;
			display: block; 
			float: left;
			}	
			fieldset {
				width: 1069px;
				}
			fieldset span {
				float: left; width: 160px;
				}
			
			fieldset label {
				float: none;
				width: 160px;
				}
		.about .node {
			-moz-column-count: 3;
			-webkit-column-count: 3;
			column-count: 3;
			width:1080px;
			}
				
				
						
}


/*	 --	Mobile Layout: 320px. --
		Gutters: 24px.
		Outer margins: 12px -dk
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 479px) {
	
	.contentspace {
		width: 276px;			/* 252 from jkorpi + 24 */		
		}
		#banner h1 a { background-position: bottom center;}
		#col-one {
			width: 100%;
			float: left;
			margin: 0 0 12px;
			}
		.about .node {
			-moz-column-count: 1;
				-moz-column-gap: 0;
				-webkit-column-count: 1;
				-webkit-column-gap: 0;
				column-count: 1;
				column-gap: 0;
				width: 252px; 
				}
			.links li a { padding: 6px 10px;}	
		#col-two {
			width: 100%;
			float: left; clear: left;
			margin: 0;
			}
			.work #col-two,
			.work #col-three:before { display: none; }
		#col-three {
			width: 100%;
			float: left; clear: left;
			margin: 0 0 12px;
			}	
		#block-block-3d {
			width: 252px;
			}	
		.caption.right {
			width: 100%;
			margin: 0 0 12px;
			}	
			#almost-first .block h2 {
				padding-top: 40px;
				}
					
		#banner h1 { top: 32px; }
		#banner .links { top: 0; background: none; border: none;  }
		.primary-links {  right: 50%; border-radius: 0; }
		#banner .primary-links { min-width: 140px;}
		.secondary-links { left: 50%; border-radius: 0; }	
		#node-1 h3 { font-size: 300%; }
		#node-1 p { text-align: justify;}
		#block-block-3d {
			width: 252px;
			}
		.logo, .logo h4 {
			width: 251px;
			}	
		
		#samples { 
			height: 140px;
			width: 254px;
			padding:12px 3px 30px;
			margin-left: 0;
		 	}
			#samples ul {
				margin: 0 3px 6px;
				}
		#block-block-2a {
			left: -24px; top: -380px;
			}
		#block-block-2b { float: none; margin-top: 0;}	
		#block-block-3a { padding-top: 0; }
		#block-block-3b { float: none; }
		#block-block-3a,
		#block-block-2b,
		#block-block-3b,
		#block-block-3c {
			width: 252px;
			}
		#block-block-2b ul {
			width: 252px; text-align: center;	
			}
		.sample, .site { 
			width: 252px; height: 120px;
			}	
			.sample .content { display: none;}
			.site { background-position: -42px top; }
		.sample:hover .content { z-index: 2; }
		#quotes {
			width: 252px; 
			}
		.quote { width: 252px; }
		.quote blockquote { width: 212px; }
		.quote blockquote:before { left: 12px; }	
		.quote blockquote:after { left: 38px; }	
		.quote p { margin-left: 72px; }
		
		.nottall img { margin-top: 55px;}
		
		.ftr-strip { display: none; }
		#ftr-phone { clear: both; }	
		#footer p { text-align: center;}	
		#footer .left, #footer .right { float: none; }		
		#block-block-3b h2 { clear: left;}
		#block-block-2a	{
			z-index: 100;
			display: block; 
			position: relative; top: 0; left: 0;
			width: 252px; margin-top: 24px;
			padding: 0;
		  background: none;	
		  border-bottom: 24px solid transparent;	
		     -moz-border-radius: 0; 
		  -webkit-border-radius: 0; 
		          border-radius: 0; 
				     -moz-box-shadow: none;
				  -webkit-box-shadow: none;
				          box-shadow: none;  
			behavior: url(http://supermegadesign.com/lib/PIE.htc);	          
			}
		#block-block-2a	.content {
			width: 252px;
			background: none; 
			-moz-transform: none;
			-webkit-transform: none;
			transform: none;
			 -moz-border-radius: 0; 
		  -webkit-border-radius: 0; 
		          border-radius: 0; 
				     -moz-box-shadow: none;
				  -webkit-box-shadow: none; 
				          box-shadow: none; 
			behavior: url(http://supermegadesign.com/lib/PIE.htc);	          
			}
			#block-block-2a	.content blockquote {
				display: block; float: none;
				margin: 0; padding: 0; width: 252px;
				color: black; 
				text-align: center;
				font-family: "refrigerator-deluxe-1","refrigerator-deluxe-2","Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 125%;
				margin-bottom: 0;
				position: relative;
				text-rendering: optimizeLegibility; 
				text-shadow: 0 1px 0 #cccccc;
				} 
			#block-block-2a	.content p {
				padding: 0; margin: 1.5em 0;
				 font-family: "refrigerator-deluxe-1","refrigerator-deluxe-2","Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
				 font-size: 80%; color: #333; text-align: center;
				}
				#block-block-3a {
					background-position: right: 70px; }
			#ftr-phone { margin-top: 24px; }
			h2#dropdown {
				margin-bottom: 100px;
				}
		
/*		form#form3 { 		width: 276px; }		*/
		form#form3 input { 	width: 262px; }	
		form#form3 textarea#Field10, form#form3 textarea#Field15,
		fieldset,
		form#form3 input#Field7 { width: 262px;}	
form#form3 div#fieldfive, form#form3 div#fieldseventeen,
form#form3 div#fieldnineteen, form#form3 div#fieldseven {	
		width: 286px;
}			
		form#form3 div#fieldnineteen { float: left;}
		form#form3 textarea#Field10, form#form3 textarea#Field15 {
			height: 3em;
			}
			form#form3 input#Field19 { float: left; margin-right: 0 }
		form#form3 input#phone { float: left; margin-right: 0 }
		
		form#form3 fieldset input { margin-bottom: 0 }
		
		fieldset label { 
			display: block;
			} 
		form#form3 textarea#Field15 {
			font-size: 0.9em;
			}
		legend {  
		  position: relative; top:0;

			}	
	#block-block-3c .photograph,
	.photograph {

					transform: rotate(0);
			-webkit-transform: rotate(0);
			   -moz-transform: rotate(0);
		}
			
h3 span#num { display: inline; }
h3 span#mega { display: none; }			
			
		
}


/*	--	Wide Mobile Layout: 460px. --
		Gutters: 24px.
		Outer margins: 12px -dk
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	.contentspace {
		width: 460px;			/* 436 from jkorpi + 24 */	
		}
		#col-one {
			width: 100%;
			margin: 0;
			}
			#col-one .node {
				width: 436px; 
				}
			#samples { left: 60px; }	
		.links li a { padding: 6px 10px;}	
		#banner h1 a { background-position: bottom center;}
		.about .node {
			-moz-column-count: 1;
				-moz-column-gap: 0;
				-webkit-column-count: 1;
				-webkit-column-gap: 0;
				column-count: 1;
				column-gap: 0;
				width: 436px; 
				}
			
		#col-two, #col-three {
			width: 100%;
			float: left; 
			margin: 0;
			}
					.work #col-two,
			.work #col-three:before { display: none; }	
		#almost-first .block {
			margin: 0 0 2em;	
			}
		#banner h1 { top: 32px; }
		#banner .links { top: 0; background: none; border: none;}
		.primary-links {  right: 50%; border-radius: 0; }
		.secondary-links { left: 50%; border-radius: 0; }	
		#block-block-3d {
			width: 436px;
			}
		.logo, .logo h4 {
			width: 205px;
			}	
		#samples { 
			position: relative; 
			width: 412px; height: 240px;
			float: none;
			left: 0;
			margin: 0 0 12px;
			}
		#block-block-2a {
			left: 150px;
			top: 280px;
			}
		#block-block-2b { float: none; }	
		#block-block-3a,
		#block-block-2b, #block-block-2c,
		#block-block-3b,
		#block-block-3c {
			width: 436px;
			float: none;
			}
			#block-block-3a { margin-top: 0; }	
			.front #block-block-3b { margin-top: 24px;}
		#block-block-2b h2 {
			text-align: left;
			}
		#block-block-2b ul {
			width: 160px; clear: left;
			}
			#block-block-2c ul { width: 136px; }
		#block-block-3a h2{
			padding-right: 140px;
			}
		.sample, .site { height: 160px; }
		.sample .content { height: 10px; padding-top: 0;}
		.sample:hover .content { z-index: 2; }
 		.quote { width: 436px; margin-bottom: 12px;}	
		.quote blockquote { width: 396px; }
		.ftr-strip { display: none; }		
				#block-block-3b h2 { clear: left;}

		#block-block-2a	{
			z-index: 100;
			display: block; 
			width: 240px; margin-top: 12px;
			padding: 0; top: 12px; left: 200px;
		  background: none;		
		     -moz-border-radius: 0; 
		  -webkit-border-radius: 0; 
		          border-radius: 0; 
				     -moz-box-shadow: none;
				  -webkit-box-shadow: none;
				          box-shadow: none; 
			behavior: url(http://supermegadesign.com/lib/PIE.htc);	           
	}
#block-block-2a	.content {
	width: 252px;
	background: none; 
	text-align: left;
	-moz-transform: none;
	-webkit-transform: none;
	transform: none;
	 -moz-border-radius: 0; 
  -webkit-border-radius: 0; 
          border-radius: 0; 
		     -moz-box-shadow: none;
		  -webkit-box-shadow: none; 
		          box-shadow: none; 
	behavior: url(http://supermegadesign.com/lib/PIE.htc);	          
	}
	#block-block-2a	.content blockquote {
		display: block; float: left;
		padding: 24px 0 0;
		color: black;
		font-family: "refrigerator-deluxe-1","refrigerator-deluxe-2","Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 125%;
		margin-bottom: 0;
		position: relative;
		text-rendering: optimizeLegibility; 
		text-shadow: 0 1px 0 #999;
		} 
	#block-block-2a	.content p {
		padding: 0 30px; margin: 1.5em 0;
		 font-family: "refrigerator-deluxe-1","refrigerator-deluxe-2","Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
		 font-size: 90%;
		}
		
/*		form#form3 { 		width: 436px; }	*/
		form#form3 input { 	width: 422px; }	
		form#form3 textarea#Field10, form#form3 textarea#Field15,
		fieldset,
		form#form3 input#Field15,
		form#form3 input#Field7 { width: 422px;}	
form#form3 div#fieldfive, form#form3 div#fieldseventeen,
form#form3 div#fieldnineteen {	
		width: 355px;
		}
		form#form3 div#fieldseven, label#title7 { width: 355px;}	
		form#form3 div#fieldnineteen { margin-right: 0;  float: none}
		form#form3 input#Field19 { float: left; margin-right: 0 }
		label {
			width: 160px;
			float: left;
			}	
			fieldset label {
				float: none;
				}		
		legend {  
		  position: relative; top:0;
		 /* color: #86100E; */
			}	
			
		#footer .left { width: 120px;}
		#footer .right { width: 100px;}	
	#block-block-3c .photograph,
	.photograph {

					transform: rotate(0);
			-webkit-transform: rotate(0);
			   -moz-transform: rotate(0);
		}			
			
h3 span#num { display: inline; }
h3 span#mega { display: none; }			
						
#block-block-3a {
	background: url(img/hoodornament4.png) no-repeat 20em top; }

						
}