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

 *Filename:				njelec.css
 *Description:			Global CSS
 *Version:		
 *Website:				http://project-site.com
 *Author:				Yang Liu
  
 ==STRUCTURE:==========================================================
 
 *Page width:			960px
 *Number of columns:	3

*/


/*==STRUCTURE==========================================================

	$__header		Header Definitions
	$__menu			Global Site Navigation
	$__content		Everything within the content
	$__bottom		Bottom Definitions

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

body {
	
	text-align: center;
	background-image:url(backgroundi.jpg); 
	background-repeat:repeat-x;
	font: 11px Tahoma, Arial, Helvetica, serif; color:#3E3E3E;
	line-height: 150%;
	margin: 0px;
	padding: 0px; 
	background-color:#ff9d9d;
	
}
h1 { font: 40px  "Smudger LET",Arial, Helvetica, serif; color:#330000; margin:0px;}
h2 { font: 40px  "Smudger LET",Arial, Helvetica, serif; color:#ffffff;}
h3 { font: bold 18px "segoe Print",Arial, Helvetica, serif; color:#ffffff; margin:0px;}
h4 { font: 12px Arial, Helvetica, sans-serif; margin-left:10px; margin-right:10px; margin-top:0px; margin-bottom:0px }
h5 { font: bold 16px "segoe Print",Arial, Helvetica, serif; color:#330000; margin:0px;}
h6 { font: bold 14px "segoe Print",Arial, Helvetica, serif; color:#330000; margin:0px}
.h7 { font: bold 16px "segoe Print",Arial, Helvetica, serif; color:#330000; margin:0px}
.h8 { font: bold 12px "segoe Print",Arial, Helvetica, serif; color:#330000; margin:0px}

table.layout{ border:10px #ffffff;}

table.sublayoutsp {
	font: 13px Tahoma, Arial, Helvetica;
	color:#202020;
	line-height: 130%;
	
	}

/*table.contact {
	font: 9px Tahoma, Arial, Helvetica; color:#000000;
	
	border-bottom: thick #ffffff;
	border-left: thick #ffffff;
	border-right: thick #ffffff;

}
table.contact tr td.head {
	font: 10px Tahoma, Arial, Helvetica; color:#3E3E3E;


}
table.services {
	font: 12px Tahoma, Arial, Helvetica; color:#3E3E3E;
	
}
table.servicestab {
	font: 11px Tahoma, Arial, Helvetica; color:#3E3E3E;
	
}
form { margin-bottom: 0px; margin-top: 3px; }
.white { color: #FFFFFF; line-height: 140%; }
.bold { font-weight: bold; }
.tiny { font-size: 10px; line-height: 100%; }*/





/*#secondnav {
	text-align: right;
	padding: 10px;
	margin-bottom: 20px;
	margin-left: 320px;
	border: 1px solid #CCCCCC;
}
#content {
	width: 89%;
	margin: 12px 40px 30px 22px;
	line-height: 150%;
	color: #333333;
	}
#content p { margin-top: 18px; }	
#subarea {
	width: 175px;
	margin-top: 0px;
}
.borderRightW {	border-right: 1px solid #FFFFFF; }
.borderLeftW { border-left: 1px solid #FFFFFF; }
.borderTopW { border-top: 1px solid #FFFFFF; }
.borderBottomW { border-bottom: 1px solid #FFFFFF; }*/

/* don't forget to include a 'visited' state as well to make IE happy */
/*#navlistDIVISIONS a.sub, #navlistDIVISIONS a.sub:visited { padding: 3px 15px 3px 30px; width: 120px; margin: 0px;}*/


/* ---( float footer at bottom CSS )---------------------------------- */
		

/* style used on the home page only*/
* html #outerHome {height:100%;}
/* the style used on the inside pages only*/
* html #outerNormal {height:100%;}
#footerHome {
/* the style used on the home page only*/
padding: 1px 0px 40px 0px;
/*clear:both;*/
height:140px;
line-height: 140%;
color: #EAEAEA;
text-align: left;
vertical-align: middle;
background-color:#82B9E1;
}
#footerNormal {
/* the style used on the inside pages only*/
padding: 62px 0px 40px 0px;
clear:both;
height:30px;
line-height: 140%;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
}



/* ---( sIFR styles )---------------------------------- */

/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}


/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

/*.sIFR-hasFlash h1 {
	visibility: hidden;
}*/

.sIFR-hasFlash h2 {
	visibility: hidden;
	letter-spacing: -4px;
	font-size: 16px;
	margin: 0px;
	text-transform: uppercase;
}


/* CSS for the box starts here */





/*  __header

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


.header{
	background-color:#ffd5d5;
	width:960px;
	MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
}
#header1{
	background-color: #FF0000;
	width:960px;
	MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
	
}
#header2{
	background-color:#ff9d9d;
	width:960px;
	text-align:left;
	MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
}


/*  A welcome on the top
	Its background is a vectorgraph, be added pink background color.
	The background of text is added transparency.
	All of the corner are circinal.
*/

.welc{
	width:748px;
	background:url(images/vector.gif);
	background-position:right;
}


.welc_inter{
	width:450px;
	padding:5px; 
	padding-left:15px; 
	
}

#welc{
	background-color:#FFd5d5;
	width:750px;
	float:right;
	MARGIN-RIGHT: 10px; MARGIN-LEFT: 0px; margin-top:10px;
}


/*	The main part of the page

	The main part of the page is arranged three columns. 
	The left is navigation, which is made of ten piano keys and two graphs. And when moving the mouse pointer onto the piano keys, the pictures will be changed.
	The middle is text content, which include a introduction of the website and a news block. All of the corners in this part is circinal.
	The right is several graph, the corner of their background is circinal. The biggest graph will be changed when moving mouse pointer onto the navigation of left.
*/


.main{
	width:960px;
	background-color:#FFd5d5;
	MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
}



/* __menu

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

.menu{
	width:180px;
	float:left;
	text-align:left;
	MARGIN-RIGHT: auto; MARGIN-LEFT: auto; margin-top:40px;
}



/* __content

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

.main-cont-wide{
	width:778px;
	float:left;
	MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
}

.main-cont-middle{
	width:400px;
	float:left;
	MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
}

.main-cont-middle2{
	width:460px;
	float:left;
	MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
}

.main-cont-left{
	width:380px;
	float:left;
	MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
}

.main-cont-right{
	width:380px;
	float:right;
	MARGIN-RIGHT: 10px; MARGIN-LEFT: auto;
}

/* Main content with different wide */


.main-text-wide{
	width:750px;
	float:left;
	text-align:left;
	MARGIN-RIGHT:10px; MARGIN-LEFT: 20px; margin-top:20px;
}


.main-text-middle{
	width:400px;
	float:left;
	text-align:left;
	MARGIN-RIGHT: auto; MARGIN-LEFT: 20px; margin-top:20px;
}

.main-text-narrow{
	width:360px;
	float:left;
	text-align:left;
	MARGIN-RIGHT: 10px; MARGIN-LEFT: 10px; margin-top:20px;
}

.main-text-frame{
	width:380px; 
	border:double;
	margin:20px;
	padding:6px;
	text-align:left; 
	border-color:#d14875; 
	background-color:#FFDFEF;
}

.text-auburn{
	color:#ffffff;
	border:groove;
	margin:0px 10px 10px 10px;
}

/*	title of main content with different wide */

.main-title{
	width:320px;
	float:left;
	text-align:left;
	MARGIN-RIGHT: 20px; MARGIN-LEFT: 20px; margin-top:20px;
}
.main-title-normal{
	width:200px;
	float:left;
	text-align:left;
	MARGIN-RIGHT: auto; MARGIN-LEFT: 20px;
}

.main-title-wide{
	width:300px;
	float:left;
	text-align:left;
	MARGIN-RIGHT: auto; MARGIN-LEFT: 20px;
}

.main-title-line{
	width:700px;
	float:left;
	text-align:left;
	MARGIN-RIGHT: auto; MARGIN-LEFT: 20px;
}

#news{
	width:200px;
	float:left;
	text-align:left;
	MARGIN-RIGHT: auto; MARGIN-LEFT: 20px;
}

#personalised{
	width:300px;
	float:left;
	text-align:left;
	MARGIN-RIGHT: auto; MARGIN-LEFT: 20px;
}

#middle3{
	width:400px;
	float:left;
	text-align:left;
	MARGIN-RIGHT: auto; MARGIN-LEFT: 40px; margin-top:20px;
}

/*	The graphs, which top and bottom border are ornamented.
*/

.right{
	width:400px;
	float:right;
	MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
}

#right1{
	width:330px;
	float:left;
	text-align:left;
	MARGIN-RIGHT: auto; MARGIN-LEFT: 20px; margin-top:20px;
}

#right2{
	width:300px;
	float:left;
	text-align:left;
	MARGIN-RIGHT: auto; MARGIN-LEFT: auto; margin-top:20px;
}


#photo1_top{
	width:328px;
	text-align:center;
	border-top:double; 
	border-top-width:15px; 
	border-top-color:#FFd5d5;
	MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
}

#photo1_bottom{
	width:328px;
	text-align:center;
	border-bottom:double; 
	border-bottom-width:15px; 
	border-bottom-color:#FFd5d5;
	MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
}

#photo2_top{
	width:298px;
	text-align:left;
	border-top:double; 
	border-top-width:15px; 
	border-top-color:#FFd5d5;
	MARGIN-LEFT:auto;MARGIN-RIGHT: auto; 
	padding-left:15px;
}

#photo2_bottom{
	width:298px;
	text-align:center;
	border-bottom:double; 
	border-bottom-width:15px; 
	border-bottom-color:#FFd5d5;
	MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
}

/*	__bottom
	It is made of a static picture, a dynamic picture and a text area.

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

.bottom{
	width:960px;
	background-color:#FFFFFF;
	MARGIN-RIGHT: auto; MARGIN-LEFT: auto;

}

/*	Static picture	*/

#bottom1{
	width:494px;
	float:left;
	MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
}

/*	Dynamic picture	*/

#demo{
	width:380px;
	height:50px;
	overflow:hidden;
	MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
}

/*	Text area	*/

#bottom3{
	
	clear: both;
	MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
}





/*	the classes are used to make circinal corners */

/*	to make the circinal corners of outer space */

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;background: #d14875;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {border-left:1px solid #ffd5d5; border-right:1px solid #ffd5d5; }
.xb1 {margin:0 5px; background:#ffd5d5;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent {display:block; border:0 solid #ffd5d5; border-width:0 1px; padding: 0px; background: #d14875; padding-left:0px; padding-right:0px;}

/*	to make the circinal corners of inner space */

.ytop, .ybottom {display:block; background:transparent; font-size:1px;}
.yb1, .yb2, .yb3, .yb4 {display:block; overflow:hidden;background: #ffe7e7;}
.yb1, .yb2, .yb3 {height:1px;}
.yb2, .yb3, .yb4 {border-left:1px solid #ffd5d5; border-right:1px solid #ffd5d5; }
.yb1 {margin:0 5px; background:#ffd5d5;}
.yb2 {margin:0 3px; border-width:0 2px;}
.yb3 {margin:0 2px;}
.yb4 {height:2px; margin:0 1px;}
.yboxcontent {display:block; border:0 solid #ffd5d5; border-width:0 1px; padding: 0px; background: #ffe7e7; padding-left:0px; padding-right:0px;}



/*	the format about graph	*/

img.img_nav0{
	border:0;
	height:45px; 
	width:160px;
}

img.img_nav1{
	border:0;
	height:40px; 
	width:160px;
}

img.img_nav2{
	BORDER:0;
	HEIGHT:55px; 
	WIDTH:160px;
}

img.graph1{
	border-style:groove; 
	border-color:#FFFFFF;
}

img.graph2{
	width:70px;
	height:70px;
	border-color:#FFFFFF;
	visibility: visible;
	filter: Alpha(Opacity=60);
}

img.graph3{
	width:50px;
	height:50px;
	border-color:#FFFFFF;
	float:left;
	margin-right:10px;
	visibility: visible;
	filter: Alpha(Opacity=60);
}

img.graph4{
	width:136px;
	height:136px;
	border-color:#FFFFFF;
	margin:10px auto 10px 80px;
}

/*	The format about link	*/
a:link, a:visited { color: #d14875; text-decoration: underline; }
a:hover, a:active { color: #FF2400; text-decoration: underline; }

a.un_line:link, a.un_line:visited,a.un_line:hover, a.un_line:active{
	text-decoration: none;
}


.Alpha {
	visibility: visible;
	filter: Alpha(Opacity=60);
	
}