/* CSS Document */
/*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, b, u, i, center, 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-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}
/*MAIN*/
body {
font-size: 1.25em;
line-height: 1.05em;
font-family: Helvetica Neue, Helvetica, Arial;
background:#FFF;
color: #555;
}
/* Let's get this party started */
::-webkit-scrollbar {
width: 6px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 0px rgba(0,0,0, 1.3);
-webkit-border-radius: 0px;
border-radius: 0px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background: rgba(255,255,255,2);
-webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0,0,0,0.4);
}
::-
a {
color: #4C9CF1;
text-decoration: none;
font-weight:100;
font-size:1em;
}
a:hover {
color: #444;
}
img {
width: 100%;
}
header {
width:100%;
height: 100px;
position: fixed;
top: 30px;
left: 0;
z-index: 500;
font-size:1.5em;
font-weight:bold;
}
nav {
float: left;
padding: 0px;
z-index: 500;
font-size:1em;
}
a:hover#menu-icon {
background-color: #444;
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
margin-left:50px;
margin-top:10px;
letter-spacing:0px;
}
li {
display: inline-block;
float: left;
padding: 0px;
padding-top:20px;
margin-left:0px;
border: hidden;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: #4C8FEC url(../img/menu-icon.png) center;
}
.current {
padding-left:0px;
}
.work {
left:130px;
font-weight:bold;
}
.red {
}
.table {
padding:50px;
position:relative;
padding-bottom:50px;
}
#tablework {
height:50px;
background-color:#FFF;
display: block;
width:250px;
}
section {
margin-left:50px;
width:70%;
position: relative;
top:200px;
font-size:1em;
}
.title {
color:#C00;
text-decoration:underline;
}
section2 {
margin-left:222PX;
max-width: 540px;
position: fixed;
top:140px;
font-size:1.3em;
line-height: 1.5em;
margin-bottom:350px;
}
.secabout {
left:200px;
top:150px;
position:absolute;
}
h1 {
font-size: 1.05em;
color: #2262AD;
line-height: 1.15em;
width:100%;
}
p2 {
top:140px;
position:fixed;
margin-left:50px;
font-size:1.5em;
line-height: 1.6em;
letter-spacing:0.07em;
width:100px;
font-style:italic;
font-family:Georgia, "Times New Roman", Times, serif;
}
p3 {
top:536px;
background-color:#C00;
position:fixed;
width:750px;
height:1px;
margin-left:50px;
opacity:0.6;
z-index:300;
}
p333 {
top:140px;
background-color:#C00;
position:fixed;
width:1px;
height:575px;
margin-left:800px;
opacity:0.6;
}
p3333 {
top:540px;
position:fixed;
width:100px;
height:575px;
margin-left:50px;
font-size:1.4em;
font-family: Georgia, "Times New Roman", Times, serif;
}
p5 {
top:200px;
position:absolute;
width: 700px;
height:inherit;
margin-left:50px;
font-size:1.4em;
line-height: 1.8em;
font-family:"Courier New", Courier, monospace;
font-style:italic;
}
p55 {
top:150px;
position: fixed;
width: 700px;
height:inherit;
margin-left:95px;
font-size:1.1em;
line-height: 1.4em;
font-family: Verdana, Geneva, sans-serif;
text-align:right;
}
p6 {
line-height: 1.5em;
font-size:1.2em;
width:60px;
margin-left:950px;
border-color:#0D0;
border: dotted thin #0D0;
bottom:220px;
position:fixed;
}
p7 {
line-height: 1.45em;
top:250px;
width:290px;
margin-left:150px;
position:absolute;
}
p8 {
line-height: 1.4em;
top:200px;
width:500px;
margin-left:50px;
position:absolute;
font-size:1.2em;
background-color:#E9FFF3;
font-family: Verdana, Geneva, sans-serif;
line-height:22px;
}
p9 {
top:150px;
background-color:#C00;
position:fixed;
width:740px;
height:1px;
margin-left:50px;
z-index:150;
opacity:0.6;
}
p10 {
top:150px;
background-color:#C00;
position:fixed;
width:90px;
height:1px;
margin-left:50px;
z-index:250;
}
p11 {
line-height: 1.4em;
width:500px;
top:1070px;
margin-left:50px;
position: absolute;
font-size:1.2em;
background-color:#E9FFF3;
font-family: Verdana, Geneva, sans-serif;
line-height:22px;
}
p12 {
line-height: 1.4em;
top:2070px;
width:500px;
margin-left:50px;
position:absolute;
font-size:1.2em;
background-color:#E9FFF3;
font-family: Verdana, Geneva, sans-serif;
line-height:22px;
}
p13 {
line-height: 1.4em;
top:3300px;
width:500px;
margin-left:50px;
position:absolute;
font-size:1.2em;
background-color:#E9FFF3;
font-family: Verdana, Geneva, sans-serif;
line-height:22px;
}
p14 {
line-height: 1.4em;
top:5970px;
width:500px;
margin-left:50px;
position:absolute;
font-size:1.2em;
background-color:#E9FFF3;
font-family: Verdana, Geneva, sans-serif;
line-height:22px;
}
p15 {
line-height: 1.4em;
top:5450px;
width:500px;
margin-left:100px;
position:absolute;
font-size:1.2em;
background-color:#E9FFF3;
font-family: Verdana, Geneva, sans-serif;
line-height:22px;
}
p16 {
top:140px;
background-color:#C00;
position:fixed;
width:822px;
height:80px;
margin-left:50px;
z-index:150;
opacity:0.6;
}
/* publication page starts */
p4 {
top:240px;
position:absolute;
width: 180px;
height:inherit;
margin-left:240px;
font-size:1em;
line-height: 1.8em;
z-index:2;
}
p44 {
top:240px;
position:absolute;
width: 180px;
height:inherit;
margin-left:690px;
font-size:1em;
line-height: 1.8em;
z-index:2;
}
p17 {
top:150px;
background-color:#C00;
position:fixed;
width:740px;
height:1px;
margin-left:50px;
z-index:150;
opacity:0.6;
}
p177 {
top:0px;
background-color: #FFF;
position:fixed;
width:1000px;
height:150px;
margin-left:50px;
z-index:150;
}
p77 {
top:0px;
position: absolute;
height:100%;
margin-left:0px;
z-index:1;
}
p777 {
top:0px;
position: absolute;
height:100%;
margin-left:500px;
z-index:1;
}
/* publication page finishes */
p188 {
top:0px;
background-color: #FFF;
position:fixed;
width:1000px;
height:150px;
margin-left:45px;
z-index:150;
}
p18 {
top:150px;
background-color:#C00;
position:fixed;
width:880px;
height:80px;
margin-left:50px;
z-index:150;
opacity:0.6;
}
p1888 {
top:350px;
background-color:#C00;
left:350px;
position:absolute;
z-index:150;
opacity:0.6;
}
p32 {
font-size:1.6em;
border-color:#0D0;
letter-spacing:0.8em;
position:fixed;
margin-left:28px;
margin-top:25px;
z-index:2;
}
p33 {
line-height:1em;
font-size:1em;
border-color:#0D0;
letter-spacing:0.1em;
height:100px;
width:72px;
position:fixed;
margin-top:0px;
left:15px;
z-index:1;
}
p62 {
font-size:1.2em;
width:150px;
height:2400px;
margin-left:1010px;
border-color:#0D0;
border: dotted thin #0D0;
bottom:220px;
position: absolute;
top:150px;
}
p88 {
line-height:1.6em;
top:380px;
width:500px;
margin-left:50px;
letter-spacing:1px;
position:absolute;
font-size:1.2em;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-style:oblique;
font-weight:bold;
}
p888 {
line-height:1.6em;
top:380px;
width:500px;
margin-left:450px;
letter-spacing:1px;
position:absolute;
font-size:1.2em;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-style:oblique;
font-weight:bold;
}
#foo {
top: 100px;
width:auto;
height: 7500px;
line-height:10px;
position:absolute;
}
*.unselectable {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
.media{
font-style:normal;
font-family:Verdana, Geneva, sans-serif;
font-weight:lighter;
}
p {
line-height: 1.45em;
margin-top:250px;
width:290px;
margin-left:50px;
position:fixed;
height:600px;
font-size:12px;
/*MEDIA QUERY*/
@media only screen and (max-width : 640px) {
header {
position: absolute;
font-size:1.3em;
}
#menu-icon {
display:inline-block;
font-size:1.3em;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
background: #fff;
border: 5px solid #444;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
font-size:1.3em;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
font-size:1.3em;
}
nav:hover ul {
display: block;
}
//
// Scaffolding
// --------------------------------------------------
// Reset the box-sizing
//
// Heads up! This reset may cause conflicts with some third-party widgets.
// For recommendations on resolving such conflicts, see
// http://getbootstrap.com/getting-started/#third-box-sizing
* {
.box-sizing(border-box);
}
*:before,
*:after {
.box-sizing(border-box);
}
// Body reset
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
font-family: @font-family-base;
font-size: @font-size-base;
line-height: @line-height-base;
color: @text-color;
background-color: @body-bg;
font-size:1.3em;
}
// Reset fonts for relevant elements
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
// Links
a {
color: @link-color;
text-decoration: none;
&:hover,
&:focus {
color: @link-hover-color;
text-decoration: underline;
}
&:focus {
.tab-focus();
}
// Figures
//
// We reset this here because previously Normalize had no `figure` margins. This
// ensures we don't break anyone's use of the element.
figure {
margin: 0;
}
// Images
img {
vertical-align: middle;
}
// Responsive images (ensure images don't scale beyond their parents)
.img-responsive {
.img-responsive();
}
// Rounded corners
.img-rounded {
border-radius: @border-radius-large;
}
// Image thumbnails
//
// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
.img-thumbnail {
padding: @thumbnail-padding;
line-height: @line-height-base;
background-color: @thumbnail-bg;
border: 1px solid @thumbnail-border;
border-radius: @thumbnail-border-radius;
.transition(all .2s ease-in-out);
// Keep them at most 100% wide
.img-responsive(inline-block);
}
// Perfect circle
.img-circle {
border-radius: 50%; // set radius in percents
}
// Horizontal rules
hr {
margin-top: @line-height-computed;
margin-bottom: @line-height-computed;
border: 0;
border-top: 1px solid @hr-border;
}
// Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content/
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
// Use in conjunction with .sr-only to only display content when it's focused.
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
// Credit: HTML5 Boilerplate
.sr-only-focusable {
&:active,
&:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
#newwebsite {
height:14px;
width:inherit;
background-color:#0C0;
letter-spacing:1px;
font-size:12px;
padding-left:250px;
top:120px;
position:fixed;
}
#line {
position:relative;
height:1px;
width:inherit;
background-color:#0D0;
padding-top:0px;
top:39px;
z-index:500;
}
#container {
width:1800px;
height:auto;
position:relative;
padding-left:0px;
padding-top:0px;
margin:0 auto;
margin-right:auto;
margin-top:0px;
margin-left:auto;
height: auto;
min-height: 100%;
overflow: hidden;
}
#container02 {
position:relative;
top:140px;
left:100px;
bottom:0px;
right:0px;
height:4000px;
width:500px;
}
#tablework {
height:70px;
background-color:#FFF;
display: block;
}
#mohammad {
width:124px;
height:12px;
margin:0px;
left:100px;
top:26px;
font-size:13px;
position:relative;
z-index:500;
outline:dotted;
outline-color:#F00;
outline-width:thin;
text-align:center;
}
#works {
width:35px;
height:10px;
margin-top: 0px;
margin-left:0px;
left:350px;
top:29px;
font-size:12px;
letter-spacing:0px;
font-weight:500;
position: absolute;
z-index:110;
}
#workmarquee {
width: inherit;
height: inherit;
top: 200px;
left: 700px;
margin-top: 0px;
margin-left: 0px;
font-size: 12px;
line-height: 22px;
z-index: 90;
position: absolute;
float: left;
}
#publications {
width:60px;
height:22px;
margin-top:0px;
margin-left:0px;
left:450px;
top:29px;
font-size:12px;
position: absolute;
z-index:100;
}
#divpublications {
top: 200px;
left: 100px;
margin-top: 0px;
margin-left: 0px;
font-size: 12px;
line-height: 20px;
z-index: 90;
position:absolute;
float: left;
width:450px;
height:1200px;
}
#news {
width:30px;
height:10px;
margin-top: 0px;
margin-left:0px;
left:600px;
top:29px;
font-size:12px;
letter-spacing:0px;
font-weight:500;
position: absolute;
z-index:110;
}
#otheractivities {
width:120px;
height:10px;
margin-top: 0px;
margin-left:0px;
left:690px;
top:29px;
font-size:12px;
letter-spacing:0px;
font-weight:500;
position: absolute;
z-index:110;
}
#about {
width:40px;
height:10px;
margin-top: 0px;
margin-left:0px;
left:350px;
top:29px;
font-size:12px;
letter-spacing:0px;
font-weight:500;
position:fixed;
z-index:110;
}
#divaboutstatement {
width: 750px;
height: 1500px;
top: 100px;
left: 350px;
margin-top: 0px;
margin-left: 0px;
font-size: 12px;
line-height: 22px;
z-index: 90;
position: absolute;
float: left;
}
#divabout {
width: 750px;
height: 1500px;
top: 200px;
left: 350px;
margin-top: 0px;
margin-left: 0px;
font-size: 12px;
line-height: 22px;
z-index: 90;
position: absolute;
float: left;
}
#divmo {
top: 100px;
left: 100px;
margin-top: 0px;
margin-left: 0px;
font-size: 13px;
line-height: 24px;
z-index: 90;
position: fixed;
float: left;
width:120px;
color:#888;
height:420px;
padding-left:4px;
}
#divwhitebar {
top: 40px;
left: 0px;
margin-top: 0px;
margin-left: 0px;
font-size: 13px;
line-height: 24px;
z-index: 90;
position: fixed;
float: left;
width:1500px;
background-color:#FFF;
height:50px;
padding-left:4px;
}
#collaborations {
width:40px;
height:20px;
margin-top: 0px;
margin-left:0px;
left:450px;
top:29px;
font-size:12px;
position:fixed;
z-index:100;
}
#contact {
width:40px;
height:20px;
margin-top: 0px;
margin-left:0px;
left:600px;
top:29px;
font-size:12px;
position:fixed;
z-index:100;
}
#divcontactemail {
width:550px;
height:300px;
margin-top: 0px;
margin-left:0px;
left:600px;
top:200px;
font-size:12px;
line-height:15px;
position:fixed;
z-index:100;
}
#divcontact {
width:250px;
height:400px;
margin-top: 0px;
margin-left:0px;
left:600px;
top:300px;
font-size:11px;
line-height:15px;
position:fixed;
z-index:90;
color:#666;
}
#cv {
width:20px;
height:20px;
margin-top:0px;
margin-left:0px;
left:383px;
top:29px;
font-size:11px;
position:fixed;
z-index:100;
}
#cvnote {
width:180px;
height:10px;
margin-top:0px;
margin-left:0px;
left:0px;
top:800px;
font-size:11px;
position:fixed;
z-index:100;
}
.experiment {
font-size:36px
}
#container03 {
position:absolute;
top:140px;
left:80px;
bottom:0px;
right:0px;
width:100px;
height:inherit;
}
#container04 {
position:absolute;
top:140px;
left:380px;
bottom:0px;
right:0px;
width:100px;
height:inherit;
}
html {
overflow: auto;
}
body {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 5px;
padding: 0px;
overflow-y: scroll;
overflow-x: hidden;
font-family: Arial, Helvetica, sans-serif;
}
/* Let's get this party started */
::-webkit-scrollbar {
width: 3px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 5px;
border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
::-
#projecttransparent {
border-color: transparent #4A4A4A #4A4A4A transparent ;
border-style:solid;
border-width: 230px 351px 2000px 0px;
height:0px;
width:0px;
margin-top:0px;
margin-left:-1px;
position:fixed;
top:80px;
z-index:1;
}
.projecttransparent {
filter:alpha(opacity=65);
-moz-opacity: 0.65;
opacity: 0.65;
}