body
{
	background-color: #000000;
	padding-bottom: 200px;
}
/* updates to main style */


.backgroundVideoMain
{
	position : fixed; 
	-moz-position : fixed; 
	-webkit-position : fixed; 
	-ms-position: fixed; 
	-o-position: fixed; 
	top: -1500px; 
	left: -1000px;
	width: 120%; 
	height: 120%; 
	z-index: -200;
	opacity: 1;
	pointer-events: none
}

@media only screen and (max-device-width : 1024px) 
{
	.backgroundVideoMain
	{
		visibility: hidden;
		-o-visibility: hidden;
		-moz-visibility: hidden;
		-ms-visibility: hidden;
		-webkit-visibility: hidden;
		display: none;
		-o-display: none;
		-moz-display: none;
		-ms-display: none;
		-webkit-display: none;
	}
	.mobileBack
	{
		position: fixed; 
		width: 100%; 
		height: 100%; 
		z-index: -100;
		opacity: 1;
		pointer-events: none;
		background-image: url("../images/mobile_back.png");
		background-repeat: repeat;
	}
}

#bgTopDivPaste
{
	opacity: .2;
	pointer-events: none
}
#bgTopDiv
{
	opacity: 0.2;
	pointer-events: none
}

.projectBottom
{
	padding: 20px;
	pointer-events: none
}

#mainContent
{
	opacity: 0.85;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 20px;
	z-index: 9999999;
}

#topPic
{
    height: 100px;
}
/* intro */
#topTitle
{
    top: 30px;
    left: 20px;
}
#topTitle .loVidTitle
{
    background: none;
    border: none;
}

#intro
{
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 30px;
	margin-bottom: 20px;
	line-height: 150%;
	padding-right: 270px;
}

#topImageRight
{
	position: absolute;
	right: 20px;
	top: 50px;
	z-index: 9999;
	border: 1px solid #cccccc;
	margin: 10px;
}

.backgroundVideo
{
	position: fixed;
	-moz-position : fixed; 
	-webkit-position : fixed; 
	-ms-position: fixed; 
	-o-position: fixed; 
	z-index: -100;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	-ms-background-size: cover;
  	background-size: cover;
  	width: 1;
	height: 1;
	top: -1;
	left: -1;
}
.backgroundVideoVideo
{
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	-ms-background-size: cover;
  	background-size: cover;
}
/* boxes */

.sqdate
{
	color: #ffffff;
	margin-left: 3px;
}


.projRect:nth-child(3n+3)
{
	border: 2px solid rgba(255, 0, 0, 1);
}

.projRect a,  a:visited
{
	color: #000000;
}

.projRect:nth-child(3n+1)
{
	border: 2px solid rgba(0, 200, 0, 1);
}

.projRect:nth-child(3n+2)
{
	border: 2px solid rgba(0, 0, 255, 1);
}

.projRect:nth-child(1)
{
	border: 2px solid #ffffff;
}

.projLovid
{
	border: 2px solid #FFFFFF;
	background: rgba(255, 255, 255, 1);	
	color: #000000;
	cursor: pointer;
}

.projExtension
{
	display: none;
	padding: 0px;
	margin-top: -2px;
	z-index: 3000;
	margin-left: -10px;
	margin-right: -10px;
	padding-left: 10px;
	padding-right: 10px;
}

.projRect:nth-child(3n+3) .projExtension
{
	border: 2px solid rgba(255, 0, 0, 0.7);
	background: rgb(255, 0, 0);	
}
.projRect:nth-child(3n+1) .projExtension
{
	border: 2px solid rgba(0, 200, 0, 0.7);
	background: rgb(0, 200, 0);	
}
.projRect:nth-child(3n+2) .projExtension
{
	border: 2px solid rgba(0, 0, 255, 0.7);
	background: rgb(0, 0, 255);	
}


.projRect, .projLoVid {
	clear: none;
	float: left;
	width: 290px;
	margin-right: 8px;
	margin-left: 8px;
	margin-bottom: 20px;
/*	height: 292px; */
	height: 230px;
	position: relative;
	padding: 0 0 0 0;
	line-height: 50%;
}

.projRect
{
	background: rgba(255, 255, 255, 0.7);	
} 
.projLoVid 
{
	background: rgb(255, 255, 255);	
}
.projLoVid h3
{
	margin-left: 5px;
}
a,  a:visited
{
	text-decoration: none;
}
a:hover
{
	text-decoration: underline;
}
a:active
{
	color: #ffffff;
}
#topFade
{
/*	background-image: url("../images/vertical_fade.png"); */
/*	background-image: url("../images/top_black.png"); */
	background-repeat: repeat-x;
	-o-background-repeat: repeat-x;
	-moz-background-repeat: repeat-x;
	-ms-background-repeat: repeat-x;
	-webkit-background-repeat: repeat-x;
	height: 300px;
	position: absolute;
	-o-position: absolute;
	-moz-position: absolute;
	-ms-position: absolute;
	-webkit-position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
}
#topShadow
{
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33333300, endColorstr=#ffffff90, gradientType=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33333300, endColorstr=#ffffff90, gradientType=0)";
    -moz-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33333300, endColorstr=#ffffff90, gradientType=0)";
	-webkit-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33333300, endColorstr=#ffffff90, gradientType=0)";
	-o-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#33333300, endColorstr=#ffffff90, gradientType=0)";
}

.projRect .rectImage
{
	width: 290px;
	height: 191px;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
    border-bottom: 1px solid #CCCCCC;
}

.backgroundVideo
{
	position: relative; 
	-o-position: relative; 
	-moz-position: relative; 
	-ms-position: relative; 
	-webkit-position: relative; 
    top: 0; 
    width: 10%; 
    height: 100%;
    text-align: left;
}

.topContainer
{
	height: 50px;
	z-index: 100;	
	padding: 0 0 0 0;
}

.projLovid .projTitle
{
	color: #000000;
}

.projRect .projTitle, .projRect .tags
{
	padding: 0px 0px 0px 5px;
}

.projLoVid
{
	color: #ffffff;
}
.loVidWhite
{
	width: 100%;
	background-color: #ffffff;
	text-align: center;
}

.projRect:nth-child(3n+2) .oneLiner
{
	color: white;
}

.projExtension .oneLiner
{
	font-size: 85%;
	overflow: auto;
	margin-top: 17px;
	margin-bottom: 4px;
	margin-left: -3px;

	height: 40px;
	padding-left: 12px; 
	padding-right: 12px;
	padding-bottom: 7px;
	padding: 3px;
	vertical-align: middle;
	line-height: 140%;
}

.footer
{
	padding-left: 35px;
	padding-top: 12px;
	clear: both;
}

/* about page */
#aboutScreen {
	position:   fixed;
	-o-position:   fixed;
	-moz-position:   fixed;
	-ms-position:   fixed;
	-webkit-position:   fixed;
	z-index:	10000;
	-o-z-index:	10000;
	-moz-z-index:	10000;
	-ms-z-index:	10000;
	-webkit-z-index:	10000;
    background-color: rgba(255, 255, 255, 0.9);
    left:       5%;        /* Start with top left in the center */
    top:        5%;
    width:      90%;      /* The fixed width... */
    height:     90%;      /* ...and height */
    border: 1px solid black; /* Just for demo */
    padding: 10px;
	display: none;
	-o-display: none;
	-moz-display: none;
	-ms-display: none;
	-webkit-display: none;
	overflow: scroll;
}
.lovidAbout
{
	font-weight: bold;
	font-size: 140%;
}

.projLoVid h3
{
	color: #3333ff;
	text-align: right;
	padding-right: 20px;
}