/* CSS Document */

/* ############################################/ INITIALIZATION \############################################ */

* { margin : 0; padding : 0; }
h1,h2,h3,h4,h5,h6 { font-size : 100%; }
ol,ul { list-style : none; }
address, caption, cite, code, dfn, em, strong, th, var { font-style : normal; font-weight : normal; }
table { border-collapse : collapse; border-spacing : 0; }
fieldset,img { border : 0; }
caption,th { text-align : left; }

body { text-align:left; font-family:Trebuchet MS, "Times New Roman", Times, serif; background-image:url(../images/bg-stripe.jpg);  }

.pagenav { display:none; }

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


/* ############################################/ GLOBAL CLASSES \############################################ */

	.small-box-secondary { display:inline; height:10px; width:10px; }

		.small-box-secondary i { font-size:14px; }

	.min-holder {float:left; width:1px; height:400px;  }

	.clear {clear:both; height:1px; overflow:hidden; background-color:#000; }

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



/* ############################################/ COLOR SCHEME \############################################ */

/* ######################## PRIMARY COLOR ######################## */
	
	/* .............. dark blue .............. */
	#header-nav, #footer-info, #footer-nav, #footerX-info, #footerX-nav { 
		background-color:#006; }
		
	.map-JSE, .map-Computers {
		color:#006; }	
		
	#container_nav{ background:none;}
	/* .............. very dark blue .............. */
	 #content-news-header, #content-welcome-header, #content-points-header, #seo-header, #newWebsite-header, #updateWebsite-header, #retailPOS-header, #restuarantPOS-header, #JSEComputers-header, #sub-pages-header, #header-nav, #footer-info, #footer-nav, #footerX-info, #footerX-nav, #photogallery {
		background-color:#98b17a; }
		
	/* .............. blue .............. */
	#content-news, #content-welcome, #content-points, #header-nav .promo-button, #content-login-form .input-button, #sub-pages, #seo, #newWebsite, #updateWebsite, #retailPOS, #restuarantPOS, #JSEComputers {
		background-color:#fff; }
		
	.primary-text, #content-points .start-text, #aboutPage-topPic .jse-name, #aboutPage .pic-names li, #sitemapPage a, #careersPage hr, #header-nav form, #information .ultra{ color:#305c34;}
	
	/* .............. light blue .............. */
	#header-nav a, #footer-nav a, #footer-info ul, #footerX-nav a, #footerX-info ul,   { 
		color:#fff; }


/* ######################## SECONDARY COLOR ######################## */

	/* .............. orange .............. */
	#content-login, .small-box-secondary { 
		background-color:#ff7300; }
	
	.small-box-secondary, .asterik, .secondary-text { 
		color:#ff7300; }


/* ######################## ADDITIONAL COLOR ######################## */


	/* .............. white .............. */
	body, #header-nav .promo-button, #content-login-form .input-button, #header-logo .JSE, #nav a, #content-points a, #content-news-scroller a, #information .top-anchor, #aboutPage-topPic a, #aboutPage .pic-names a, #news-roomPage a, #header-logo h3, .small-box-secondary i { 
		color:#494949; } 

	/* .............. yellow .............. */
	#content-news-body .dates, #content-news-body a, #content-welcome a, #information .phone, #sub-pages .phone, #news-roomPage .dates, .brightColor, #newWebsite .brightColorPrice, /*here*/ #nav a:hover, #header-nav .promo-button:hover, #content-login-form .input-button:hover, #footer-nav a:hover, #footerX-nav a:hover,#content-points a:hover, #information .top-anchor:hover, #aboutPage-topPic a:hover, #aboutPage .pic-names a:hover, #sitemapPage a:hover, #header-nav a:hover  { 
		color:#7b6557; }
		
		#content-news-scroller .dates{ font-size:14px; font-weight:bold;}
	
	/* .............. black .............. */
	body {  }
	
	#content-login-form { 
		color:#000; }

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




/* ############################################/ HEADER \############################################ */

#container_header { height:120px; width:100%; }

#container_header_nav { height:36px; width:100%; background-image:url(../images/top-nav-bg.jpg); }
	
	#header { 
		height:120px;
		width:1000px; 
		margin:auto; }
	
		#header-nav { 
		position:relative;
		height:36px;
		width:1000px;
		margin:auto;
		font-size:10px;
		background-image:url(../images/top-nav-bg.jpg);}
			
			#header-nav fieldset { display:inline; }
			
			#header-nav ul { float:right; text-align:right; margin:10px 10px 0 0;  }

			#header-nav li { display:inline; list-style:none; margin-right:10px; color:#FFFFFF; }

			#header-nav a { text-decoration:none; color:#FFFFFF; }
			
			#header-nav h3 {display:inline; }
			
			#header-nav form { float:right; text-align:right; margin:16px 15px 0 0; }

			#header-nav .promo-box { height:16px; width:60px; margin-left:5px; border:1px solid #000; }

			#header-nav .promo-button { height:18px; width:40px; font-size:10px; margin-left:3px; font-family:Trebuchet MS, "Times New Roman", Times, serif; border:1px solid #000; }

		#header-logo { 
		position:relative;
		float:right; 
		height:100px;
		margin:auto;
		top:5px;
		font-weight:bold;
		color:#FFFFFF; }
		
			#header-logo h1 { position:relative; font-size:19px;  padding-right:10px;}

			#header-logo h3.name { position:relative; font-size:65px; line-height:50px; color:#fff; padding-right:10px; font-weight:normal; padding-top:18px;}
			
			#header-logo h3.phone { position:relative; font-size:13px; margin-left:30px; }

			#header-logo .JSE { font-size:65px;  font-weight:normal; color:#ffb755;}
	
/* ------------------------
	


/* ############################################/ MAIN PICTURE \############################################ */

#container_main-pic { height:180px; width:100%; margin-bottom:8px; }
	
	#main-pic { 
	height:180px;
	width:800px; 
	margin:auto;
	line-height:30px; 
	/*background-image:url(../images/main-pic-blue-orange.jpg);*/ }
	
		#main-pic h1 {  padding-top:65px; margin-left:90px; }

		#main-pic h3 { margin-left:90px;  }

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


/* ############################################/ NAV \############################################ */

#container_nav { height:32px; width:100%; margin-bottom:5px; }
	
	#nav { 
	position: relative; 
	height:32px;
	width:1000px;
	margin: auto;
	font-size:11px; }

		#nav ul { }

		#nav li { display:inline; position:relative; float:left; list-style:none; margin:0 2px; vertical-align:middle; }

		#nav a { text-decoration:none; color:#FFFFFF; display:block; text-align:center; font-weight:bold; background-image:url(../images/nav-btn.jpg); width:116px; height:24px; font-size:11px; padding-top:8px }

		#nav a:hover {color:#ffb755;}

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



/* ############################################/ CONTENT \############################################ */

#container_content { width:100%; }

/*LOCATER*/
	#content { 
		position:relative; 
		height:100%;
		width:1000px; 
		margin:auto; }
	
		#news-login {  
			position: relative; 
			float:left; 
			height:100%;
			width:267px;
			margin:auto; }
		
			#content-news { 
				position: relative; 
				height:462px;
				width:267px;
				margin: auto;
				font-size:12px;
				background-image:url(../images/news-bg.jpg) }
					
				#content-news-header { 
				position:absolute;
				height:40px;
				width:247px;
				margin-left:10px;
				margin-top:10px;
				background:none; }
					
					#content-news-header h2 { font-size:20px; margin:4px 0 0 10px; }

				#content-news-body { 
					position:absolute;
					height:180px;
					width:230px;
					margin-left:20px;
					margin-top:80px; }
				
					#content-news-scroller { 
					position:relative;
					overflow:hidden;
					height:180px;
					width:230px; }
					
					#content-news-scroller p { margin-top:10px; }
			
			#content-login { 
				position:absolute;
				top:293px;
				left:0px; 
				height:121px;
				width:246px;
				margin: auto; }
				
				#content-login h1 { font-size:20px; margin:15px 0 0 23px; }
					
				#content-login-form {
				height:65px;
				width:190px;
				margin-left:20px;
				margin-top:5px;
				line-height:20px;
				text-align:right;
				font-size:10px; }

					#content-login-form .input-box { height:16px; width:130px; margin-left:3px; font-size:12px; }

					#content-login-form .input-button { height:18px; width:60px; font-size:10px; margin-top:3px; font-family:Trebuchet MS, "Times New Roman", Times, serif; border:1px solid #000; }

		#welcome-points {  
			position: relative; 
			float:left; 
			height:462px;
			width:733px; 
			margin: auto;
			font-size:12px;
			background-image:url(../images/home-right-bg.jpg); }
			
			#content-welcome { 
				position:relative; 
				float:left; 
				height:145px;
				width:733px;
				margin: auto;
				margin-bottom:4px;
				background:none; }
				
				#content-welcome-header { 
				position:absolute;
				height:40px;
				width:530px;
				margin-top:10px;
				background:none;
				text-align:right; }

					#content-welcome-header h2 { font-size:18px; margin:8px 0 0 20px; text-align:right; }
		
				#content-welcome-text { 
					position:relative;
					height:100px;
					width:515px;
					left:20px;
					top:45px;
					background:none;
					text-align:right;
					font-size:12px;
					line-height:16px; }
					
					#content-welcome-pic { 
					position:relative;
					float:left;
					width:184px;
					height:60px;
					top:6px;
					margin-right:10px; }

			#content-points { 
				position:relative;
				float:left;
				height:240px;
				width:469px;
				background:none; }
				
				#content-points ul { margin-top:70px; padding-left:20px; } 
				
				#content-points li { margin-bottom:13px; vertical-align:middle; } 
				
				#content-points a { font-size:14px; margin-left:10px; text-decoration:none; font-weight:bold; }

				#content-points a:hover { font-size:18px; }
				
				#content-points .start-text { font-size:18px; font-weight:bold; }
				
				#content-points-header { 
				position:absolute;
				height:40px;
				width:469px;
				margin-top:10px;
				background:none; }
					
					#content-points-header h2 { font-size:20px; margin:8px 0 0 20px; }
							
/* ------------------------


/* ############################################/ INFORMTION \############################################ */

#container_information { width:100%; margin-top:5px; }

	#information { 
		position:relative; 
		height:100%;
		width:1000px; 
		margin:auto;
		font-size:12px; }
		
		#information .ultra { font-size:14px; font-weight:bold; }
		
		#information .start-paragraph { margin-top:60px; }

		#information p { padding:0 20px 20px 20px; }
		
		#information h1 { display:inline; font-size:20px; margin-left:15px; }
		
		#information h4 { margin:10px 20px 20px 0; text-align:right; }

		#information ul { margin:8px 0 0 12px; }

		#information li { display:inline; vertical-align:middle; }
		
		#information .phone { font-size:14px; }
		
		#information .top-anchor { margin-left:20px; } 

		#seo, #newWebsite, #updateWebsite, #retailPOS, #restuarantPOS, #JSEComputers { 
			position: relative; 
			float:left; 
			width:100%;
			margin-bottom:5px; }
				
			#restuarantPOS  h3.posH3, #retailPOS h3.posH3, #newWebsite h3.posH3, #JSEComputers h3.posH3 { margin-left:20px; margin-bottom:10px; font-size:16px; }

			#restuarantPOS ul.problems { margin-left:40px; margin-bottom:20px; }
			
			#restuarantPOS ul.problems li  { display:block; text-align:right; width:200px; }

			#retailPOS ul.points { margin-left:40px; margin-bottom:20px; }

			#retailPOS ul.points li { display:block; margin-bottom:5px; }

			#newWebsite ul.prices { margin-left:40px; margin-bottom:20px; }

			#newWebsite ul.prices li { text-align:right; width:400px; display:block; margin-bottom:5px; }

			#newWebsite h3.header { margin-left:20px; margin-bottom:20px; font-size:16px; text-decoration:underline; }
			
			#JSEComputers ul.caps { margin-left:40px; margin-bottom:20px; }

			#JSEComputers ul.caps li { display:block; margin-bottom:5px; }

			#seo-header, #newWebsite-header, #updateWebsite-header, #retailPOS-header, #restuarantPOS-header, #JSEComputers-header { 
			position:absolute;
			height:40px;
			width:980px;
			margin-left:10px;
			margin-top:10px; }
								


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





/* ############################################/ SUB PAGES \############################################ */

/*LOCATOR*/
#sub-pages { 
	position:relative;
	float:left;
	margin:auto;
	height:100%;
	width:100%;
	font-size:12px; }
	
	#sub-pages .start-margin { margin-top:10px; }
	
	#newWebsite .brightColorPrice { font-size:14px; font-weight:bold; }
	
	#sub-pages p { margin:0 20px 20px 30px; }
	
	#sub-pages h4 { margin:40px 20px 20px 0; text-align:right; }

	#sub-pages .phone { font-size:14px; } 
	
	#sub-pages-header { 
		position:relative;
		height:40px;
		width:980px;
		margin-left:10px;
		margin-top:10px; }

		#sub-pages-header h2 { font-size:20px; padding:8px 0 0 20px; }

#google-map { 
	position:relative;
	float:left;
	margin:auto;
	height:100%;
	width:625px;
	padding-left:20px;
	font-size:12px; }
/* ------------------------


	

/* #################/ contact.asp \################# */

				#contactPage {
				float:left;
				position:relative;
				width:340px;
				height:auto;
				}

				#googlemap {
				float:none;
				position:relative;
				width:425px;
				height:auto;
				margin-top:10px;
				}

				#contactPage li { margin-bottom:10px; margin-left:20px; }
				
				#contactPage b { font-size:14px; font-weight:bold; }
				
				#contactPage form {
				margin-bottom:40px;
				height:470px;
				width:300px;
				margin-left:20px;
				margin-top:5px;
				text-align:right;
				font-size:12px; }

					#contactPage textarea { margin-top:5px; }
					
					#contactPage .input-box { height:16px; width:200px; margin-left:3px; font-size:12px; margin-bottom:3px; }

					#contactPage .input-button { height:18px; width:60px; font-size:10px; margin-top:3px; font-family:Trebuchet MS, "Times New Roman", Times, serif; border:1px solid #000; }



/* #################/ about.asp \################# */

				#aboutPage-topPic {
				height:160px;
				width:770px;
				margin-left:25px;
				margin-top:70px;
				margin-bottom:10px;
				background-image:url(../images/group_big.jpg);
				background-repeat:no-repeat;
				line-height:20px; }
				
					#aboutPage-topPic ul { margin-left:520px; }
					
					#aboutPage-topPic a { text-decoration:none; font-weight:bold; }
					
					#aboutPage-topPic a:hover { font-size:16px; }
					
					#aboutPage .jse-name { font-size:16px; }
					
				#aboutPage .pic-names li { display:inline; margin-right:5px; }
				
				#aboutPage .pic-names a { text-decoration:none; font-size:14px; }
				
				#aboutPage .pic-names { margin-left:35px; font-weight:bold; }
				

/* #################/ web-design.asp \################# */

				#webdesignPage h2 { font-size:14px; margin:0 0 10px 20px; }


/* #################/ pos.asp \################# */

			#pos h2 { font-size:14px; margin:0 0 10px 20px; }
	
			#pos h3 { font-size:14px; margin:0 0 10px 30px; }

			#pos img.monitor { margin-left:80px; padding-top:30px; }

			#pos img.playButton { margin-left:40px; padding-top:20px; }
			
			#pos ul.problems { margin-left:40px; margin-bottom:20px; }
			
			#pos ul.problems li { text-align:right; width:200px; }

			#pos ul.features { position:relative; float:left; margin-left:40px; margin-bottom:20px; }
			
			#pos ul.features li { margin-left:40px; width:200px; }
			
			#pos ul.points { margin-left:40px; margin-bottom:20px; }

			#pos ul.points li { margin-bottom:5px; }

			
/* #################/ pc-repair.asp \################# */

				#pc-repairPage p { margin-left:30px; }

				#pc-repairPage h2 { font-size:16px; margin:0 0 10px 20px; }


/* #################/ news-room.asp \################# */

				#news-roomPage .dates { margin:0 0 2px 30px; font-weight:bold; }
				
				#news-roomPage p { margin-left:30px; }

				#news-roomPage h2 { font-size:16px; margin:0 0 10px 20px; }


/* #################/ sitemap.asp \################# */

				#sitemapPage ul { margin-left:20px; }
				
				#sitemapPage li { margin-bottom:10px; }

				#sitemapPage a { font-weight:bold; font-size:14px; }

				#sitemapPage h3 { margin-left:5px; }

/* #################/ careers.asp \################# */

				#careersPage form { margin:0 0 0 20px; }
				
				#careersPage .careersInput { font-size:10px; } 

				#careersPage h2 { font-size:14px; margin:0 0 20px 20px; } 

				#careersPage h3 { font-size:14px; margin:0 0 12px 0; } 
				
				#careersPage label { margin-left:3px; }
				
				#careersFormGeneral {
				position:relative;
				float:left;
				height:110px;
				width:750px;
				margin-top:20px;
				text-align:right;
				border: 1px solid #FFF;
				padding:10px 10px 0 0; }
					
				#careersFormContact {
				position:relative;
				float:left;
				height:380px;
				width:310px;
				margin-top:20px;
				text-align:right;
				border: 1px solid #FFF;
				padding:10px 10px 0 0; }

				
					#careersFormContact input { width:180px; margin-bottom:3px; }

					#careersFormContact select { margin-bottom:3px; }

				#careersFormKey {
					position:relative;
					float:left;
					left:20px;
					height:380px;
					width:410px;
					margin-top:20px;
					text-align:right;
					border: 1px solid #FFF;
					padding:10px 10px 0 0; }

					#careersFormKey select { margin-bottom:3px; }
					
					#careersFormKey-left {
					position:relative;
					float:left;
					left:10px;
					margin-top:8px;
					height:200px;
					width:180px;
					text-align:right;  }
	
					#careersFormKey-right {
					position:relative;
					float:left;
					left:20px;
					height:200px;
					margin-top:8px;
					width:210px;
					text-align:right;  }

					#careersFormKey-bottom {
					position:relative;
					float:left;
					left:20px;
					height:130px;
					width:390px;
					margin-top:5px;
					text-align:right; }

				#careersFormResume {
				position:relative;
				float:left;
				height:280px;
				width:750px;
				margin-top:20px;
				text-align:right;
				border: 1px solid #FFF;
				padding:10px 10px 0 0; }

				#careersFormEducation {
				position:relative;
				float:left;
				height:250px;
				width:310px;
				margin-top:20px;
				text-align:right;
				border: 1px solid #FFF;
				padding:10px 10px 0 0; }

				#careersFormOptional{
				position:relative;
				float:left;
				left:20px;
				height:250px;
				width:400px;
				margin-top:20px;
				text-align:right;
				border: 1px solid #FFF;
				padding:10px 10px 0 10px; }

					#careersFormOptional select { width:200px; }

				#careersFormButton {
				position:relative;
				float:left;
				height:50px;
				width:750px;
				margin-top:20px;
				text-align:right;
				padding:10px 10px 0 0; }
				
					#careersFormButton .button { height:25px; width:100px; font-size:10px; margin-left:3px; font-family:Trebuchet MS, "Times New Roman", Times, serif; border:1px solid #000; }


/* #################/ portfolio gallery \################# */


#motioncontainer a img{ /*image border color*/
border: 1px solid #000;
}

#motioncontainer a:hover img{ /*image border hover color*/
border: 1px solid #FFF;
}

#motioncontainer a:hover{
color: red; /* Dummy definition to overcome IE bug */
}

#motiongallery a { display:block; margin-bottom:20px; text-decoration:none; }

#statusdiv{
position: absolute;
padding: 2px;
left: -300px;
background-color: #CCFF00;
border: 1px solid gray;
visibility: hidden;
}

/* ############################################/ FOOTER \############################################ */

#container_footer { clear:both; height:60px; width:100%; padding-top:5px; }
	
	#footer { 
	position:relative; 
	height:100%;
	width:1000px;
	margin:auto;
	font-size:10px; }

	#footer-info { 
	position:relative;
	float:left; 
	height:100%;
	width:480px;
	margin:auto; }
	
		#footer-info ul { float:left; margin:15px 0 0 20px; color:#FFFFFF; }

	#footer-nav { 
	position:relative; 
	float:left;
	height:100%;
	width:520px;
	margin:auto; }

		#footer-nav ul { float:right; text-align:right; padding:25px 15px 0 0; }

		#footer-nav li { display:inline; list-style:none; margin-left:10px; color:#FFFFFF; }

		#footer-nav a { text-decoration:none; color:#FFFFFF;}
		
		
	

/* ############################################/ EXTRA FOOTER - DEFAULT PAGE \############################################ */

#container_footerX { clear:both; height:80px; width:100%; padding-top:5px; }
	
	#footerX { 
	position:relative; 
	height:100%;
	width:1000px;
	margin:auto;
	font-size:10px; }

	#footerX-info { 
	position:relative;
	float:left; 
	height:100%;
	width:480px;
	margin:auto; }
	
		#footerX-info ul { float:left; margin:25px 0 0 20px; color:#FFFFFF; }

	#footerX-nav { 
	position:relative; 
	float:left;
	height:100%;
	width:520px;
	margin:auto; }

		#footerX-nav ul { float:right; text-align:right; padding:35px 15px 0 0; }

		#footerX-nav li { display:inline; list-style:none; margin-left:10px; color:#FFFFFF; }

		#footerX-nav a { text-decoration:none; color:#FFFFFF; }
		
		

#MySpamTrap {display: none;}