/*
	Scalix homepage stylesheet
*/

/* =General
---------------------------------------------------------------------------------------------------- */
* {
	margin: 0;
	padding: 0;
}

ul, ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}

img, a img {
	border: 0;
}

body {
	background: #f4f2f2;
	font-family: verdana, arial, sans-serif;
	font-size: 12px;
}

table tr td {
	font-size: 12px;
	vertical-align: top;
}

.clearit:after { 
    content: ""; 
    display: block; 
    clear: both; 
    height: 0; 
    visibility: hidden; 
}

.clearit { 
    min-height: 0; 
    height: 0; 
}

html>body .clearit { 
    height: auto; 
}

.clear {
	clear: both;
	display: block;
	width: 100%;
	height: 0;
	font-size: 1px;
}

/* =Branding
--------------------------------------------------------------------------------------------------- */
#branding  {
	background: #423f3e url('images/branding-bg.jpg') 0 0 repeat-x;
	border-bottom: 5px solid #8e8785;
	padding-top: 30px;
}

#branding #logo {
	display: block;
	float: left;
	width: 139px; 
	height: 35px;
}

#branding #wordmark {
	float: right;
	color: #ffffff;
	font-size: 36px;
	font-weight: normal;
	padding: 52px 41px 0 0;
}

/* =Layout Homepage
---------------------------------------------------------------------------------------------------- */
#home #wrapper {
	width: 770px;
	margin: 0 auto;
}

#home #left-col {
	float: left;
	width: 557px;
	padding: 5px 0 0 11px;
}

#home #right-col {
	float: left;
	width: 193px;
	padding: 6px 0 0 0;
}

/* right col callout */
#home #right-col #right-callout {
	background: #514d4c url('images/right-col-callout-bg.gif') 0 0 no-repeat;
	color: #ffffff;
	width: 192px; 
	min-height: 183px;
	height: auto !important;
	height: 183px;
	margin: 9px 0 9px 0;
}

#home #right-col #right-callout h4 {
	text-align: center;
	padding: 27px 0 10px 0;
}

#home #right-col #right-callout p {
	line-height: 16px;
	padding: 0 16px 0 20px;
}

#home #right-col #right-callout p span {
	font-size: 14px;
}

#home #right-col #right-callout a {
	color: #FFFFFF;
}



#home #main-content { 
	background: url('images/main-content-bg.gif') 0 0 repeat-y;
	clear: both;
	margin-top: 8px;
}

#home #main-content h1 { 
	margin: 0;
	padding: 21px 0 0 15px;
}

#home #main-content h1 img { 
	displaY: block
}

#home #main-content-inner {
	background: url('images/main-content-top.gif') 0 0 no-repeat;
}

#home #main-content-btm {
	background: url('images/main-content-btm.gif') 0 100% no-repeat;
	padding-bottom: 20px;
}

#home #intro-feature ul li {
	float: left;
}

#home #intro-feature ul li img { 
	display: block;
}

#home #intro-feature #three-col-feature {
	background: url('images/intro-feature-grid-bg-repeat.gif') 0 0 repeat-y;
	clear: both;
}

#home #intro-feature #three-col-feature ul {
	background: url('images/intro-feature-grid-bg2.jpg') 0 0 no-repeat;
	width: 550px;
	height: 120px;
}

#home #intro-feature #three-col-feature li {
	float: left;
	width: 183px;
}

#home #intro-feature #three-col-feature li.left {	
	width: 138px;
	padding: 15px 15px 5px 30px;
}

#home #intro-feature #three-col-feature li.center {
	width: 143px;
	padding: 15px 20px 5px 20px;
}

#home #intro-feature #three-col-feature li.right {
	width: 143px;
	padding: 15px 20px 5px 20px;
}


#home #intro-feature #three-col-feature li h2 {
	font-family: arial, verdana, sans-serif;
	color: #2c2c2c;
	font-size: 14px;
	margin-bottom: 10px;
}

#home #intro-feature #three-col-feature li p {
	color: #423f3e;
	font-size: 12px;
	line-height: 16px;
}

#home #intro-feature #three-col-feature-btns {
	background: url('images/three-col-btns-bg.jpg') 0 0 no-repeat;
	width: 550px; 
	height: 53px;
	clear: both;
}

#home #intro-feature #three-col-feature-btns li {
	float: left;
	width: 183px;
	padding-top: 9px;
}

#home #intro-feature #three-col-feature-btns li a.feature-link {
	background: url('images/three-col-feature-btn-bg.gif') 0 0 no-repeat;
	display: block;
	width: 156px; 
	height: 21px;
	color: #cc171e;
	text-decoration: none;
	text-transform: uppercase;
	text-indent: 12px;
	padding-top: 6px;
}

#home #intro-feature #three-col-feature-btns li a.feature-link:hover {
	color: #000000;
}

#home #intro-feature #three-col-feature-btns li.left a.feature-link {
	margin-left: 17px;
}

#home #intro-feature #three-col-feature-btns li.center a.feature-link {
	margin: 0 auto;
}

#home #intro-feature #three-col-feature-btns li.right a.feature-link {
	margin-left: 12px;
}

/* Center Content */
#home #center-content {
	clear: both;
	margin: 12px 0 0 0;
	padding: 0 10px 0 25px;
}

#home #center-content .center-content-text {
	float: left;
	width: 340px;
	line-height: 18px;
	color: #050100;
	padding-top: 15px;
}

#home #center-content #client-feature {
	float: right;
	width: 387px; 
	height: 129px;
}

/* Four column feature */
#home #four-col-feature {
	width: 747px;
	margin: 11px auto 0 auto;
	clear: both;
}

#home #four-col-feature li {
	background: url('images/four-col-callout-bg.gif') 0 0 repeat-y;
	float: left; 
	width: 180px;
	margin-right: 9px;
}

#home #four-col-feature li.last {
	margin-right: 0;
}

#home #four-col-feature li h3 {
	background: url('images/four-col-callout-hdr-bg.jpg') 0 0 no-repeat;
	color: #423f3e;
	font-family: arial, verdana, sans-serif;
	font-size: 14px;
	height: 31px;
	padding: 13px 0 0 16px;
	margin-bottom: 14px;
}

#home #four-col-feature .four-col-feature-text {
	background: url('images/four-col-callout-btm.gif') 0 100% no-repeat;
	min-height: 255px;
	height: auto !important;
	height: 255px;
	padding-bottom: 4px;
}

#home #four-col-feature .four-col-feature-text p {
	margin: 0 0 10px 0 !important;
	padding: 0 10px 0 16px;
}

#home #four-col-feature .four-col-feature-text p.image {
	margin: 0;
	padding: 0;
	text-align: center;
}

#home #four-col-feature .four-col-feature-text a {
	color: #cc171e;
	padding: 0 10px 0 0;
}

#home #four-col-feature .four-col-feature-text a:hover {
	color: #000000;
}

/* =Main navigation
--------------------------------------------------------------------------------------------------- */
#main-nav ul {
	padding-top: 10px;
}

#main-nav ul li {
	display: inline;
}

#main-nav ul li a {
	color: #b3aba8;
	text-decoration: none;
	margin: 7px 0px 0px 0px;
	padding: 3px 7px 8px 3px;
	font: normal 16px/18px 'Helvetica', 'Tahoma', 'Verdana', sans-serif; 
}

#main-nav ul li a:hover {
	color: #ffcd69;
}

/* =Footer
---------------------------------------------------------------------------------------------------- */
div#footer {
	width: 770px;
	margin: 0;
	padding: 0;
	margin: 24px auto 0 auto;
}

/*	Bottom Navigation styles */
div#nav_bottom {
	width: 750px;
	height: 13px;
	margin: 0;
	padding: 7px 10px 7px 10px;
	background-color: #8e8785; 
}

div#nav_bottom ul {
	margin: 0;
	padding: 0;
}

div#nav_bottom ul li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}

div#nav_bottom ul li a {
	margin: 0;
	padding: 0px 7px 0px 7px;
	font: bold 11px/12px 'Helvetica', 'Tahoma', 'Verdana', sans-serif; 
	color: #e5e1e1;
 	display: block; 
	text-decoration: none;
}

div#nav_bottom ul li a:hover {
	color: #ffcd69;
}

div#nav_bottom ul li#selected {
	margin: 0;
	padding: 0;
 }
 
div#nav_bottom ul li#selected a {
	margin: 0;
	padding: 0px 7px 0px 7px;
	font: bold 11px/12px 'Helvetica', 'Tahoma', 'Verdana', sans-serif; 
	color: #423f3e;
 	display: block; 
	text-decoration: none;
}

div#nav_bottom ul li.right {
	margin: 0;
	padding: 0;
	list-style: none;
	float: right;
}

div#nav_bottom ul li.japan {
	width: 43px;
	height: 11px;
	float: right;
}

div#nav_bottom ul li.japan a {
	background: url('images/icon_japan1.gif') 0 0 no-repeat; 
	width: 33px;
	height: 11px;
	float: right;
}

div#nav_bottom ul li.japan a:hover {
	background-position: 0 -11px;
}

/*	Copyright styles */
div#copyright {
	width: 740px;
	margin: 0;
	padding: 10px 15px 15px 15px;
	background: url('images/bg_footer.gif') 0 0 repeat-x; 
}

div#copyright a {
 	font: normal 9px/10px 'Helvetica', 'Tahoma', 'Verdana', sans-serif; 
	color: #736e6c;
}

div#copyright .note {
	font: 9px/11px 'Helvetica', 'Tahoma', 'Verdana', sans-serif;
	color: #736e6c;
}

/* =Dropdowns
---------------------------------------------------------------------- */
ul#dropdown0, ul#dropdown1, ul#dropdown2 {
	list-style: none;
	position: relative;
}

ul#dropdown0 ul, ul#dropdown1 ul, ul#dropdown2 ul {
	background: #eeeeee;
	width: 153px;
	list-style: none;
	position: absolute;
	top: 35px;
	display: none;
	z-index: 100;
	text-align: left;
	margin: 0 !important;
	padding: 0 !important;
	border-left: 1px solid #c0c0c0;
	border-bottom: 1px solid #c0c0c0;
}

ul#dropdown0 li, ul#dropdown1 li, ul#dropdown2 li {
	padding-top: 0 !important;
}

ul#dropdown0 li:hover ul, ul#dropdown0 li.hover ul {
	display: block;
	top: 27px;
	left: 17px;
} 

ul#dropdown1 li:hover ul, ul#dropdown1 li.hover ul {
	display: block;
	top: 27px;
	left: 14px;
} 

ul#dropdown2 li:hover ul, ul#dropdown2 li.hover ul {
	display: block;
	top: 27px;
	left: 12px;
} 

ul#dropdown0 li:hover ul a, ul#dropdown0 li.hover ul a,
ul#dropdown1 li:hover ul a, ul#dropdown1 li.hover ul a,
ul#dropdown2 li:hover ul a, ul#dropdown2 li.hover ul a {
	display: block;
	width: 146px;
	height: 20px;
	line-height: 16px;
	margin: 0 !important;
	text-decoration: none;
	padding: 2px 0 2px 8px;
	border-top: 1px solid #ffffff;
	border-right: 1px solid #c0c0c0;
}

ul#dropdown0 li li, ul#dropdown1 li li, ul#dropdown2 li li {
	position: relative;
}

ul#dropdown0 ul a, ul#dropdown1 ul a, ul#dropdown2 ul a {
	font-size: 11px;
	color: #cc171e;
}

ul#dropdown0 ul a:hover, ul#dropdown1 ul a:hover, ul#dropdown2 ul a:hover {
	background: #666666;
	color: #ffffff;
	display: block;
	width: 146px;
	height: 20px;
	line-height: 16px;
	margin: 0 !important;
	text-decoration: none;
	padding: 2px 0 2px 8px;
	border-top: 1px solid #ffffff;
	border-right: 1px solid #c0c0c0;
}