/*	----------------------------------------------

	Belong Software - Default CSS

----------------------------------------------	*/

body {
	border:0px;
	margin:0px;
	padding:0px;
	font-family: Lucida Grande, Verdana, Sans-serif;
	font-size:1em;
	margin-bottom:20px;
	background-color:#e5e5e5;
}

.clear {
	clear:both;
}

.clear-relative {
	position:relative;
	clear:both;
}

/* Misc [Start] */

.price {

	color:#FF6600 !important;
	font-size:10pt !important;

}

h3 {
	
	color:#666666;
	font-size:7pt;
	font-weight:bold;
	float:left;
	width:100%;
	
}

/* Misc [End] */

/* MAIN DIVS */

#mode-notice {
	border:10px solid #cccccc;
	float:left;
	width:96%;
	margin-bottom:10px;
	padding:10px;
	background-color:#FF9900;
	color:#FFFFFF;
	font-size:11pt;
	font-weight:bold;
	text-align:center;
}

.main_holder_container {
	float:left;
	width:100%;
}

.main_container {
	width:775px;
	margin:0px auto;
	background-color:#FFFFFF;
	padding:0 10px 0 10px;
	border-right:1px solid #cccccc;
	border-bottom:1px solid #cccccc;
}

.main_header {
	height:92px;
	width:100%;
}

.grey_div {
	background:#D8D9DD;
	height:6px;
	width:100%;
}

.white_bottom_margin {
	margin-bottom:2px;
}

.green_header_background {
	height:199px;
	background-image:url(../images/banners/home-page-main/crate-banner-version1.jpg);
	background-repeat:no-repeat;
}

.main_body_container {
	width:100%;
	display:inline-block;
}

.main_content_container{
	float:left;
	width:490px;
	margin-top:25px;
	margin-left:2px;
}

.main_content_container h1 {
	color:#22AADC;
	font-size:1.2em;
	font-family:Arial;
	font-weight:normal;
}

.main_content_container h2 {
	color:#22AADC;
	font-size:1.2em;
	font-family:Lucida Grande, Verdana, Sans-serif;
	font-weight:normal;
	margin:0px;
}

.main_content_container p {
	line-height: 1.5;
	font-size:8.5pt;
	font-family: Lucida Grande, Verdana, Sans-serif;
	color:#626262;
}
.main_content_container ul,li {
	font-size:8.5pt;
	font-family: Lucida Grande, Verdana, Sans-serif;
	color:#626262;
}

#main_sub_menu {
	float:left;
	width:160px;
	margin:25px 10px 0 0px;
	padding:5px;
	background-color:#eeeeee;
}
	#main_sub_menu h6 {
		padding:5px 0 5px 0;
		margin:0 0 5px 0;
		border-bottom:1px solid #cccccc;
	}

	#main_sub_menu ul {
		float:left;
		margin:0px;
		padding:0px;
		list-style:none;
		display:block;
		width:100%;
	}

		#main_sub_menu ul li {
			font-family: Lucida Grande, Verdana, Sans-serif;
			font-size:11px;
			margin:0 0 5px 0;
		}

			#main_sub_menu ul li a, #main_sub_menu ul li a:active, #main_sub_menu ul li a:visited {
				text-decoration:none;
				color:#626262;
				padding:2px;
				display:block;
			}

			#main_sub_menu ul li a:hover {
				text-decoration:underline;
				color:#000000;
				display:block;
				background-color:#cccccc;
				width:98%;
				padding:2px;
			}

.main_footer_container {
	width:100%;
	height:50px;
	background:#D8D9DD;
	margin-top:20px;
	margin-bottom:10px;
}

.main_footer_menu {
	margin:5px;
	width:90%;
	color:#798079;
	float:left;
}

.main_footer_menu ul{
	list-style:none;
	margin:0px;
	padding:0px;
	width:512px;
	float:left;
}

.main_footer_menu ul li{
	font-size:7.5pt;
	font-family: Lucida Grande, Verdana, Sans-serif;
	display:block;
	margin-right:10px;
	float:left;
}

.main_footer_menu ul li a {
	color:#798079;
	float:left;
}

.main_footer_menu ul li a:hover{
	color:#000000;
	float:left;
}

.copyright_notice{
	margin:5px;
	font-size:7.5pt;
	font-family: Lucida Grande, Verdana, Sans-serif;
	width:90%;
}
.copyright_notice p{
	color:#798079;
	display:inline;
}

/* Menu */
ul.cssMenu ul{display:none; }
ul.cssMenu li:hover>ul{display:block}
ul.cssMenu ul{position: absolute;left:-1px;top:98%;}
ul.cssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.cssMenu,ul.cssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 2px 2px 0px;
	background-color:#ffffff;
	background-repeat:repeat;
}
ul.cssMenu table {border-collapse:collapse}ul.cssMenu {
	display:block;
	zoom:1;
	float: left;
}
ul.cssMenu ul{
	width:160.65px;
	border-bottom:1px solid #cccccc;
}
ul.cssMenu li{
	display:block;
	margin:2px 0px 0px 2px;
	font-size:0px;
}
ul.cssMenu a:active, ul.cssMenu a:focus {
outline-style:none;
}
ul.cssMenu a, ul.cssMenu li.dis a:hover, ul.cssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	background-color:#ffffff;
	border-width:0px;
	border-color:#6655ff;
	border-style:solid;
	text-align:left;
	text-decoration:none;
	padding:4px;
	_padding-left:0;
	font:normal 11px Verdana;

	color: #444444;
	text-decoration:none;
	cursor:default;
}
ul.cssMenu span{
	overflow:hidden;
}
ul.cssMenu li {
	float:left;
}
ul.cssMenu ul li {
	float:none;
}
ul.cssMenu ul a {
	text-align:left;
	white-space:nowrap;
	display:block;
	#width:95%;
}
ul.cssMenu li.sep{
	text-align:center;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.cssMenu li.sep span{
	float:none;	padding-right:0;
	width:5px;
	height:16px;
	display:inline-block;
	background-color:#AAAAAA;	background-image:none;}
ul.cssMenu ul li.sep span{
	width:80%;
	height:3px;
}
ul.cssMenu li:hover{
	position:relative;
}
ul.cssMenu li:hover>a{
	background-color:#4792E6;
	border-color:#665500;
	border-style:solid;
	font:normal 11px Verdana;
	color: #ffffff;
	text-decoration:none;
}
ul.cssMenu li a:hover{
	position:relative;
	background-color:#4792E6;
	border-color:#665500;
	border-style:solid;
	font:normal 11px Verdana;
	color: #ffffff;
	text-decoration:none;
}
ul.cssMenu li.dis a {
	color: #AAAAAA !important;
}
ul.cssMenu img {border: none;float:left;_float:none;margin-right:4px;width:16px;
height:16px;
}
ul.cssMenu ul img {width:16px;
height:16px;
}
ul.cssMenu img.over{display:none}
ul.cssMenu li.dis a:hover img.over{display:none !important}
ul.cssMenu li.dis a:hover img.def {display:inline !important}
ul.cssMenu li:hover > a img.def  {display:none}
ul.cssMenu li:hover > a img.over {display:inline}
ul.cssMenu a:hover img.over,ul.cssMenu a:hover ul img.def,ul.cssMenu a:hover a:hover ul img.def,ul.cssMenu a:hover a:hover a:hover ul img.def,ul.cssMenu a:hover a:hover img.over,ul.cssMenu a:hover a:hover a:hover img.over,ul.cssMenu a:hover a:hover a:hover a:hover img.over{display:inline}
ul.cssMenu a:hover img.def,ul.cssMenu a:hover ul img.over,ul.cssMenu a:hover a:hover ul img.over,ul.cssMenu a:hover a:hover a:hover ul img.over,ul.cssMenu a:hover a:hover img.def,ul.cssMenu a:hover a:hover a:hover img.def,ul.cssMenu a:hover a:hover a:hover a:hover img.def{display:none}
ul.cssMenu a:hover ul,ul.cssMenu a:hover a:hover ul,ul.cssMenu a:hover a:hover a:hover ul{display:block}
ul.cssMenu a:hover ul ul,ul.cssMenu a:hover a:hover ul ul{display:none}
ul.cssMenu span{
	display:block;
	background-image:url(../images/menu/arrv_anim_1.gif);
	background-position:right center;
	background-repeat: no-repeat;
   padding-right:11px;}
ul.cssMenu li:hover>a>span{	background-image:url(../images/menu/arrv_anim_1o.gif);
}
ul.cssMenu a:hover span{	_background-image:url(../images/menu/arrv_anim_1o.gif)}
ul.cssMenu ul span,ul.cssMenu a:hover table span{background-image:url(../images/menu/arr_double_1.gif)}
ul.cssMenu ul li:hover > a span{	background-image:url(../images/menu/arr_double_1o.gif);}
ul.cssMenu table a:hover span,ul.cssMenu table a:hover a:hover span,ul.cssMenu table a:hover a:hover a:hover span{background-image:url(../images/menu/arr_double_1o.gif)}
ul.cssMenu table a:hover table span,ul.cssMenu table a:hover a:hover table span{background-image:url(../images/menu/arr_double_1.gif)}

/* ACCOUNT MENU [Start] */
#login-container {
	position:relative;
	top:0px;
	right:0px;
}

	#login-container #account-button {
		position:absolute;
		top:-55px;
		right:0px;
		width:100px;
		text-align:right;
	}
	
		#login-container #account-button a {
			font-size:8.5pt;
			text-decoration:none;
			color:#333333;
		}
		
		#login-container #account-button a:hover {
			font-size:8.5pt;
			text-decoration:none;
			color:#22AADC;
		}
			
			#login-container #account-button a img {
				position:relative;
				top:3px;
				left:-5px;
			}


/* ACCOUNT MENU [End] */

/* LEFT MENU */
.main_menu_container {
	width:215px;
	border:1px solid #D0D0D0;
	float:left;
	background:white;
	margin-top:-90px;
	margin-left:25px;
	min-height:200px;
}

.main_menu_container ul{
	margin-top:29px;
}

.main_menu_container ul li {
	list-style-image:url(../../skin/images/cube_bullet_point.jpg);
	color:#798079;
	font-family: Lucida Grande, Verdana, Sans-serif;
	font-size: 8.5pt;
	margin-left: -15px;
	margin-bottom:2px;
	height:20px;
}

.main_menu_container ul li a, a:visited, a:active{
	color:#798079;
	text-decoration:none;
}

.main_menu_container ul li a:hover{
	color:#000000;
	text-decoration:underline;
}

/* IMG's */
.main_logo{
	margin-top:38px;
}

/* Login Form */
.login-form span {
	margin:0 0 6px 0;
	padding:0px;
	font-size:8.5pt;
	display:block;
}

	.login-form span span {
		color:#FF0000;
		display:inline;
	}

	.login-form input {
		border:	1px solid #D6E7F1;
		background-color:#EAF7FF;
		margin-bottom:10px;
		padding:5px;
		padding-left:26px;
		width:300px;
	}
	
	.login-form #input-username {
		position:absolute;
		top:6px;
		left:6px;
	}
	
	.login-form #input-password {
		position:absolute;
		top:6px;
		left:6px;
	}

	.login-form input:focus,  .login-form textarea:focus {
		border:	1px solid #000000;
	}

	.login-form #login-submit {
		border:2px solid #000000;
		background-color:#C51000;
		color:#FFFFFF;
		font-weight:bold;
		width:80px;
		padding:5px;
		
	}
	
	.login-form .checkbox {
		width:auto;
		padding-left:4px;
	}

/* Contact Form */
#emailForm input {
	border:	1px solid #D6E7F1;
	margin-bottom:10px;
	padding:5px;
	padding-left:26px;
	background-color:#EAF7FF;
}

	#emailForm .form-icon {
		position:absolute;
		top:6px;
		left:6px;
	}

#emailForm input:focus,  #emailForm textarea:focus {
	border:	1px solid #000000;
}

#emailForm textarea {
	border:	1px solid #D6E7F1;
	background-color:#EAF7FF;
	margin-bottom:10px;
	font-size:	10pt;
	padding:5px;
	padding-left:26px;
}

#emailForm label {
	font-size:8.5pt;
	color:#000000;
	padding:0px;
	margin-bottom:5px;
	border:0px;
	display:block;
}

	#emailForm label span {
		color:#FF0000;
	}

#emailForm .submit-btn {
	font-size:10pt;
	font-weight:bold;
	color:#ffffff;
	background-color:#C51000;
	border:	2px solid #000000;
	padding:5px;
}

/* Articles */
.article {
	font-size:1em;
}

.article a, .article a:active, .article a:visited {
	color:#22AADC;
	text-decoration:underline;
}

.article a:hover {
	color:#22AADC;
	text-decoration:none;
}

.article .lead-paragraph {
	font-weight:bold;
}

.article .heading {
	font-size:.7em;
	text-decoration:none;
	color:#666666;
	font-weight:bold;
}

.article h2 {
	margin:0px 0px 2px 0px;
}

.article span {
	font-size:.7em;
	display:block;
	color:#626262;
	font-family: Lucida Grande, Verdana, Sans-serif;
}

.primary-article { }

/* Messages */
.message {
	border:1px solid #a5a5af;
	padding:5px;
	margin-bottom:10px;
	padding-left:30px;
	font-family: Lucida Grande, Verdana, Sans-serif;
	font-size:9pt;
	float:left;
}

.error {
	border:1px solid #FF0000;
	background-color:#FF0000;
	background-image:url(../images/icons/exclamation.png);
	background-repeat:no-repeat;
	background-position:2% 5px;
	color:#FFFFFF;
}	

.notice {
	border:1px solid #FFCC00;
	background-color:#FFCC00;
	color:#000000;
	padding:5px;
}

.note {
	font-style:italic;
	font-size:8pt !important;
	color:#009900 !important;
}

.form-errors {
	border:1px solid #FF0000;
	background-color:#FF0000;
	color:#FFFFFF;
	list-style:none;
	margin:0 0 10px 0;
	padding:0 0 0 0;
}

.form-errors li {
	color:#FFFFFF;
	margin:10px;
}

/* Forms */

/* Call Outs */
#homepage-callouts {
	width:100%;
	border-top:1px solid #eeeeee;
	margin-top:10px;
}

#homepage-callouts h1 {
	color:#22AADC;
	font-weight:normal;
	font-size:14pt;
	padding:5px;
	margin:0px;
	background-color:#eeeeee;
	border-bottom:1px solid #cccccc;
}

#homepage-callouts ul {
	list-style:none;
	float:left;
	margin:0px;
	padding:0px;
}

#homepage-callouts ul li {
	float:left;
	border-right:1px solid #cccccc;
	height:100px;
	width:237px;
	padding:10px;
	display:block;
}

#homepage-callouts ul li.last {
	float:left;
	border:0px;
	height:100px;
	width:237px;
	padding:10px;
}

#homepage-callouts ul li h3 {
	padding:0px;
	margin:0px;
	font-weight:normal;
}

#homepage-callouts ul li p {
	color:#666666;
	line-height:14pt;
}

#homepage-callouts ul li p a, #homepage-callouts ul li p a:active, #homepage-callouts ul li p a:visited {
	color:#22AADC;
	text-decoration:underline;
	white-space:nowrap;
}

#homepage-callouts ul li p a:hover {
	text-decoration:none;
	white-space:nowrap;
}

/* */

.callouts-container {
	margin:20px 0 0 0;
}

.callouts-container .callout {
	margin:0 0 10px 0;
	float:right; 
	width:240px; 
	height:120px;
	border:1px solid #cccccc;
}

/* Screen Shots */
.screenshot {
	width:500px;
	margin:0 0 10px 0;
	padding:0 0 10px 0;
	border-bottom:1px solid #999999;
	float:left;
}

.screenshot img {
	float:left;
	border:0px;
	width:150px;
	height:150px;
	overflow:hidden;
	float:left;
}

.screenshot h3 {
	margin:0px;
	padding:0px;
	margin-left:10px;
	float:left;
	width:65%;
	font-size:.95em;
}

.screenshot p {
	margin:8px 0 0 10px;
	float:left;
	width:65%;
}

/* YOUR ACCOUNT */
.account-details-panel {
	border:1px solid #cccccc;
	padding:10px;
	float:left;
	width:470px;
	margin-bottom:10px;
}

	.account-details-panel .panel-title {
		font-size:.75em;
		font-weight:bold;
		display:block;
		width:100%;
		position:relative;
	}
	
	.account-details-panel .panel-title .panel-edit {
		position:absolute;
		top:-5px;
		left:432px;
		font-size:.95em;
	}
	
		.account-details-panel .panel-edit a {
			font-size:.75em;
		}
		
	.account-details-panel p {
		float:left;
		width:45%;
		margin:10px 0 0 0;
		padding:0px;
	}
	
		.account-details-panel p span{
			font-weight:bold;
		}
		
	.account-details-panel table { 
		width:100%;
		margin:5px 0 5px 0;
	}

	.account-details-panel table th { 
		background-color:#eeeeee;
		padding:5px;
		font-size:.75em;
		font-weight:normal;
		text-align:left;
	}
	
	.account-details-panel table td { 
		padding:5px;
		font-size:.75em;
	}

/* Downloads */

.downloads-table {
	font-size:8.5pt;
	margin:0 0 0 0;
	width:590px;
	float:left;
}

.downloads-table #downloads-table-title{
	color:#22AADC;
	font-size:14px;
	font-family:Arial;
	font-weight:normal;
}

.downloads-table th { 
	color:#333333;
	background-color:#eeeeee;
	text-align:left;
	border-bottom:1px solid #999999;
}

/* Light Box */
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(public/skin/images/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(public/skin/images/lightbox/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/* Twitter Feed */

#twitter_div {
	float:right;
	border:1px solid #cccccc;
	width:240px;
	margin:0 0 10px 0;
}

	#twitter_div h2 {
		color:#22AADC;
		font-size:1.2em;
		font-family:verdana;
		font-weight:normal;
		background-color:#eeeeee;
		padding:4px;
		margin:1px;
	}

	#twitter_div ul {
		float:left;
		list-style:none;
		margin:0px;
		padding:4px;
	}

		#twitter_div ul li {
			float:left;
			padding:5px 0 0 0;
		}

			#twitter_div ul li a, #twitter_div ul li a:active, #twitter_div ul li a:visited {
				color:#999999;
				font-weight:bold;
				text-decoration:none;
				display:none;
			}
			
			#twitter_div ul li a:hover {
				color:#000000;
			}
			
	#twitter_div #twitter-link {
		font-size:0.7em;
		padding:0 0 5px 5px;
		float:left;
		color:#22AADC;
	}
	
/* Contact Page */
.contact-address {
	float:left;
}