/*
		MADDON.NET
		===================================
		web design and development
		by Madeline Ong (http://maddon.net)
		===================================
		Date: May 2009
*/

/*===== CSS RESET (thanks to meyerweb.com) =====*/

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;
	vertical-align: baseline;
}

:focus { outline: 0; }

body { line-height: 1; color: black; background: white; }

ol, ul { list-style: none; }

table { border-collapse: separate; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; }

blockquote:before, blockquote:after,
q:before, q:after { content: ""; }

blockquote, q { quotes: "" ""; }


/*===== MAIN STRUCTURE =====*/

body { color: #333333; }

#head {
	width: 100%;
	height: 463px;
	background: #FFFFFF url(headerpattern.gif) repeat top center;
}

#header {
	width: 100%;
	height: 463px;
	background: url(headerbg.jpg) no-repeat top center;
}

#header h1 { display: none; }

#container {
	width: 100%;
	background: #FFFFFF url(containerpattern.gif) repeat top center;
	border-top: 2px solid #FFFFFF;
	border-bottom: 2px solid #FFFFFF;
}

#navigation, #maincontent { margin: 0 auto; clear: both; }

#navigation { width: 960px; }

#maincontent { width: 820px; }

#foot {
	width: 100%;
	height: 410px;
	background: #FFFFFF url(headerpattern.gif) repeat top center;
}

#footer {
	width: 100%;
	height: 410px;
	background: url(footerbg.jpg) no-repeat top center;
}

#footer span { display: none; }

/*===== COMMON TAGS =====*/

p a {
	color: #7F1F0F;
	text-decoration: none;
	border-bottom: 1px solid #CFCFCF;
}

p a:hover { color: #CF5F33; }

.content ul {
	margin-bottom: 1em;
	list-style: none;
	margin-left: 12px;
}

.content li {
	overflow: hidden;
	height: 100%;
	padding: 0 0 0 15px;
	background: url(bullet.png) no-repeat 0 8px;
}

#services p { margin: 0; }

acronym { border-bottom: 1px dotted black; cursor: help; }

strong { font-weight: bold; }

em { font-style: italic; }

/*===== NAVIGATION =====*/

#navigation ul {
	float: right;
	width: 370px;
	margin: 10px 0;
}

#navigation li { display: inline; }

#navigation li a {
	float: left;
	height: 0;
	padding-top: 20px;
	margin: 0 10px;
	overflow: hidden;
	border: none;
}

#navigation #home-link a { background: url(sprites.png) 0 0; width: 50px; }

#navigation #home-link a:hover { background: url(sprites.png) 0 -40px; }

#navigation #about-link a { background: url(sprites.png) -100px 0; width: 50px; }

#navigation #about-link a:hover { background: url(sprites.png) -100px -40px; }

#navigation #services-link a { background: url(sprites.png) -200px 0; width: 65px; }

#navigation #services-link a:hover { background: url(sprites.png) -200px -40px; }

#navigation #work-link a { background: url(sprites.png) -300px 0; width: 45px; }

#navigation #work-link a:hover { background: url(sprites.png) -300px -40px; }

#navigation #contact-link a { background: url(sprites.png) -400px 0; width: 60px; }

#navigation #contact-link a:hover { background: url(sprites.png) -400px -40px; }


/*===== MAIN CONTENT =====*/

#maincontent h2 { display: none; }

.blockhead { position: relative; top: 15px; height: 45px; width: 210px; }

#home .blockhead { background: url(sprites.png) no-repeat 0 -110px;	width: 330px; }

#about .blockhead {	background: url(sprites.png) no-repeat 0 -170px; }

#services .blockhead { background: url(sprites.png) no-repeat 0 -290px; }

#work .blockhead { background: url(sprites.png) no-repeat -300px -170px; }

#contact .blockhead { background: url(sprites.png) no-repeat -300px -230px; }

.part-1-2 { width: 48%; float: left; }

.part-2-2 { width: 48%; float: right; }

.part-1-3 { width: 245px; float: left; }

.part-2-3 { width: 245px; float: left; margin: 0 20px; }

.part-3-3 { width: 245px; float: left; }

.content {
	background: #FFFFFF url(contentpattern.gif);
	padding: 20px;
	border-bottom: 5px solid #EFEFEF;
}

.content:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }


/*===== BLOCK LINKS =====*/

.block-links {
	height: 30px;
	width: 95px;
	width: 100%;
	margin-bottom: 10px;
}

#contact .block-links { margin-bottom: 30px; }

.block-links ul { float: right; margin-top: 0px; }

.block-links li { display: inline; }

.block-links li a {
	float: left;
	height: 0;
	padding-top: 30px;
	margin: 0;
	overflow: hidden;
	border: none;
}

.block-links .top-link a {
	background: url(sprites.png) -300px -300px;
	width: 30px;
}

.block-links .top-link a:hover { background: url(sprites.png) -300px -360px; }

.block-links .next-link a {
	background: url(sprites.png) -400px -300px;
	width: 65px;
}

.block-links .next-link a:hover { background: url(sprites.png) -400px -360px; }


/*===== BODY TEXT =====*/

body { font: 14px/1.6em Georgia, "Times New Roman", serif; }

p { margin-bottom: 1.3em; }

p.special {
	font-size: 18px;
	line-height: 1.6em;
	float: left;
	width: 330px;
	font-style: italic;
	text-align: right;
	margin: -3px 20px 0 0;
}

p.note {
	font-size: 12px;
	font-style: italic;
}

h3 {
	font: italic 18px/1.6em Georgia, "Times New Roman", serif;
	font-weight: normal;
}


/*===== FORMS =====*/

/* graceful degradation */

#chooseForm,
#clientForm,
#agencyForm,
.formDesc {
	display: none;
}

h3.formHeading {
	font: normal 15px/1.6em Georgia, "Times New Roman", serif;
	border-bottom: 1px solid #6f6f6f;
	padding-bottom: 3px;
	margin-top: 15px;
	margin-bottom: 15px;
}

p.formNote {
	font-style: italic;
	color: #5f5f5f;
	clear: both;
}

label {
	width: 170px;
	float: left;
	text-align: right;
	font-size: 15px;
	line-height: 28px;
	font-style: italic;
	padding-right: 15px;
}

#addressee-label, #spam-label, label.smaller {
	font-size: 14px;
	font-style: normal;
	line-height: 1em;
	font-variant: small-caps;
}

label.checkbox {
	float: none;	
	display: inline-block;
	text-align: left;
	width: 310px;
	line-height: 18px;
	padding: 0 0 0 5px;
	
}

input.checkbox {
	display: inline;
	width: auto;
	margin: 2px 0 0 0;
	vertical-align: top;
}

ul.checkboxList, ul.formList { margin: 0; }

ul.checkboxList li {
	background: none;
	margin: 0 0 15px 0;
	padding: 0;
}

ul.formList li {
	background: none;
	margin: 0 0 8px 0;
	padding: 0;
}


.inputGroup {
	width: 340px;
	display: block;
	margin-left: 186px;
	
}

input, textarea, select {
	background: url(lines.gif);
	border: none;
	width: 330px;
	padding: 5px;
	margin-bottom: 3px;
	font: 15px/1.6em Georgia, "Times New Roman", serif;
}

select { width: 340px !important; }

textarea { height: 110px; line-height: 18px; margin-bottom: 0 !important;}
textarea.medium { height: 57px; }

input.button {
	width: 164px;
	background: url(lines.gif);
	color: #4F4F4F;
	border-width: 2px;
	border-style: solid;
	border-left-color: #EFEFEF;
	border-top-color: #EFEFEF;
	border-right-color: #CFCFCF;
	border-bottom-color: #CFCFCF;
	margin-left: 10px;
	font-size: 18px;
	cursor: pointer;
}

input.submit-button { margin-left: 185px; }

.form-container { width: 530px; float: right; }
 
.contact-info { width: 230px; float: left; margin-right: 20px; }

.pform { margin: 0; padding: 0; clear: both; }

p.impt {
	padding: 6px 9px;
	background: #FFFDDF;
	border: 1px solid #FFED2F;
	font-style: italic;
	margin-bottom: 0;
	margin-top: 1.3em;
}

p.impt.php {
	margin-bottom: 1.3em;
	margin-top: 0;
}

.success {
	background: #e7f7d3 !important;
	border: 1px solid #089F00 !important;
}

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

/*===== RECENT WORK =====*/

#work .content { padding: 0; }

.work-block { clear: both; padding: 20px; }

.work-block:after { content: ""; display: block; height: 0; clear: both; }

.work-block-even { background: url(lines.gif); }

.work-block-odd { background: url(texture.jpg); }

#wb-pnr .thumbnail { float: left; }
#wb-pnr .description { width: 460px; margin-left: 320px; }

#wb-hwh .thumbnail,
#wb-maddon .thumbnail,
#wb-vt .thumbnail,
#wb-ir .thumbnail
{ float: right; }

#wb-hwh .description,
#wb-maddon .description,
#wb-vt .description,
#wb-ir .description
{ width: 460px; }

#wb-as .thumbnail,
#wb-ml .thumbnail,
#wb-ao .thumbnail,
#wb-ops .thumbnail
{ float: left; }

#wb-as .description,
#wb-ml .description,
#wb-ao .description,
#wb-ops .description
{ width: 460px; margin-left: 320px; }

#wb-zkip img { padding: 0 5px 8px 5px; }
#wb-zkip .thumb-section { text-align: center; }
#wb-zkip .description { }

#wb-stud img { padding: 0 5px 0 5px; }
#wb-stud .thumb-section { text-align: center; }
#wb-stud .description { }

#wb-maddon .thumbnail { border: 1px solid #FFFFFF; }
#wb-ml .thumbnail { margin-top: 10px; }

#work h3 { text-align: center; }

p.work-label {
	background: url(divider.png) no-repeat bottom center;
	padding-bottom: 35px;
	margin-bottom: 10px;
	font-variant: small-caps;
	text-align: center;
	font-size: 12px;
	line-height: 1.6em;
}