@charset "iso-8859-1";
/* CSS Document */
.imgvisible{
	visibility:visible;
	width: 150px;
}
button:hover {
    background-color: grey; /* Green */
    color: white;
}
#uploadsubmit{
	margin: 0;
	padding: 0;
	margin-top: 5px;
	display:inline-block;
	vertical-align: top;
}
input[type=file] {  /* styling html file input */
    margin: 0;
	padding: 0;
	margin-top: 5px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 290px;
	vertical-align: top;
	display: inline-block;
}
.ClearLeft{
	clear: left;
}
.ClearRight{
	clear: right;
}
.Block{
	margin: 0;
	padding: 0;
	display: block;
	width: auto;
	height: auto;
}
.tabContent{
	margin-top: 5px;
	clear:both;
}
.aleft{
	text-align:left;
	margin-top: 5px;
	clear:both;
	display:block;
}
#FileUpload{
	margin: 0;
	padding: 0;
}
#FillFields{
	margin: 0;
	padding: 0;
}

#status{
	margin: 10px;
}
#loaded_n_total{
	margin: 10px;
}
#Loaded_File_Name{
	margin: 10px;
}
#progress-div{
	margin: 10px;
}
#deleteFileForm{
	margin: 0;
	padding: 0;
	margin-top: 10px;
	margin-bottom: 10px;
}
#progressBar{
	margin: 10px;
}
#upload-form{
	margin: 10px;
}
#upload_form {
	float: left;
	margin: 0;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;
	vertical-align: top;
	width: 100%;
}
#uploadBar{
	width: 100%;
}
.MenueWrap{
	margin: 0;
	padding: 0;
	margin-top: 5px;
	margin-bottom: 5px;
	min-height: 35px;
	background-color: transparent;
}
#submitinfo{
	margin: 0;
	padding: 0;
	 margin-top: 5px;
	 margin-left: 2px;
	 margin-right: 2px;
	/* float: left; */
	min-height: 30px;
	/* clear:both; */
}
#infosubmit{
	margin: 0;
	margin-top: 10px;
}
#upload_form span{
	margin: 10px;
}
#selectFile span{
	margin: 20px;
}
#ContactForm form{
	margin: 10px;
}
#FileUpload{
	margin: 0;
}
p span{
    display: block;
	white-space: nowrap;
}	
.extra{
	margin: 0;
	padding: 0;
	width: 100%;
}
.InlineBlock{
	margin: 0;
	padding:0;
	display:inline-block;
	width: auto;
	height: auto;
}
ul{
	width: 100%;
	display: inline-block;
}
ul.navigation{
	margin: 0;
	margin-bottom: 20px;
	padding: 0;
	display: inline-block;
	list-style: none;
	float:left; /* keep to align left */
	vertical-align: top;
	/* text-align: center; */ /* justify; */
    /* text-align-last:center; */
	/* display:table-row; */ /*align vertically the li members */
}
ul.navigation li{
	margin: 0;
	margin-left: 2px;
	/* display:inline; */ /* keep */
	vertical-align: top;
	float:left; /* keep this otherwise it become block */
	/* display: table-cell; */ /* align vetically the li members. */
}
div .image {
    float: right;
}
div .navigation{
	float:left;
}
.center{
	 text-align: center;
}
blockquote p{
    color: #FFFFFF;
	font-style: italic;
}
#header .name{
	font-variant:small-caps;
}
p{
	padding-left: 5px;
	padding-right: 5px;
	text-align: justify;
    text-justify: inter-word;
}
:link { /* Essentially means a[href], or that the link actually goes somewhere */
  color: white;
}
:visited {
  color: white;
}
:hover {
  box-shadow:none;
  /* color: white; */
}
:active {
  /* color: white; */
}
#Portfolio #Contact .MenuButton{
	marigin:0;
	padding:0;
	float: left;
}
.company{
	marigin:0;
	padding:0;
	/* padding: 10px; */
}
.quotes{
	background-color: transparent;
}
.capital{
	font-variant: small-caps;
}
.Inline{
	display:inline-block;
	margin: 0;
	padding: 0;
}
:invalid ~ .test {
    display: none;
}
/* File upload */
.progressBar{
	width:300px;
}
#trough {  /* upload indicator */
 border: 1px solid #000000;
 height: 16px;
 display: block;
 background-color: #DDDDDD
}
#bar {
 background-color: #0000FF;
 background-image: url("blue-clearlooks.png");
 border-right: 1px solid #000000;
 height: 16px
}
/* End file upload */
.moreaboutme{
}
a{
	color: #FFFFFF; /* white; */
}
html, body{
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font: Verdana;
	font-size: 18px;
}
html{
	height: 100%;
}
body{
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
#header{
	background-color: #2B2727; /* #050505; // #6B6868; // #CCCCCC; // #AAAAAA; // gray; // #F2F2F2; //#DDCCDD; // ;  //#6B6868; // #333333;  #B6B2A0; */
	opacity: 1.0; /* 0.65; */
}
#MainContent{
	margin: 0;
	padding: 0;
	flex: 1;
	background-color: #6B6868; /* black; // transparent; // #050505; // #6B6868; // #000000; // #636360; */
}
#MainContent p{
	font-size: 90%;
}
#footer{
	background-color: #2B2727; /* #050505; // #6B6868;  //#CCCCCC;  // #AAAAAA; // #B6B2A0; */
}
.botlegend .botfieldset{
	padding-bottom: 10px;
}

.mail{
    list-style-type: none;
}
.TxtBox {
	margin: 0;
	padding: 5px;
	border: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	min-height: 30px;
	float:right;
}
fieldset{
	margin: 0;
	padding: 0;
	border: 0;
}
fieldset legend{
	margin: 0;
	padding: 0;
	border: 0;
}
fieldset.header{
	margin: 0;
	padding: 0;
	border: 0;
	background-color: #CCCCCC; /* #B6B2A0; // #F1FBFF; very light blue #F1FBFF #BFE2F9 */
	width: 100%;
	display: inline-block;

}

br.clearBoth { 
    clear: both;
	background-color: transparent;
	
}
ul.tabs { 
    width: auto;
	list-style-type: none; 
	margin: 10px 0 10px 0; 
	padding: 0 0 0.3em 0; 
}
ul.tabs li {
	width: auto;
	display: inline-block; 
	margin: 10px 0 10px 0; 
	
}
/*
ul.tabs li a {
	 color: #42454a; 
	 background-color: #dedbde; 
	 border: 1px solid #c9c3ba; 
	 border-bottom: none; 
	 margin: 10px 0 10px 0; 
	 padding: 0.3em; 
	 text-decoration: none; 
}
*/
ul.tabs li a:hover { 
	background-color: #f1f0ee; 
}
ul.tabs li a.selected {
	color: #000; 
	background-color: #B6B2A0;  /* #f1f0ee; */
	/* font-weight: bold; */
	padding: 0.7em 0.3em 0.38em 0.3em; 
}
ul.tabs li.a.done { /* MGZ */
	color: #F06 ; /* red */ 
	background-color: #B6B2A0; 
	/* font-weight: bold; */
	padding: 0.7em 0.3em 0.38em 0.3em; 
}
ul.tabs li a:active{
	background-color: #B6B2A0; /* change to this color when click on it but will not stay*/
}
.MenueWrap{
	margin: 0;
	padding: 0;
	/*
	padding-top: 5px;
	padding-bottom: 5px;
	*/
	border: none;
	box-sizing: border-box;
	width: 100%;
	background-color: transparent; /* #B6B2A0; */
	/* font-family: Verdana, Geneva, sans-serif; */
	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
 	display: flex;
  	-webkit-flex-flow: row wrap;
	flex-wrap: wrap;
  	justify-content: flex-end; /* flex-start; */
	align-items: left; /* center */
	align-content: flex-start;
	/*
	padding-top: 0.5rem;
	padding-left: 0.5rem;
	padding-bottom: 0.5rem;
	margin-bottom: 0;
	*/
	list-style: none;
    overflow: visible; /* auto */
}

.ListItem{
	color: #333333; /* black; */
	margin: 0;
	padding: 0;
	padding-right: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	flex-shrink: 0;
	text-decoration: none;
	background-color: transparent;  /* #B6B2A0; */
	min-height: 30px;
}
.FirstItem{
	background-color: transparent;
	color: #FFFFFF; /* black; */
	margin: 0;
	padding: 0;
	padding-left: 5px;
	/*
	margin-left: 10px;
	margin-right: auto;
	*/
	flex-shrink: 0;
	text-decoration: none;
	text-transform: none;
	min-height: 30px;
}

.SecondItem{
	color: #333333;  /* black; */
	margin: 0;
	padding: 0;
	/* padding-left: 5px; */
	/* margin-left: 5px; */
	margin-right: auto;
	flex-shrink: 0;
	text-decoration: none;
	min-height: 30px;
}
.spacer{
	visibility: hidden;
	flex-grow: 1; /* take all of the available space on the row */
}
.label{
	width: auto;
	height: auto;
	/* float: left; */
    margin: 0 auto;
	padding: 0;
	padding-left: 5px;
	padding-right: 5px;
	/* padding-top: 5px; */
	/* padding-right: 10px; */
	/* font-family: Arial; // Verdana, Geneva, sans-serif; */
	/* text-shadow: -2px 2px 10px rgb(0,0,0); */
	/* font-variant:small-caps; */
	font-size: 95%;
	color: #FFFFFF; /* black; // white; // #FFFFFF; */
	/* text-spacing: 0.05em; */
	text-align: center; /* center; */
	vertical-align: top;
	opacity: 100%; /* 0.65; */
	/* line-height: 120%; */
}
.name{ 
	width: auto;
	height: auto;
	float: left;
    margin: 0;
	padding: 0;
	padding-top: 5px;
	/* padding-left: 10px; */
	/* padding-right: 10px; */
	/* font-family: Arial; // Verdana, Geneva, sans-serif; */
	/* text-shadow: -2px 2px 10px rgb(0,0,0); */
	/* font-variant:small-caps; */
	font-size: 95%;
	color: #FFFFFF; /* black; // white; // #FFFFFF; */
	/* text-spacing: 0.05em; */
	text-align: left; /* center; */
	vertical-align: top;
	opacity: 100%; /* 0.65; */
	line-height: 120%;
}
.smaller{
	font-size: 120%; 
}
.LinkButton {
	 margin: 0;
	 padding: 0;
     background-color: inherit;  /* none!important; */
     border:none; 
     /* padding:0!important; */
     color: inherit;
	 font: inherit;
     text-decoration:underline;
	 text-shadow: inherit;
     cursor:pointer;
}
.DropDown{
	margin: 0 auto;
	margin-top: 10px;
	padding: 0;
	width: auto;
	font-size: 110%;
	text-align: center;
	display:inline-block;
	min-height: 30px;
}
dropDown{
	margin: 0 auto;
	/* margin-top: 10px; */
	padding: 0;
	width: 100%;
	font-size: 110%;
	text-align: center;
	display:inline-block;
}
.dropdown{
	margin: 0 auto;
	margin-top: 10px;
	padding: 0;
	width: 100%;
	font-size: 110%;
	text-align: center;
	display:inline;	
}
.SubmitButton{
	 margin: 0;
	 padding: 0; /* 5px 10px 5px 10px; */
	 margin-top: 5px;
	 margin-left: 2px;
	 margin-right: 2px;
	 /* padding-left: 2px; */
	 /* padding-right: 2px; */
	 /* font-family: Verdana, Geneva, sans-serif; */
	 /* font-size: 95%; */
	 color: #FFFFFF; 
	 border: 0; /* 1px solid #999; */
	 text-decoration: none; 
	 background:  #333333; /* #333333; // gray; // #000000; // #64a724; */
	 /*
	 text-shadow: 0px 1px 1px #666; 
	 -moz-box-shadow: 0 1px 3px #111; 
	 -webkit-box-shadow: 0 1px 3px #111; 
	 box-shadow: 0 1px 3px #111; 
	 border-radius: 4px; 
	 -moz-border-radius: 4px; 
	 -webkit-border-radius: 4px; 
	 background: -moz-linear-gradient(top, #64a724 0%, #579727 50%, #58982a 51%, #498c25 100%); 
	 background: -webkit-gradient(linear, left top, left bottom, from(#64a724), to(#498c25), color-stop(0.4, #579727), color-stop(0.5, #58982a), color-stop(.9, #498c25), color-stop(0.9, #498c25)); 
	 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64a724', endColorstr='#498c25', GradientType=0 ); 
	 */
	 cursor: pointer; 
	 /* display: inline-block; */
	 width: auto;
	 min-height: 30px;
	 min-width: 100px;
	 /* border-radius: 10px 0 0 0; */
	 /* float: left; */
	 /* display: inline; */
} 
.MenuButton .ExperienceButton{
		 border-radius: 10px 0 0 0;
}
.CompanyButton{  /* functional */
	/* font-size: 70%; */
	/* min-width: 80px; */
	/* background: #2B2727; */
}
.navigationlink{
	margin: 0;
	padding: 0;
	/* width: 100%; */
	min-width: 44px;
	min-height: 30px;
	/* display: inline; */
	/* float: right; */
	background-color: transparent; 
}

.navigationlink a:link, .navigationlink a:visited {
	padding: 0.4em 1em  0.4em 1em;
	color: #333333;  /* black; */
	text-decoration: none;
	border: none; /* 1px solid #9B8748; */
	border-top: none;
	border-bottom: none;
	background-color: transparent;
}
.navigationlink a:hover {
	color: #FFFFFF; /* white; */
	background-color: green; 
	padding-bottom: 5px;
	border-color: green;
}
.brand{
	margin: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 90%;
	color: #FFFFFF;
	white-space: nowrap;
	/* font-weight:bold; */
	background-color: transparent; /* #B6B2A0; */
}

.site {
	margin: 0;
	padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
	width: 100%;
	min-width: 340px;
}
/*
#footer p{
	padding: 0;
	font-size: 85%;
	color: #333;
	display: block;
}
*/
#footer h4{
	font-size: 80%;
}

#parent {
  display: flex;
  flex-flow: row wrap;
}
.photo{
	width: 45%;
	background: lightblue;
	margin: 10px;
	min-width: 500px;
}
#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}
.ContentsWrap{
	margin: 0;
	padding: 0;
	padding: 5px;
	box-sizing: border-box;
	width: 100%;
	background-color: transparent; /* #636360; */
	/* font-family: Verdana, Geneva, sans-serif; */
	/* font-size: 0.75rem; */
	/* min-height: 2rem; */
	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
 	display: flex;
  	-webkit-flex-flow: row wrap;
  	justify-content: space-between;
	align-items: flex-start;
	align-content: flex-start;
	flex-flow: row wrap;
	justify-content: space-around;
}
.ContentsItem{
	margin: 0;
	padding: 0;
	/* padding: 10px; */
	/*
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
	*/
    display: flex;
	align-items: center;
    flex-flow: row wrap;
	color: #FFF;
	text-decoration: none;
	background-color: transparent; /* #B6B2A0; */
	width: 100%; /* iphone 4 screen size 480x320 */
	min-width: 320px; /* iphone 4 screen size 480x320 */
	/* min-height: 30px; */
	border-radius: 10px;
}
.myPhoto{
	float: right;
	vertical-align: text-top;
	margin: 0;
	margin-left: 10px;
	width: 35%;
}
.PhotoWrap{
	margin: 5px;
	width: 40%;
	height: 300px;
	box-sizing: border-box;
	background-color: transparent;
	background:url(mansour_gz.jpg) no-repeat center center;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	/* min-width: 98%; */
  	justify-content: space-around;
	padding: 0.5rem 0.5rem;
	list-style: none;
    overflow: auto;
	vertical-align: text-top;
}
.TxtWrap{
	margin: 5px;
	width: 55%;
	height: 350px;
	box-sizing: border-box;
	background-color: transparent;
	/* background:url(mansour_gz.jpg) no-repeat center center; */
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	/* min-width: 98%; */
  	justify-content: space-around;
	padding: 0.5rem 0.5rem;
	list-style: none;
    overflow: auto;
}
.fsize{
	margin: 0;
	padding: 0;
	font-size: 110%;
}
.menu .portfolio{  /* functional */
	 margin: 0;
	 padding: 0;
	/* padding-left: 10px; */
	/* padding-right: 5px; */
	/* font-family: Aria; /* Verdana, Geneva, sans-serif; */
	/* text-shadow: -2px 2px 10px rgb(0,0,0); */
	/*
	font-variant:small-caps;	
	*/
	/* font-size: 120%; /* slogan on the top */
	/* color: #FFF; */
	/* text-spacing: 5px; */
	/* text-align: left; */
	/* background-color: transparent; */
	
}
.slogan{  /* similar to .message except for text-align */
	width: 100%;
	/* width: auto; */
	margin: 0;
	padding:0;
	box-sizing: border-box;
	float: left;
	/* font-family: Arial;  /* Verdana, Geneva, sans-serif; */
	/* text-shadow: -2px 2px 10px rgb(0,0,0); */
	font-variant: small-caps;
	font-size: 120%; /* slogan on the top */
	color: #FFFFFF; /* #FFF; */
	/* text-spacing: 0.05em; */
	text-align: left;
	opacity: 1.0; /* 0.7 */
}
.CustomFileInput{
	color: transparent;
}
.CustomFileInput::-webkit-file-upload-button {
  visibility: hidden;
}
.CustomFileInput::before {
  content: 'Select some files';
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 80%;
}
.CustomFileInput:hover::before {
  border-color: #333333; /* black; */
}
.CustomFileInput:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
.BackColorWhite{
	background-color: #DDCCDD; /* #FFFFFF; // white; */
	color: #333333;  /* black; */
}
.BackColorBlack{
	background-color: 	#333333;  /* black; */
	color: 				#FFFFFF; /* white; */
}


/*
@media all and (max-device-width: 600px) {
	 
	#sidebar {
		float: none;
		width: 1%;
		display: none;
	}
	#sidebar .gutter{
		padding: 0;
	}
	#content{
		width: 99%;
	}
	.single-div{
        display: block;
        width: 98%;
        margin: 0 auto;
    }

}
*/

/* Portrait */
@media only screen 
  and (min-width: 320px) 
  and (max-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	 body {
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}
	#sidebar {
		/* If we dont want sidebar
		float: none;
		width: 0%;
		display: none;
		*/
		/* if we want to slide below the content */
		width: 100%;
		display: block;
	}
	#sidebar .gutter{
		padding: 0;
	}
	#content{
		width: 100%;
	}
	.single-div{
        display: block;
        width: 98%;
        margin: 0 auto;
    }
}

/* Landscape 
@media only screen 
  and (min-width: 320px) 
  and (max-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
	 body {
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}
	#sidebar {
		float: none;
		width: 0;
		display: none;
	}
	#sidebar .gutter{
		padding: 0;
	}
	#content{
		width: 100%;
	}
	.single-div{
        display: block;
        width: 98%;
        margin: 0 auto;
    }
}
*/


/*
@media only screen and (max-width: 320px) {
        body { font-size:80%;}
}

@media only screen and (max-width: 480px) {
        body { font-size:85%;}
}
@media only screen and (max-width: 800px) {
        body { font-size:120%;}
}  
@media only screen and (max-width: 1100px) {
       body { font-size:130%;}
} 
*/