@charset "utf-8";

/* metric-conversions.org */

/* Main structure common to all pages and all browsers- using spites */

/*#####################################################################################*/

/*#####################################################################################*/
/* main structure of the pages */
/*#####################################################################################*/

body {
	background-color:#F5F5F2;
	font-family:Arial, Helvetica, sans-serif;
	padding:0px;
	margin:0px;
}

div#container{
	display:block;
	position:relative;
	margin:0px auto;
	width:760px;
	height:auto;
	padding:0px;
	background-color:#F5F5F2;
}

#leftCol {
	display:block;
	position:relative;
	float:left;
	top:105px;
	width:468px;
	padding:0 0 0 0;
	margin:0 0 0 0; }

#middleCol {
	display:block;
	position:relative;
	float:left;
	top:105px;
	width:146px;
	padding:0 0 0 0;
	margin:0 0 0 0; }

#rightCol {
	display:block;
	position:relative;
	float:left;
	top:105px;
	width:146px;
	padding:0 0 0 0;
	margin:0 0 0 0; }

#largeLeftCol {
	display:block;
	position:relative;
	float:left;
	top:96px;
	width:614px;
	padding:0 0 0 0;
	margin:0 0 0 0; }

/*#####################################################################################*/
/* in container */
/*#####################################################################################*/

/*** main banner ***/

#header {
	display:block;
	position:relative;
	width:760px;
	height:142px;
	padding:0px;
	margin:0px;
	background-color:#F5F5F2;
	background-position: 0 0; }

/*#####################################################################################*/
/* in container > header */
/*#####################################################################################*/

#menu {
	display:block;
	position:relative;
	top:85px;
	width:760px; 
	height:100px;
	padding:0px;
	margin:0px;
	font:Arial, Helvetica, sans-serif;
	background-position: 0 -142px; } 

#menuIndex {
	display:block;
	position:relative;
	top:85px;
	width:760px; 
	height:155px;
	padding:0px;
	margin:0px;
	font:Arial, Helvetica, sans-serif;
	background-position: 0 -242px; }

/*#####################################################################################*/
/* in container > header >menu */
/* in container > header >menuIndex */
/*#####################################################################################*/

h1{
	position:relative;
	top:10px;
	left:30px;
	width:740px;
	text-align:center;
	font-weight:bold;
	font-size: 22px;
	color:#393B41; }

#menuIndex h1{
	left:10px; }

h2 {
	position:relative;
	top:0px;
	left:25px;
	width:710px;
	text-align:center;
	font-weight:bold;
	font-size: 16px;
	color:#393B41; 
	padding:0 0 0 0;
	margin:0 0 0 0; }

#menuIndex h2 {
	z-index:2;
	text-align:left; }

h2 a {
	cursor:pointer;
	text-decoration:none;
	color:#393B41; }

h2 a:hover {
	color:#0CDAFF; }

#menuIndex h2 a {
	color:#0CDAFF; }

#menuIndex h2 a:hover {
	color:#393B41; }

h3{
	position:relative;
	top:0px;
	left:25px;
	width:400px;
	z-index:2;
	text-align:left;
	font-weight:normal;
	font-size: 12px;
	color:#393B41;
	padding:5px 0 0 0;
	margin:0 0 0 0; }

h3 a{
	cursor:pointer;
	text-decoration:none;
	font-weight:bold;
	color:#0CDAFF; }

h3 a:hover{
	color:#393B41; }

.menuText {
	position:relative;
	top:8px;
	left:305px;
	font-size: 11px;
	font:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#CCCCCC;
}

.menuText a {
	color:#FFFFFF;
	text-decoration:none;
}

.menuText a:hover {
	color:#0CDAFF;
}

.menuText b {
	color:#0CDAFF;
}

/*#####################################################################################*/
/* in container > middleCol */
/*#####################################################################################*/

.unitCatagory {
	position:relative;
	padding:0 0 0 0;
	margin:0 0 0 0;
	cursor:pointer;
	width:146px;
	height:107px;
	text-align:center;
	font-size: 11px;
	font-weight:bold; }

.unitCatagory p {
	position:relative;
	padding:0 0 0 0;
	margin:0 0 0 0;
	top:7px;
	text-decoration:none;
	color:#0CDAFF; }

.unitCatagory p a{
	text-decoration:none;
	color:#0CDAFF; }

.unitCatagory p a:hover{
	color:#FFFFFF; }

.temperatureBox {
	background-position: -341px -397px; }	

.lengthBox {
	background-position: -487px -397px; }	

.areaBox {
	background-position: -341px -504px; }	

.weightBox {
	background-position: -633px -397px; }	

.volumeBox {
	background-position: -487px -504px; }	

.calculatorBox {
	background-position: -633px -504px; }

/*#####################################################################################*/
/* in container > rightCol */
/*#####################################################################################*/

.sideFeature {
	display:block;
	position:relative;
	font-weight:bold;
	color:#393B41; }

.sideFeature b{
	display:block;
	position:relative;
	top:7px;
	width:146px;
	font-size: 14px;
	cursor:pointer;
	text-align:center; }

.sideFeature p{
	position:relative;
	top:95px;
	width:133px;
	left:8px; 
	font-size: 12px; }

.sideFeature p a{
	position:relative;
	top: 0px;
	left: 0px;
	font-size: 12px;
	color:#393B41;
	text-decoration:none; }

.sideFeature p a:hover{
	color:#0CDAFF; }

/*** Calculator side item ***/

.conversionCalculator {
	position:relative;
	top:0px;
	width:146px;
	height:214px;
	background-position: -790px -1062px; }

/*** Tables side item ***/

.conversionTables {
	position:relative;
	top:0px;
	width:146px;
	height:321px;
	background-position: -790px -742px; }

.goButton {
	display:block;
	position:absolute;
	top:178px;
	left:87px; }

/*** Popular side item ***/

#popularLinks {
	display:block;
	position:relative;
	top:0px;
	left:0px;
	width:146px;
	height:642px;
	z-index:0;
	font-weight:bold;
	color:#393B41;
	background-position: -790px 0; }

#popularLinks b {
	display:block;
	position:relative;
	top:7px;
	width:146px;	
	text-align:center;
	font-size: 14px;
	text-align: center; }

#popularLinks p {
	display:block;
	position:relative;
	top:5px;
	width:146px;	
	text-align:center;
	font-size: 12px;
	left:10px;
	text-align: left;
	padding:5px 0 0 0;
	margin:0 0 0 0; }

#popularLinks p a {
	text-decoration:none;
	color:#393B41; }

#popularLinks p a:hover {
	color:#0CDAFF; }

/*#####################################################################################*/
/* in container > baseText */
/*#####################################################################################*/

#baseText{
	display:block;
	position:relative;
	float:left;
	width:760px;
	top:100px;
	padding:0 0 0 0;
	margin:0 0 0 0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#393B41;
	background-color:#F5F5F2; }
		
#baseText a{
	color:#393B41;
	text-decoration:none; }		
		
#baseText a:hover{
	color:#0CDAFF; }

/*#####################################################################################*/
/* in container > leftCol */
/*#####################################################################################*/

.temperatureLarge {
	width:125px;
	height:210px;
	background-position: -650px -726px; }


.lengthLarge {
	width:219px;
	height:173px;
	background-position: -570px -936px; }

.areaLarge {
	width:169px;
	height:177px;
	background-position: -160px -856px; }

.weightLarge {
	width:160px;
	height:212px;
	background-position: 0 -856px; }

.volumeLarge {
	width:169px;
	height:178px;
	background-position: -468px -742px; }

.temperatureSmall {
	width:88px;
	height:100px;
	background-position: -468px -642px; }

.lengthSmall {
	width:105px;
	height:100px;
	background-position: -560px -632px; }

.areaSmall {
	width:93px;
	height:100px;
	background-position: -660px -632px; }

.weightSmall {
	width:104px;
	height:100px;
	background-position: -760px -642px; }

.volumeSmall {
	width:100px;
	height:110px;
	background-position: -394px -1180px; }

/*#####################################################################################*/
/** Search box on index page **/
/*#####################################################################################*/

#searchBox{
	position:relative;
	top:85px;
	left:0px;
	height:auto;
	width:341px;
	font-size: 16px;
	font-weight:bold;
	color:#393B41;
	font:Arial, Helvetica, sans-serif; }

.searchBG {
	width:341px;
	height:302px;
	background-position: 0 -397px; }

#searchBox h2 {
	position:relative;
	top:65px;
	left:20px;
	width:468px;
	text-align:left;
	font-weight:bold;
	font-size: 14px;
	color:#393B41;
	padding:0 0 0 0;
	margin:0 0 0 0; }	

#searchBox a {
	text-decoration:none;
	color:#393B41; }	

#searchBox a:hover {
	color:#0CDAFF; }

#searchBox p {
	position:relative;
	top:-50px;
	left:150px;
	width:250px;
	text-align:left;
	font-weight:bold;
	font-size: 12px;
	color:#393B41;
	padding:0 0 0 0;
	margin:0 0 0 0; }	

.inputBox {
	position:relative;
	top:75px;
	left:20px;
	width:300px;
	height:25px;	
	font:Arial, Helvetica, sans-serif;
	font-size: 18px;
	padding:0 0 0 0;
	margin:0 0 0 0; }

.suggestionsBox {
	position: relative;
	font:Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000;
	top:75px;
	left:20px;
	margin: 10px 0px 0px 0px;
	width: 300px;
	background-color: #212427;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border: 2px solid #000;	
	color: #fff; }
	
.suggestionList {
	z-index:2;
	margin: 0px;
	padding: 0px; }
	
.suggestionList ul {
	z-index:2;
	padding:0 0 0 0;
	margin:0 0 0 0;
	list-style-type: none; }

.suggestionList li {
	margin: 0px 0px 3px 0px;
	padding:0 0 7px 10px;
	font:Arial, Helvetica, sans-serif;
	cursor: pointer; }
	
.suggestionList li:hover {
	text-decoration:none;
	background-color: #393B41;
	color:#0CDAFF; }

/*#####################################################################################*/
/** Definitions **/
/*#####################################################################################*/

#definitions {
	display:block;
	position:relative;
	top:-50px;
	left:30px;
	width:400px;
	color:#393B41;
	font:Arial, Helvetica, sans-serif;
	font-size: 12px; }

#definitions a{
	font-weight:bold;
	text-decoration:none;
	color:#393B41; }

#definitions a:hover {
	color:#0CDAFF; }

/*#####################################################################################*/
/** Columns **/
/*#####################################################################################*/

.column {
	display:block;
	position:relative;
	float:left;
	width:220px;
	padding:0 10px 0 0;	
	margin:0 0 0 0; }

.column p {
	font:Arial, Helvetica, sans-serif;	
	font-size: 12px;
	font-weight:bold;
	line-height:4px;
	color:#393B41;
	padding:0 0 0 0; }	

.column p a {
	text-decoration:none;
	color:#393B41; }

.column p a:hover {
	color:#0CDAFF; }	

/*#####################################################################################*/
/** Converter **/
/*#####################################################################################*/

#converter {
	display:block;
	position:relative;
	top:0px;
	width:468px;
	height:auto;
	font:Arial, Helvetica, sans-serif;
	padding:0 0 0 0;
	margin:0 0 0 0; }

/*####################################################################################*/

#metricConverter {
	display:block;
	position:relative;
	top: 0px;
	width:341px;
	height:302px;
	font:Arial, Helvetica, sans-serif;
	background-position: 0 -397px; }

#formTitle {
	position:absolute;
	display:block;
	top:30px;
	left:235px;
	width:210px;
	text-align:left;
	font-size: 16px;
	font-weight:bold;
	color:#393B41; }

#formTitle a {
	color:#393B41;
	text-decoration:none; }

#arguement {
	position:absolute;
	display:block;
	top:110px;
	left:232px;
	width:180px; }

#selecter {
	position:absolute;
	display:block;
	top:110px;
	left:232px;
	width:180px; }

.convertButton {
	position:absolute;
	display:block;
	top:140px;
	left:365px; }

.gotoThis {
	position:absolute;
	display:block;
	top:139px;
	left:368px; }

/*#####################################################################################*/
/* container content imported with AJAX on conversion */
/*#####################################################################################*/

#resultContent {
	display:block;
	position:relative;
	top:0px;
	width:468px;
	height:50px;
	padding:0 0 0 0;
	margin:0 0 0 0;
	font:Arial, Helvetica, sans-serif;
	background-color:#F5F5F2; }

#resultContent p {
	left:10px;
	text-align:center;
	font-size: 21px;
	padding:0px 0 10px 0; }

#resultContent p b {
	font-size: 17px;
	padding:0 0 0 0; }

#resultContent p b a {
	text-decoration:none;
	color:#0CDAFF;	 }

#resultContent p b a:hover {
	color:#000000;	 }

#formAgainContent {
	display:block;
	position:relative;
	top:0px;
	left:0px;
	height:100px;
	width:468px;
	text-align:center; }

#formAgainContent a {
	text-decoration:none;
	color:#0CDAFF; }

#formAgainContent a:hover {
	text-decoration:none;
	color:#000000; }	

.convertThis2 {
	position:absolute;
	display:block;
	top:80px;
	left:356px; }

#entryBox {
	display:block;
	position:absolute;
	top:50px;
	left:200px
	padding:0 0 0 0;
	margin:0 0 0 0; }



#metricTables {
	display:block;
	position:relative;
	top: 0px;
	width:468px;
	height:157px;
	font:Arial, Helvetica, sans-serif;
	background-position: 0 -699px; }

#metricTables p{
	position:absolute;
	top:70px;
	left:30px;
	width:300px;
	font-size: 16px;
	font-weight:bold;
	color:#393B41;
}

#metricTables p a{
	cursor:pointer;
	color:#393B41;
	text-decoration:none;
}

#metricTables p a:hover{
	cursor:pointer;
	color:#0CDAFF;
	text-decoration:none;
}

#metricTablesGo {
	display:block;
	position:absolute;
	top:94px;
	left:371px; }

/*#####################################################################################*/
/* in container > leftCol > converter */
/*#####################################################################################*/

#converter p{
	position:relative;
	top:20px;
	left:200px;
	width:260px;
	height:auto;
	font-size: 16px;
	font-weight:bold;
	color:#393B41;
	text-decoration:none;
}

#converter p a{
	color:#393B41;
	text-decoration:none;
}

#converter p a:hover{
	color:#0CDAFF;
	text-decoration:none;
}

/*#####################################################################################*/
/* Tables display */
/*#####################################################################################*/

#controlBar {
	display:block;
	position:relative;	
	padding:10px 0 10px 0;
	margin:0 0 0 0;
	width:614px;
	text-align:center; }

.bodyCol {
	display:block;
	position:relative;
	float:left;
	top:20px;
	left:0px;
	width:200px;
	height:auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	color:#393B41; }

.bodySubCol {
	display:block;
	position:relative;
	text-align:center;
	float:left;
	top:0px;
	left:0px;
	width:100px;
	height:auto; }

.bodySubCol a {
	text-decoration:none;
	color:#393B41; }	

.bodySubCol a:hover {
	color:#0CDAFF; }	

.bodySubCol ul {
	line-height:12px;
	left:0px;
	font-size:10px;
	font-weight:normal;
	text-align:left;
	margin: 0 0 0 0; }	

.dark {
	background-color:#0CDAFF; }

.light {
	left:30px;
	background-color:#F5F5F2; }

/*#####################################################################################*/
/* Email display */
/*#####################################################################################*/

.emailIcon {
	display:block;
	position:relative;
	width:265px;
	height:117px;
	background-position: -320px -1070px; }

#emailUs {
	display:block;
	position:relative;
	top:0px;
	width:468px;
	height:auto;
	font:Arial, Helvetica, sans-serif; }

#emailUs p{
	position:relative;
	left:20px;
	width: 420px;
	font-size: 16px;
	font-weight:bold;
	color:#393B41; }

.inputItem {
	display:block;
	position:relative;
	top:0px;
	left:30px;
	font-size: 16px;
	font-weight:bold;
	color:#393B41;
	padding:8px 0 8px 0; }

.userInputBox {
	position:absolute;
	top:0px;
	left:130px;
	width:266px;
	font-size: 16px;
	font-weight:bold;
	color:#393B41; }

/*#####################################################################################*/
/* External links display */
/*#####################################################################################*/

#externalLinks {
	display:block;
	position:relative;
	top:0px;
	width:468px;
	height:auto;
	font:Arial, Helvetica, sans-serif; }

.linkIcon {
	display:block;
	position:relative;
	width:216px;
	height:127px;
	background-position: -350px -935px; }

.linkList{
	display:block;
	position:relative;	
	top:10px;
	font-weight:bold;
	font-size: 14px; }

.item {
	display:block;
	position:relative;
	top:10px;
	left:0px;
	width: 460px;
	line-height:20px;
	font-size: 12px;
	font-weight:bold;
	color:#393B41; }

.item a{
	color:#393B41;
	text-decoration:none; }

.item a:hover {
	color:#0CDAFF; }

/*#####################################################################################*/
/* Sitemap display */
/*#####################################################################################*/

.sitemapIcon {
	display:block;
	position:relative;
	width:266px;
	height:111px;
	background-position: -80px -1190px; }	

.section{
	display:block;
	position:relative;
	top:0px;
	left:0px;
	width: 600px;
	font:Arial, Helvetica, sans-serif; }

.section p {
	display:block;
	position:relative;
	top:0px;
	left:0px;
	font-size: 16px;
	font-weight:bold; 
	color:#393B41;
	text-align:center; }

.col {
	display:block;
	position:relative;
	float:left;
	text-align:left;
	width:200px; }

.col a{
	display:block;
	position:relative;
	top:15px;
	width: 190px;
	font-size: 12px;
	font-weight:bold;
	color:#393B41;
	text-decoration:none; }

#col1 a:hover {
	color:#0CDAFF; }


/*#####################################################################################*/
/* Webmaster display */
/*#####################################################################################*/

.webmasterIcon {
	display:block;
	position:relative;
	width:320px;
	height:126px;
	background-position: 0px -1068px; }	

.text {
	display:block;
	position:relative;
	text-align:left;
	width:600px; }



.converterLink {
	position:relative;
	top:0px;
	width:468px;
	height:107px;
	padding:0 0 0 0;
	margin:0 0 0 0; }

.converterLink b {
	display:block;
	position:relative;
	top:20px;
	width:300px;
	left:120px;
	height:0px;
	font:Arial, Helvetica, sans-serif;	
	font-size: 24px;
	font-weight:bold;
	color:#393B41;
	padding:0 0 0 0;
	margin:0 0 0 0; }

.converterLink b a {
	text-decoration:none;
	color:#393B41; }

.converterLink b a:hover {
	color:#0CDAFF; }	

.converterLink p {
	display:block;
	position:relative;
	top:50px;
	width:350px;
	left:120px;
	height:0px;
	font:Arial, Helvetica, sans-serif;	
	font-size: 14px;
	font-weight:bold;
	color:#393B41;
	padding:0 0 0 0;
	margin:0 0 0 0; }	

.converterLink p a {
	font-size: 14px;
	text-decoration:none;
	color:#393B41; }	

.converterLink p a:hover {
	color:#0CDAFF; }	







/*####################################################################################*/



/*#####################################################################################*/
/* Adverts */
/*#####################################################################################*/

.dummy {
	display:block;	
	position:relative;
	padding:0 0 0 0;
	margin:0 0 0 0;
	background-color:#F5F5F2; }

.advert {
	display:block;	
	position:absolute;
	padding:0 0 0 0;
	margin:0 0 0 0;
	background-color:#F5F5F2; }

.topLineAd {
	top:146px;
	left:0px;
	width:760px;
	height:15px; }

.topLineDummy {
	top:146px;
	width:760px;
	height:70px; }

.smallLineAd {
	top:7px;
	left:0px;
	width:468px;
	height:30px; }

.bannerAd {
	top:266px;
	left:0px;
	width:468px; }

.bannerAd2 {
	top:500px;
	left:0px;
	width:468px; }

.bannerDummy {
	top:0px;
	width:468px;
	height:60px; }

.largeBannerAd {
	top:270px;
	width:760px;
	left:0px;
	padding:0 0 8px 0; }

.largeBannerDummy {
	top:130px;
	width:760px;
	height:90px;
	padding:0 0 8px 0; }

.sideAdvert {
	display:block;
	position:absolute;
	top:285px;
	left:615px;
	width:146px;	
	height:240px; }

.setDown {
	top:408px;
	left:627px; }

.sideDummy {
	display:block;
	position:relative;
	width:146px;	
	height:240px;
	text-align:center;
	padding:20px 0 0 0;	}

.sideButton {
	display:block;
	position:relative;
	top:105px;
	left:13px;
	width:120px;	
	height:90px;
	text-align:center;
	padding:20px 0 0 0;
	margin:0 0 0 0;	}

/*#####################################################################################*/
/* Miscellaneous */
/*#####################################################################################*/

.upArrow {
	position:relative;
	top:-12px;
	left:30px;
	width:10px;
	height:10px;
	background-position: -769px -10px; }

.button {
	width:50px;
	height:30px;
	cursor:pointer; }

.blue {
	background-position: -886px -642px; }

.black {
	background-position: -886px -672px; }

#w3c {
	height:32px;
	width:84px;
	border:0;
	float:right;
	padding:0 0 5px 3px;
	background-position: -702px -1124px; }

.bg {
	background-image: url(/img/metric-conversions-images.jpg);
	background-repeat: no-repeat; }