* { font-size: 100%; }
html, body, ul, ol, li, dl, dt, dd, p, h1, h2, h3, h4, h5, h6, blockquote, form, fieldset, legend, table, td, th { margin: 0; padding: 0; }

img { border: 0; }

html, body { height: 100%; }

body {
	background: #eee;
	font: 75%/1.4 Georgia, Arial, Helvetica, sans-serif;
}

h1, h2, h3 { font-size: 100%; }

a:link { color: #09f; }
a:hover,
a.hover { color: #0c3 !important; }


.core-layout { max-width: 1400px; position: relative; }

#layout { min-height: 100%; -height: 100%; }

#content { float: right; width: 80%; position: relative; }
#content .wide-text { width: 66%; }
#content .text { width: 45%; padding-right: 5%; }
#content p { margin-bottom: 1em; }

#sidebar { width: 20%; padding-top: 2em; }

#footer-clear { clear: both; height: 9em; }
#footer { margin-top: -8em;}




#header { padding-left: 20%; padding-top: 2.2em; position: relative; margin-bottom: 4.2em; }

#header h1,
#header h2 { font-weight: normal; }

#header h1 { margin-bottom: 0.5em; }
#header h1 b { background: #000; color: #fff; font-weight_: normal; padding: 0.1em 0.4em; position: relative; left: -0.4em; }

#header h2 { font-size: 150%; display: inline; }
#header h2 .design {
	color: #fff;
	font-weight: normal;
	background: #000;
	padding: 0.2em 0.3em;
	position: relative;
	top: 1px;
}

#header h2 .env {
	background: url(external.gif) 100% 0 no-repeat;
	padding-right: 12px;
}

#header h2 a { position: relative; top: 1px; }
#header h2 a span,
#header h2 b span { position: relative; top: -1px; }

#header .social { position: absolute; left: 80%; margin-top: 0.2em; }
#header .social a { margin-right: 12px; }
#logo {
	position: absolute;
	left: 0;
	top: 24px;
	width: 20%;
	height: 50px;
	background: url(logo.png) 100% 0 no-repeat;
}



#title { float: right; width: 80%; margin-bottom: 1em; line-height: 1.2; }
#title h1 { font-size: 2em; font-weight: normal; display: inline; margin-right: 0.5em; }

#title .switcher { margin-right: 0.3em; }
#title b.switcher { background: #fff; padding: 1px 0.4em; }



#sidebar .wrapper { padding-left: 30px; }
#sidebar h2 { font-weight: normal; }

#sidebar h2,
#sidebar li { margin-bottom: 0.5em; }

#sidebar ul { list-style-type: none; margin-bottom: 1.75em; }
#sidebar li.selected b { color: #f0f; }



p.link { margin-top: 1.2em; line-height: 1.5; }
p.link a img { float: left; margin-right: 5px; }


.picture { position: relative; margin-bottom: 4em; margin-top: 2em; }
.picture .legend {
	position: absolute;
	left: 515px;
	width: 18%;
	line-height: 1.2;
	color: #555;
}

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


.design-preview {
	float: left;
	clear: both;
	margin-bottom: 3em;
	border: 1px solid #9a9a9a;
}

.with-js .design-preview { position: absolute; margin-bottom: 0; }

.design-preview h3 {
	background: #eee;
	margin: 0;
	font-size:75%;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #9f9f9f;
	border-bottom: 1px solid #9a9a9a;
	text-align: center;
	-white-space: nowrap;
}

.design-preview a { float_: left; }
.design-preview a img { display: block; }

.design-preview .bg { background: #fff; }

.design-preview-inited h3 {
	background: #eee url(drag-arrows.gif) 100% 50% no-repeat;

	cursor: move;
}

.drag { border-color: #00cc33; }
.drag h3 { background-image: url(drag-arrows-active.gif); }



#footer .contact { float: left; width: 20%; margin-left: 20%; }

#footer .copyright { float: right; width: 20%; margin-right: 20%; }

#footer .corg { padding: 0 40%; }


#photo {
	background: url(p-bg.gif) repeat-x;
	width: 100%;
	margin-top: -290px;
	height: 290px;
	overflow: hidden;
}

#photo .mask {
	background: #eee;
	float: left;
	height: 290px;
	width: 60%;
}

#photo .photo {
	float: right;
	width: 40%;
	height: 290px;
	background: url(p.jpg) no-repeat;
}
#photo .photo img { position: absolute; top: -10000px; }