/*CSS Document for mobiles version less than 960px*/


/* the base font size for the whole document */
body {
	font-size: 62.5%;
	height: 100%;
}

/*Font for company description text front page*/
.style1 {
	font-family: "Adobe Garamond Pro";
	font-size: 1.8em;
	line-height: 1.37em;
	color:#495561;
	text-decoration: none;
	text-align:justify;
	background-color: white;
	/*display: inline-table;*/
}
/*Font for the buttons front page, and others*/
.style2 {
	font-family: "Adobe Garamond Pro";
	font-size: 1.8em;
	color:#495561;
	text-decoration: none;
	text-align:left;
	display: inline-table;
}
/*font for the footer*/
.style3 {
	font-family: "Adobe Garamond Pro";
	font-size: 1.4em;
	color:#495561;
	text-decoration: none;
	text-align:center;
}
.style3 a {
	color:#495561;
	text-decoration:underline;
}
.style3 a:hover {
	color: #0F269C;
}

/*for the link buttons */
.style4 {
	font-family: "Adobe Garamond Pro";
	font-size: 1.8em;
	color:#495561;
}

/*for the invisible characters at the menu*/
.style5 {
	color: transparent;  /*it was #0F269C */
}
/*for all subtitles e.g. our team*/
.style6 {
	font-family: "Arial Unicode MS";
	font-size: 2.6em;
	color: #51AAF3;
	font-weight: bolder;
	/*line-height: 220%;*/
}
/*for the members' name in their biography*/
.style7 {
	font-family: "Adobe Garamond Pro";
	font-size: 1.9em;
	line-height: 1.37em;
	font-weight: bold;
	color:#495561;
	text-decoration: none;
	text-align:left;
	display: inline-table;
}

/* for the link buttons at biobraphies */
.style8 {
	font-family: "Adobe Garamond Pro";
	font-size: 1.8em;
	color:#495561;	
}

/* for the introductory text at the MFAN publications page */
.style9 {
	font-family: "Adobe Garamond Pro";
	font-size: 2em;
	color:#495561;
	text-decoration: none;
	text-align: justify;
	line-height: 135%;
	/*background-color: white;*/
	/*display: inline-table;*/
}

/* downloaded font theme */
@font-face {
	font-family: Atlantic ssi;
	src: url(fonts/Atlantix SSi Semi Bold.ttf);
}

/*the main frame special blue*/
#wrapper {
	background-color: #46719C;
	height: auto;
	width: 100%;
	height: 100%;
}
/*the whole content of the webpage in gray for maintenance*/
#wrapper #cont {
	background-color: white; /* #C2C9D1; for maintenance purposes*/
	height: 100%;
	width: 85%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	padding-right: 20px;
	padding-left: 20px;
}

/*space for the logo picture, and words. Orange for maintenance purposes*/
#wrapper #cont #logo {
	/*background-color: #FFCC00; */ /* #FFCC00 for maintenance purposes*/
	height: auto; /* 95px */
	width: auto; /* 80% */
	margin-bottom: 10px;
}

#wrapper #cont #logo img {
	width:99px; 
	height: 83px;
}

/* for the logo name of company */
#wrapper #cont #logo #logLetters {
	/*background-color:#99FF99;*/ /* green #99FF99 for maintenance */
	font-family: Atlantic ssi;
	font-size: 4em;
	color: rgb(57,105,189);
	font-weight: bold;
	padding-right: 5px;
	display: inline-table;
}

/* for the comment front of logo */
#wrapper #cont #logo #logLetters2 {
	/*background-color: #FF99FF;*/  /* pink #FF99FF for maintenance */
	font-family: Atlantic ssi;
	font-size: 2.2em;
	font-weight: bold;
	font-style: italic;
	text-align: center;
	/*margin-right: 5px;*/
	margin-left: 10%;
	padding-top: 10px;
	color: rgb(57,105,189);
	/*float: right; */
	display: inline-table;
}

/*this container for the frame of content1 and content2 and others. Used individually*/
#wrapper #cont #holder {
	/*background: yellow; */  /* white, yellow for maintenance purposes */
	height: auto;
	width: 100%;
	margin-top: 15px;
	margin-right: auto;
	margin-left: auto;
	display: table;
}

/*Company description front page*/
#wrapper #cont #holder #desc1 {
	/*background-color: red; */ /*none, red for maintenance purposes*/
	height: auto; /* 250px */
	width: 90%; /* 45% */
	margin-left: auto;
	margin-right: auto;
	padding-top: 15px;
	padding-bottom: 35px;
	display: table;
}
/*company's main picture front page*/
#wrapper #cont #holder #pic1 {
	background-color: blue;
	/*
	width: auto;
	height: auto; */
	margin-left: auto;
	margin-right: auto;
	/* display: table; */
	
	position: relative;
    width: 90%;
    padding-bottom: 52.7%;
    /*float: left; */
    height: 0;
}

#wrapper #cont #holder #pic1 img {
	/*
	width: 411px;
	height: 300px;
	display: table; */
	
	position: absolute;
	width: 100%;
    height: 100%;
    left: 0;
	top: 0;
}



/*Buttons to link to other internal pages front page -- the one made before*/ 
/*
#wrapper #cont #buttons {
	width: 60%;
	margin: 0%;
	margin-top: 5%;
	margin-bottom: 5%;
	margin-left: 20%;
    float: none;		*//*to make it work for ipad 3rd 7 and iphone 5S*/
/*} */

#wrapper #cont #holder #buttons {
	background-color: white;
	height: 120px;
	width: 60%; /* 33.5% */
	border: 10px solid #AAC2DA;
	border-radius: 30px;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	padding-right:3.5%;
	padding-top: 15px;
	padding-bottom: 15px;
	margin-left: 16%; /* to make mobile to center the button */
	/* margin-right: auto; */
	margin-top: 40px;
	margin-bottom: 20px;
	box-shadow: 15px 15px 10px #888;
	-moz-box-shadow: 15px 15px 10px #888;
	-webkit-box-shadow: 15px 15px 10px #888;
	text-align:center;
	display: table;
}

#wrapper #cont #holder #buttons a {
	border:medium #AAC2DA outset;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-right: 23.5%;
	margin-left: 34%;
	text-align: center;
	background-color: #AAC2DA;	
	text-decoration: none;
	padding-left: 5px;
	padding-right: 5px;
	display: inline-table;
}

#wrapper #cont #holder #buttons a:hover{
	color: #0F269C;		
	text-decoration: none;
	background-color: white ;
}

/*for publications page*/

#wrapper #cont #titleP {
	/*background: yellow;*/	/*yellow for maintenance purposes */
	height: 60px;
	width:95%;
	margin-top: 30px;
	padding-left: 3%;
	display: table;
	/*border-left: 1px solid #51AAF3;*/
}


#wrapper #cont #holder2 {
	background-color: #EFF0F0;	/*pale gray */
	height: auto;
	width:99%;
	padding-right: 1%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
	display: inline-table;
}

#wrapper #cont #holder2 #pubpic {
	background-color: #EFF0F0;  /* pale gray, #99FF00 olive for maintenance*/
	position: relative;
	width: 176px;
	height: 220px;
	float:left;
	margin-bottom: 20px;
	margin-right: 30px;
}

#wrapper #cont #holder2 #pubpic img {
	border: 1px solid black;
	position: absolute;
	top: 0;
	left: 0;
	width: 160px;
	height: 199px;
}

#wrapper #cont #holder2 #pubdesc {
	background-color: #EFF0F0;  
	height: auto;  
	width: 100%;
	display: inline-table; /* to eliminate text wrapping around pictures */
}



/*the footer of the webpage in vivid green for maintenance*/
#wrapper #cont #end {
	/*background-color: white;*/ /* #99FF33 for maintenance purposes*/
	height: 40px;
	width: 100%;
	margin-top:40px;
	padding-top: 120px;
	padding-bottom: 20px;
	display: inline-table;
}

/* for the page to extend itself proportionally to the screen */
#wrapper #filler {
	/*parameters to extend it the size of screen in each computer*/
	background-color: #46719C;
	width: 100%;
	height: 100%;
	position: fixed;
}

/*the menu color blue intense it is invisible*/
#wrapper #cont #menu {
	font-family: "Arial Unicode MS";
	font-size: 1.6em;
	font-weight: bold;
	color: white;
	text-decoration: none;
	height: 1px; /* 40 */
	width: 100%;
	background-color: #0F269C; 
	line-height: 2.2em;
	/*margin-top: 10px;*/
	/*display: inline-table; */
	/*margin-bottom: 10px;*/
	visibility: hidden;
}
/* this goes invisible too */
#wrapper #cont #menu a {  
	color: white;  
	padding-right: 0px;
	padding-left: 0px;
	float: left;
	height: inherit;
	text-decoration: none;
	width: 14%;
	text-align:center;
	/*display: inline-table;*/
}
/* this goes invisible too */
#wrapper #cont #menu a:hover {
	color: #0F269C; 
	background-color: #AAC2DA; /* blue sky */
}

/*for the menu when screen is 959px or less, visible here ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
/*for the pop up at the menu 'what we do' NOT in use*/
.popUp2 {
	font-family: "Adobe Garamond Pro";
	font-size: 1.3em;
	color:#495561;
}

/*this one holds the button only*/
#wrapper #cont #menuBtn {
	/*background-color: #FFFF99; *//* pale yellow */
	height: 42px;
	width: auto;
	visibility: visible;
	
	/*display: none; */ /* NO NEED FOR THIS HERE, but for mobiles*/
}
/* image-button to open the div */
#wrapper #cont #menuBtn img#mIcon {
	border: 1px solid transparent;
	float: right;
}

#wrapper #cont #menuBtn img#mIcon:hover {
	border: 1px solid #51AAF3;
	background-color: #51AAF3;	
}

/* for the menu or for the menu to hang if pop up */
#wrapper #cont #menu2 {
	background-color: rgb(123,107,203);  /* was rgba(15,38,156,0.1) same strong blue in main menu */
	height: auto;
	width: auto;
	/*margin-bottom: 20px; */ /* breakes the entire page ?? */
	display: none;
}

#wrapper #cont #menu2 a {
	font-family: "Arial Unicode MS";
	font-size: 2.4em;
	font-weight: bold;
	line-height: 2.6em;
	background-color: rgb(123,107,203);
	color: white;  
	padding-left: 10%;
	/* height: 40px; */
	border-bottom: 1px solid #51AAF3;
	/*border-right: 1px solid #51AAF3;  */
	text-decoration: none;
	width: 200px;  /* 300px */
	text-align: left;
	display: inline-table;
}

#wrapper #cont #menu2 a:hover {
	color: #0F269C; 
	background-color: #AAC2DA; /* blue sky */	
}

/*image-button to close the div*/
#wrapper #cont #menu2 img#cIcon {
	border: 1px solid transparent;
	float: right;
}

#wrapper #cont #menu2 img#cIcon:hover {
	border: 1px solid #51AAF3;	
}

/*popup submenus at main menu for pc and mobiles */
#pops {
	font-family: "Adobe Garamond Pro";
	font-size: 2.4em;
	line-height: 1.6em;
	color:#495561;
}

/* for the title of the previous popups 'dialog' plugin jquery */
.myDialog .ui-dialog-title {
	font-size: 2.4em;		
}


/* END menu when screen in 959 or less ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */

/*INTERNAL PAGES*/
/*For the description text of who-we-are page*/

#wrapper #cont #holderPp {
	/*background-color: yellow;*/	/*white yellow for maintenance purposes */
	height: auto;  /* 250px */
	width: 100%;
	margin-top: 15px;
	padding-bottom: 20px;
	margin-bottom: 70px;
	border-bottom: 1px solid #51AAF3;
	margin-right: auto;
	margin-left: auto;
	display: table;
}


#wrapper #cont #holder #desc_weAre {
	/*background-color: white; */ /*white red for maintenance purposes*/
	height: auto;
	width: 100%; 
	padding-bottom: 30px;
	border-bottom: 1px solid #51AAF3;
	display: inline-table;	
}
/*container for the right sidebar of who we are page*/
#wrapper #cont #holder #sidebar_weAre {
	/*background-color: #D7DFF8;*/ /*no background-color, pale blue #D7DFF8 for maintenance*/
	margin-left: auto;
	margin-right: auto;
	height: auto;
	width: auto;
	/*text-align: left;*/
	padding-top: 30px;
	padding-bottom: 20px;
	display: table;	
}
/* to manipulate the font size of text inside of sidebar */
#wrapper #cont #holder #sidebar_weAre ul.MenuBarVertical {
	font-size: 1.5em;
	background-color: #00FF99;	
}

#wrapper #cont #holder #sidebar_weAre ul.MenuBarVertical a {
	background-color: rgb(123,107,203);
	color: white;
}

#wrapper #cont #holder #sidebar_weAre ul.MenuBarVertical a:hover {
	background-color: #AAC2DA;
	color: 	#0F269C;
}


/*container to hold the subtitles special decoration*/
#wrapper #cont #smHolder {
	background: white;	/*yellow for maintenance purposes */
	height: 60px;
	width:100%;
	margin-top: 15px;
	margin-bottom: 0px;
	display: table;
	border-bottom: 1px solid #51AAF3;
}

/*container to hold the pictures of who-we-are page*/
#wrapper #cont #holderPp #pict2 {
	position: relative;
	background-color: blue;
	width: 200px;
	height: 208px;
	float:left;
	margin-top: 30px;
	margin-bottom: 20px;
	margin-right: 30px;
	/*display: inline-table;*/
}

#wrapper #cont #holderPp #pict2 img {
	position: absolute;
	top: 0;
	left: 0;
	width: 220px;
	height: 230px;
}

/*For the biography text of who we are page*/
#wrapper #cont #holderPp #desc_biog {
	/*background-color: #FF99CC;*/  /* pink #FF99CC for maintenance*/
	height: auto;
	width: 100%;
	/*float: left;*/
	margin-top: 30px;
	padding-bottom: 30px;	
	display: inline-table;
}

/*for the page what we do*/

/*for the titles*/
#wrapper #cont #holder #title {
	background: white;	/*yellow for maintenance purposes */
	height: 60px;
	width:95%;
	margin-top: 50px;
	padding-left: 5%;
	display: table;
	/*border-left: 1px solid #51AAF3;*/
}

/*for put the content of each activity  */
#wrapper #cont #holder #desc_wwdo {
	background-color: white; /*red for maintenance purposes*/
	height: auto;
	width: 90%;
	padding-left: 5%;
	padding-right: 4%;
	/*
	border-left: 1px solid #51AAF3;
	font-family: "Adobe Garamond Pro";
	font-size: 24px;
	color:#495561;
	text-align: justify;
	float:left;
	display: inline-table; */	
}

/* for the submenu at 'what we do' main menu */
a#sMenu {
	text-decoration: none;
}

a#sMenu:hover {
	color: white;
}

/* for the accordeon at we_do.php */
#wrapper #cont #accordion {
	/*background-color: #FF9999;*/ /*#FF9999 pink for maintenance*/
	margin-top: 30px;
	padding: 0px;
}

#wrapper #cont #accordion h3 {
	/*color: red;*/
	text-align: left;
}

#wrapper #cont #accordion #acctext {
	/*color: green;*/
	padding-left: 5px;
	padding-right: 5px;
}

/* to the list at main page content2, does NOT affect the other side menus */
li {
	/*background-color: #FF6666;*/
	margin-bottom: 10px;
}

/* for link buttons at bibliographies */
a#links {
	border:medium #AAC2DA outset;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-right: 5%;
	margin-top: 5px;
	text-align: center;
	background-color: #AAC2DA;
	display: inline-table;	
	text-decoration: none;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	float: right;	
}

a#links:hover {
	color: #0F269C;		
	text-decoration: none;
	background-color: white ;
}

/* for the submenu e.g. at 'what we do' to show the close 'x' */
.no-close .ui-dialog-titlebar-close {
  display: none;
}

/* for the anchor links at page contact-us */
#wrapper #cont #holder a#contacts img#mail{
	margin-top: 20px;
	width: 84px;
	height: 84px;
}

#wrapper #cont #holder a#contacts img#linkedin{
	margin-top: 20px;
	width: 196px;
	height: 60px;
}

#wrapper #cont #holder a#contacts img#twiter{
	margin-top: 20px;
	width: 198px;
	height: 73px;
}

/* for the contents of page reviews, the following 3 */
#wrapper #cont #holderR {
	background-color: #DFE8F6;
	height: auto;
	width: 100%;
	margin-top: 40px;
	margin-right: auto;
	margin-left: auto;
	border-left: 1px solid #51AAF3;
	display: table;
}

#wrapper #cont #holderR #reviews{
	background-color: #DFE8F6;
	width: 96%;
	padding: 2%;
	/* border-left: 1px solid #51AAF3; */
	
}

#wrapper #cont #holderR #reviewAuthor{
	/*background-color: gray;*/
	margin: 2%;
	width: auto;
	height: auto;
	
}

/* for PUBLICATIONS page*/

/* for the slideshow at publications page following 6 */
#wrapper #cont #holderS {
	/*background-image: url("images/wood3.jpg"); */
	/*background-color: #66FF99; */	/*#66FF99 green for maintenance purposes */
	height: 400px;
	width: 300px;  /* 80% */
	margin-right: auto;
	margin-left: auto;
	/*margin-bottom: 80px; */
	margin-top: 30px;
	display: table;
}
/* no pen in mobile, sorry! does not luck fine :) */
#wrapper #cont #holderS #cPen {
	background-color: tranparent; /* lime #CCFF00 for maintenance*/
	width: auto;
	height: auto;
	float: left;
	margin-top: 100px;
	display: none;
}

#wrapper #cont #holderS .cycle-slideshow {
	
	margin-left: auto;
	margin-right: auto; 
	/*float: left;*/
	display: table;

}

#wrapper #cont #holderS .cycle-slideshow img#one {
	margin-top: -10px;
	margin-left: 10px;
	border: 4px solid #C1C2C2;	
}

#wrapper #cont #holderS .cycle-slideshow img#two {
	margin-top: 20px;
	margin-left: 20px;
	border: 4px solid #C1C2C2;	
}

#wrapper #cont #holderS .cycle-slideshow img#three {
	margin-top: 10px;
	margin-left: -10px;	
	border: 4px solid #C1C2C2 ;
}

#wrapper #cont #holderS .cycle-slideshow img#four {
	margin-top: -20px;
	margin-left: -20px;
	border: 4px solid #C1C2C2 ;	
}


* {
	margin: 0px;
}