/* common html tag styles */

body {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	color: #333;
	background: #FFF url(images/body_bg.gif) repeat-x;
}

div {
	margin: 0;
	padding: 0;
}	

p, ul, input, select, textarea, ol, table {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	text-align: left;
}

strong {
	font-weight: bold;
}

a {
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}


/* the container for the site as well as the defining the colours of the headers and links */
.orange, .green, .blue {
	margin: 10px auto;
	padding-bottom: 10px;
	width: 935px;
	text-align: left;
}

	.orange h2 {
		/* orange */
		color: #F05E22;
	}
	
	.orange .content a, .orange .news a {
		/* blue */
		color: #0D67D2;
	}
	
	.orange .content a:hover, .orange .news a:hover {
		color: #fff;
		/* blue */
		background-color: #0D67D2;
	}
	
	.orange strong {
		/* green */
		color: #65BB46;
	}
	

	.green h2 {
		/* green */
		color: #65BB46;
	}
	
	.green .content a, .green .news a {
		/* orange */
		color: #F05E22;
	}
	
	.green .content a:hover, .green .news a:hover {
		color: #fff;
		/* orange */
		background-color: #F05E22;
	}
	
	.green strong {
		/* blue */
		color: #0D67D2;
	}
	

	.blue h2 {
		/* blue */
		color: #0D67D2;
	}
	
	.blue .content a, .blue .news a {
		/* green */
		color: #65BB46;
	}
	
	.blue .content a:hover, .blue .news a:hover {
		color: #fff;
		/* green */
		background-color: #65BB46;
	}

	.blue strong {
		/* orange */
		color: #F05E22;
	}
	

/* positioning of the udutu logo */
.logo {
	display: block;
	margin: 0;
	padding: 0;
	width: 166px;
	height: 70px;
}

	.logo img {
		border-style: none;
	}


/* the main navigation bar */
.nav {
	margin: 0;
	padding: 0;
}

	.nav li {
		display: inline;
		float: left;
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	
	.nav li a {
		display: block;
		margin: 0;
		padding: 0;
		height: 45px;
		overflow: hidden;
		text-decoration: none;
	}
	
	.nav .current a {
		background-position: 0 -90px;
	}
	
	.nav li a:hover {
		background-position: 0 -45px;
	}

	.nav li a span {
		visibility: hidden;
	}
	
	.company, .company a {
		width: 127px;
		background: transparent url(images/nav_company_btn.gif) no-repeat;
	}
	
	.products, .products a {
		width: 125px;
		background: transparent url(images/nav_products_btn.gif) no-repeat;
	}
	
	.services, .services a {
		width: 121px;
		background: transparent url(images/nav_services_btn.gif) no-repeat;
	}
	
	.pricing, .pricing a {
		width: 111px;
		background: transparent url(images/nav_pricing_btn.gif) no-repeat;
	}
	
	.resources, .resources a {
		width: 134px;
		background: transparent url(images/nav_resources_btn.gif) no-repeat;
	}
	
	.forums, .forums a {
		width: 113px;
		background: transparent url(images/nav_forums_btn.gif) no-repeat;
	}
	
	.faq, .faq a {
		width: 87px;
		background: transparent url(images/nav_faq_btn.gif) no-repeat;
	}
	
	.contact, .contact a {
		width: 117px;
		background: transparent url(images/nav_contact_btn.gif) no-repeat;
	}


/* the sub navigation bar for navigating inside a main section */
.sub_nav {
	clear: both;
	display: block;
	margin: 0;
	padding: 0;
	height: 20px;
}

.short_nav {
	height: 5px;
}

	.sub_nav a {
		margin: 0;
		padding: 0;
		font-size: 12px;
		line-height: 15px;
		color: #FFF;
		text-decoration: none;
	}

	
.orange .sub_nav {
	color: #fff;
	/* orange */
	background-color: #F05E22;
}

	.orange .sub_nav a:hover {
		margin: 0;
		padding: 0;
		color: #F05E22;
		background-color: #fff;
	}

.green .sub_nav {
	color: #fff;
	/* green */
	background-color: #65BB46;
}

	.green .sub_nav a:hover {
		margin: 0;
		padding: 0;
		color: #65BB46;
		background-color: #fff;
	}

.blue .sub_nav {
	color: #fff;
	/* blue */
	background-color: #0D67D2;
}

	.blue .sub_nav a:hover {
		margin: 0;
		padding: 0;
		color: #0D67D2;
		background-color: #fff;
	}

/* the buttons that appear on the right side of every page */
h1 {
	clear: right;
	display: inline;
	float: right;
	margin: 10px 0 0 0;
	font-size: 12px;
}

	h1 a {
		display: block;
		width: 300px;
		height: 96px;
		overflow: hidden;
		text-decoration: none;
	}
	
	h1 a:hover {
		background-position: 0 -96px;
	}

	h1 a span {
		visibility: hidden;
	}
	
	.orange_btn, .orange_btn a {
		background: transparent url(images/right_orange_btn.gif) no-repeat;
	}	
	
	.green_btn, .green_btn a {
		background: transparent url(images/right_green_btn.gif) no-repeat;
	}	
	
	.blue_btn, .blue_btn a {
		background: transparent url(images/right_blue_btn.gif) no-repeat;
	}	


/* the news box that appears on the home page */
.news {
	clear: right;
	float: right;
	margin: 10px 0 0 0;
	width: 298px;
	border: 1px solid #9BD882;
	background: #FFF url(images/news_bg.gif) repeat-x;
}

	.news h3 {
		margin: 10px 10px 0 10px;
		font-family: Tahoma, sans-serif;
		text-align: left;
		font-weight: bold;
		font-size: 16px;
		/* green */
		color: #65BB46;
	}
	
	.news h4 {
		margin: 10px 10px 0 10px;
		text-align: left;
		font-weight: bold;
		font-size: 12px;
		/* orange */
		color: #F05E22;
	}
	
	.news p {
		font-size: 11px;
		line-height: 13px;
		margin: 2px 10px 10px;
	}


/* the large image on the home page */
.main_img {
	margin: 10px 0 0 0;
}


/* the container for the sites content */
.content {
	float: left;
	width: 620px;
}

	h2 {
	margin: 15px 0;
	font-family: Tahoma, sans-serif;
	text-align: left;
	font-weight: bold;
	font-size: 16px;
	}
	
	.content p {
	margin: 0 0 12px 0;
	text-indent: 0px;
	}
	
	.img_left {
		float: left;
		margin: 0 10px 10px 0;
		border-style: none;
	}
	
	.img_left a img {
		border-style: none;
	}
	
	.text_right {
		float: right;
		width: 420px;
	}
	
	.clear {
		clear: both;
		height: 15px;
	}
	
	.horzDivider {
		clear: both;
		margin: 15px 0 -15px 0;
		height: 15px;
		border-top: 1px solid #CCC;
	}
	
	.column {
		float: left;
		clear: none;
		margin: 10px 0;
		padding-right: 9px;
		width: 300px;
		border-right: 1px solid #CCC;
	}
	
	.column_right {
		padding-left: 9px;
		padding-right: 0;
		border-right-style: none;
	}
	
	.install_btn, .install_btn a
	{
		background: transparent url(images/udututeach_install_btn.gif) left top no-repeat;
		display: block;		
		height: 35px;
		margin: 0 0 8px;
		overflow: hidden;
		padding: 0;
		text-decoration: none;
		width: 300px;
	}
	
		.install_btn a:hover
		{
			background-position: left bottom;
		}
		
			.install_btn a span
			{
				visibility: hidden;
			}
			
	.install_learn, .install_learn a
	{
		background-image: url(images/udutulearn_install_btn.gif);
	}
	
	ul.pricing_grid {
		margin: 0 auto 20px;
		padding: 0;
		width: 400px;
	}
	
		ul.pricing_grid li {
			border-bottom: dotted 1px #CCC;
			clear: both;
			line-height: 34px;
			list-style: none;
			height: 34px;
			margin: 0 0 5px;
			padding: 0 0 5px;
		}
			
			ul.pricing_grid li a {
				color: #0D67D2 !important;
				font-weight: bold;	
			}
			
			ul.pricing_grid li a:hover, ul.pricing_grid li a:focus {
				background-color: #0D67D2 !important;
				color: #FFF !important;
			}
			
			ul.pricing_grid li h3 {
				font-size: 16px;
				font-weight: bold;
				line-height: 34px;
				margin: 0;
				padding: 0;			
			}
		
			ul.pricing_grid li h3.cost, ul.pricing_grid li div.free, ul.pricing_grid li div.one_dollar {
				clear: right;
				display: block;
				float: right;
				height: 34px;
				text-align: center;
				width: 128px;
			}
			
			ul.pricing_grid li div.one_dollar {
				line-height: 16px;
				text-align: left;
			}
		
				ul.pricing_grid li div.one_dollar img {
					float: left;
					margin-right: 5px;
				}
	
	form input, form select, form textarea { 
		float:right;
		width: 200px;
	}
	
	form textarea {
		width: 520px;
		height: 80px;
	}
	
	.form_btn {
		float: none;
		margin: 0 10px;
		width: 80px;
		text-align: center;
	}


/* the links that appear at the bottom of every page */
.footer {
	clear: both;
	width: 620px;
	margin: 15px 0 0 0;
	padding: 5px 0 0 0;
	border-top: 1px solid #CCC;
	font-size: 11px;
	line-height: 13px;
	color: #999;
	text-align: center;
}

	.footer li {
		display: inline;
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	
	.footer a {
		color: #999;
	}
.introimage {
	top: 10px;
}
.networks {
	clear: right;
	float: right;
	width: 280px;
	background-color: #FFF;
	background-repeat: repeat-x;
	border: 1px solid #ffffff;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}