/*
Title: IPAK
Style: General stylesheet
Author: Tome Wilson - tome@creativewebgroup.net
Last Updated: October 30, 2009
*/

/* ---[ css 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, 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; vertical-align: baseline}
:focus {outline: 0}
body {line-height: 1}
ol, ul {list-style: none}
/* tables still need cellspacing=0 in the markup */
table {border-collapse: separate; border-spacing: 0}
caption, th, td {text-align: left; font-weight: normal; padding: 6px; border-top: 1px solid #ccc}


/* ---[ link styles ]--------------------- */
a {color: #884288; text-decoration: none}
a:visited {color: #884288}
a:hover {color: #884288; text-decoration: underline}


/* ---[ structure ]--------------------- */
html, body {background: #fff url(images/shell/background.gif) repeat-x; height: 100%; min-width: 760px; text-align: center; font-size: 0}
#center-on-page {width: auto; text-align: center}

#container {margin: 0 auto; width: 760px}

#header {padding: 32px 0 0 0}


/* ---[ left side ]--------------------- */
#left {width: 204px; display: block; float: left}


	/* ---[ navigation ]--------------------- */
	#navigation {float: left; width: 204px; padding: 7px 0 14px 0; font: bold 13px/1.25em Arial, Helvetica, sans-serif; text-align: left}


		/* ---[ fly-out navigation - based on Son of Suckerfish ]--------------------- */

		/* all list items */
		#drops, #drops ul {padding: 0; margin: 0; clear: both; float: left; list-style: none}
		#drops a {display: block; width: 204px}
		#drops li {float: left; /*width: 204px*/ /* width needed or else Opera goes nuts */}

		/* second-level lists */
		#drops li ul {height: 33px; color: #231f20; position: absolute; left: -9999px}
		#drops ul.drop {color: #231f20; width: 224px; display: block; float: left; margin-left: 204px}
		#drops ul.drop li {border: 0}
		#drops ul.drop a {border: 1px solid #ccc; background: url(images/shell/suckerfish.gif); color: #231f20; padding: 7px; width: 210px; height: 17px; text-decoration: none; float: left}
		#drops ul.drop a:hover {background: #fff; color: #884288; position: static}
		
		/* third-and-above-level lists */
		#drops li:hover ul ul, #drops li:hover ul ul ul, #drops li:hover ul ul ul ul, #drops li.sfhover ul ul, #drops li.sfhover ul ul ul, #drops li.sfhover ul ul ul ul {margin-top: 0; position: absolute; width: inherit; left: -9999px}
		#drops li:hover ul, #drops li li:hover ul, #drops li li li:hover ul, #drops li li li li:hover ul, #drops li.sfhover ul, #drops li li.sfhover ul, #drops li li li.sfhover ul, #drops li li li li.sfhover ul {left: 160px; /*width: 160px;*/}

		/* lists nested under hovered list items */
		#drops li:hover ul, #drops li.sfhover ul {left: auto}


		/* ---[ sliding-door navigation ]--------------------- */
		#navigation ul {list-style: none}
		#navigation li {float: left; /*width: 204px*/}

		#navigation a.about-ipak, #navigation a.management-profiles, #navigation a.charity-involvement, #navigation a.custom-marketing-solutions, #navigation a.markets-we-serve, #navigation a.capabilities-and-technologies, #navigation a.our-portfolio, #navigation a.case-studies, #navigation a.faq, #navigation a.recent-news, #navigation a.employment {float: left; background: url(images/shell/navigation.png) no-repeat; display: block; height: 33px; width: 204px; text-indent: -999999px}
		
		#navigation a.about-ipak {background-position: 0 0}
		#navigation a.about-ipak:hover {background-position: -204px 0}

		#navigation a.management-profiles {background-position: 0 -33px}
		#navigation a.management-profiles:hover {background-position: -204px -33px}

		#navigation a.charity-involvement {background-position: 0 -66px}
		#navigation a.charity-involvement:hover {background-position: -204px -66px}

		#navigation a.custom-marketing-solutions {background-position: 0 -99px}
		#navigation a.custom-marketing-solutions:hover {background-position: -204px -99px}

		#navigation a.markets-we-serve {background-position: 0 -132px}
		#navigation a.markets-we-serve:hover {background-position: -204px -132px}

		#navigation a.capabilities-and-technologies {background-position: 0 -165px}
		#navigation a.capabilities-and-technologies:hover {background-position: -204px -165px}

		#navigation a.our-portfolio {background-position: 0 -198px}
		#navigation a.our-portfolio:hover {background-position: -204px -198px}

		#navigation a.case-studies {background-position: 0 -231px}
		#navigation a.case-studies:hover {background-position: -204px -231px}

		#navigation a.faq {background-position: 0 -264px}
		#navigation a.faq:hover {background-position: -204px -264px}

		#navigation a.recent-news {background-position: 0 -297px}
		#navigation a.recent-news:hover {background-position: -204px -297px}

		#navigation a.employment {background-position: 0 -330px}
		#navigation a.employment:hover {background-position: -204px -330px}


/* ---[ right side ]--------------------- */
#right {width: 531px; margin-left: 15px; float: right; display: block}

	/* ---[ content-area ]--------------------- */
	#content {text-align: justify; font: normal 13px/1.5em Arial, Helvetica, sans-serif}

		em, .em {font-style: italic}
		strong, .strong {font-weight: bold}
		.big {font-size: 110%}
		.small {font-size: 75%}
		.l {float: left}
		.r {float: right}
		.clear {clear: both}
		.center {text-align: center}
		.none {padding: 0; border: 0 !Important}

		p {padding: .5em 0 .5em 10px}

		#content ul {padding: .35em 0 .35em 1em; margin-left: 10px; list-style-type: none; text-align: left}
		#content li {padding: .15em 0 .35em 1em; background: transparent url(images/icons/plus.gif) 0 8px no-repeat}

		.hr {width: auto; height: 1px; font-size: 1px; display: block; border-top: 1px dotted #ccc; margin: 10px 0}

		.column1, .column2 {float: left; width: 255px; display: block; margin-right: 10px}
		.column2 {margin-right: 0}

		.col1, .col2, .col3 {float: left; width: 163px; display: block; margin-right: 10px}
		.col3 {margin-right: 0}

		.pdf {background: #fff url(images/icons/pdf.gif) no-repeat top left; padding: 2px 0 2px 2em; margin: .35em 0}

		.border, .box {border: 2px solid #fcb040}
		.box {padding: 6px}
		.circle-orange {background: #fff url(images/icons/circle-orange.gif) no-repeat 0 13px; padding-left: 1em}
		.circle-red {background: #fff url(images/icons/circle-red.gif) no-repeat 0 13px; padding-left: 1em}
		.circle-green {background: #fff url(images/icons/circle-green.gif) no-repeat 0 13px; padding-left: 1em}
		.circle-purple {background: #fff url(images/icons/circle-purple.gif) no-repeat 0 13px; padding-left: 1em}
		.circle-orange {background: #fff url(images/icons/circle-orange.gif) no-repeat 0 13px; padding-left: 1em}
		.circle-yellow {background: #fff url(images/icons/circle-yellow.gif) no-repeat 0 13px; padding-left: 1em}
		.photoL {float: left; margin: 3px 8px 0 0}
		.photoR {float: right; margin: 3px 0 0 10px}
		.cursor {cursor: pointer}
		.normal {font: normal 12px/1.45em Arial, Helvetica, sans-serif}


		/* ---[ font colors ]--------------------- */
		.black {color: #000 !Important}
		.white {color: #fff !Important}
		.grey {color: #999 !Important}
		.gold {color: #e8a713 !Important}
		.yellow {color: #fad356 !Important}
		.purple {color: #884288 !Important}


		/* ---[ headings ]--------------------- */
		h1 {font: normal 42px/1em Arial, Helvetica, sans-serif; color: #999; padding: 42px 0 0 0; overflow: hidden; height: 0 !important; height /**/:42px}
			h1#about-ipak {background: transparent url("images/headings/about-ipak.png") no-repeat top right}
			h1#capabilities-and-technologies {background: transparent url("images/headings/capabilities-and-technologies.png") no-repeat top right}
			h1#case-studies {background: transparent url("images/headings/case-studies.png") no-repeat top right}
			h1#charity-involvement {background: transparent url("images/headings/charity-involvement.png") no-repeat top right}
			h1#contact {background: transparent url("images/headings/contact-us.png") no-repeat top right}
			h1#custom-marketing-solutions {background: transparent url("images/headings/custom-marketing-solutions.png") no-repeat top right}
			h1#employment {background: transparent url("images/headings/employment.png") no-repeat top right}
			h1#faq {background: transparent url("images/headings/faq.png") no-repeat top right}
			h1#login {background: transparent url("images/headings/login.png") no-repeat top right}
			h1#management-profiles {background: transparent url("images/headings/management-profiles.png") no-repeat top right}
			h1#markets-we-serve {background: transparent url("images/headings/markets-we-serve.png") no-repeat top right}
			h1#our-portfolio {background: transparent url("images/headings/our-portfolio.png") no-repeat top right}
			h1#privacy-policy {background: transparent url("images/headings/privacy-policy.png") no-repeat top right}
			h1#recent-news {background: transparent url("images/headings/recent-news.png") no-repeat top right}
			h1#sitemap {background: transparent url("images/headings/sitemap.png") no-repeat top right}
			h1#thank-you {background: transparent url("images/headings/thank-you.png") no-repeat top right}

		h2 {font: bold 24px/1.25em Arial, Helvetica, sans-serif; color: #884288; padding: .15em 0; text-align: left}
		h3 {font: bold 20px/1.25em Arial, Helvetica, sans-serif; color: #e8a713; padding: .15em 0; text-align: left}

	/* ---[ footer ]--------------------- */
	#footer {border-top: 2px solid #884288; border-bottom: 2px solid #884288; text-align: center; font: normal 11px/2.25em Arial, Helvetica, sans-serif; margin: 20px 0; padding: 20px 0; color: #e8a713}