/*
Document:		screen.css
Creation date:		24 September 2007
Created by:		Gemma Leigh
This version:		*** Commented for development ***
Deployment version:	Spinvox/css/style.css
Notes:			Imports reset and style-main (the main site stylesheet) CSS files.
				Contains commonly used helper styles.

=================================================================
Style guide, naming conventions, best practices.
=================================================================

Use a common naming system:
	#parent .parent-child { margin:0px auto; }

Filtering for non-compliant browsers:
	.class-name {
		margin: 10px 0 !important;	This will be applied by all browsers
		margin: 5px 0;			IE < v7 will then override the above with this value
	}

Do not use the following filters unless absolutely necessary and always comment reasons for use:
	* html [selector]		IE < v7 only
	html>body [selector]		Standards compliant browsers only
	_margin				Underscore hack

Use shorthand where possible:
	background: url() top left no-repeat #FF0;
	border: 1px #F0F solid;
	font: 12px/1.4 "Trebuchet MS", Verdana, Arial, sans-serif;
	margin: 20px 0 0 5px;

// IMAGE REPLACEMENT //

Image replacement should be achieved as follows:

	// Gilder/Levin method for images with solid backgrounds
	// Works in JAWS. Issues: extra empty span, transparent images don't hide text.

	// For a non-link element
	#my-id { width: Xpx; height: Xpx; }
	#my-id em { background: url(X.gif); }
	<p id="my-id" class="replace"><em></em>Some text</p>

	// Phark method for images with transparent backgrounds
	// Works in JAWS. Issues: nothing shows up under "images off, css on" scenarios, doesn't work in IE5.

	// For a non-link element:
	#my-id { width: Xpx; height: Xpx; background: url(X.gif); }
	<p id="my-id" class="phark-replace">Some text</p>

	// For a link element with no rollover (note the background is applied to the <a> element):
	#my-id a { width: Xpx; height: Xpx; background: url(X.gif); }
	<p id="my-id" class="phark-replace"><a href="http://www.pokelondon.com" title="Go to Poke">Poke</a></p>


Rollovers should be achieved as follows:
	// Same as Phark image replacement method but note the additional class="rollover" on the <a> element
	// This will create a "sliding doors effect", the off state aligned top left, the on state aligned bottom left
	#my_id a { width: Xpx; height: Xpx; background: url(X.gif); }
	<p id="my_id" class="roll-replace"><a href="http://www.pokelondon.com" title="Go to Poke" class="rollover">Poke</a></p>
*/

/* Reset styles */
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;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus { outline: 0; }
body { line-height: 1; } /* sets baseline line height for the document */
ol, ul, li { 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; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* Additional reset styles */
/* Reset Global reset to values we would expect for some elements */
strong { font-weight: bold; }
/* Remove Mozilla's dashed borders */
a { outline:none; }
a:active { outline:none; }
input[type=submit] { outline-width:0; }
/* Remove border around fieldset even on Opera 7 */
fieldset { border: solid 0 transparent; }
/* Remove blue border around linked images */
a img { border: 0; };

/* Typography */
body { font-family: Verdana, Arial, Helvetica, sans-serif; color: #404040; background: #FFF; }
#wrapper {
	font-size: 0.750em;/* 12px at default font size */
	line-height: 1.33;/* 16px at default font size 16/12 */
}

/* Links */
a { color: #3b3e45; text-decoration: none; outline: none; }
a:hover { color: #ff9600; }
#footer a { color: #b3b4b5; font-size: 1.167em; line-height: 1.167; }
#footer a:hover { color: #ff9600; }
#sitemap a { color: #b3b4b5; }
#sitemap a:hover { color: #ff9600; }

/* read more links */
a.more, a.read-more {
	background: url(../images/arrow-more-black.gif) 0px 5px no-repeat;
	color: #404040;
	display: block;
	line-height: 1.27;
	padding-left: 8px;
}
a.more:hover,
li.more-link a:hover { color: #ff9600 !important; }
a.read-more { background-image: url(../images/arrow-readmore-orange.gif); }

#productUpdateForm .jumptotop {
	display: block;
	background: url(../images/arrow-jumptotop.gif) 0px 7px no-repeat;
	padding: 2px 0 10px 12px;
	font-size: 0.917em;
	font-weight: bold;
	line-height: 1.27;
	color: #ff9600;
}
#productUpdateForm .jumptotop:hover { color: #6c6c6c; }
/* orange box links */
.orange-box-large-inner a { color: #404040; }
.orange-box-large-inner a:hover { color: #FFF; }
/* =Headings
-----------------------------------------------------------------------------*/
/* FONT SIZE REFERENCE
18px 1.500em
17px 1.417em
16px 1.333em
15px 1.250em
14px 1.167em
13px 1.083em
12px 1.000em
*/

h1 { font-size: 1.00em;  line-height: 1em; font-weight: normal; }			/* USED TO WRAP HEADER GRAPHICS */
h2 { font-size: 1.250em; line-height: 1.417em; font-weight: bold; color: #303030; }	/* 15px Intro title, bold, grey*/
h3 { font-size: 1.083em; line-height: 1.333; font-weight: normal; color: #303030; }	/* 13px Intro paragraph, normal, grey */
h4 { font-size: 1.00em;  line-height: 1.333; font-weight: bold;   color: #303030; }	/* 12px Body copy header, bold, grey */

/* Spacing underneath headings */
h2 { margin-bottom: 15px; }
h3, h4, h5, p { margin-bottom: 20px; }

/* Reset heading defaults in certain cases */
#sitemap h4 {
	font-size: 1.167em; /*14px*/
	line-height: 1.167;
	font-weight: normal;
	color: #b3b4b5;
	padding-bottom: 10px;
	margin: 0;
	min-height: 40px;
	height: auto !important; /* all browsers */
	height: 40px; /* ie < v7 */
}
/* Home */
#body-home h3 { clear: left; }
#body-home h3.rsslink { font-size: 1.167em; line-height: 1.167em; font-weight: normal; color: #7caec5; }
#body-home h3.rsslink a { color: #7caec5; text-decoration: underline; }

#body-home .main-content-inner h4 { display: inline; padding-right: 3px !important; color: #ff9600; }
#body-home .main-content-inner h4 { display: inline; padding-right: 0px; }

/* Short content */
.content-short-box h2 { font-size: 1.00em;  line-height: 1.333; font-weight: bold; }

/* long content */
.long-content-wide-text h3 { font-size: 1.167em; line-height: 1.083em; font-weight: normal; color: #707070; }

/* Headings which are wrappers for graphics */

/* Home */
h2.sv-stories,
h2.whyuse-sv { padding-top: 35px; float:left; }
h2.svforyou { font-size: 1em; line-height: 1em; font-weight: bold; display: inline; }
/* Product page */
h2.you-get, h2.people-say { margin-bottom: 10px; }
/*3 column grid page*/
h2.friends-speaking { margin-bottom: 10px; }

/* Form pages */
#body-long-content-nav .midwidth h2,
#body-long-content-nav .midwidth h3 { width: 600px; }

/* =Text elements
-----------------------------------------------------------------------------*/
p { font-size: 1.00em; line-height: 1.333; font-weight: normal; color: #404040; }	/* 12px/16px Body copy */
hr { display: none; }

ul.bullet-list li { padding-left:12px; background: url(../images/bg-bullet-list.gif) 0px 5px no-repeat; }

.tight-right { margin-right: 0px !important; }

/* =Basic Layout
-----------------------------------------------------------------------------*/
body { text-align: center; }


/* =Header
-----------------------------------------------------------------------------*/
#header { width:960px; height:60px; }
#header-logo { float:left; width: 217px; padding-top: 10px; }
#header-quote { padding-top: 22px; margin-left: 270px; }
#header-feed { float: left; margin-left: 28px; display: inline; /* for IE */ width: 522px; height:60px; }
#header-question {
	font-size: 1em;
	color: #f99500;
	width: 150px;
	float: left;
	margin-left: 20px;
	height: 50px;
	padding-top: 6px;
	display: inline; /* for IE */
}

/* =Containers
-----------------------------------------------------------------------------*/
/* 100% width containers to repeat background sections */
#header-background, #top-nav-background, #sub-nav-background, #content-background, #sitemap-background,
#footer-background { width:100%; text-align:center; }
#header-background { height:60px; background:#484c55 url(../images/bg-header.gif) repeat-x 0 0; }
#top-nav-background { height: 36px; background:#f1f1f1 url(../images/bg-top-nav.gif) repeat-x 0 0; }
#sub-nav-background { height: 30px; clear: both; background:#f99500 url(../images/bg-sub-nav.gif) no-repeat 50% 0; }
#content-background { float:left; background:#FFFFFF url(../images/bg-content.gif) no-repeat 50% 0px; /* red expanding left section */ }
#body-home #content-background { background: none; }
.howitworks #content-background { background: none; }

#sitemap-background { float:left; background:#3a3d44 url(../images/bg-sitemap.gif) no-repeat 10% 0; margin-top: 40px; }
#footer-background { float:left; background:#3a3d44 url(../images/bg-footer.gif) no-repeat center top; }
#sub-nav-divider {
	float: left;
	background:transparent url(../images/bg-sub-nav-divider.png) no-repeat 50% 0 !important;
	background:transparent url(../images/bg-sub-nav-divider.gif) no-repeat 50% 0;
	height: 10px;
	width: 100%;
	position: relative;
	top: 0px;
	z-index: 100;
	margin-bottom: -10px;
}
/* reset center aligned content left */
#header, #top-nav, #sub-nav, #content, #sitemap, #footer { text-align: left; margin: 0px auto; }
/* container for masthead, headline and subhead */
#content-mainimage { width: 950px; margin: 0px auto; height: 200px; position: relative; z-index: 1; }
#body-home #content-mainimage { height: 297px; }
#content-mainimage { width: 950px; margin: 0px auto; height: 200px; position: relative; z-index: 1; }
#content-title { width: 960px; height: 220px; text-align: left; position: absolute; left: -22px; top:43px; }
#content-headline { height: 40px; width: 960px; }
#content-subhead { height: 130px; width: 960px; }
#content { width: 960px; margin-bottom: 35px; }
#main-content { width: 960px; float: left; padding-top: 28px; }
/* clearing wrappers for page sections */
.fullwidth { width: 960px; float: left; }
.fullwidth-bott-margin { width: 960px; float: left; margin-bottom: 30px; }
.midwidth { width: 775px; float: right; }
#body-two-col-grid .midwidth { width: 635px; margin-left: 0; float: left; }

/* =Navigation
-----------------------------------------------------------------------------*/

/* =Top navigation
-----------------------------------------------------------------------------*/
#top-nav { width: 960px; height: 36px; }
#top-nav li { float: left; margin-right: 20px; padding-top: 8px; display: inline; /* for <=IE6 */ }
#top-nav li a { height: 29px; }
/* Image sprite, image replacement */
#spinvox-for-you { margin-left: 20px; }
#spinvox-for-you-filler { margin-left: 320px; padding-left 300px; }
#spinvox-for-you a { width: 118px; background: url(../images/nav/top-nav.gif) 0px 3px no-repeat; }
#spinvox-for-you a:hover,
#spinvox-for-you a.active { background-position: 0px -27px; }
#how-it-works a { width: 92px; background: url(../images/nav/top-nav.gif) -142px 3px no-repeat; }
#how-it-works a:hover,
#how-it-works a.active { background-position: -142px -27px; }
#spinvox-blog  a { width: 92px; background: url(../images/nav/top-nav.gif) -259px 3px no-repeat; }
#spinvox-blog a:hover,
#spinvox-blog a.active { background-position: -259px -27px; }
#spinvox-stories  a { width: 108px; background: url(../images/nav/top-nav.gif) -378px 3px no-repeat; }
#spinvox-stories a:hover,
#spinvox-stories a.active { background-position: -378px -27px; }
#get-sv a { width: 92px; background: url(../images/nav/top-nav.gif) -498px 3px no-repeat; }
#get-sv a:hover,
#get-sv a.active { background-position: -498px -27px; }
#sign-in { padding-left: 160px; padding-right: 20px; margin-top: 3px; }
#language-select { margin-right: 0; }
#language-select select { display: block; width: 170px; }

/* =Sub Nav
-----------------------------------------------------------------------------*/
#sub-nav { width: 960px; height:30px; }
#sub-nav li { float: left; margin-right: 30px; padding-top: 6px; display: inline; /* for <=IE6 */ }
#sub-nav li.first { margin-left: 30px; }
#sub-nav li a { color: #fff; background-color: #f99500; font-size: 1.09em; display: block; padding-bottom: 1px; }
#sub-nav li a:hover { text-decoration: underline; }
#sub-nav li a.active { text-decoration: underline; }

/* =Sub Nav
-----------------------------------------------------------------------------*/
#side-nav { width:164px; float: left; padding-bottom:14px; }
#side-nav-bott { float: left; background: url(../images/nav/side-nav-bott.gif) bottom left no-repeat; padding:0 0 11px 0; margin:0 0 15px 0; }
#side-nav ul { float: left; padding-top:11px; margin-top: 4px; background:#dedede; }
#side-nav  ul li a { color:#707070; width:139px; display: block; padding:1px 0px 2px 25px; margin: 3px 0 3px 0; background:#dedede url(../images/nav/side-nav-arrow.gif) 8px 2px no-repeat; }
#side-nav ul li a:hover, #side-nav ul li.active a, #side-nav ul li.active a:hover {
	color: #FFF; background:#b32424 url(../images/nav/side-nav-arrow.gif) 8px -28px no-repeat; }
#pop-link { clear: both; }

/* =Pages with side navigation
-----------------------------------------------------------------------------*/
#body-product #main-content, #body-long-content-nav #main-content, #body-short-content-nav #main-content { padding-top: 0; margin-top: 0; }
#body-product #side-nav, #body-long-content-nav #side-nav, #body-short-content-nav #side-nav {
	position: relative; top: -46px; z-index: 5; }
#body-product #side-nav img, #body-long-content-nav #side-nav img, #body-short-content-nav #side-nav img {
	position:relative; z-index: 6; }
/* move down content on RHS - after side nav */
#body-short-content-nav #main-content .first, #body-long-content-nav .midwidth { padding-top: 35px; }

/* =Sitemap
-----------------------------------------------------------------------------*/
#sitemap { width: 960px; margin-top: 40px; margin-bottom: 25px; }
#sitemap ul { width: 150px; margin-right: 10px; float: left; }
#sitemap ul li { padding-bottom: 0; }
#sitemap ul.last { margin-right: 0; }

/* =Footer
-----------------------------------------------------------------------------*/
#footer { width: 960px; height: 30px; padding-top: 0px; }
#footer li { float: left; margin-right: 30px; padding-top: 0px; }
#footer li#footer-logo { width: 143px; margin-left: 5px; margin-right: 0; padding-top: 0px; }
 /* b2 width: 163 */

/* = Generic boxes, containers
-----------------------------------------------------------------------------*/

/* three boxes, used for quotes */
.quote {
	width: 275px;
	float: left;
	margin:12px 45px 0 0 !important;/* This will be applied by all browsers*/
	margin:12px 22px 0 0;		/* IE < v7 will then override the above with this value*/
	display: inline;		/* prevents IE double margin bug*/
}
.quote em { font-style: italic; font-size: 1.083em; line-height:1.5; }
.quote p { margin-top: 5px; font-size: 1em; }

/* three boxes - icon and text */
.three-col { width: 305px; float: left; margin-right: 20px; }
.three-col-last { width: 305px; float: left; margin-right: 0; }
.three-col-icon { width: 145px; float: left; }
.three-col-text { width: 160px; float: right; }
.three-col h2,
.three-col-last h2 { font-size:1.5em; /* 18px */ font-weight: normal; line-height:1em; margin-bottom: 6px; }
.three-col p, .three-col-last p { margin-bottom: 4px; }

/* two boxes - icon and text */
.two-col { width: 470px; float: left; margin-right: 20px; }
.two-col-icon { width: 145px; float: left; }
.two-col-text { width: 160px; float: left; margin-left: 5px; display: inline; }
.two-col h2 { font-size:1.5em; /* 18px */ font-weight: normal; line-height:1em; margin-bottom: 6px; }
.two-col p { margin-bottom: 4px; }

/* long content - icon, text, cta*/
.long-content-icon { width: 110px; float: left; }
.long-content-text { width: 430px; float: left; }
.sub-content { width: 650px; float: left; }
.vmail-long-content-text { width: 650px; float: left; }
.voxlinks-long-content-text { width: 650px; float: left; }
.long-content-cta { width: 380px; float: left; margin-left: 20px; }
/* long content - without cta*/
.long-content-wide-text { width: 710px; float: left; }

.cta-mid, .orange-box-large { margin-bottom: 20px; }

/* expandable orange cta box */
.orange-box-large { width: 370px; background: url(../images/box-orange-large-top.gif) top left no-repeat; }
.orange-box-large-bott { background: url(../images/box-orange-large-bott.gif) bottom left no-repeat; }
.orange-box-large-inner { padding: 20px 20px 5px 20px; }
.orange-box-large-inner h3 { font-size: 1.250em; line-height: 1.250; color: #FFF; background-color: #fa9f19; margin-bottom: 10px; }
.orange-box-large-inner p { font-size: 1.167em; line-height: 1.167; color: #FFF; background-color: #fa9f19; }
/* short content, icon and text in expandable grey box */
.content-short-icon { width: 110px; float: left; }
.fullwidth .content-short-box { width: 850px; float: left; background: url(../images/content-full-short-box-top.gif) top left no-repeat; }
.fullwidth .content-short-box-bott { background: url(../images/content-full-short-box-bott.gif) bottom left no-repeat; }
.content-short-box-inner { padding: 15px 15px 5px 15px; }

/* short content & nav (smaller grey box) */
.midwidth .content-short-box { width: 665px; float: left; background: url(../images/content-mid-short-box-top.gif) top left no-repeat; }
.midwidth .content-short-box-bott { background: url(../images/content-mid-short-box-bott.gif) bottom left no-repeat; }

/* =Dividers
-----------------------------------------------------------------------------*/
/* full width divider */
.divider { background: url(../images/bg-fullwidth-divider.gif) bottom left no-repeat; padding-bottom: 25px; margin-bottom: 15px; }
/* mid width divider */
#body-short-content-nav .divider {
	background: url(../images/bg-midwidth-divider.gif) bottom left no-repeat;
	padding-bottom: 25px;
	margin-bottom: 15px;
}

/* =Homepage specific styles
-----------------------------------------------------------------------------*/
#body-home #content { margin-top: 10px; }
#body-home #main-content { width: 630px; float: left; padding-top:0; }
#body-home .main-content-inner { float: left; width: 630px; padding: 10px 0 10px 0; }
#body-home .main-content-inner a { color: #ff9600; font-weight: bold; }
#body-home .icon-90x65-left { width: 90px; height: 65px; float: left; margin-right: 10px; }
#body-home .main-content-inner .box-150 { width: 145px; padding-right: 5px; margin-right: 10px; float: left; }
#body-home .main-content-inner .last { margin-right: 0; }
#body-home .greybox { height: 235px; width: 630px; position: relative; left: -20px; }
#body-home .greybox-icon { padding: 20px 0px 5px 20px; float: left; width: 100px; }
#body-home .greybox-text { padding-top: 30px; float: left; width: 440px; }
#body-home #secondary-content { width: 305px; float: right; position: relative; }
/* Home page stories */
#body-home ul.story { float: left; width: 285px; margin-bottom: 10px; }
#body-home ul.story li { margin:0; padding:0; }
#body-home ul.story li.date { color:#909090; }
#body-home ul.story li.summary { margin-bottom: 2px; }
#body-home ul.story li.more-link { background: url(../images/arrow-more-black.gif) 0px 5px no-repeat; }
#body-home ul.story li.more-link a { padding-left: 8px;color: #6c6c6c; }
#body-home ul.story li.title { font-size: 1.167em; /*14px*/ line-height: 1.167; font-weight: bold; }
#body-home ul.story li.title a { color:#303030; }
#body-home ul.story li.title a:hover { color:#ff9600; }

/* =Product page specific styles
-----------------------------------------------------------------------------*/
#body-product .main-content-left { width:355px; float: left; padding-top:  22px; }
#body-product .main-content-right { width:400px; float: right; padding-top: 22px; }
/* icon and text boxes */
.box-220 { width: 220px; float: right; margin-bottom: 0; }
.box-165 { width: 165px; float: left; padding-bottom: 25px; }
.box-165-right { width: 165px; float: right; }
.box-165 p { margin:5px 20px 0 0; }

/* left side icon text, right cta */
.icon-wrapper { width: 185px; float: left; padding-top: 10px; }
.cta-wrapper { width: 210px; float: left; margin-top: -6px; }
.icon-box { width: 165px; padding-bottom: 25px; float: left; }

.icon-wrapper .icon-box img { width: 50px; float: left; position: relative; top: -5px; }
.icon-wrapper .icon-box p { width: 110px; float: right; }

/* =How it works (shift down flash, up image)
-----------------------------------------------------------------------------*/
.howitworks #content-background #content-mainimage-howitworks { margin-top: 6px; }
.howitworks #content-background #content-mainimage-howitworks img { margin-top: -6px; }

/* =Tables
-----------------------------------------------------------------------------*/
table.av { width: 758px; margin-bottom: 25px; }
table.av th { width: 80px; margin: 0; padding: 0;border-bottom: 4px solid white; border-right: 2px solid white;  text-align: center; }
table.av td { width: 80px; margin: 0; padding: 0;border-bottom: 4px solid white; border-right: 2px solid white; text-align: center; }

table.pricing { width: 775px; margin-bottom: 20px; background: #FFF; }
table.pricing tr { padding-bottom: 2px; }
table.pricing th { width: 24%; border-bottom: 2px solid white; border-right: 2px solid white; margin: 0; padding:10px; text-align: left; background:#cccdcf; font-weight: bold; }
table.pricing td { width: 24%; border-bottom: 2px solid white; border-right: 2px solid white; padding:10px; text-align: left; background:#cccdcf; }

/* NEWLY ADDED by Robin 24/01/08 */

#main-content-2 { width: 960px; float: left; }
#content-background-2 { float:left; background:#FFFFFF url(../images/bg-contentx.gif) no-repeat 50% 0px; /* red expanding left section */ }
#content-mainimage-2 { width: 1200px; margin: 0px auto; height: 270px; position: relative; z-index: 1; background-image:url(../images/main-pic.gif); background-repeat:no-repeat; }
#content-title-2 { width: 960px; height: 220px; text-align: left; position: absolute; left: 150px; top:15px; }
#content-headline-2 { height: 40px; width: 960px; }
#content-subhead-2 { height: 130px; width: 960px; }
#sub-nav-background-2 { height: 0px; clear: both; }
.leftpad-l-238 { float:left; padding-left:238px }
.leftpad-l-238 p { clear:both; text-align:left; color:#FFFFFF; width:325px; font-size: 0.900em; line-height: 1.67; }
.leftpad-l-238 img { float:left }
.leftpad-l-238 a { color:#FFFFFF; font-weight:bold; text-decoration:underline }
.left-w-260 { width:260px; float:left; padding-top:10px }
.left-w-260 p { text-align:left; color:#FFFFFF; font-size: 0.900em; }
.inner-txtbox { float:left; height:30px; width:256px; vertical-align:top; clear:both;  padding-bottom:5px }
.inner-txtbox p { text-align:left; }
.inner-txtbox input { float:left }
.leftpad-l-40 { float:left; padding-left:40px }
.leftpad-l-40 p { width:255px; clear:both; text-align:left; color:#FFFFFF; font-size: 0.900em; padding-top:11px }
.txt-box-btn-container { float:left; width:255px; padding-top: 5px; border:1px solid red }
.clear-h-16 { clear:both; height:16px }
.header-container { clear:both; background-image:url(../images/bg-header-container.gif); height: 84px; background-color:#f1ebe9 }
.three-col-2 { width: 310px; float: left; margin-right: 10px }
.three-col-last-2 { width: 310px; float: left; margin-right: 0; }
.img-container-top { height:10px; width:310px; clear:both; background-image:url(../images/top-w-305.gif); background-repeat:no-repeat }
.img-container-bottom { height:10px; width:310px; clear:both; background-image:url(../images/bottom-w-305.gif); background-repeat:no-repeat }
.three-col-icon-2 { width: 200px; float: left; }
.header-container .three-col-icon-2 h2 { color:#cc3333; font-size:1.5em; /* 18px */ font-weight: bold; line-height:1em; margin-bottom: 2px; padding-left:10px }
.three-col-text-2 { width: 105px; float: right; }
.three-col-2 h2,
.three-col-last-2 h2 { color:#cc3333; font-size:1.5em; /* 18px */ font-weight: normal; line-height:1em; margin-bottom: 2px; padding-left:10px }
.three-col-2 p,
.three-col-last-2 p { font-size: 0.800em; line-height: 1.67; margin-bottom: 4px; padding-left:10px }
.clear-pad-t-20-l-10 { clear:both; padding-top:20px; padding-left:10px; height:23px; background-color:#f1ebe9 }
.clear-pad-t-5-l-10 { clear:both; padding-top:17px; padding-left:10px; height:28px; background-color:#f1ebe9 }
.clear-pad-t-5-l-10_link { clear:both; padding-top:17px; padding-left:10px; background-color:#f1ebe9 }
.clear-pad-t-5-l-10_link input { padding-bottom:0px }
.clear-pad-t-5-l-10_link p { padding:0px; margin:0px }
.clear-pad-t-5-l-10_link p img { padding-top:20px; }
.clear-pad-t-5-l-10_link p a { font-weight:bold; text-decoration:underline }
.left-cap-big { height:28px; width:9px; float:left; background-image:url(../images/buttons/btn-l-blue-large.gif); background-repeat:no-repeat }
.right-cap-big { height:28px; width:9px; float:left; background-image:url(../images/buttons/btn-r-blue-large.gif); background-repeat:no-repeat }
.left-cap-small { height:23px; width:9px; float:left; background-image:url(../images/buttons/btn-l-blue-small.gif); background-repeat:no-repeat }
.right-cap-small { height:23px; width:9px; float:left; background-image:url(../images/buttons/btn-r-blue-small.gif); background-repeat:no-repeat }
.btn-small_cont { height:23px; float:left; background-image:url(../images/buttons/btn-bg-blue-small.gif); background-repeat:repeat-x; }
.btn-small_cont p { margin:0px; padding:0px; margin-top:2px }
.btn-small_cont p a { height:23px; color:#FFFFFF; font-weight:bold; }
.btn-large_cont { height:28px; float:left; background-image:url(../images/buttons/btn-bg-blue-large.gif); background-repeat:repeat-x }
.btn-large_cont p { margin:0px; padding:0px; margin-top:4px }
.btn-large_cont p a { color:#FFFFFF; font-size: 1.100em; font-weight:bold }
.c-h-20px { clear:both; height:20px }
.c-h-60px { clear:both; height:60px }
.country-position4 { float:left; height:52px; width:272px; background-image:url(../images/bg-stars.gif); background-repeat:no-repeat }
.c-h-23px-f-bold { clear:both; height:23px; font-size: 1.0em; font-weight:bold }
.pad-b-10px-color747474 { color:#747474; padding-bottom:10px; }
.underline { text-decoration:underline }

/* =Helper styles
--------------------------------------------------------------------- */

/* Floats and clear */
.left { float:left; }
.right { float:right; }
.clear { clear:both; }

/* Clearfix - clear the container div in the absence of a child clearing div */
.clearfix:after { content: "."; height: 0 !important; visibility: hidden; display: block; clear: both; }
/* ie7 */
.clearfix { overflow:hidden; }
/* ie6 */
* html .clearfix { height: 1%; overflow: visible; }

/* Hidden text or use to position tracking tags offscreen */
.hidden { position:absolute; left:0; top:-10000px; width:0; height:0; overflow:hidden; }

/* Image replacement using the Gilder/Levin method for images with solid backgrounds
// Text remains in place on screen, so can be seen with CSS on but images off */
.replace { position: relative; overflow: hidden; }
.replace em, .replace a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
}

/*  Image replacement using the Phark method for images with transparent backgrounds
// Text indented off screen, cannot be seen with CSS on but images off  - still read by screen readers */
.roll-replace {
	overflow: hidden; /* prevents dotted lines extending offscreen in FF */
	background-repeat: no-repeat;
	text-indent: -9000px;
}
.roll-replace a { display: block; width: 100%;  height: 100%; }

/* Rollovers */
.rollover:hover,
.rollover:active,
.rollover:focus { background-position: bottom!important; }

/* =Skip navigation
--------------------------------------------------------------------- */
#skipnav { position: absolute; top: -9000px; left: 0; }
#skipnav li { width: 300px; }
#skipnav a { position: absolute; top: 0; padding: 10px; }
#skipnav a:active,
#skipnav a:focus { top: 9000px; }