/*  style.css
	Daniel Castellon
	The stylesheet for Web2Studios.com
*/

* {
	margin: 0;
	padding: 0;
}
body {
	font-family: Trebuchet MS, Helvetica, sans-serif;
	background-color: #4e98bf;
}
a img {
	border: none;
}
a {
	outline: 0;
}

#header_container {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	max-height: 134px;
	background: url('images/header.png') top left repeat-x;
}

#header {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 940px;
	height: 134px;
}

#logo {
	position: absolute;
	top: 54px;
	left: 0px;
	width: 240px;
	height: 31px;
	background: url('images/logo.png');
}

ul#nav {
	position: relative;
	float: right;
	top: 54px;
	right: 0px;
	font-size: 20px;
}
ul#nav li {
	position: relative;
	float: left;
	display: inline;
	padding-left: 24px;
}
ul#nav li a, ul#nav li a:active {
	float: left;
	color: #6cb3d9;
	text-decoration: none;
	outline: 0;
}
ul#nav li a#active {
	color: #fff !important;
}
ul#nav li a:hover {
	color: #fff !important;
}

#showcase_container {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 293px;
	background: url('images/showcase_back.png') top left repeat-x;
}
#showcase {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 940px;
	height: 320px;
}
#one_of_a_kind {
	position: relative;
	float: right;
	top: 65px;
	right: 33px;
	width: 267px;
	height: 25px;
	background: url('images/one_of_a_kind.png');
	text-indent: -9999px;
}
#showcase_text {
	position: absolute;
	float: right;
	right: 0px;
	top: 100px;
	width: 300px;
	color: #fff;
	font-size: 16px;
	text-align: justify;
}

#content_container {
	position: relative;
	float: left;
	top: 0px;
	left: 0px;
	width: 100%;
	background: url('images/content_back.png') top left repeat-x #fff;
}
#content {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 940px;
	min-height: 400px;
	background: url('images/content_shadow.png') top center no-repeat;
	padding-top: 10px;
	padding-bottom: 53px;
}
#content h1 {
	font-size: 24px;
	font-weight: lighter;
	color: #286e93;
	padding-bottom: 15px;
}
#content h2 {
	font-size: 18px;
	color: #286e93;
}
#content b {
	font-weight: bold;
	font-size: 14px;
	color: #292929;
	width: 640px;
}
#content .hr {
	position: relative;
	float: left;
	width: 100%;
	height: 2px;
	background: url('images/hr.png') top left repeat-x;
}
#content #subtitle {
	position: relative;
	float: right;
	width: 260px;
	top: 8px;
	text-align: justify;
}
#content p {
	position: relative;
	float: left;
	margin-top: 10px;
	font-size: 14px;
	color: #3e3e3e;
	text-align: justify;
}
#content a, #content a:active {
	color: #286e93;
	text-decoration: none;
}
#content a:hover {
	text-decoration: underline;
}


/* columns, often reused on a single page. ex: home page */
.left_column {
	position: relative;
	float: left;
	margin-top: 20px;
	left: 0px;
	width: 300px;
}
.mid_column {
	position: relative;
	float: left;
	margin-top: 20px;
	left: 20px;
	width: 300px;
}
.right_column {
	position: relative;
	float: right;
	margin-top: 20px;
	right: 0px;
	width: 300px;
}

#award {
	position: relative;
	float: left;
	width: 24px;
	height: 30px;
	left: 0px;
	margin-top: 15px;
}
#php_icon {
	position: relative;
	float: left;
	width: 30px;
	height: 32px;
	left: 0px;
	margin-top: 15px;
}
#marketing {
	position: relative;
	float: left;
	width: 32px;
	height: 32px;
	left: 0px;
	margin-top: 15px;
}

#word_column {
	position: relative;
	float: left;
	top: 50px;
	width: 940px;
}
#danny_word {
	position: relative;
	float: left;
	width: 460px;
	top: 13px;
}
#mikey_word {
	position: relative;
	float: right;
	width: 460px;
	top: 13px;
}
#danny_pic {
	position: relative;
	float: left;
	width: 92px;
	height: 92px;
	left: 0px;
	top: 7px;
	background: url('images/dan.png');
}
#mikey_pic {
	position: relative;
	float: left;
	width: 92px;
	height: 92px;
	left: 0px;
	top: 7px;
	background: url('images/mike.png');
}

#word_text {
	position: relative;
	float: right;
	width: 355px;
}
#word_text p {
	margin-top: 3px !important;
}
#word_text b {
	position: absolute;
	left: 0px;
	margin-top: 3px;
	padding-bottom: 20px;
}

#footer_container {
	position: relative;
	float: left;
	top: 0px;
	left: 0px;
	width: 100%;
	background: url('images/footer_back.png') top left repeat-x #4e98bf;
}
#footer {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 940px;
}
#footer p {
	color: #fff !important;
	text-align: justify;
}

#contact_us {
	position: relative;
	width: 119px;
	height: 23px;
	background: url('images/contact_us.png') no-repeat;
	text-indent: -9999px;
	margin-top: 5px;
	margin-bottom: 15px;
}
#why_hire {
	position: relative;
	width: 251px;
	height: 23px;
	background: url('images/why_hire.png') no-repeat;
	text-indent: -9999px;
	margin-top: 5px;
	margin-bottom: 5px;
}

#join_newsletter {
	position: relative;
	width: 193px;
	height: 23px;
	background: url('images/join_newsletter.png') no-repeat;
	text-indent: -9999px;
	margin-top: 5px;
	margin-bottom: 5px;
}
#news_p {
	margin-bottom: 10px;
}

/* Work Page */
#page_title_container {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 90px;
	background: url('images/page_title_back.png') top left repeat-x;
}
#page_title {
	position: relative;
	top: 24px;
	margin-left: auto;
	margin-right: auto;
	width: 940px;
	height: 50px;
}
#title_h1 {
	font-size: 36px;
	text-shadow: #222 -1px 1px 1px;
	color: #fff;
}
#title_h2 {
	font-size: 18px;
	text-shadow: #222 -1px 1px 1px;
	color: #fff;
}

/* Work page individual boxes */
#work_dallas , #work_magniture, #work_storybook, #work_dawson, #work_you, #work_albright {
	width: 300px;
	height: 186px;
	text-indent: -9999px;
}
#work_dallas:hover, #work_magniture:hover, #work_storybook:hover, #work_dawson:hover, #work_you:hover, #work_albright:hover {
	background-position: bottom left;
}
#work_dallas {
	background: url('images/work_dallas.png') top left;
}
#work_magniture {
	background: url('images/work_magniture.png') top left;
}
#work_storybook {
	background: url('images/work_storybook.png') top left;
}
#work_dawson {
	background: url('images/work_dawson.png') top left;
}
#work_you {
	background: url('images/work_you.png') top left;
}
#work_albright {
	background: url('images/work_albright.png') top left;
}

/* Case page */
#case_study {
	position: relative;
	width: 560px;
	margin-top: 20px;
}
#launch_button {
	position: relative;
	left: 446px;
	top: 20px;
	width: 116px;
	height: 34px;
	background: url('images/launch_button.png') top left;
}
#launch_button:hover {
	background-position: bottom left;
}
#case_text {
	position: absolute;
	float: right;
	top: 25px;
	left: 620px;
	width: 320px;
}

/* about page */
#main_about {
	position: relative;
	width: 640px;
}
#main_about b, #about_us b, #services_box b, #connect b {
	font-size: 18px;
}
#right_blue_note {
	position: absolute;
	top: 10px;
	left: 700px;
	width: 240px;
}
#right_blue_note p {
	font-weight: bold;
	font-style: italic;
	font-size: 16px;
	color: #286e93;
}
#about_hr {
	margin-top: 35px;
	margin-bottom: 25px;
}
#about_us {
	position: relative;
	float: left;
	width: 640px;
	height: 250px;
}
#about_us p {
	margin-top: 5px;
}
#about_us #danny_pic {
	margin-bottom: 20px;
}
#name_title {
	position: relative;
	margin-top: 3px !important;
	margin-bottom: 0px !important;
	text-align: left;
}
#about_danny, #about_mikey {
	position: relative;
	float: right;
	width: 532px;
	margin-bottom: 35px;
}
#services_box {
	position: relative;
	float: right;
	width: 240px;
}
#services_box ul {
	position: relative;
	margin-top: 5px;
	list-style-type: none;
}
#services_box li {
	background: url('images/bullet.png') center left no-repeat;
	padding: 2px 0px 7px 25px;
	margin-left: 10px;
	font-size: 14px;
	color: #3e3e3e;
}

/* connect page */
#connect {
	position: relative;
	float: left;
	width: 640px;
}
#connect_form {
	width: 420px;
	margin-bottom: 30px;
}

/* textboxes */
.textbox_normal {
	position: relative;
	margin-bottom: 11px;
	width: 284px;
	height: 18px;
	color: #fff;
	background-image: url('images/cms/input_back.png');
	background-repeat: repeat-x;
	background-position: top left;
	background-color: #4a94bb;
	border: 1px solid #4782a1;
	font-size: 14px;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 6px;
	padding-bottom: 6px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.textbox_normal:focus {
	background-color: #438eb5;
	border-color: #3b6074;
}
.textarea_normal {
	width: 284px;
	height: 90px;
	color: #fff;
	background-image: url('images/cms/input_back.png');
	background-repeat: repeat-x;
	background-position: top left;
	background-color: #4a94bb;
	border: 1px solid #4782a1;
	font-size: 14px;
	font-family: Trebuchet MS, Helvetica, sans-serif;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 6px;
	padding-bottom: 6px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin-bottom: 11px;
}
.textarea_normal:focus {
	background-color: #438eb5;
	border-color: #3b6074;
}
/* Connect page inputs */
.textbox_connect {
	width: 219px;
	height: 18px;
}
.textbox_connect, .select_box_connect, .textarea_connect {
	color: #616161;
	background-image: url('images/input_back.png');
	background-repeat: repeat-x;
	background-position: top left;
	border: 1px solid #c5c5c5;
	font-size: 14px;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 6px;
	padding-bottom: 6px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.textbox_connect:focus, .select_box_connect:focus, .textarea_connect:focus {
	border-color: #888888;
}
.textarea_connect {
	width: 400px;
	height: 200px;
	font-family: Trebuchet MS, Helvetica, sans-serif;
}

/* buttons */
.send_button {
	position: relative;
	float: right;
	width: 116px;
	height: 34px;
	background: url('images/send_button.png') top left;
	border: none;
	margin-bottom: 20px;
	text-indent: -9999px;
}
.signup_button {
	position: relative;
	float: right;
	width: 116px;
	height: 34px;
	background: url('images/signup_button.png') top left;
	border: none;
	margin-bottom: 20px;
	text-indent: -9999px;
}
.send_button:hover, .signup_button:hover {
	background-position: bottom left;
	cursor: pointer;
}