/* Base --------------------------- */

body								{	 	
										background-color:#ccc; 
										background-image: 	linear-gradient	(white 2px, transparent 2px),
															linear-gradient	(0, white 2px, transparent 2px),
															linear-gradient	(rgba(255,255,255,.3) 1px, transparent 1px),
															linear-gradient	(0, rgba(255,255,255,.3) 1px, transparent 1px);
										background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
										background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
										font:			13px/1.231 sans-serif; 
										font-size:		small; 
										font-family:	"frutiger linotype", arial, sans-serif ;
									}

#wrapper 							{
										width:960px;
										background-color:#f8f8f8;
										
										
										margin:0 auto;
										border-left:1px solid #ccc;
										border-right:1px solid #ccc;
 
									}

#content 							{
										padding:20px;
										margin-left: 265px;
									}

h2									{
										font-size: large;	
										padding: 10px 0;
										font-family: georgia,serif;
									}

h3									{
										font-size: medium;font-weight: bold ;	
										font-family: georgia, serif;
									}


h2:first-letter 						{ 	font-size: 120%; }
h2:first-line 						{ 	line-height: 100%; } 

img 									{ 
										border: 0; 
									} 

/* Header ------------------------- */

#header 								{
										width:960px;
										height:150px;
										margin:0 auto;
										margin-bottom:25px;
										border-bottom:1px solid #ccc;
										border-top:1px solid #ccc;

										text-decoration: none ;
										background-color: #008cde ; 
										font-family: georgia, sans-serif;
	
										border: 1px solid #888; 
										border-radius: 5px; 
										box-shadow: 0 2px 15px rgba(0, 0, 0, .25); 

									}

#header a 							{
										text-decoration: none ;											
									}
#header h1 							{
										font-size: 40px;
										/* font-variant: small-caps; */
										letter-spacing: 20px ;
										text-decoration: none ;
										padding: 20px 0 20px 235px;
									}
#header h2 							{
										font-size: 15px;
										font-variant: small-caps;
										padding-left: 230px;
									}
/*
#header h1							{
										font-family: Georgia, "Times New Roman", Times, serif;
										font-size:24px;
										margin-top: 5px; margin-bottom: 0px;
										text-align: center;
										font-weight: normal;
										color: #222;
									}
#header h2							{
										font-family: "Lucida Grande", Tahoma;
										font-size: 10px;
										font-weight: lighter;
										font-variant: normal;
										text-transform: uppercase;
										color: #666666;
										margin-top: 10px;
										text-align: center!important;
										letter-spacing: 0.3em;
									}
*/
/* Navigation --------------------- */

#nav 								{
										width:960px;
										height:40px;
										border-bottom:1px solid #ccc;
										
									}

#nav a 								{
										display:inline;
										padding:10px;
										text-decoration:none;
										background-color:#f1f1f1;
										border: 1px solid #f1f1f1; 
									}

#nav a:hover 						{
										background-color: #dbe2f1; 
										height:80px;
										border: 1px solid #008cde; 
									}

body#index a#navindex,
body#about a#navabout,
body#exercise a#navexercise,
body#code a#navcode,
body#links a#navlinks,
body#contact a#navcontact			{
										color: #dbe2f1;
										background: #008cde;
									/*	border-bottom-style:  solid ;	*/
									/*	border-bottom-width:  thin ;	*/
									/*	border-bottom-color: red ;		*/
									border: 1px solid #008cde; 
									}


/* Sidebar Left ------------------- */

#sidebarA 							{
										width:220px;
										float:left;
										background-color: #cccccc ;
										*padding: 20px ;
	
										border: 1px solid #888; 
										background: #fff; 
										border-radius: 5px; 
										box-shadow: 0 2px 15px rgba(0, 0, 0, .25); 

									}

#sidebarA a 							{
										text-decoration:none;
									}

#sidebarA li 							{
										list-style:none;
									}

#sidebarA_who		,
#sidebarA_what		,
#sidebarA_where		,
#sidebarA_when		
									{
										padding: 15px;
									}

#sidebarA_who:hover		,
#sidebarA_what:hover	,
#sidebarA_where:hover	,
#sidebarA_when:hover		
									{
										color: #fff; 
										background-color: #008cde ;
									}

#sidebarA_who:hover #sidebarA_who_t	 	,
#sidebarA_what:hover #sidebarA_what_t	,
#sidebarA_where:hover #sidebarA_where_t	,
#sidebarA_when:hover #sidebarA_when_t	
									{
										/* background-color: red ;	 */
									}

									
/* Sidebar Right ------------------ */

#sidebarB 							{
										width:140px;
										float:right;
										margin-bottom:25px;
									}

#sidebarB a 							{
										text-decoration:none;
									}

#sidebarB li				 			{
										list-style:none;
									}

									
/* Footer ------------------------- */

#footer								 {
										clear:both;
										width:960px;
										height:40px;
										border-top:1px solid #ccc;
										border-bottom:1px solid #ccc;
									}


#footer p 							{
										padding:10px;
									}
	
	
/* Table (Design 4) -------------- */

table.Design4 						{
										border-spacing: 0px;
										border-collapse: collapse;
										background: #fff; 
										border-radius: 5px; 
										box-shadow: 0 2px 15px rgba(0, 0, 0, .25); 
									}
table.Design4 th 						{
										text-align: left;
										font-weight: normal;
										padding: 0.1em 0.5em;
										border-bottom: 2px solid #FFFFFF;
										background: #DBE2F1;
									}
table.Design4 td 						{
										text-align: left;
										border-bottom: 2px solid #FFFFFF;
										padding: 0.1em 0.5em;
										background: #DBE2F1;
									}
table.Design4 thead th 					{
										background: #008cde;
										color: #FFFFFF;
										text-align: left;
									}
table.Design4 th.Corner 				{
										text-align: left;
									}
table.Design4 tr:hover		td			{
										background-color: #dbe2f1;
										border-bottom: 2px solid #008cde;  /* qqq */
									/*	color: #fff;		*/
									/*	font-weight: bold;	*/
									}
									
#magnify:hover
									{
										-webkit-transform: scale(1.1);
										   -moz-transform: scale(1.1);
										    -ms-transform: scale(1.1);
										     -o-transform: scale(1.1);

									}

/* Table (Design 2) --------------- */

table.Design2 						{
										border-spacing: 0px;
										border-collapse: collapse;
									}
table.Design2 th 						{
										text-align: left;
										font-weight: normal;
										padding: 0.1em 0.5em;
										border-bottom: 2px solid #FFFFFF;
										background: #DBE2F1;
									}
table.Design2 td 						{
										/* text-align: left; */
										text-align: center;
										vertical-align: middle ;
										border-bottom: 2px solid #FFFFFF;
										padding: 0.2em 0.5em;
										background: #ffffff;
										width: 600px;
									}
table.Design2 thead th 					{
										background: #008cde;
										color: #FFFFFF;
										text-align: left;
									}
									
table.Design2 th.Corner				{
										text-align: left;
									}

table.Design2 tr:hover td 				{
										background-color: #dbe2f1;
									}
		
/* Sub-system --------------------- */
.subsys								{
										float: left;
										padding: 10px;
										margin:10px;
										background-color: #dbe2f1;
										border: 3px solid #008cde;
										-webkit-border-radius:10px;
										   -moz-border-radius: 10px;
										        border-radius:10px;			
										box-shadow: 0 2px 15px rgba(0, 0, 0, .25); 
									}
									
.subsys:hover							{
									/*	border-color: lime;		*/
										font-weight: bold;
									/*	position: relative;
										top: -3px;
										left: -3px;
										box-shadow: 	1px 1px #ccc,
														2px 2px #ccc,
														3px 3px #ccc,
														4px 4px #ccc,
														5px 5px #ccc,
														6px 6px #ccc;	*/
										-webkit-transform: scale(1.5);
										   -moz-transform: scale(1.5);
										    -ms-transform: scale(1.5);
										     -o-transform: scale(1.5);
											 
 										box-shadow: 0 2px 15px rgba(0, 0, 0, .25), 
													0 2px 25px rgba(0, 0, 0, .25), 
													0 2px 35px rgba(0, 0, 0, .25), 
													0 2px 45px rgba(0, 0, 0, .25), 
													0 2px 55px rgba(0, 0, 0, .25); 

									}
								
/* Code Snippets------------------- */
pre									{
										width:				100%;
										margin-left: 		0;
										padding: 			1%;
										color:				green;
										background-color:	#000;
										font-family: courier, sans-serif;
	
										border: 1px solid #888;
										background: #fff;
										border-radius: 5px;
										box-shadow: 0 2px 15px rgba(0, 0, 0, .25); 

									}

/* SDLC ---- ---------------------- */
#sdlc:hover							{
										font-weight: bold;
									}
									
/* Animation ---------------------- */

#qsidebarA							{ 	
										border: 1px solid #888; 
										background: #fff; 
										border-radius: 5px; 
										box-shadow: 0 2px 15px rgba(0, 0, 0, .25); 
									}
#barfill 						
									{ 	
										text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 
										overflow: hidden; 
										position: relative; 
										z-index: 1; 
										padding: 10px; 
										/* font: 20px/20px LeagueGothic;  */
										border-bottom: 1px solid #e0e0e0;
										border-left: 2px dotted #b5ccf7;		 
										margin-left: 2px;
									}
#barfill  span						{ 	
										display: none; 
										text-align: right; 
										position: absolute; 
										z-index: -1; 
										top: 3px; 
										right: 3px; 
										bottom: 3px; 
										border-radius: 3px; 
										padding: 9px 10px 0 0; 
										color: #333; 
										/* font: 10px Lato;  */
										background: #88adf2; 
										border: 1px solid #4a75c6; 
										background-image: linear-gradient(top, #b5ccf7 0%, #95b6f3 50%, #88adf2 50%, #a4c0f5 100%); 
										box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); 
									}

#barfill:hover span					{ 	
										display: block; 
										animation-duration: 1s; 										
										animation-name: slidein; 										
										transform-origin: left; 
									}

@keyframes slidein 					{
										0%		{ transform: scaleX(0); }
										100%	{ transform: scaleX(1); }
									}
									
.antispam { display:none;}