/*------------------------- Layout styles ------------------------*/ 
body{
	margin:0;
	/*background:url(../images/bg-body.jpg);*/
	
}
.page{
	/*background:url(../images/bg-header.jpg) no-repeat center top;*/
}

/*------------------------- Font ------------------------*/ 
@font-face {
    font-family: 'RokkittRegular';
    src: url('fonts/rokkitt-regular-webfont.eot');
    src: url('fonts/rokkitt-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/rokkitt-regular-webfont.woff') format('woff'),
         url('fonts/rokkitt-regular-webfont.ttf') format('truetype'),
         url('fonts/rokkitt-regular-webfont.svg#RokkittRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face2 {
	font-family: 'GillSans-Light';
	src: url('fonts/GillSans-Light.eot');
	src: url('fonts/GillSans-Light.woff') format('woff'), url('fonts/GillSans-Light.ttf') format('truetype'), url('fonts/GillSans-Light.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/*------------------------- Header ------------------------*/ 


#headerback{
	display:block;
	z-index:1000;
	float:left;
	width:100%;
	margin:0px auto 0;
	height:100px;

}
#headerback.stuck{
background-color: rgba(255,255,255,.7);
}



#header{	
	display:block;
	z-index:8000;
	float:center;
	width:700px;
	margin:40px auto 0;
	height:30px;
	padding:0px 0px 0 0;/*this is the padding above header nav*/

}



#header.stuck{
	float:center;
	margin:-50px auto 0;
	padding:0px 0px 0 0;/*this is the padding above header nav*/

background-color: rgba(255,255,255,.7);


}



#header a.logo{
	position:relative;
	top:0;
	left:0;
	width:207px;
	height:17px;
	display:block;
	float:left;
	outline:none;
	
}
#header a.logo img{
	border: 0;
	margin: 10px 0 0 0;
}
#header ul{
	display:block;
	float:right;
	margin:0px 0px 0px 0px;
	list-style:none;
	padding:0px;



}
#header ul li{
	display:inline-block;



	
	
}
#header ul li.selected a,#header ul li a:hover{
	color:#00a5f7;
	cursor:pointer;
}
#header ul li a{
	position:relative;
	float:right;
	top:0px;
	left:0px;

	background-color:black;
	padding:10px 25px 10px 25px ;	
	margin:0px 0px 0 0;
	font-size:12px;
	text-decoration:none;
	color:white;
	font-family: 'RokkittRegular';
	outline:none;
}
#header ul li a.headerOne{
}
#header ul li a.headerTwo{
}
#header ul li a.headerThree{
}
#header ul li a.headerFour{
}



#theWholeThang{
}





@-webkit-keyframes spin {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes spin {
  from { -ms-transform: rotate(0deg); }
  to { -ms-transform: rotate(360deg); }
}



.switcher{}
/*SWITCH TO VERTICAL VIEW:*/
#CSSswitcher{
position:fixed;
z-index: 0;
top:15px;
left:15px;
}
#CSSswitcher input {
padding:0px 0 0 -70px;
margin:0px 0 0 0px;
width: 70px;
height:70px;
border-radius: 50%;
border:0;
color:white;
font-size:26px;
font-family: 'gill sans';
font-weight: lighter;
cursor:pointer;	
/*background-image:url(../images/eyeball3.gif);
background-repeat:no-repeat;
background-size:100% 100%;*/
  background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
  background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
  background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
 
  -webkit-animation-name: spin; 
  -webkit-animation-duration: 5s; 
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-timing-function: linear;

  -moz-animation-name: spin; 
  -moz-animation-duration: 5s; 
  -moz-animation-iteration-count: infinite; 
  -moz-animation-timing-function: linear;

  -ms-animation-name: spin; 
  -ms-animation-duration: 5s; 
  -ms-animation-iteration-count: infinite; 
  -ms-animation-timing-function: linear;
 

}

#CSSswitcher input:hover {
background:url(../images/eyeball.gif);
background-repeat:no-repeat;
background-size:100% 100%;
cursor:none;
}

/*SWITCH TO HORIZONTAL VIEW:*/
#CSSswitcher2{
position:fixed;
z-index: 1000;
top:15px;
left:15px;
}

#CSSswitcher2 input {
padding:0px 0 0;
margin:0px auto 0;
width: 70px;
height:70px;
border-radius: 50%;
border:0;
color:white;
font-size:26px;
font-family: 'gill sans';
font-weight: lighter;
cursor:pointer;	
 background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
  background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
  background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
 
  -webkit-animation-name: spin; 
  -webkit-animation-duration: 5s; 
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-timing-function: linear;

  -moz-animation-name: spin; 
  -moz-animation-duration: 5s; 
  -moz-animation-iteration-count: infinite; 
  -moz-animation-timing-function: linear;

  -ms-animation-name: spin; 
  -ms-animation-duration: 5s; 
  -ms-animation-iteration-count: infinite; 
  -ms-animation-timing-function: linear;

}

#CSSswitcher2 input:hover {
background:url(../images/eyeball.gif);
background-repeat:no-repeat;
background-size:100% 100%;
cursor:none;
}








/*------------------------- Body ------------------------*/ 
.body{
	float:center;
	width:700px;
	margin:0 auto;
	padding:10px 10px;
	/*overflow:hidden;*/
	height:1200px;
}

#content{
margin-top:115px;
margin-bottom:350px;
}

.body p{
	width:480px;
	color:#5d5d5d;
	font-family: 'san-serif';
	font-weight:lighter;
	font-size:16px;
	line-height:40px;
	text-align:justify;
	margin:0;
	
}

.body div#featured{
	display:block;
	background-color:rgba(255,255,255,.4);
	margin:50px 0 0 0 ;
	height:400px;
	padding:0 0 17px 0;
}
.body div#featured h3{ /*this is position of the featured main paragraph*/
	color:#00a5f7;
	font-size:20px;
	font-family: 'RokkittRegular';
	margin:0 0 30px;
	width:490px;
	padding:100px 0 0;
	font-weight:lighter;
	letter-spacing: 0.0em;

}
.body div#featured p{
	width:480px;
	color:#5d5d5d;
	font-family: 'RokkittRegular';
	font-weight:lighter;
	font-size:14px;
	line-height:25px;
	text-shadow: 0 1px 0 #fcfcfc;
	text-align:justify;
}

.body div#featured input{ /*this positions the button that says Read more "input" tag*/
	background:#f3f4f8;
	border:0;
	float:left;
	display:block;
	padding:0px 0 0;
	margin:25px auto 0;
	width: 108px;
	height:100px;
	
	color:#5d5d5d;
	font-family: 'gill sans';
	font-size:20px;
	font-weight: lighter;
	letter-spacing: 0.305em;
	cursor:pointer;	
}


#introTextOne{
	width:480px;
	color:#5d5d5d;
	font-family: 'futura, san-serif';
	font-weight:lighter;
	font-size:15px;
	line-height:25px;
	text-shadow: 0 1px 0 #fcfcfc;
	text-align:justify;
	}
#introTextTwo{
	width:480px;
	color:#5d5d5d;
	font-family: 'futura, san-serif';
	font-weight:lighter;
	font-size:15px;
	line-height:25px;
	text-shadow: 0 1px 0 #fcfcfc;
	text-align:justify;
	}





/*animated Gifs in a container withing the FEATURED section*/


.body div#gifsContainer{ /*the entire space of the hand gifs*/
dispaly:block;
z-index:2000; 
width: 800px;
height: 300px;
float:left;
margin:40px 0 0 0;
}



.body div#column1{   /*whole first column (columns are seperate DIV IDs for loading-icon-like effect in loader script*/
width: 180px;
height: 240px;
float:left;
}
.body div#column2{
width: 180px;
height: 240px;
float:left;
}
.body div#column3{
width: 180px;
height: 240px;
float:left;
}
.body div#column4{
width: 180px;
height: 240px;
float:left;
}
.body div#gifsContainer ul{  /*first ROW*/
width:180px;
display:block;
float:left;
}
.body div#gifsContainer ul.two{  /*second ROW*/
display:block;
/*background-color: white;
opacity:0.9;
filter:alpha(opacity=90);*/
}
.body div#gifsContainer ul.two.stuck{  /*second ROW when stuck to the top*/
display:block;
/*background-color: white;
opacity:0.9;
filter:alpha(opacity=90);*/
z-index: 4000;

}

.body div#gifsContainer ul.two.stuck li{background:url(../images/hands2.gif);
background-repeat:no-repeat;
background-size:100% 100%;}

.body div#gifsContainer:hover ul.two.stuck li{background:url(../images/hands2.gif);
background-repeat:no-repeat;
background-size:100% 100%;}


.body div#gifsContainer ul li{  /*each GIF*/
margin:0px 0 0px -20px;
float:left;
width:145px;
height:60px;

/*attempt at fade as shown at: http://www.mightymeta.co.uk/fading-button-background-images-with-css3-transitions/
background:url(../images/handsSprite.gif) no-repeat center -255px;
background: rgba(80, 125, 200, 0.55);
background-size:100% 200%;

	-webkit-transition: background 0.5s linear;
	-moz-transition: background 0.5s linear;
	-o-transition: background 0.5s linear;
	transition: background 0.5s linear;*/

background:url(../images/staticHand2.gif);
background-repeat:no-repeat;
background-size:100% 100%;




}
.body div#gifsContainer ul.two li{
-webkit-transform: rotateX(-180deg);
-moz-transform:  rotateX(-180deg);
}

.body div#gifsContainer ul li:first-child{
margin:0px 0 0px -5px;
height:40px;
}

/*HOVERS:CHANGE TO ANIMATED GIFS*/

.body div#gifsContainer:hover ul li{
/*ATTEMPT TO CHANGE THE WHOLE GIF INTO A TWO PART SPRITE SO THAT I CAN FADE BETWEEN HOVER TRANSITION
background:url(../images/handsSprite.gif)no-repeat center top;
background: rgba(100, 125, 175, 0);
background-size:100% 200%;*/

background:url(../images/hands.gif);
background-repeat:no-repeat;
background-size:100% 100%;
}


.body div#gifsContainer:hover ul li:first-child{
/*ATTEMPT TO CHANGE THE WHOLE GIF INTO A TWO PART SPRITE SO THAT I CAN FADE BETWEEN HOVER TRANSITION
background:url(../images/bg.jpg) no-repeat center top;
background: rgba(100, 125, 175, 0);
background-size:100% 200%;*/
background:url(../images/hands.gif);
background-repeat:no-repeat;
background-size:100% 100%;

}

/*for individual hand animations on hovers instead of the whole thing:
.body div#column3:hover ul li{
background:url(../images/hands.gif);
background-repeat:no-repeat;
background-size:100% 100%;
}*/











/****************** GRIDDED PROJECT SUMMARIES ******************/

.body ul.blog{
	width:745px;
	list-style:none;
	margin:0px 0 0 0;
	padding:0 0 0 0;
	/*background:url(../images/separator.jpg) no-repeat center top;*/
	overflow:hidden;
}

.body ul.blog li{
	float:left;
	margin:0px 0 0 0px;
	height:285px;
	padding:0;
} 
.body ul.blog li:first-child{ /*first ROW*/
	margin:0px 0 0px 0px;
	padding:0 0 0 0px;
}


.body ul.blog li div{ /*individual entries*/

	width:230px;
	padding: 0px;
	text-align:left;
	float:left;
	margin:0px 15px 0 0px;;
	background:none;
	
}





.body ul.blog li div a img{
	width:210px;
	margin:0;
	padding:0;
	opacity:0.7;
	filter:alpha(opacity=70);
}
.body ul.blog li div:hover a img{
	filter:alpha(opacity=100);
	opacity:1;
}



.body ul.blog li div p{
	width:210px;
	text-align:justify;
	color:#828081;
	font-family: 'futura, san-serif';
	margin:0px 0 0 0;
	line-height:16px;
	font-size:13px;
	background:none;
	padding-top:150px;
}



.body ul.blog li div:hover p{
color: black;
}



.body ul.blog li div a:first-child{
	margin:0;
	padding:0;
	background:none;
	width:auto;
}
.body ul.blog li div a:hover{
	color:#00a5f7;
}



.body ul.blog li div a{
	display:block;
	padding:0px;
	margin:0px;
	font-family: 'RokkittRegular';
	color:#5d5d5d;
	font-size:10px;
	font-weight: lighter;
	letter-spacing: 0.305em;
	cursor:pointer;
	outline:none;
}	
.body ul.blog li div input{ /*read more buttons "input" tag*/
	/*background:#f3f4f8;*/
	background:black;
	border:0;
	float:left;
	display:block;
	padding:0px 0 0;
	margin:0px auto 0;
	width: 210px;
	height:33px;
	filter:alpha(opacity=0);
	opacity:0;
	color:white;
	font-family: 'RokkittRegular';
	font-size:10px;
	font-weight: lighter;
	letter-spacing: 0.305em;
	cursor:pointer;	
}
.body ul.blog li div:hover input{
	filter:alpha(opacity=100);
	opacity:1;  
}



.body h3{ /*about section questions*/
	font-family: 'GillSans-Light';
	font-size:18px;
	font-weight: lighter;
	color: #00a5f7;
	/*color:#00a5f7;*/
	margin:25px 0px 10px;/*this is the margins around the h3 headers (questions) on the about page and others*/
	line-height:22px;
}
.body p{ /*about answers*/
	width:360px;
	font-family: 'RokkittRegular';
	font-size:15px;
	font-weight: lighter;
	text-align:justify;
	color:#636363;
	margin:0 0 20px;
	line-height:21px;
}
.body p a{ 
	outline:none;
	color:black;
	text-decoration: none;

}
.body ul{
	list-style:none;
    margin:0;
    padding:0;
	overflow:hidden;
}
.body ul li:first-child{
	background:none;
	padding:50px 0 30px;
}
.body ul li{
	overflow:hidden;
	/*background:url(../images/separator.jpg) no-repeat center top;*/
	padding:30px 0;
}
.body ul li div.featured{
	width:220px;
	height:292px;
	text-align: center;
	margin:0;
}

.body ul li div.featured img{
	margin:10px 0 0 -3px;
	border:0;
}
.body ul li div.featured a:hover{
    filter:alpha(opacity=80);
	opacity:0.8;
}
.body ul li div.featured ul{
	overflow:hidden;
	margin:2px 0 0 10px;
	
}
.body ul li div.featured ul li:first-child{
	margin:0;
}
.body ul li div.featured ul li{
	float:left;
	margin:0 0 0 18px;
	background:none;
	padding:0;
}
.body ul li div.featured ul li a{
	padding:0;
}
.body ul li div.featured ul li a img{
	margin:0;
}
.body ul li div.featured ul li a img:hover{
	filter:alpha(opacity=80);
	opacity:0.8;
}
.body ul li div.featured a{
	clear:both;
	display:block;
	font-size:12px;
	font-family: 'RokkittRegular';
	text-decoration:none;
	color:#8a8889;
	font-weight:bold;
	padding:5px 0 0;
	width:auto;
	outline:none;
}
.body ul li div{
	float:left;
	margin:0 0 0 50px;
	width:609px;
}
.body ul li div input{ /*read more button in the blog section*/
background:#f3f4f8;
	border:0;
	float:left;
	display:block;
	padding:0px 0 0;
	margin:15px auto 0;
	width: 108px;
	height:24px;
	
	color:#5d5d5d;
	font-family: 'gill sans';
	font-size:10px;
	font-weight: lighter;
	letter-spacing: 0.305em;
	cursor:pointer;	
}
.body ul li div h3{/*blog headings*/
	margin:10px 0px 15px;
	font-size:18px;
	font-weight:lighter;
	font-family: 'GillSans-Light';
	color:#00a5f7;
	line-height:30px;

}
.body ul li div h4{/*blog dates*/
	margin:0 0px 15px;
	font-size:12px;
	font-weight:normal;
	font-family: 'RokkittRegular';
	color:#00a5f7;
	line-height:16px;
}
.body ul li div a {/*blog headings that are links*/
	text-decoration:none;    
}
.body ul li div p{/*blog text*/
	
	line-height:24px;
	font-family: 'Arial';
	font-size:12px;
	color:#5D5D5D;
	padding:0 0 5px;/*this is the padding around the block of text in blog page*/
	margin:0px;
}
.body ul.paging{
	display:block;
	float:right;
	margin:15px 0 10px 210px;
}
.body ul.paging li{
	float:left;
	padding:0 5px;
	background:none;
}
.body ul.paging li a{
	text-decoration:none;
	color:#00a5f7;
	font-family: arial;
	font-size:10px;
}
.body ul.paging li a:hover{
	color:#5D5D5D;
}

/*------------------------- Footer ------------------------*/ 
.footer{
	width:700px;
	/*background:url(../images/bg-footer.jpg) no-repeat center top;*/
	padding:65px 10px 207px;
	margin:0 auto;
	overflow:hidden;
}
.footer ul{
	list-style:none;
	margin:0 0 0 0px;
	padding:0px;
	overflow:hidden;
	float:left;
}
.footer ul li:first-child a{
	border:none;
	padding:0 6px 0 0;	
}
.footer ul li{
	float:left;
}
.footer ul li a:hover{
	color:#00a5f7;
}
.footer ul li a{
	border-width: 1px;
	border-color:#5b5b5b;
	border-style: none none none solid;
	color:#5b5b5b;
	font-size:10px;
	font-family: Trebuchet MS;
	text-decoration:none;
	font-weight:bold;
	padding:0 6px;
	outline:none;
}
.footer p{ /*this is the copyright area*/
	display:block;
	float:right;
	padding:0px;
	color:#5b5b5b;
	font-size:11px;
	text-align: right;
	font-family: Trebuchet MS;
	font-weight:regular;
	margin:0px 0 0 0px;
	letter-spacing: 0.1em;
}
.footer p a{ /*this is the copyright area links*/
	color:#5b5b5b;
	letter-spacing: 0.2em;


}
/*.footer div.connect{
	float:left;
	margin:0 0 0 92px;
}
.footer div.connect a{
	float:left;
	outline:none;
}
.footer div.connect a#facebook{
	width:27px;
	height:28px;
	display:block;
	text-indent:-9999px;
	background:url(../images/icons.gif) no-repeat;
}
.footer div.connect a#twitter{
	width:36px;
	height:28px;
	display:block;
	text-indent:-9999px;
	background:url(../images/icons.gif) no-repeat 0 -48px;
	margin:0 0 0 68px;
}
.footer div.connect a#vimeo{
	width:32px;
	height:28px;
	display:block;
	text-indent:-9999px;
	background:url(../images/icons.gif) no-repeat 0 -96px;
	margin:0 0 0 73px;
}*/






















            #play_meGreen {
            	position: relative;
            	left: -2px;
            	top: 40px;
                width: 44px;
                height: 50px;
                background-color: #0BD63A;
                color: black;
                font-size: 20px;
                font-weight: bold;
                text-align:center;
                line-height: 50px;
                cursor: pointer;
                -webkit-transform: skewY(30deg);
            }
             #play_meBlue{
            	position: relative;
            	left: 45px;
            	top: -10px;
                width: 39px;
                height: 50px;
                background-color: #0B81D6;
                color: black;
                font-size: 20px;
                font-weight: bold;
                text-align:center;
                line-height: 50px;
                cursor: pointer;
                -webkit-transform: skewY(-30deg);
            }
            #play_meYellow{
            	position: relative;
            	left: 15px;
            	top: -99px;
                width: 52px;
                height: 49px;
                background-color: #F0F719;
                color: black;
                font-size: 20px;
                font-weight: bold;
                text-align:center;
                line-height: 50px;
                cursor: pointer;
                -webkit-transform: rotate(50deg) rotateY(30deg) rotateX(-20deg) 
                	rotateZ(-10deg) skewX(-10deg) skewY(-10deg);
             
            }

            
            
            
    
          
            #videoGreen {
            	position:absolute;
            	left:150px;
            	top:250px;
            	width:150px; 
            	height:150px;
   		        -webkit-transition: all 2s linear;
                -webkit-transform: skewY(30deg);
            }

            
            #videoBlue {
            	position:absolute;
            	left:300px;
            	top:250px;
            	width:150px; 
            	height:150px;
                -webkit-transition: all 2s linear;
                -webkit-transform: skewY(-30deg);
          

            }
	        #videoYellow {
            	position:absolute;
            	left:209px;
            	top:120px;
            	width:180px; 
            	height:178px;
                -webkit-transition: all 2s linear;
                -webkit-transform: rotate(50deg) rotateY(-30deg) rotateX(20deg) 
                	rotateZ(-10deg) skewX(-10deg) skewY(-10deg);
                
            }
            
            #cube {
            	display:block;
            	position:relative;
            	margin:100px auto;
            
            	 -webkit-transition: all 20s linear;
            	 -webkit-transform-origin: 300px 295px; 
            	 -webkit-animation-timing-function: ease-in;
             
            }
            #cube:hover {
		
			      -webkit-transform-origin: 300px 295px;
			      -webkit-transform:  rotate(1000deg) scale(3);	
          		
  			 }    
          
          
 	#playCube{
 	position:fixed;
 	right:10px;
 	bottom:30px;
	width:100px;
	height:100px;
display:block;

	
 	}