/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Copyright 2009 Spiegel Design Group, Inc. All Rights Reserved.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/*-------------------------------------------------
GLOBAL 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,
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-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
}
:focus {
	outline: 0;
}
body {
	line-height: 1;
}
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: "" "";
}
.clear {
	clear: both;
}
.hidden {
	display: none;
	visibility: hidden;
}

/*-------------------------------------------------
GLOBAL
-------------------------------------------------*/

body.home .wrapper { background: #fff url("/global/img/splash/sHome.jpg") 0 0 no-repeat; }
body.services .wrapper { background: #fff url("/global/img/splash/sServices.jpg") 0 0 no-repeat; }
body.our-process .wrapper { background: #fff url("/global/img/splash/sOurProcess.jpg") 0 0 no-repeat; }
body.our-work .wrapper { background: #fff url("/global/img/splash/sOurWork.jpg") 0 0 no-repeat; }
body.contact-us .wrapper { background: #fff url("/global/img/splash/sContactUs.jpg") 0 0 no-repeat; }

/*-------------------------------------------------
WRAPPER
-------------------------------------------------*/

.wrapper {
	width: 940px;
	margin: 30px auto 15px auto;
}
.base {
	width: 940px;
	height: 25px;
	background: url("/global/img/splash/sBtm.png") 0 100% no-repeat;
}

/*-------------------------------------------------
HEADER
-------------------------------------------------*/

.header {
	height: 50px;
	margin: 0 70px;
	padding: 21px 0 0 0;
}
.header ul li {
	float: left;
	height: 50px;
	margin: 0 88px 0 0;
}

.header ul li.nHome { width: 64px; }
.header ul li.nServices { width: 106px; }
.header ul li.nOurProcess { width: 91px; }
.header ul li.nOurWork { width: 86px; }
.header ul li.nContactUs { width: 100px; margin: 0; }

.header ul li a:link, .header ul li a:visited {
	display: block;
	height: 50px;
	cursor: pointer;
	background-image: url("/global/img/nav/nav.png");
}
.header ul li.nHome a { background-position: 0 -50px; }
.header ul li.nServices a { background-position: -150px -50px; }
.header ul li.nOurProcess a { background-position: -300px -50px; }
.header ul li.nOurWork a { background-position: -450px -50px; }
.header ul li.nContactUs a { background-position: -600px -50px; }

.header ul li.nHome a.on, .header ul li.nHome a:hover { background-position: 0 0; }
.header ul li.nServices a.on, .header ul li.nServices a:hover { background-position: -150px 0; }
.header ul li.nOurProcess a.on, .header ul li.nOurProcess a:hover { background-position: -300px 0; }
.header ul li.nOurWork a.on, .header ul li.nOurWork a:hover { background-position: -450px 0; }
.header ul li.nContactUs a.on, .header ul li.nContactUs a:hover { background-position: -600px 0; }

.header ul li span {
	display: none;
	visibility: hidden;
}

/*-------------------------------------------------
SPLASH: H1
-------------------------------------------------*/

h1 {
	width: 940px;
	height: 200px;
	display: block;
}
h1 span {
	display: none;
	visibility: hidden;
}

/*-------------------------------------------------
HOME > LANDING
-------------------------------------------------*/

table.landing {
	width: 800px;
	margin: 0 70px;
}
table.landing td {
	width: 33%;
	padding: 0 25px 0 0;
	vertical-align: top;
}

/*-------------------------------------------------
CONTENT
-------------------------------------------------*/

.content {
	padding: 10px 0;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #555;
}
.content p {
	margin: 10px 0;
}
.content p a:link, .content p a:visited {
	color: #555; /*#e52c2c*/
	text-decoration: underline;
}
.content p a:hover {
	text-decoration: underline;
	color: #000;
}
.content p strong {
	font-weight: bold;
	color: #e52c2c;
}
.content h2 span {
	display: none;
	visibility: hidden;
}
.content h2 {
	width: 100%;
	height: 21px;
	background-repeat: no-repeat;
}

/* CONTENT TABLE */

.content table.box td.side {
	vertical-align: top;
	width: 222px; /*292px*/
	padding: 33px 0 0 70px;
}
.content table.box td.side a:link,
.content table.box td.side a:visited {
	color: #757575;
}
.content table.box td.focus {
	vertical-align: top;
	width: 579px;
}

/* CONTACT US */

span.contact-us {
	font-weight: bold;
	font-size: 0.9em;
	text-transform: lowercase;
	padding: 0 5px 0 0;
	color: #757575;
}

/*-------------------------------------------------
CONTACT US > RFP
-------------------------------------------------*/

#formBox {
	margin: 15px 0 0 0;
}
#formBox form ul li {
	margin: 0 0 10px 0;
}
#formBox form .input {
	width: 300px;
	color: #999;
	padding: 4px;
	background: #fff url("/global/img/forms/fieldbg.gif") center top repeat-x;
	border-top: 1px solid #7c7c7c;
	border-right: 1px solid #c3c3c3;
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #c3c3c3;
	font-size: 13px;
}
#formBox form small {
	font-size: 11px;
	color: #ccc;
}

/* SEND REQUEST BUTTON */

#formBox form .submit {
	height: 21px;
	width: 84px;
	background: url("/global/img/btn/submit.png") 0 0 no-repeat;
	cursor: pointer;
}
#formBox form .submit:hover {
	background-position: 0 -21px;
}
#formBox form .submit span {
	display: none;
	visibility: hidden;
}

/*-------------------------------------------------
OUR WORK
-------------------------------------------------*/

#our-work, .not-found {
	width: 800px;
	padding: 0 70px;
}
ul.our-work-base {
	margin: 14px 0 0 0;
}
ul.our-work-base li {
	opacity: 0.25;
	float: left;
	margin: 0 13px 13px 0;
	cursor: pointer;
}
ul.our-work-base li.active {
	opacity: 1.0;
	cursor: default;
}
ul.our-work-base li:hover {
	opacity: 1.0;
	cursor: pointer;
}
ul.our-work-base li span {
	display: block;
	width: 88px;
	height: 61px;
}
ul.our-work-base li.last {
	margin: 0 0 13px 0;
}
ul.our-work-base li span em {
	display: none;
	visibility: hidden;
}

/*-------------------------------------------------
OUR-WORK > MODAL
-------------------------------------------------*/

#modal #background {
	z-index: 0;
}
#modalBox .modalBar {
	background: url("/global/img/modal/modalBar.png") 0 0 no-repeat;
	width: 860px;
	height: 19px;
}
#modalBox #mainImage {
	width: 860px;
	height: 412px;
}
#modalBox #mainImage img {
	width: 860px;
	height: 412px;
}
#modalBox .btnClose {
	width: 20px;
	height: 20px;
	cursor: pointer;
}
#modalBox #mainImage p {
	z-index: 100;
	position: absolute;
	top: 460px;
	display: block;
	width: 860px;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #fff;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #555;
}
#modalBox #mainImage p a:link,
#modalBox #mainImage p a:visited,
#modalBox #mainImage p em {
	font-weight: bold;
	color: #333;
}
#modalBox #mainImage p a:hover {
	color: #ef4850;
	text-decoration: none;
}
#modalBox #loader {
	background: url("/global/img/modal/loader.gif") 50% 50% no-repeat;
	width: 100%;
	height: 412px;
}

/* THUMBS */
#modalBox table {
	width: 860px;
	height: 77px;
}
#modalBox table td {
	vertical-align: middle;
	height: 61px;
}
#modalBox table td.galleryTop {
	text-align: center;
	padding: 4px 0 2px 0;
	height: 16px;
	line-height: 0;
	vertical-align: bottom;
}
#modalBox table td.tdL {
	width: 32px;
}
#modalBox table td.tdR {
	width: 32px;
}
#modalBox table td span.btnL,
#modalBox table td span.btnR {
	cursor: pointer;
	width: 22px;
	height: 22px;
	display: block;
	margin: 0 5px;
}
#modalBox table td span.btnL { background: url("/global/img/modal/btn-back.png") 0 0 no-repeat; }
#modalBox table td span.btnR { background: url("/global/img/modal/btn-next.png") 0 0 no-repeat; }
#modalBox table td span.btnL:hover,
#modalBox table td span.btnR:hover {
	background-position: 0 -22px;
}
#modalBox #thumbRow {
	width: 796px;
	height: 61px;
	overflow: hidden;
}
#modalBox #thumbRow ul {
	margin: 0;
	padding: 0;
	width: 3440px;
}
#modalBox #thumbRow li {
	opacity: 0.25;
	float: left;
	margin: 0 13px 13px 0;
	cursor: pointer;
}
#modalBox #thumbRow li.active {
	opacity: 1.0;
	cursor: default;
}
#modalBox #thumbRow li:hover {
	opacity: 1.0;
	cursor: pointer;
}
#modalBox #thumbRow li span {
	display: block;
	width: 88px;
	height: 61px;
}
#modalBox #thumbRow li span em {
	display: none;
	visibility: hidden;
}

/*-------------------------------------------------
THE CORNER
-------------------------------------------------*/

.articles {
	margin: 25px 0 0 0;
}
.articles small {
	color: #999;
	font-size: 11px;
	text-transform: uppercase;
	display: block;
}
.articles h3 {
	color: #757575;
	font-size: 18px;
	font-weight: normal;
	text-transform: lowercase;
	padding: 0;
	margin: 0 0 5px 0;
}
.articles p strong { font-weight: bold; }
.articles p em { font-style: italic; }

/*-------------------------------------------------
BUTTONS
-------------------------------------------------*/

td.side ul a {
	height: 21px;
	width: 153px;
	display: block;
}

td.side ul a.ourprocess { background: url("/global/img/btn/our_process.png") 0 0 no-repeat; }

td.side ul a.webinteractive { background: url("/global/img/btn/web_interactive.png") 0 0 no-repeat; }
td.side ul a.ecommerce {	background: url("/global/img/btn/ecommerce.png") 0 0 no-repeat; }
td.side ul a.dataapplications { background: url("/global/img/btn/data_applications.png") 0 0 no-repeat; }
td.side ul a.brandidentity {	background: url("/global/img/btn/brand_identity.png") 0 0 no-repeat; }
td.side ul a.printdesign { background: url("/global/img/btn/print_design.png") 0 0 no-repeat; }

td.side ul a.blogrss, td.side ul a.subscribeviarss { background: url("/global/img/btn/subscribe_via_rss.png") 0 0 no-repeat; }

td.side ul a.requestaproposal { background: url("/global/img/btn/request_a_proposal.png") 0 0 no-repeat; }
td.side ul a.jointhelist { background: url("/global/img/btn/join_the_list.png") 0 0 no-repeat; }

td.side ul span {
	display: none;
	visibility: hidden;
}
td.side ul a:hover, td.side ul a.active {
	background-position: 0 -21px;
}

/*-------------------------------------------------
FOOTER
-------------------------------------------------*/

#footer {
	width: 940px;
	margin: 0 auto;
	text-align: center;
}
#footer a:link, #footer a:visited {
	color: #ccc;
	text-decoration: none;
}
#footer a:hover {
	color: #333;
	text-decoration: none;
}
#footer ul {
	list-style-type: none;
	display: block;
	margin: 0;
}
#footer ul li {
	list-style-type: none;
	display: inline;
	font-family: verdana, sans-serif;
	font-size: 10px;
	line-height: 1.6em;
	color: #ccc;
	margin: 0 5px;
}
#footer ul li strong {
	font-weight: bold;
	color: #ccc;
}
#footer ul li.copyright {
	color: #e5e5e5;
}