/* CSS Document */
/* ================ ERIC MEYER RESET =================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
strong, b {
	font-weight:bold;
}
em, i {
	font-style:italic;
}


/* ============ */


body {
	background: white;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #666666;
	line-height:1em;
	}

a:link {
	text-decoration: none;
	color: #7496ce;
	}
	a:visited {
		text-decoration: none;
		color: #7496ce;
		}
	a:active {
		text-decoration: none;
		color: #000000
		}
	a:hover {
		text-decoration: underline;
		color: #8d8e91;
		}

h1 {
	color:#000;
	font-family: 'Maven Pro', Arial, Helvetica, sans-serif;
	font-size: 36px;
	line-height:1.1em;
	padding:20px 0 15px 0;
}

h2 {
	color:#333333;
	font-family: 'Maven Pro', Arial, Helvetica, sans-serif;
	font-size: 28px;
	line-height:1.1em;
	padding:20px 0 15px 0;
}

h3 {
	font-family: 'Maven Pro', Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height:1.1em;
	padding:5px 0 5px 0;
}

h4 {
	color: #666;
	font-style: italic;
	font-size: 12px;
	margin:0 0 5px 0;
	}

p {
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	line-height: 1.5em;
	margin-bottom:12px;
	text-align:justify;
}

ol, ul {
	margin:10px 0;
}

li {
	font-size:12px;
	margin-bottom:10px;
}

ol li ol li {
	display: inline;
	}

/* ==================================== BASE STYLES ======================================= */
#ContentWindow {
	margin: 0px auto;
	width: 960px;
	margin-top: 0px;
	border: 1px solid black;
	background:url(/images/background_tt_mainbody.gif) repeat-x;
	background-color: #fffffd;
}

.codeDisplay {
	font-size:12px;
	margin:0 auto 20px auto;
	overflow:scroll !important;
	padding:0 !important;
	width:80%;
	white-space:nowrap !important;
}

/* ====================================== TECHNO TAREK PAGES ================================ */

#top {
 margin: 0px auto;
 margin-top: 24px;
 background-color: white;
 background: url(/images/banner2_top.jpg) no-repeat;
 background-repeat: no-repeat;
 width: 962px;
 height: 30px;
 border: 1px solid black;
 border-bottom: 0px;
 clear: both;
}

#middleContainer {
	margin: 0px auto;
	padding: 0px;
	width: 100%;
	clear: both;
	background-color: #595959;
	background: url(/images/technotarek_background2.gif);
	overflow: hidden;
	}
	#middleCenter {
		position: relative;
		margin: 0 auto;
		padding: 0;
		background-color: #595959;
		width: 962px;
		height: 120px;
		border: 1px solid black;
		border-top: 0px;
		border-bottom: 0px;
		}
		#middleCenter a:link { color: #f2ece0; text-decoration: none;  }
		#middleCenter a:visited { color: #f2ece0; text-decoration: none;  }
		#middleCenter a:hover { color: #7496ce; text-decoration: none; font-size: 110%; font-weight: bold; }
		#middleCenter a:active { color: #f2ece0; text-decoration: none; }
	#middleCenter h1 {
		}
		#middleCenter h1 img {
			border: none;
			margin:10px 0 0  10px;
			}

		div #menuLocal {
			position: absolute;
			bottom: 0;
			right: 0;
			margin: 0;
			padding:0;
			}
			#menuLocal a:link, #menuLocal a:visited, #menuLocal a:hover, #menuLocal a:active {
				font-weight: normal;
				font-style: normal;
				font-size: 1.2em;
				border: none;
				}
			#menuLocal ul {
				list-style-type:none;
				font-size:2.0em;
				color:#F2ECE0;
				margin-right: 12px;
				padding:0 0 0 0;
				}
				#menuLocal li {
					display:inline;
					font-size:18px;
					margin-left: 24px;
					}
					#menuLocal li span {
						font-size:12px;
						}
					#menuLocal img {
						border: none;
						vertical-align:text-top
						}

			#home a {
				display: inline-block;
				width: 19px;
				height: 21px;
				background: url("/images/sprites.png") 0 -32px no-repeat;
				margin-left:3px;
				text-decoration: none;	
				}
				#home a:hover {
					background-position: -20px -32px;
					} 
			
			#contact a {
				display: inline-block;
				width: 15px;
				height: 21px;
				background: url("/images/sprites.png") 0 -56px no-repeat;
				margin-left:3px;
				text-decoration: none;	
				}
				#contact a:hover {
					background-position: -16px -56px;
					} 

#bottom {
	margin: 0px auto;
	background: url(/images/banner2_bottom.jpg) top no-repeat;
	background-color: white;
	width: 962px;
	border: 1px solid black;
	border-top: 0px;
	clear: both;
	padding-top: 48px;
	}
	#MainContent {
		margin-left: 26px;
		}

.column {
	float:left;
	margin:0 20px 0 0;
	padding:0 20px 0 0;
}

#Column1.threeColumn {
	width:400px;
	}

#Column1.twoColumn {
	width:600px;
	}
		.taskDescription ul {
			list-style:disc !important;
			margin:0 0 5px 20px !important;			
		}
		.taskDescription li {
			clear:left;
			float:left;
			font-size:1.2em !important;
			width:500px;
		}
		div.taskTags {
			clear:left;
			float:left;
			margin:10px 0 0 0;
		}
			
		#taskListing h3 {
			clear:left;
			margin-top:24px !important;
		}
		#taskListing p {
			line-height:1.2em !important;
		}
		#taskListing p.taskDate {
			font-size:1.2em !important;
			margin-top:2px !important;
			margin-bottom:2px !important;
		}
		#taskListing ul {
			list-style-type:none;
			margin:0 0 24px 0;
		}
			#taskListing li {
				float:left;
				font-size:1.1em;
				margin-right:16px;
			}

		/* ============= WEBSITES TABLE ================= */

		table {
			margin: 1.5em 0;
			/* border-collapse: collapse; */
		}
		td, th {
			font-size: 12px;
			line-height: 1.5em;
			padding: 10px;
			vertical-align: top;
		}
			th.header {
				text-align:center;
			}
		.table th {
			background-color: #313842;
			border: 1px solid #ffffff;
			font-weight: bold;
			color: #FFFFFF;
		}
		.table tbody {
			border-top: 2px solid #EFEFEF;
		}
		.table tbody th {
			background-color: #EFEFEF;
			color:#7895CD;
			vertical-align: middle;
		}
			.table th h3 {
				font-size:16px;
				text-align:center;
			}
			.table tbody th p {
				color:#666;
				font-size:12px;
				font-weight:normal;
				text-align:center !important;
			}
				.table tbody th p a {
					color:#7895CD;
				}
		.table tbody tr.even {
			background:#EFEFEF;
		}
		.table td {
			border: 1px solid #EFEFEF;
			vertical-align:middle;
		}
		.table td p {
			font-size:6em !important;
			text-align:center !important;
		}
		.table .tableempty {
			background-color: #ffffff;	
		}


#Column2.threeColumn {
	width:200px;
	}

#Column2.twoColumn {
	width:200px;
	}

	#Column2 a img {
		border: 1px solid #7496CE;
		}
	#Column2 a:link {
		border: none;
		}
	#Column2 ul {
		list-style:none;
		}
			#Column2 li a {
				text-decoration: none;
				color: #7496ce;
				}
				#Column2 li a:hover {
					text-decoration: underline;
					color: #8d8e91;
					}
			#Column2 li img {
				margin-top: 20px;
				}

#Column3 {
	width:240px;
	margin-right:0px;
	padding-right:0px;
	}

.taskTags li, #taskListing li, ul.tagsSkills li {
	font-size:12px !important;
}

#overlay {
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1000;
	background-color:#FFF;
	-moz-opacity: 0.15;
	opacity:.15;
	filter: alpha(opacity=15);
	}
	#overlay[id] { /* IE6 and below Can't See This */
		position:fixed;	
	}

	.leightbox {
		display: none;
		position: absolute;
		z-index:1001;
		top: 10%;
		left: 0;
		width: 100%;
		height: 480px;
		margin: 0 auto;
		padding: 0;
		color: #F2ECE0;
		overflow: auto;
		background-color:#333;
		-moz-opacity: 0.95;
		opacity:.95;
		filter: alpha(opacity=95);
		font-family: Courier New, Courier, monospace;
		text-align: left;
		}
		.leightbox[id] { /* IE6 and below Can't See This */
			position:fixed;
			overflow:auto;
			}


#ContactForm {
	}
	#ContactForm .row {
		clear: both;
		padding-top: 5px;
		}
	#ContactForm .formLabel {
		text-align: right;
		margin-right: 10px;
		width: 200px;
		float: left;
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 0px;
		padding-bottom: 0px;
		}
	#ContactForm .formLabelNote {
		clear: left;
		text-align: right;
		margin-right: 10px;
		width: 200px;
		float: left;
		font-weight: normal;
		font-size: 12px;
		margin-top: 0px;
		padding-top: 0px;
		}
	#ContactForm .formControl {
		float: left;
		width: 326px;
		}
	#ContactForm .submitButton {
		background: #eeeeee;
		border: 1px solid #7496CE;
		font-weight: bold;
		padding: 2px 3px;
		width: auto;
		}

#resumeHead {
	}
	#resumeHead h1 {
		margin-top: 12px;
		margin-bottom: 0;
		font-size: 3.4em;
		color:#333333;	
		}
	#resumeHead h2 {
		margin-top: 0;
		font-size: 1.6em;	
		}

	#resume h2 {
		margin-top: 24px;
		}
		#resume h3 span {
			font-size: 0.7em;
			font-weight:normal;
			}
	#resume ul {
		margin-top: 0;
		margin-left: 10px;
		padding-left: 10px;
		list-style:circle;
		font-size: 1.2em;
		}	

/* ===================== PHROG ================= */

div.photoBlogImgContainer {
	float:left;
	position:relative;
}

.photoBlogImgContainer a {
	border:none;
}

.photoBlogImgContainer img {
	border:none;
	opacity:0.75;
	filter:alpha(opacity=75);
}

.photoBlogImgContainer img:hover {
	opacity:1;
	filter:alpha(opacity=100);
}

div.glow {
	position:absolute;
	top:0;
	left:0;
	box-shadow:inset 0 0 20px #000000;	
		-moz-box-shadow:inset 0 0 20px #000000;
		-webkit-box-shadow:inset 0 0 20px #000000;
	height:100px;
	width:100px;
	z-index:100;
}

/* ====================	TEMPLATE 7 // SHOWCASE =================== */

				div#carousel {
					width:915px;
				}
				div#slideshow {
					position:relative;
					width:100%;
				}
					div.slides {
						position:relative;
						width:100%;
					}
						.slides img {
							border:1px solid #666;
							height:400px;
							width:913px;
						}
						.slides span {
							background:url(/images/background_overlay.png) repeat;
							padding:10px 10px 5px 10px;
							position:absolute;
								top:0;
								left:0;
							width:895px;
						}
							.slides span h4 {
								color:#fff;
							}
							

					#slideshow .slides-nav {  
						position: absolute;
						bottom:5px;
						left:40px;
						z-index:150;
						margin: 0;
						padding: 0;
					}
			
					#slideshow .slides-nav ul {
			
					}
			 
			
					#slideshow .slides-nav li {  
						float: left;
						background:url(/images/background_overlay.png) repeat;
						border:1px solid #000;
						border-bottom:none;
						width: 20px;
						height: 25px;
						margin: 0 5px;
						padding: 5px 0 0 0;
						text-align:center;
					}  

						#slideshow .slides-nav li.on {
							background:#fff;
						}						
			
					#slideshow .slides-nav li a {
						color:white;
						margin:0;
						padding:0;
					}
						#slideshow .slides-nav li.on a {
							color:#000;
						}

					#showcases {
						float:left;
						padding-top:20px;
						width:915px;
					}
						li.showcase {
							float:left;
							height:100px;
							margin:0 0 40px 36px;
							position:relative;
							width:175px;
						}
							li.showcase span {
								background:url(/images/sprites.png) left top no-repeat;
								display:block;
								float:left;
								height:32px;
								width:45px;
							}
							.showcase img {
								float:left;
								margin:0 10px 0 0;
							}
							.showcase a {
								float:left;
								font-size:12px;
								width:100px;
							}
							.showcase.gridFirst {
								clear:left;
								margin-left:41px;
							}
							.showcase.gridLast {
								margin-right:0;
							}

/* ===================== CMSense Manual ================ */

div.manual {
	padding-right:20px;
}

.manual h2 {
	border-bottom:1px solid #333;
	margin:0 0 20px 0;
	padding:10px 0 10px 0;
}

.manual h3 {
	color:#333 !important;
	font-size:1.6em !important;
	margin:0 0 20px 0;
	padding:10px 0 10px 0;
}

.manual h4 {
	color:#333 !important;
	font-size:1.4em !important;
	margin:10px 0;
}


.manual h5 {
	font-size:1.2em;
	margin:10px 0 10px 5px;
	text-decoration:underline;
}

.manual ol {
	font-size:1.2em !important;
	margin:0 0 10px 20px !important;
}
.manual ul {
	font-size:1.2em !important;
	margin:0 0 10px 40px !important;
}
.manual ol li, .manual ul li {
	margin:0 0 10px 0 !important;
}
	.manual ol li:first-child, .manual ul li:first-child {
		margin:10px 0 !important;
	}
.manual li li {
	font-size:0.8em !important;
}

.manual table#features {
	font-size:1.2em;
}

.manual #features th {
	font-weight:bold;
}

.manual #features td {
	border-right:1px dashed #CCC;
	border-bottom:1px dashed #CCC;
	padding:10px;
}
	.manual #features td.featureMarker {
		text-align:center;
	}

/* ============= COMMENTS =============== */

		/* ================== COMMENTS FORM ==================== */
		
		#commentForm label {
			clear:left;
			float:left;
			margin:0 0 15px 0;
		}
		#commentForm span {
			display:inline-block;
			padding:0 0 0 5px;
			width:150px;
		}
		#commentForm input.text {
			height:20px;
			width:200px;
		}
		#commentForm textarea {
			height:150px;
			width:400px;
		}
		#commentForm input#commentSubmit {
			clear:left;
			float:left;
		}
		
		/* ====================== COMMENTS ================== */
		
		.commentContainer {
			border-bottom:1px dashed #666;
			margin:20px;
			padding:10px;
		}
			.reply {
				padding-left:60px;
			}
	

/* ================== FOOTER ========= */
div#footer {
	margin: 0px auto;
	margin-bottom: 48px;
	width:778px;
	}
	#footer p {
		font-family: "Courier New", Courier, monospace;
		font-size: 11px;
		color: #666666;
		margin-top: 2px;
		}
	#footer img.logo {
		border:1px solid black;
		float:left;
		margin:-12px 12px 0 12px;
		z-index:10 !important;
	}