/** {
border: 1px solid gold;
} Can be used for identifying boundaries; design purposes only*/

@font-face {
	font-family: "Shmulik";
	src: url("fonts/ShmulikCLM.ttf") format("opentype");
}

body { 
background: #225;
overflow-x: hidden;
font: 17pt "Share", cursive;
margin: 0px;
}

#outside { /* Main container element. */
width: 100%;
/*height: 100%;*/
/*background: #336;*/
background: #427;
color: white;
overflow: hidden;
background-image: url('v4b.gif');
background-size: 100% auto;
background-position: 0% 0%;
background-repeat: no-repeat;
}

/* Side logo, etc container element. */
#side {
width: 90%;
background: rgba(0,0,0,0.3);
padding: 20px 5%;
font-family: "Times New Roman", serif;
border-bottom: 1px solid gold;
background: none;
background: rgba(47, 23, 83, 0.8);
}

div#logobound { /* The logo container (has letters). */
/*margin-top: 10px;*/
/*margin-left: 10px;*/
margin-bottom: 0px;
/*font-size: 46pt;*/
font-size: 26pt;
display: inline-block;
border-bottom: 1px solid #999;
border-top: 1px solid #999;
padding: 10px 15px 15px 15px;
text-align: center;
/*font-family: "Arial", sans-serif;*/
font-variant: small-caps;
text-shadow: -2px -2px 1px #000;
line-height: 1;
margin-bottom: 10px;
}
span#m { /* Letter 'm' in logo. */
position: relative;
left: 20px;
}
span#b { /* Letter 'b' in logo. */
position: relative;
top: 20px;
}
span#ff { /* Text declaring "designed for FF" */
padding: 1px;
font-size: 12px;
position: relative;
top: 20px;
color: #DDF;
}
span#define-text { /* Logo motto. */
font-size: 16px;
display: block;
margin: 10px 10px 10px 10px;
}

#logowrapper {
	display: inline-block;
}

#bigside {
	float: right;
	font-size: 40px;
	margin-top: 40px;
	font-family: "Arial", sans-serif;
	font-variant: all-small-caps;
	text-shadow: -2px -2px 1px #000;
}

/* Main content box. */
div#main { 
width: 100%;
padding-left: 0%;
/*height: 498px;*/
/*margin: 30px 0px 30px 100px;*/
background: #221136;
overflow-x: hidden;
overflow-y: auto;
position: relative;
z-index: 2;
/*
background-image: url('v4b.gif');
background-size: 100% auto;
background-position: 0% 50%;
*/
background: none;
background: rgba(34, 17, 54, 0.8);
}

#first, #middle, #last {
	display: block;
}
#middle {
	font-family: Shmulik, sans-serif;
	margin-bottom: -5px;
}

/* Twitter feed box */

#twbox, #medbox, #expbox {
	display: block;
	z-index: 5;
	top: 0px;
	width: 100%;
	background: rgb(41, 47, 51);
	text-align: center;
}
.twtr-tweet-text {
	font: 12pt "Times New Roman", Times, serif;
}
#twitter-widget-0, .medium_post_content {
	background-color: #535;
	width: 60% !important;
	background: rgb(41, 47, 51);
}
.medium_post_content {
	background: none;
	text-align: left;
	width: 50% !important;
	padding: 20px;
	margin: auto;
}
#twitter-widget-0 .timeline-Viewport {
	overflow-y: visible;
}
#twitter_header, #medium_header, #experience_header, #projects_header {
	text-align: center;
	padding: 40px 0px 40px 0px;
	background: #112;
	margin-bottom: 40px;
	border-top: 1px solid #fdb;
	border-bottom: 1px solid #fdb;
}
#experience_header, #projects_header {
	margin-bottom: 0px;
}
#medbox a {
	text-decoration: none;
	color: #77C;
	margin: 10px;
}
#medbox a:hover {
	color: #99E;
}
#medbox a:visited {
	text-decoration: line-through;
	color: #558;
	margin: 10px;
}
.medium_post {
	height: 140px;
	overflow: hidden;
	margin-top: -50px;
}
.medium_post:nth-of-type(2) {
	margin-top: 0px;
}
.medium_post_title {
	border-top: 1px solid rgba(145,165,180,.6);
	width: 65%;
	margin: auto;
	padding-top: 30px;
	font-size: 1.4em;
}
.medium_post_content p {
	font-size: 1em;
}
.medium_post:nth-of-type(2) .medium_post_title {
	border-top: none;
}
.medium_post_expand_contract {
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
	position: relative;
	bottom: 90px;
	padding-top: 100px;
	background: none;
	color: #77C;
	cursor: pointer;
}
.medium_post_expand_contract:hover {
	color: #99E;
}
.medium_post.expanded {
	height: auto;
	box-shadow: none;
}
.medium_post_expand_contract > .contract {
	display: none;
}
.medium_post.expanded + .medium_post_expand_contract > .expand {
	display: none;
}
.medium_post.expanded + .medium_post_expand_contract > .contract {
	display: inline;
}


/* ------------------ */
/* Experience Summary */
/* ------------------ */

.experience_item {
	/*height: 140px;*/
	overflow: hidden;
	padding: 0em 0em 2em;
	line-height: 1.2;
}
.experience_item_title {
	/*border-top: 1px solid rgba(145,165,180,.6);*/
	width: 65%;
	margin: auto;
	padding-top: 30px;
	font-size: 1.8em;
	color: #77C;
}
.experience_item_org, .experience_item_org a {
	font-size: 1em;
	color: #aaa;
}
.experience_item_org {
	margin-bottom: 1em;
}
.experience_item_details p {
	font-size: 1em;
}
.experience_item_logo {
	font-size: 6em;
	margin-bottom: -2em;
	position: relative;
	top: -1em;
}
.experience_item:nth-child(even) .experience_item_logo {
	float: right;
	top: -0.9em;
	color: rgba(48,55,60,0.4);
	color: rgba(148,155,160,0.4);
}
.experience_item:nth-child(odd) .experience_item_logo {
	float: left;
	color: rgba(50,10,20,0.4);
	color: rgba(120,110,120,0.4);
}
.experience_item:nth-of-type(1) .experience_item_title {
	border-top: none;
}
.experience_item:nth-child(even) {
	background: rgba(217,140,216,0.2);
	background: rgba(193,150,240,0.2);
}
.experience_item:nth-child(odd) {

}
.experience_item_details2_item {
	width: 25%;
	margin: 8px auto;
	padding: 0px 1em;
	line-height: 1.5;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	background: rgba(255,255,255,0.2);
	font-size: 1.1em;
	font-family: "Open Sans", sans-serif;
}
.experience_item_details2_item {
	color: inherit;
}
.experience_item_details2 a {
	color: inherit;
	text-decoration: none;
}
.experience_item_details2_item:first-child {

}
/*
.experience_item_details2_item::before {
	width: 2em;
	height: 1em;
	border-top: 1px solid #ccc;
	content: "";
	margin-bottom: -0.8em;
	display: inline-block;
	margin-right: 0.5em;
}
.experience_item_details2_item::after {
	width: 2em;
	height: 1em;
	border-top: 1px solid #ccc;
	content: "";
	margin-bottom: -0.8em;
	display: inline-block;
	margin-left: 0.5em;
}
*/


/* ------------------ */
/* Projects Listing */
/* ------------------ */
#projbox {
	background: rgb(41, 47, 51);
}
.project_item {
	/*height: 140px;*/
	overflow: hidden;
	padding: 0em 0em 2em;
	line-height: 1.2;
	width: 33%;
	display: inline-block;
	min-height: 200px;
	text-align: center;
	padding-top: 12px;
}
.project_item_title a {
	/*border-top: 1px solid rgba(145,165,180,.6);*/
	width: 65%;
	margin: auto;
	padding-top: 30px;
	font-size: 1.8em;
	color: #77C;
	text-decoration: none;
}
.project_image {
	background-repeat: no-repeat;
	background-size: cover;
	width: 90%;
	height: 60%;
	margin: auto;
	background-position: center top;
	margin-top: 20px;
	box-shadow: 0px 0px 3px 0px #111;
}
.project_extended_description {
	color: #ccc;
	width: 90%;
	height: 60%;
	margin: auto;
	margin-top: 20px;
}
.project_item:last-child .project_extended_description {
	height: auto;
}
.project_item_title .proj_date {
	font-size: smaller;
	margin-left: 5px;
	color: #aaa;
}
.project_item_details p {
	font-size: 1em;
}
.project_item:nth-child(even) {
	background-color: rgba(193,150,240,0.2);
}

/* Menu */
#linkbox { /* Subdiv inside #main containing primary links. */
background: #535;
padding: 12px 0px;
/*padding-left: 10%;*/
font-size: 22px;
font-variant: all-small-caps;
font-family: "Arial", sans-serif;
border-bottom: 1px solid gold;
text-align: center;
}
#linkbox a { /* Design for primary links. */
text-decoration: none;
color: #77C;
margin: 10px;
}
/*
#linkbox a img {
	margin-top: 0px;
	margin-bottom: 0px;
}
#email_link img {
	width: 30px;
	height: auto;
}
#twitter_link img {
	width: 45px;
	height: auto;
}*/
#linkbox a:after {
}
#linkbox a:last-child:after {
content: "";
}
div#linkbox a:hover { /* Design for primary links, hover. */
color: #99E;
}
div#linkbox a:visited { /* Make primary links look pretty, always. */
text-decoration: line-through;
color: #558;
margin: 10px;
}
#linkswrapper {
	/*display: inline-block;*/
	margin: auto;
}
div#midline { /* Center gold line to add class. */
position: absolute;
top: 40%;
right: 0px;
color: gold;
height: 1px;
width: 5000px;
overflow: hidden;
border-top: 1px solid gold;
}
span.special a { /* Lends focus to one specific link over others. Use sparingly. */
font-size: 16pt;
}
div#foot { /* Footer. */
background: #225;
width: 80%;
height: 40px;
padding: 20px 0px;
text-align: center;
clear: both;
margin: auto;
}
div#foot .ftext {

}
div#foot a { /* Design for link(s) in footer. */
text-decoration: none;
color: #77C;
margin: 10px;
}
div#foot a:hover { /* Make link pretty when hover. */
color: #99E;
}
div#foot a:visited { /* Make link pretty when has been clicked. */
text-decoration: line-through;
color: #558;
margin: 10px;
}
div#contentbox { /* Primary content box inside #main. */
padding: 10px 14px;
/*
background-image: url('v4b.gif');
background-size: 100% auto;
background-position: 0% 50%;
*/
}
div#contentbox a { /* Design of links inside #main #contentbox. */
/*color: #EFD8FD;*/
color: #77C;
text-decoration: none;
/*float: center;*/
}
div#contentbox a:hover {
text-decoration: underline;
}
div#imgpreview {
position: fixed;
top: 10px;
left: 10px;
width: 360;
height: 173;
display: none;
background: red;
z-index: 2;
}
.hilite { /* Title for each primary page. */
float: right;
font-weight: bold;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
color: #77C;
background: #403050;
padding: 3px;
}
.hilite2 { /* Marks the categories etc on the main page. */
font: 16pt "Courier New", Courier, monospace;
color: #AAF;
}
p { /* Make paragraphs look generally good where not otherwise specified. */
font-size: 16px;
text-indent: 0%;
}
ul { /* Make lists look good, sometimes. */
line-height: 100%;
}
li {
line-height: 2.2;
}
li p {
line-height: 1;
}
li ul li {
line-height: 1;
}
.main {
line-height: 1.4;
}
span.back { /* Back button */
float: left;
font-weight: bold;
border-top: 1px solid #FFF;
border-right: 1px solid #FFF;
color: #77C;
background: #403050;
padding: 3px;
}
span.biotext {
line-height: 1.5;
font-size: 12pt;
}
span.biotext p {
line-height: inherit;
font-size: inherit;
/* text-align: justify;
padding-left: 6px;
border-left: 1px dashed #fff;
*/
}
span.biotext p:first-letter {
font-size: larger;
/*color: #edbc;*/
font-weight: bold;
}
span.biotext b {
font-size: 16pt;
font-style: oblique;
font-weight: normal;
}
img.preview {
float: right;
padding: 4px;
}
img.bio {
float: right;
padding: 4px;
border: 1px solid gold;
margin: 4 10 10 20px;
background: #111540; /*alternatively 543*/
}
ul.sublist {
list-style-type: none;
padding-left: 12px;
border-left: 1px solid #AAF;
}
ul.sublist li {
margin-bottom: 8px;
}

/* BEGIN: FOR PROJECTS DISPLAYCASE. */
div#projboxwrapper {
visibility: hidden;
position: absolute;
z-index: 8;
font-family: "Arial", Helvetica, sans-serif;
}
div#projboxback {
visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
z-index: 7;
background: #557;
opacity: 0.9;
filter: alpha(opacity=90);
}
div#projectbox {
/*background: rgb(221, 221, 255);*/
/*background: #446;*/
background: #070729;
width: 70%;
border: 1px solid gold;
/*border-radius:15px;*/
padding: 10px;
margin: 10px;
float: left;
clear: left;
}
div#projboxinner {
border: 1px;
/*border-radius:15px;*/
background: #224;
margin: auto;
height: 580px;
text-align: center;
overflow: auto;
}
div.project {
padding: 16px;
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
margin: 10px;
display: inline-block;
transition: opacity 0.8s;
-moz-transition: opacity 0.8s; /* Firefox 4 */
-webkit-transition: opacity 0.8s; /* Safari and Chrome */
-o-transition: opacity 0.8s; /* Opera */
height: 180px;
}
div.project img {
position: relative;
bottom: 20px;
border:2px solid #557;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}
div.project:hover {
outline: 3px solid #36e;
opacity: 1.0;
filter: alpha(opacity=100);
}
div.project:hover > .hil {
visibility: visible;
}
.hil {
background: #666;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
padding: 10px;
font-size: 20px;
visibility: hidden;
position: relative;
z-index: 8;
}
div#projectinfo {
color: #fff;
font-family: "Times New Roman", Times, serif;
font-size: 14pt;
background: #224;
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
width: 20%;
height: 600px;
padding: 10px;
/*
border-radius: 15px 0px 0px 15px;
-moz-border-radius: 15px 0px 0px 15px; /* Old Firefox */
border-left: 1px solid gold;
border-top:1px solid gold;
border-bottom: 1px solid gold;
float: right;
line-height: 1.2;
margin-top: 10px; /* ? */
overflow: auto;
}
.infohilite {
padding: 6px;
display: inline-block;
font-weight: bold;
font-size: 20px;
background: #446;
}
span#closething {
float: left;
color: #fff;
cursor: pointer;
}
span#closething:hover {
	font-weight: bold;
}
.modal p {
	font-size: inherit;
	color: #fff;
	font-family: "Open Sans", sans-serif;
}
.modal {
	border-radius: 0px;
	background: rgb(41, 47, 51);
	border: 2px solid #aaa;
}

/* ------------- */
/* Media Queries */
/* ------------- */

@media screen and (max-width:1199px) {
	div#main {
		width: 35%;
	}
}

@media screen and (max-width:1023px) {
	div#side {
		clear: right;
	}
	div#main {
		clear: left;
		margin-left: 4%;
		margin-top: 0px;
		width: 44%;
	}

	div#twbox { /* Twitter feed panel */
		margin-top: 0px;
		margin-left: 4%;
		margin-right: 4%;
		float: right;
	}
	div#linkbox {
		width: 100%;
		height: auto;
	}
	div#linkbox a {
		margin: 0px;
	}
	#linkbox a:after {
		content: " | ";
		color: #fff;
	}
	#linkbox .special:first-child:after {
		content: " | ";
	}
	#linkbox a:last-child:after {
		content: "";
	}
	div#foot {
		position: relative;
		top: 730px;
		left: -200px;
		float: left;
		width: 200px;
	}
	div#outside {
		height: 800px;
	}
}

@media screen and (max-width:1135px) {
	div#side {
		margin-left: 4%;
		height: 170px;
	}
	div#main {
		clear: both;
		width: 90%;
		margin: 4%;
		overflow-y: visible;
		height: auto;
	}
	div#twbox {
		float: left;
		clear: both;
		margin: 4%;
		width: 90%;
		height: auto;
		overflow-y: visible;
	}
	#twitter-widget-0 {
		height: auto;
		width: 100%;
		height: 500px;
	}
	div#outside {
		height: auto;
		width: auto;
	}
	div#foot {
		left: 100%;
		top: 0px;
		clear: both;
	}
}

@media screen and (max-width:799px) {
	div#side {
		margin-left: 4%;
		height: 170px;
	}
	div#main {
		clear: both;
		width: 90%;
		margin: 4%;
		overflow-y: visible;
		height: auto;
	}
	div#twbox {
		float: left;
		clear: both;
		margin: 4%;
		width: 90%;
		height: auto;
		overflow-y: visible;
	}
	#twitter-widget-0 {
		height: auto;
		width: 100%;
		height: 500px;
	}
	div#outside {
		height: auto;
		width: auto;
	}
	div#foot {
		left: 100%;
		top: 0px;
		clear: both;
	}
	#first, #middle, #last {
		display: inline-block;
		margin-left: 0px;
	}
	#side {
		margin-left: 0;
	}
	#bigside {
		font-size: 6vw;
		float: none;
		margin-top: 0px;
		text-align: center;
	}
	#linkbox a {
		display: block;
	}
	#linkbox a::after {
		content: none;
	}
	#linkbox .special:first-child:after {
		content: none;
	}
	#main #home.content {
		width: 90%;
	}
	#home.content #leader {
		margin-top: 30px;
		margin-bottom: 30px;
		line-height: 1.3;
		font-size: 1.1em;
	}
	#leader div {
		margin-bottom: 1.3em;
	}
	.project_item {
		width: 90%;
		margin: auto;
		display: block;
	}
	.project_item_title a {
		font-size: 1.2em;
	}
	.project_item_title .proj_date {
		display: block;
	}
	.experience_item {
		padding-bottom: 1em;
	}
	.experience_item_details2_item {
		width: auto;
		border-right: none;
		border-left: none;
	}
	.experience_item_logo {
		font-size: 4em;
		margin-bottom: 0;
		position: static;
		top: 0;
		margin: auto;
		display: block;
		float: none;
	}
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	div#side {
		margin-left: 4%;
		height: 170px;
	}
	div#main {
		clear: both;
		width: 90%;
		margin: 4%;
		overflow-y: visible;
		height: auto;
	}
	div#twbox {
		float: left;
		clear: both;
		margin: 4%;
		width: 90%;
		height: auto;
		overflow-y: visible;
	}
	#twitter-widget-0 {
		height: auto;
		width: 100%;
		height: 500px;
	}
	div#outside {
		height: auto;
		width: auto;
	}
	div#foot {
		left: 100%;
		top: 0px;
		clear: both;
	}
}
/* END: FOR PROJECTS DISPLAYCASE. */

.inline-highlight {
    color: rgb(255,100,100);
}
p {
    clear: left;
}
.inline-highlight:first-child {
    clear: left;
}
.inline-section-container {
    /*max-width: 96%;*/
    display: none;
}
.inline-section {
    width: 100px;
    height: 100px;
    background: #445;
    border: 1px solid gold;
    padding: 8px;
    font-size: smaller;
    margin-right: 10px;
    margin-top: 10px;
    float: left;
    display: block;
}
.inline-section strong {
    color: rgb(255,50,50);
    font-size: larger;
    margin: auto;
    text-align: center;
}
.inline-highlight:hover > .inline-section-container {
    display: inline-block;
}

/* Styling for slideshow pages */
.slideshow-page #slideshow-main {
	margin: auto;
}
.slideshow-page #slideshow-main p {
	width: 60%;
	clear: none;
	margin: auto;
	margin-top: 12px;
	border-top: 1px solid #fff;
	padding-top: 4px;
	font-size: larger;
	line-height: 1.4;
	/*font-family: Verdana, Geneva, sans-serif;*/
}
.slideshow-page #slideshow-main h2 {
	width: 50%;
	text-align: center;
	clear: none;
	margin: 6px auto;
	color: #AAF;
	font-size: 200%;
	font-family: "Courier New",Courier,monospace;
}
.slideshow-page #slideshow-main a {
	text-decoration: none;
	color: #77C;
	font-size: larger;
}
.slideshow-page #slideshow-main #slider1_container {
	margin: auto;
	clear: both;
}
.slideshow-page #foot {
	position: relative;
	margin: 10px auto;
	top: 0px;
}
.slideshow-page #side {
	height: auto;
}
.slideshow-page #image-full {
	margin: auto;
	display: none;
}
.middlelist li {
	line-height: 1.5;
	margin-bottom: 16px;
}
#resume_link {
	text-align: center;
	display: block;
	width: 100%;
	padding-bottom: 40px;
}
#main .content {
	width: 70%;
	margin: auto;
}
#home #leader {
	font-size: 1.5em;
	line-height: 1.8;
	text-align: center;
	margin: 60px 0px;
	text-shadow: -2px -2px 1px #444;
}
#home #leader .last {
	color: #fdb;
}
#resume #skillsTable {
	color: inherit;
}