/*
////////////////////////////////////////////
//--  Author Yasmina Chitti
//--  Copyright (c) 2009 SRI International
////////////////////////////////////////////
*/

/* SRI blue: #0a2972 */
/* Site NEW (from Kathy) orange: #d4582a */

@import url(/menus/menu.css);
@import url(/extras/styles/box.css);


/***************************/
/*****   MAIN LAYOUT *******/
/***************************/


*{
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
	line-height:1.4em;
	color: #505050;
	text-align: justify; 
}

img {
	border:0;
}

.clearBoth {
	clear: both; 
}

.clearLeft {
	clear: left; 
}

.clearRight {
	clear: right; 
}


html{margin:0; padding:0; width:100%;  }


body {
	background-color: #fff; 
	width:100%; 
}

#img-background{position:absolute; top:0px; z-index:-1; width:100%; }


#wrapper {
	border-top: solid 4px #0a2972;
	border-bottom: solid 4px #0a2972;
	position: relative;
	margin: auto;
	padding: 0px 0 25px 0;
}

#page {
	width: 900px;
	visibility: visible;
	margin-left: auto; /* remove the auto margin to un-center it */
	margin-right: auto;
	background-color: #fff; 
}

#header {
	margin: 0 ;
	width:100%;
	height:120px;
	background:#fff url(/images/banner.jpg) no-repeat scroll 0 0;
}



#logo {
	float:left;
}

#headerRightSide {
	float: right;
	text-align: right;
}

#logIn {
	float: right;
}

#flags {
	float: right;
	margin-top:5px;
}

#company {
	left:625px;
	margin-top:55px;
}

/* Main content, either for 1- or 2-column pages */

#mainContent {
	padding: 10px;
}


#leftColumn {
	padding: 0;
	width: 640px;
	text-align: justify; 
	
}

#rightColumn {
	float: right;
	width: 220px;
	padding: 0px;
	text-align: justify; 
	
}

#productLine, #productLine a  {
	color: #0a2972;
		font-weight: normal;
		font-size: 24px;
		font-family: Arial, sans-serif;
		margin: 0px 0 40px 0;
		text-align:center;
}

/* For what's under the bottom border */

#footer {
	clear:both;
	text-align: center;
	margin: 0;
	padding: 10px 0px 10px 0px;
	width: 100%; 
}

#bottomNav , #bottomNav a,  #bottomText a {
	font-size: x-small; 
	text-align: center;
}


#bottomText {
	text-align: center;
	background: url(/images/sri.jpg) no-repeat top left;
	width: 450px;
	height:50px;
	color: #666666; 
	margin: auto;
	margin-top:10px;
	padding-left: 60px;
	padding-top: 5px;
	font-size: x-small; 
}



/***************************/
/* HTML TAG  REformatting */
/***************************/

h1 {
color: #000;
	font-weight: normal;
	font-size: 24px;
	font-family: Arial, sans-serif;
	margin: 5px 0 10px 0;
}

h2 {
	padding: 15px 0 10px 0;
	color: #226ab2; font-weight: bold; font-size: 16px
}


#leftColumn h3 {
	color: #0a2972;
	font-weight: bold;
	font-size: 14px;
	padding-top: 7px;
	background: url(/images/arrow3.png) no-repeat;
	padding:2px 0px 2px 25px;
	margin:20px 0px 5px 20px;
}


 div.lmWelcome {
	color: #000000;
	font-weight: bold;
	font-size: 12px;
	text-align: center;
	margin-top:0px;
	padding: 10px;
	width: 880px;
	border: solid 1px rgb(212, 88, 42);
	background: rgb(250, 227, 198);
}



/* Links */
a:link    { color: #226ab2; font-weight: normal; text-decoration: none }
a:visited { color: #226ab2; text-decoration: none }
a:hover   { text-decoration: underline }
a:active  { text-decoration: none }
a.navbar {
	color: #f3cf53;
	background-color: #0a2972;
	font-size: 11px;
}

a.important:visited { color: #d4582a; }




/* Main tags */

img,object {	border: 0px; text-decoration: none }

p, span {
	line-height: 1.4em;
	padding: 3px;
	font-size: 12px;
}

ul,li     { 
	line-height: 1.4em;
	text-align: left;
	margin:.5em 1em .5em 1em;
}


span.sup 	{
	font-size: xx-small;
	margin-bottom: 10px;
}


/* TABLES */
table {
border-collapse:collapse;
padding:10px;
}

table.uncollapse {
border-collapse:separate;
padding:0px;
}
table.centered {  
	vertical-align:top;  
	text-align:center; 
	padding: 5px;
}

table.form td {
	vertical-align:top;  
	text-align:right; 
	padding-top: 15px;
	
}
td.default {  
	text-align:left; 
	vertical-align:top;  
	padding: 5px;
}

td.centered {  
	vertical-align:top;  
	text-align:center; 
	padding: 5px;
	
}


td.top
{
	width: 200px;
	vertical-align: top;
	padding: 3px 3px 3px 3px;
	background-color: #D9D8FF;
	border-color:  #0a2972;
	border-width: 1px;
	border-style: none dotted solid none;
}

td.left
{

	vertical-align: top;
	padding: 3px 3px 3px 3px;
	border-color:  #0a2972;
	border-width: 1px;
	border-style: none dotted solid none;
}

td.padded {	padding: 10px 10px 25px 25px; }

table.tabular  { border: solid 2px #2e368a }
td.tabletitle  { color: white; font-weight: bold; font-size: 11px; background-color: #d4582a }
td.data1       { font-size: 11px; background-color: #fff79d; display: block }
td.data2       { font-size: 11px; background-color: #f3cf53; display: block }
td.total       { font-size: 11px; border-top: 2px solid #226ab2 }
tr.odd 				{	background-color: #F5F5F5}
tr.even	{	background-color: #D9D8FF;	}

tr.bottomborder {
	border-bottom: navy solid thin;
	border-top: navy solid thin;
	border-left: none;
	border-right: none;
	font-size: smaller;
}

td.partner {  
	vertical-align:top;  
	padding: 5px 10px 5px 5px;
	border-bottom:solid #0a2972 1px;
	
}

td.licenseTitle {  
	background-color: #F2EFE9;
	border-bottom:solid #0a2972 1px;
	vertical-align:middle;  
	text-align:left; 
	padding:5px; 
	width:300px;
}
td.license {  
	background-color: #F2EFE9;
	border-bottom:solid #0a2972 1px;
	vertical-align:middle;  
	text-align:center; 
	padding:5px; 
}

td.smallbox  {
	/*background:transparent url(/images/box/smallboxtop.png) no-repeat scroll 10px 0;*/
	border-bottom:solid #0a2972 1px;
	color: #000; 
	font-size: 14px;
	font-weight: bold; 
	padding: 0px; 
	margin:0px; 
	height:25px;	
	text-align:center;
	vertical-align:middle;
}
.compare td.licenseTitle {  
	border:solid #0a2972 1px;
	width:180px;
	font-weight:bold;
}
.compare td.license {  
	border:solid #0a2972 1px;
}
.compare  td.smallbox  {
	background-color: #d4582a;
	border:solid #0a2972 1px;
	color: #fff; 
	font-weight: normal; 
}



/* NAVIGATION BAR */
table.navbar    { color: #3b4e7a;  font-size: 12px; padding-top:2px; padding-left: 40px; vertical-align:middle; }
td.navbar    {  
	width:150px; 
	vertical-align:middle;  
	text-align:center; 
	text-decoration: none;
	vertical-align:middle; 
	padding-top:3px; 
}
td.navbar a:link { color: #3b4e7a; text-decoration: none; vertical-align:middle;   }
td.navbar a:visited { color: #3b4e7a; text-decoration: none; vertical-align:middle;  }
td.navbar a:hover  { color: #d4582a;   text-decoration: none; vertical-align:middle; }

td.button {  
  height: 50px;
  width: 140px;
	padding: 0px; 
	margin:0px;	
}

.compare td.button {  
	padding-left: 40px; 
}

div.facebook {
	text-align:center;
}
div.facebook a.button  {
	background: transparent url('/images/buttons/karto-facebook.png') no-repeat scroll;
	background-position: 0px 0px;
	display: block;
	text-align:left;
	font: bold 12px lucinda, sans-serif;
	text-decoration: none;
	padding: 0px; 
	margin:auto;
	height: 100px;
	width: 280px;
	border:1px solid white;
}

td.button a.button {
	background: transparent url('/images/buttons/kartoButtons.png') no-repeat scroll;
	background-position: 0px 0px;
	color: #ffffff;
	display: block;
	text-align:center;
	font: bold 12px lucinda, sans-serif;
	text-decoration: none;
	padding: 0px; 
	margin:0px;
	height: 50px;
	width: 140px;
	border:1px solid white;
}


a.button span {
	color: #ffffff;
	display: block;
	line-height: 14px;
	margin-top:14px;
	text-align:center;
	height: 14px; 


}

div.facebook a.button span {
	color: #000;
	display: block;
	line-height: 14px;
	margin-top:14px;
	text-align:left;
	width: 140px;
	margin-left:100px;
}

/*div.facebook a.button:hover, td.button a.button:hover {
	background-position:  0px -43px;
	color: #ffffff;
	outline: none; 
}

div.facebook a.button:hover, td.button a.button:active {
	background-position:  0px -88px;
	color: #ffffff;
	outline: none; 
}
*/


td.subnavbar 	{ 
	height:10px;
	vertical-align:middle;  
	text-align:center;
}

/* SDK INSERT */
table.sdk    { color: #0a2972;  font-size: 12px; font-weight:bold; padding-left:10px;}
td.sdk    {  font-size:10px; line-height:1.1em; vertical-align:top;  text-align:left; padding:2px;}

table.login   { 
	color: #0a2972;  
	font-size: 12px; 
	font-weight:bold; 
	padding-left:10px;
	}

td.login    {  
	font-style: Arial;
	font-size:12px; 
	font-weight: bold;
	line-height:1.1em; 
	vertical-align:top;  
	text-align:left; 
	padding-left:10px;
	}

/*input[type=submit] {
    color: #ffffff;
    background: #a4a4a4;
    border-color: #ffffff;
    border-bottom-color: #dddddd;
    border-right-color: #dddddd;
}

*/
/***************************/
/* Section/Text formatting */
/***************************/
/* SRI blue: #0a2972 */
/* Site OLD orange: #d55647 */
/* Site NEW (from Kathy) orange: #d4582a */
/* MAIN PAGE */

.pagetitle     {
	font-weight: bold;
	font-size: 14px;
	padding: 5px;
	text-align: center;
}
.section       { color: #226ab2; font-weight: bold; font-size: 14px }
.subsection    { color: black; font-size: 11px }
.maintext      { color: black; font-size: 11px; padding: 10px 5px 5px}
.important {color: #d4582a; font-weight: bold;}
ul.sdk li {text-decoration:none;color: #d4582a; font-weight: bold;}

.share {
width: 50%;
 margin: 10px;
}
/***************************/
/* -------FORMS----------  */
/***************************/


.formLabel {
	clear:both;
	float: left;
	font-size: 10px;
	color: #000000;
	width:90px;
}


.formWarning {
	clear:both;
	float: left;
	font-size: 10px;
	font-weight:bold;
	color: #aa0000;
	width:200px;
	
}
.formField {
	float: left;
	font-size: 11px;
	width:115px;
	color: #000000;
	margin:0px;
	position:left;
	padding-bottom:10px;
	}
	
	.formComment {
		padding:5px 5px 0px 10px;	
		float: left;
		font-size: 10px;
		color: #000000;
	}
	
.formLabelItalic { 
	clear: both;
	float: left;
	font-style: italic; 
	color: #111111; 
	font-size: 12px; 
	width:150px;
	padding:5px 5px 0px 0px;	
	}


/* OTHER */
.reset {
	border: solid 2px  #0a2972;
	clear:both;
	padding:8px;
	margin:0px;
	display:block;
	vertical-align:top;
	position:relative;
	left:0;
	top: 0;
	}
.menutitle    { color: white; font-weight: bold; font-size: 11px; font-family: Verdana, Helvetica, sans-serif }
.menutxt      { color: white; font-weight: normal; font-size: 11px; font-family: Verdana, Helvetica, sans-serif }
.sidetitle    { color: white; font-weight: bold; font-size: 11px; font-family: Verdana, Helvetica, sans-serif; background-color: #226ab2; padding: 3px }
.sidebar      { font-size: 11px; font-family: Verdana, Helvetica, sans-serif }
.emphasis      {	font-weight: bold;	color: #0a2972;}
.smalltext     { font-weight: normal; font-size: 11px;  }
.smalllink     { font-weight: normal; font-size: 10px; text-decoration: underline }
.copyright     { font-weight: normal; font-size: 10px;  padding: 5px }
.footnote      { font-size: 9px; color: #666666; line-height: 12px;	text-align: center; }
.quotedText 	{	font-style: italic;	text-align: center;color: #0a2972;margin-top:25px;}
.error         { color: #226ab2; font-weight: bold; }
.required        { color: #aa0000; font-weight: bold; margin:0px; padding:0px; }
.arrowbg 	{
	background: url(/images/arrow3.png) no-repeat;
	padding:4px 0px 2px 20px;
	}

/* Color and Borders */
.bluebgcolor {	background-color: #0a2972;	color: #FFFFFF;}
.bgcolor      { background-color: #fff }
.bluespacer   { background-color: #0a2972 }
.rightborder  { border-right: solid 1px  #0a2972 }
.leftborder   { border-left: solid 1px  #0a2972 }
.topborder    { border-top: solid 1px  #0a2972 }
.bottomborder { border-bottom: solid 1px  #0a2972 }
.blueborder   { border: solid 1px #0a2972 }

/***************************/
/* Position ONLY           */
/***************************/
.center     { text-align: center }
.justify    { text-align: justify }
.bottom 		{	vertical-align: bottom;}
.middle 		{	vertical-align: middle;}
.top 				{	vertical-align: top;}

/***************************/
/* ID tag ONLY           */
/***************************/




/* SPECIAL SETTINGS FOR HOME PAGE */



#flash {
	text-align:center;
	margin-top:50px;
	width: 550px;
	height: 300px;
	visibility: visible;
	float: left;
}

#movieplayer, #movie {
	text-align:center;	
	margin:15px;
	width: 550px;
	height: 399px;
	float: left;
}






#sdk {
	width: 230px;
	height: 290px;
	visibility: visible;
	float: right;
}