@charset "utf-8";

/* CSS Document
/////////////////////////////////////////////////////////////////////////////
Client: Castle Ad
Developer: Alberto Torres
Ixi Design Group
/////////////////////////////////////////////////////////////////////////////
*/

/* Reset */
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,b,u,i,center,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;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

html,body { height: 100%; }
body {
	font: 0.8em Verdana, Arial, Helvetica, sans-serif;
	background: url(../images/bg.jpg);
	color: #2e2e2e;
	margin: 0 auto;
	text-align: center;
}



a {color: #9b4d1f; text-decoration:underline;}
a:hover {color: #BC4151; text-decoration: none;}

#wrap, #nav, #footer {margin: 0 auto; width: 977px; text-align: left;}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* NAV ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#wrap-nav { background: transparent url(../images/nav-bg.png) repeat-x;  position: fixed; top: 20px; left: 0; width:100%; z-index: 1000;}
	#nav {height: 50px;}

		#nav-logo {background: url(../images/logo-castle.png) no-repeat; width: 241px; height: 50px; float: left; display: inline;}
			#nav-logo h1 a {display: block; width: 241px; height: 50px;}
		#nav-btns {width: 736px; float: right; font-size: 1.1em;}

			#nav-btns ul {text-align: right; float: right;}
			#nav-btns li {display: inline; float: left; margin-right: 2px; }
				#nav-btns li a {display: block; height: 16px; padding: 17px; color: black; text-decoration: none; text-transform: uppercase;}
				#nav-btns li a:hover {background: #edd9c2;}



/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* CONTENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


#wrap {padding: 140px 0px; width: 977px;}

	#wrap p {margin-bottom: 15px; line-height: 1.4em;}
	#wrap h3 {font-size: 1.6em; margin-bottom: 15px;}

	#line-you {background: url(../images/line-you.png) no-repeat 45px top; width: auto; padding: 475px 70px 0 70px; margin-top: -7px; }
	#line-us {background: url(../images/line-us.png) no-repeat 22px top; width: 837px; padding: 517px 70px 0 70px; margin-top: -55px;}
	#line-whyus {background: url(../images/line-whyus.png) no-repeat 0px top; width: 837px; padding: 630px 70px 0 70px; margin-top: -63px; }
	#line-contact { background:url(../images/line-contact.png) no-repeat -20px top; width: 837px; padding: 470px 70px 0 70px; margin-top: -52px;}

	#quote-whyus {position: relative; width: 200px; top: -380px; left: 250px; line-height: 1.5em;}
		#quote-whyus b {font-weight: bold;}

	.content { margin: 50px 0; width: 100%;}
		.right-column {float: right; width: 273px;}
		.left-column {float: left; width: 504px; padding-right: 60px;}

	.header {}
		.sub-nav {width: 380px; float: right; display: inline; margin-top: 23px;}
			.sub-nav ul {float: right;  font-size: 1.1em;}
			.sub-nav li {display: inline; float: left; margin-left: 4px;}
				.sub-nav li a {display: block; background: #f0efec; height: 35px; padding: 15px 15px 0; color: black; text-decoration: none;}
				.sub-nav li a:hover, .sub-nav li a.subselected {background: #bdb5a8; color: white;}


	/* Expandable Content **************************************************************************************/
	.inner-content-wrap {width: 977px; background: url(../images/inner-content-bg.png); margin: 0 0 0 -70px;}
		.inner-content {padding: 40px 40px; background: url(../images/inner-content-shdwtop.png) repeat-x;}
		.inner-shadowbottom {background: url(../images/inner-content-shdwbot.png) repeat-x bottom;}


		.pagination {width: 837px; height: 58px; clear: both;}

				.pagination-left {background: url(../images/pagination-left.png) no-repeat; height: 58px; width: 16px; float: left;}
				.pagination-right {background: url(../images/pagination-right.png) no-repeat; height: 58px; width: 16px; float: right;}
				.pagination-middle {background: url(../images/pagination-bg.png) repeat-x; height: 58px; width: 805px; float: left; text-align: center;}

				.left-arrow {float: left;}
					.left-arrow a, .right-arrow a {background: url(../images/icon-arrow-left.png) no-repeat; width: 61px; height: 47px; display: block; position: relative; top: 5px;}

				.right-arrow {float: right;}
					.right-arrow a {background: url(../images/icon-arrow-right.png) no-repeat;}

				.middle-pages {width: 683px; float: left;}
					.middle-pages ul {text-align: center; margin-top: 12px;}
					.middle-pages li {display: inline; font-size: 2em; margin: 0 5px;}
						.middle-pages a {color: black; text-decoration: none; font-weight: bold; }
						.middle-pages a.page-selected {color: #9b4d1f;}

	/* LInks styles */
	.btnnext {font-size: 1.6em; letter-spacing: -0.05em; position: relative; top: 20px; height: 30px;}
		.btnnext a span, .content a, .inner-content p a, #blog a, #sitemap a {background: white; padding: 0 4px; color: #9b4d1f; text-decoration: none;}
		.btnnext a:hover span, .content a:hover, .inner-content p a:hover, #blog a:hover, #sitemap a:hover {background: #9b4d1f; padding: 0 4px; color: white; text-decoration: none;}

	.btnnext a,.btnnext a:hover { color: black; text-decoration: none; background: none;}


	/* HOME ********************************************************************************************/
	/* ************************************************************************************************/

	#home {width: 837px; padding: 0 70px;}
		#home-header {width: 100%;}

		#home-title {background: url(../images/title-how-you-feeling.png) no-repeat; width: 573px; height: 158px; float: left; display: inline;}
		#temperature {width: 204px; float: right; font-size: 1.4em; padding: 30px 0 30px 60px; }
			#temperature span {font-size: 2.8em; font-weight: bold; letter-spacing: -0.1em; clear: both;}
			#temperature p {margin-bottom: 0;}


			/* WEATHER **************************************************************************************/
			.day {background: url(../images/icon-sun.png) no-repeat right bottom;}
			.daycloud {background: url(../images/icon-daycloud.png) no-repeat right bottom;}
			.dayrain {background: url(../images/icon-rain.png) no-repeat right bottom;}
			.mooncloud {background: url(../images/icon-mooncloud.png) no-repeat right bottom;}
			.moonrain {background: url(../images/icon-moonrain.png) no-repeat right bottom;}
			.moon {background: url(../images/icon-moon.png) no-repeat right bottom;}




		#home-content {width: 100%;  margin-top: 50px; }
			#home-left-column {float: left; width: 280px; font-size: 1.6em;}
				#home-left-column li {margin-bottom: 10px;}
					#home-left-column li a {background: url(../images/icon-hand-pointing.png) no-repeat -99px -99px; padding-left: 45px; text-decoration: none; color: black; display: block; width: 198px; height: 25px;}
					#home-left-column li a:hover {background-position: 0 0;}

						#home-left-column li {width: 198px; height: 25px; background-repeat:no-repeat;}


					#subhead-opinionated {background: url(../images/subhead-opinionated.png) 45px top;}
					#subhead-selfcentered {background: url(../images/subhead-selfcentered.png) 45px top;}
					#subhead-curious {background: url(../images/subhead-curious.png) 45px top;}
					#subhead-chatty {background: url(../images/subhead-chatty.png) 45px top;}
					#subhead-envious {background: url(../images/subhead-envious.png) 45px top;}
					#subhead-lucky {background: url(../images/subhead-lucky.png) 45px top;}
						#home-left-column #subhead-lucky {margin-bottom: 0;}


			#home-right-column {float: right; width: 457px; padding-right: 100px; display: inline;}



	/* YOU ********************************************************************************************/
	/* ************************************************************************************************/

	#you {width: 100%;}
	#you-title {background: url(../images/title-do-know-your-audience.png) no-repeat; width: 752px; height: 158px; clear: both;}
	#you .content {margin-top: 30px;}

	/* US *********************************************************************************************/
	/* ************************************************************************************************/

	#us {width: 100%;}
	#us-title { background:url(../images/title-we-re.png) no-repeat; width: 278px; height: 73px; clear: both; float: left;}


		/* Bios, Work **************************************************************************************/
		#bios {}

			#bios-pics-wrap {width: 900px; overflow:hidden;}
				#bios-pics {width: 2500px; height: 200px; margin-left: 10px;}
				.biopic, .workpic {float: left; background: white; padding: 7px; margin: 0 7px; display: inline; color:#545555; font-size: 0.85em;}
					#wrap .biopic p, #wrap .workpic p  { margin: 7px 0 5px; padding: 0;  line-height: 1.3em;}

			#bio-text {margin-bottom: 15px; }
				.bio-details { padding:20px; display:none; position: relative;}
					.bio-details .btn-close {position: absolute; top: 20px; right: 20px;}

			#bios .pagination {margin-left: 23px;}
				.bioselected {background: #9b4d1f; color: white;}



	/* WHY US *********************************************************************************************/
	/* ************************************************************************************************/
	#whyus {}
	#whyus-title {background:url(../images/title-why-us.png) no-repeat; width: 301px; height: 73px; clear: both; float: left;}


		/* Work **************************************************************************************/
		#work-pics-wrap {margin-bottom: 15px; width: 900px; height: 307px; overflow: hidden;}
		#work-pics {width: 3000px; height: 311px;}
			.workpic {margin: 0 5px;}
				#whyus .pagination {margin-left: 23px;}

		#work-detail {margin-bottom: 15px;}
			.nav-work, .work-pic, .work-description, .case-description {width: 100%; margin-bottom: 25px;}

				.nav-work ul {float: right;}
				.nav-work ul li {display: inline; float: left; margin-left: 5px;}
					.nav-work ul li a { text-decoration: none; display: block; color: black; font-size: 1.3em;}

				.btn-back {background: url(../images/btn-back.png) no-repeat; width: 89px; height: 32px; }
					.btn-back a { padding: 6px 0 0 33px; width: 56px; height: 26px;}
				.btn-next {background: url(../images/btn-next.png) no-repeat; width: 89px; height: 32px; }
					.btn-next a { padding: 6px 0 0 10px; width: 79px; height: 26px;}
				.btn-close {background: url(../images/btn-close.png) no-repeat; width: 89px; height: 32px; }
					.btn-close a { padding: 6px 0 0 10px; width: 79px; height: 26px; text-decoration: none; display: block; color: black; font-size: 1.3em;}

				.work-pic img {border: 7px solid white;}
					.work-pic a {background: url(../images/work-imgover.png) no-repeat -99px 0;}
					.work-pic a:hover {background-position: 40px left;}

			.work-description h4, .case-description h4 {font-size: 1.5em; margin-bottom: 15px;}



			/* Case Studies **************************************************************************************/
			.case-description {}
				.case-title {width: 100%;}
					.case-title h4 {font-weight: normal; font-size: 2.5em;}
				.case-description-left {width: 430px; margin-right: 30px; float: left; display: inline;}
				.case-description-right {width: 430px; float: left;}



	/* CONTACT *********************************************************************************************/
	/* ************************************************************************************************/
	#contact {}
	#contact-title {background: url(../images/title-call-us.png) no-repeat; width: 405px; height: 72px;}

		#contact .content {margin-top: 20px;}

		#contact .left-column {width: 280px; padding-top: 20px;}
		#contact .right-column {width: 497px;}

		#wrap #contact h3 {margin-top: 15px;}


		/* FORM /////////////////////////////////////////////////////////////////////////*/
			#form {background: url(../images/from-bg.jpg) no-repeat  right 20px;}

				#form-body {padding: 0px 10px 10px 25px;}

				#form form div {clear: both; float: none; padding-bottom: 10px;}
						#form fieldset {float: left; margin-right: 16px; line-height: 1.2em; display: inline;}
							#form fieldset.clearmargin {margin-right: 0;}
						#form input, #form textarea {margin: 2px 0 5px; padding: 8px;  background: white; font-size:1.2em; border: none; color: #9b4d1f;}

						.form-2 input {width: 200px;}
						.form-2 select {width: 114px;}
						.form-1 input {width: 433px;}
						.form-1 textarea {width: 230px;}

						.form-btns {margin: 0px 0 0 -10px;}
							#form .form-btns input {background: none; border: none;}


				.radial ul {}
					.radial li {margin-bottom: 5px;}

				.horizontal li {display: inline; float: left; margin-bottom: 0px;}

				.radial a.fakecheck,
				.radial a.fakechecked, .radial a.fakechecked:hover
				{background: url(../images/icon-radialbtn.png) no-repeat; padding: 5px 30px 8px; color: #2e2e2e; display: block;}

				.radial a.fakechecked, .radial a.fakechecked:hover { background: url(../images/icon-radialchecked.png) no-repeat; color:#9b4d1f;}



	/* BLOG AND SITEMAP ********************************************************************************************/
	/* *************************************************************************************************/

	#blog-title {background: url(../images/title-blog.png) no-repeat; width: 186px; height: 74px; margin-bottom: 40px;}
	#sitemap-title {background: url(../images/title-sitemap.png); width: 305px; height: 74px; margin-bottom: 40px; margin-left: 300px;}

	#blog .post {margin-bottom: 60px;}
		#blog h3 a {font-weight: normal; font-size: 1.8em; background: none;}
		#blog small {font-size: 0.85em; font-style: italic;}
		#blog .title {font-size: 1.6em; margin-bottom: 10px;}
		#blog .block {margin-bottom: 35px;}

	#blog .sociable a {margin: 0; padding: 0; background: none;}
		#blog .sociable a:hover {background: none;}

	#blog-right-column {background: url(../images/line-blog.png) repeat-y; padding-left: 40px;}
	#blog-left-column {padding-right: 40px;}

	.pagetitle {margin-bottom: 20px;}

	#sitemap {width: 100%; line-height: 1.5em;}
	#sitemap ul {margin-left: 300px;}
	#sitemap ul li {list-style: disc;}
	#sitemap ul ul {margin-left: 20px;}
	#sitemap ul li li {list-style: circle;}


/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* FOOTER ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#wrap-footer { background: transparent url(../images/footer-bg.png) repeat-x;  position: fixed; bottom: 0; left: 0; width: 100%;}
	#footer { background: url(../images/footer-shine.png) no-repeat left top; height: 59px; color: white;}


		#footer-left {width: 300px; float: left; height: 19px; }

			#footer-left li {display: inline; margin-right: 20px; float: left; padding: 20px 0;}
				#footer-left li.footer-left-link {padding: 4px 0 20px 0;}
				#footer-left li a {display: block; padding: 16px 20px 18px 20px; color: white; text-decoration: none;}
				#footer-left li a:hover {background: #1c1c1c; /*color: #9b4d1f;*/}



		#footer-right {width: 677px; float: right;}
			#footer-right ul {float: right; margin-top: 4px;}
				#footer-right li {display: inline; float: left;}

				#footer-right li a {display: block; padding: 16px 20px 18px 20px; color: white; text-decoration: none;}
				#footer-right li a:hover {background: #1c1c1c; /*color: #9b4d1f;*/}
					#footer-right li#btn-blog a span {background: url(../images/icon-blog.png) no-repeat; padding-left: 25px;}
					#footer-right li#btn-news a span {background: url(../images/icon-news.png) no-repeat; padding-left: 25px;}
					#footer-right li#btn-twitter a span {background: url(../images/icon-twitter.png) no-repeat; padding-left: 25px;}

				.dropup-border {border-bottom: 1px dotted #505050; width: 170px; margin-left: 15px; height: 1px;}


			/*#footer-right ul li ul.dropup {float: none; margin: 0; position: relative; top: -100px; with: 200px;}
				#footer-right ul li ul.dropup {float: none; display: inline-block;}
				#footer-right ul li ul.dropup li a {padding: 0; display: inline-block;}
					#footer-right ul li ul.dropup li a span {background: none; padding: 0;}
			*/


			/* DROP DOWNS /////////////////////////////////////////////////////////////////////////*/

			#footer-right ul {
				/*margin: 0;
				padding: 0;
				list-style: none;
				width: 150px;  Width of Menu Items
				border-bottom: 1px solid #ccc;*/
				}

			#footer-right ul li {
				position: relative;
				}

			#footer-right li ul {
				position: absolute;
				left: 0px; /* Set 1px less than menu width */
				top: -207px;
				width: 200px;
				background: #1c1c1c;
				display: none;
				margin: 0;
				padding: 0;
				}

			#footer-right li ul


			/* Styles for Menu Items */
			#footer-right ul li a {
				/*display: block;
				text-decoration: none;
				color: #777;
				background: #fff; /* IE6 Bug
				padding: 5px;
				border: 1px solid #ccc;  IE6 Bug
				border-bottom: 0; */
				}

			#footer-right ul li ul {margin: 0;}
			#footer-right ul li ul li {float: none; background: none; display: inline-block;}
			#footer-right ul li ul li a {
				background: none;
				display: block;
				width: 170px;
				font-size: 0.8em;
				padding: 10px 15px 15px 15px;
				color: white;
				margin: 0;
			}

			#footer-right ul li ul li a:hover {background: black;}

			#footer-right li#btn-blog ul {left: -108px;}
			#footer-right li#btn-news ul {left: -100px;}
			#footer-right li#btn-twitter ul {left: -87px}


			#footer-right li#btn-blog li a span,
			#footer-right li#btn-news li a span,
			#footer-right li#btn-twitter li a span
			{background-image: none; clear: right; color: white; padding: 0; color: #9b4d1f; font-size: 1.2em; line-height: 1.6em;}

			#footer-right li#btn-blog li a.arrow-round span,
			#footer-right li#btn-news li a.arrow-round span,
			#footer-right li#btn-twitter li a.arrow-round span
			{background: url(../images/icon-arrowround.png) no-repeat left top; padding: 0 0 0 20px; color: white; margin: 0;}

			#footer-right li#btn-blog li a div.dropup-text,
			#footer-right li#btn-news li a div.dropup-text,
			#footer-right li#btn-twitter li a div.dropup-text
			{height: 36px; overflow: hidden;}


			/* Holly Hack. IE Requirement \*/
			* html #footer-right ul li { float: left; height: 1%; }
			* html #footer-right ul li a { height: 1%; }
			/* End */

			#footer-right li:hover ul, #footer-right li.over ul { display: block; } /* The magic */




.clear {line-height: 0; font-size: 0; clear: both; height: 0px;}
.hide {display: none;}
.last {margin: 0; padding: 0; border: none;}



/*
#wrap-nav
#nav-logo
#wrap-footer
#footer-right li#btn-blog a span
#footer-right li#btn-news a span
#footer-right li#btn-twitter a span

#home-title {background: url(../images/title-how-you-feeling.png) no-repeat;

*/