/*   
Theme Name: squaredesign
Theme URI: http://squaredesign.com
Description: squaredesign.com template
Author: michael susz
Author URI: http://squaredesign.com
Version: 2.5
.
this is the second wordpress template for squaredesign.com
(c) 2010 SQUAREDESIGN, all rights reserved.

                                    _           _
 ___  __ _ _   _  __ _ _ __ ___  __| | ___  ___(_) __ _ _ __
/ __|/ _` | | | |/ _` | '__/ _ \/ _` |/ _ \/ __| |/ _` | '_ \
\__ \ (_| | |_| | (_| | | |  __/ (_| |  __/\__ \ | (_| | | | |
|___/\__, |\____|\__,_|_|  \___|\__,_|\___||___/_|\__, |_| |_|
        \__|                                      |___/

*/

/* debug selectors: remove this space to activate->* /
#container {background:red}
#banner {background:yellow}
#logo {background:fuchsia}
#page {background:purple}
#content {background:green}
#sidebar {background:dodger-blue}
#footer {background:blue}/* */
/* end debug selectors */

/* ================ overrides from reset or grid =============== */



/* ================ default styles for elements ================ */
body {
	color:#333;
	width:100%;
	height:100%;
	line-height:1.2;
}

h1, h2, h3, h4, h5, h6 {
	font-weight:normal;
	color:#111;
	line-height:1.2;
	text-shadow:0px 0px 3px #ddd;
}

h1 {font-size: 170%;}
h2 {font-size: 142%;}
h3 {font-size: 130%;}
h4 {font-size: 115%;}
h5 {font-size: 105%;}
h6 {font-size: 100%;}


h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {text-decoration:none;color:#111;}
h1 a:hover, h2 a:hover, h3 a:hover,
h4 a:hover, h5 a:hover, h6 a:hover {text-decoration:underline;}

blockquote {
	padding-left:18px;
	margin-bottom:0.5em;
	background:transparent url('images/white.40-trans.png') top left repeat-y;
}
a {color:#222;}
img {border:none;}
em {font-style: italic; padding-right:0.1em;}
strong {font-weight: bold;}

.ie6message {
	display:none;
	border-bottom:1px solid #111;
	background:#ccc;
	color:#000;
}

/* =============== widely scoped utility classes =============== */
.hide {display:none;visibility:hidden;}

/* floating elements left/right */
.left, ul.left li, 
img.alignleft {float:left;}
	img.alignleft {margin-right: 8px; margin-bottom:8px;}

.right, div.right, input.right,
img.alignright {float:right;}
	img.alignright {margin-left: 8px; margin-bottom:8px;}

/* aligning contents left/right */
.alignleft {text-align:left;}
td.left, th.left, p.left {float:none;text-align:left;}

.alignright {text-align:right;}
div.alignright, p.alignright, ul.alignright, li.alignright {text-align:right;}
td.right,th.right, p.right {float:none;text-align:right;}

/* verical align for table elements */
td.bottom, th.bottom {vertical-align:bottom !important;}
td.top, th.top {vertical-align:top !important;}
td.middle, th.middle {vertical-align:middle !important;}

/* centering elements vs. centering content */
.aligncenter {text-align:center;}
.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* intuitive classes that add layout to elements */
.padleft {margin-left:1em;}
.padright {margin-right:1em;}
.nopad, img.alignleft.nopad, img.alignright.nopad {padding:0;margin:0;}
.auto {width:auto !important;}
.justify {text-align:justify;}
.block {display:block !important;}
.inline, ul.inline li {display:inline;}
ul.inline li {margin-left:0.5em;}
ul.inline.border li {margin-left:0.2em;padding-left:0.3em;border-left-width:1px;border-left-style:dotted;}
ul.inline.border li:first-child {border-left-width:0;}
.smaller {font-size:88%;}
.min1 {min-height:1em;}

.normal {font-weight:normal;}
.italic, .cite {font-style:italic;}
.cite {font-size:0.9em;}

/* clearing */
.clearleft {clear:left;}
.clearright {clear:right;}
.clearboth {clear:both;}

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

.pad {margin-top:1em;}

.half, .third, .twothirds, .quarter, .threequarters,
.fifth, .twofifths, .threefifths, .fourfifths {
						float:left;
						margin-left:2%;}

div.half				{width:48%;}

div.third				{width:31%;}
	div.twothirds		{width:64%;}

div.quarter				{width:23%;}
	div.threequarters	{width:73%;}

div.fifth				{width:18%;}
	div.twofifths		{width:38%;}
	div.threefifths		{width:59%;}
	div.fourfifths		{width:78%;}

.first					{margin-left:0;clear:left;}

div.full				{width:98%;}

/* ================ buttons and forms ========================== */


/* ================ sprites, icons, glyphs, design ============= */
.glyph {
	font-family:sans-serif;
	font-weight:normal;
	font-size:110%;
	line-height:.7;
	color:#777;
}

#banner .inner {
	background:transparent url('images/white.90-trans.png') top left;
}

#footer {
	background:transparent url('images/white.80-trans.png') top left;
}

#banner {
	overflow:hidden;
	padding-bottom:8px;
}

#banner .inner {
	width:105%;
	border-bottom:4px solid #222;
	-moz-box-shadow: 0px 4px 7px #555;
	-webkit-box-shadow: 0px 4px 7px #555;
	box-shadow: 0px 4px 7px #555;
}

#footer {
	border-top:3px solid #333;
}

.icon-small, img.preview {
	border:3px solid #333;
	cursor:pointer;
}

/* box styles */
.box {
	width:100%;
	line-height:normal;
	margin-bottom:8px;
	border:2px solid #444;
	background:transparent url('images/white.80-trans.png') top left;
	/* hey look - a couple of browsers support this now! :) */
	-moz-box-shadow: 3px 3px 7px #555;
	-webkit-box-shadow: 3px 3px 7px #555;
	-o-box-shadow: 3px 3px 7px #555;
	box-shadow: 3px 3px 7px #555;
}

.half .box, .third .box, .twothirds .box, .quarter .box, .threequarters .box,
.fifth .box, .twofifths .box, .threefifths .box, .fourfifths .box {
	width:98%;
}

.box.title {
	text-indent:6px;
	line-height:1.5;
	background:transparent url('images/white.90-trans.png') top left;
}

.box .title {
	padding:3px 6px 1px;
	border-bottom:1px solid #999;
	background:transparent url('images/white.50-trans.png') top left;
}

.box.title, .box .title {text-shadow:1px 1px 2px #aaa;}

.box hr {display:none;}

.box.intro .contents {
	text-align:center;
	font-style:italic;
	font-size:1.1em;
}

.home .box.intro .title {
	text-align:center;
	font-style:italic;
	background:transparent url('images/white.70-trans.png') top left;
}

.box .contents .right {
	font-size:.8em;
	font-weight:normal;
	font-style:italic;
	line-height:1.4;
}

.box .contents, .box .data, .box .comments, .box .respond, .navigation a {
	padding:6px;
}

.box .contents ul {
	margin:0 0.5em 0.5em 30px;
	list-style-type:square;
}

.box .contents ul li {
	margin-bottom:0.5em;
}

.box .contents ol {
	margin:0 0.5em 0.5em 38px;
	list-style-type:decimal;
}

.box .contents p, .box .contents .gform_wrapper {
	margin:0 0.5em 0.5em;
	line-height:1.2;
}

.box .contents a.more-link {text-decoration:none;}
.box .contents a.more-link:hover {text-decoration:underline;}

.box .contents dt {
	font-size:1.2em;
	font-weight:bold;
}

.box .contents h2 {
	clear:left;
}

.box .data {
	margin-top:0.2em;
	margin-right:1%;
	padding:0.2em;
	font-size:0.9em;
	color:#777;
	position:relative;
	bottom:0;
}

#sidebar .box ul {
	list-style-type:square;
	color:#555;
}

/* end box styles */

/* homepage box overrides */
#footer .box .title {
	text-align:left;
	font-size:150%;
	line-height:1;
	background:none;
	border-bottom:none;
}

#footer .box {
	display:inline-block;
	vertical-align:top;
	width:17%;
	margin-left:2%;
	margin-bottom:2%;
	border:0;
	background:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
}

#footer .box ul {
	margin-left:0;
	padding-top:1px;
	padding-left:8px;
}

#footer .box ul li {
	display:block;
	text-align:left;
	border-left:0;
	margin-left:0;
	margin-bottom:3px;
	padding-left:0;
}

#footer .box a {text-decoration:none;}
#footer .box a:hover {text-decoration:underline;}

/* end homepage box overrides */

/* style necessary for background squares */
.square {
	float:left;
	margin:0 auto;
	border-right:1px solid #999;
	border-bottom:1px solid #999;
}


/* ================ typography ================================= */

/*
@font-face {
	font-family: 'Puritan 2.0 Normal';
	src: url('Puritan_Regular.eot');
	src: local('Puritan 2.0 Normal'), local('Puritan2'), url('Puritan_Regular.woff') format('woff'), url('Puritan_Regular.otf') format('opentype'), url('Puritan_Regular.svg#Puritan2') format('svg');
}
*/

@font-face {
	font-family: 'Puritan2.0Normal';
	src: url('Puritan_Regular.eot');
	src: local('Puritan 2.0 Normal'), local('Puritan2'), url('Puritan_Regular.woff') format('woff'), url('Puritan_Regular.otf') format('opentype'), url('Puritan_Regular.svg#Puritan2') format('svg');
}

body {
	font-family: 'Puritan2.0Normal', 'Trebuchet MS', Helvetica, Tahoma, sans-serif;
	font-size:16px;
}

body.single #content {
	font-size:18px;
}

body.category-projects #content {
	width:100%;
}

#title {
	display:block;
	height:60px;
	width:540px;
	margin:0 auto;
	font-size:50px;
	letter-spacing:10px;
	text-transform:uppercase;
	text-indent:-9999px;
	background:transparent url('images/title.png') center 15px no-repeat;
}

#footer {font-size:0.85em;}

.navigation a {
	text-shadow:1px 1px 3px #fff;
}

/* ================ background squares and effects ============= */
body {
	background:#D4E7B8; /* #D4E7B8 */
}

#effects {
	position:fixed;
	top:0;
	left:0;
	width:105%;
	height:100%;/*320px;*/
	text-align:center;
	overflow:hidden;
	background:#89d74c;/* #89d74c */
}

#effects2 {
	position:fixed;
	top:0;
	left:0;
	width:105%;
	height:100%;/*320px;*/
	overflow:hidden;
	background:transparent url("images/gradient.png") left top repeat-x;
}

/* ================ navigation elements ======================== */


/* ================ page containers and layout ================= */
#container {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	text-align:center;
}

#banner, #footer {
	width:100%;
	display:block;
	margin:0 auto;
	text-align:center;
}

#page {
	width:92%;
	min-width:840px;
	max-width:1180px;
	margin:1% auto 3px;
	text-align:left;
}

#content, #subcontent {
	margin:0 2%;
}

#sidebar {margin:0;}

#content {
	width:70%; /* 70%; */
	float:left;
	text-align:justify;
}

.home #content {
	width:auto;
	float:none;
}

#intro {
	margin-bottom:1em;
	
}

#subcontent {
	display:block;
	width:100%;
	clear:both;
}

#footer {
	left:0;
	bottom:0;
	margin-top:20px;
	padding:1% 0 .5%;
	text-align:center;
}

#footer.fixed {
	position:absolute;
	bottom:0px;
}

#sidebar {
	float:right;
	width:26%;
	margin-left:0;
	line-height:normal;
}

.navigation {
	text-align:right;
	line-height:1.5;
	margin-bottom:2%;
	clear:left;
}

.navigation a {text-decoration:none;}
.navigation a:hover,
.navigation a:focus {text-decoration:underline;}

#sidebar .box ul {
	margin-left:20px;
	padding:6px;
}

#sidebar .box ul li {
	margin-bottom:2px;
}

#toolsheader a {cursor:pointer;}

#text-339374831 .widgettitle {
	cursor:pointer;
}

.icon-square, .icon-small {
	float:left;
	clear:left;
	margin:0 10px 10px 0;
}

.icon-square {
	height:75px;
	width:75px;
}

.icon-small {
	width:240px;
	height:180px;
}


.contact-form legend {
	margin-bottom:0.2em;
	font-size:1.2em;
	font-weight:bold;
}

.form-input {
		margin-bottom:0.5em;
}

.contact-form .form-submit {
	margin-top:0.2em;
	float:right;
	clear:left;
}

.formcontainer .required {
	font-weight:bold;
	color:#575;
}

.more-link {
	margin-top:0.5em;
	float:right;
}

.comments, .respond {clear:both;}

.nocomments {display:none;}



/* ================ page-specific elements ===================== */

#work {
	overflow:hidden;
}

#work #icons {
	width:98%;
	text-align:center;
}

#work #icons a {
	display:inline-block;
	width:75px;
	height:75px;
	margin:10px;
	/* these should match the .box shadow and border */
	border:2px solid #555;
	-moz-box-shadow: 2px 2px 5px #6a6a6a;
	-webkit-box-shadow: 2px 2px 5px #6a6a6a;
	box-shadow: 2px 2px 5px #6a6a6a;
}

#work #icons a:hover {

	border:3px solid #333;
	margin:9px;
	-moz-box-shadow: 4px 4px 10px #3a3a3a;
	-webkit-box-shadow: 4px 4px 10px #3a3a3a;
	box-shadow: 4px 4px 10px #3a3a3a;
}

#work .box, #work .box .item {
	height:19em;
	overflow:hidden;
}


#work .box .item {
	clear:both;
	text-align:left;
}

#work .item .preview, #work .item .contents {
}

#work .item .contents {
	text-align:justify;
	margin-left:310px;
}

#work .item .preview {
	float:left;
	padding:10px 5px;
	min-width:310px;
	text-align:right;
}

#work .item .preview img {
	margin:0 auto;
	border:2px solid #777;
}



#work .item .data {
	float:left;
	font-size:0.9em;
	color:#777;
}

.error .contents {
	margin:20px 20px 30px 260px;
}

.error .contents dl {
	margin:10px;
}

.error .contents img {
	padding-right:20px;
}

/* ================ utility / referenced code ================== */