/*
	theme.css
	April 2011
	styling for index.php of visualvolu.me
	Kevin Slattery & Geoff Balasi
*/

* {
	margin: 0;
}

html, body{
	background-image: url(gradient2.gif);
	background-repeat: repeat-x;
	height: 100%;
	font-family: "trebuchet ms", sans-serif;
}

/* HTML5 tags*/
 header, section, footer, aside, nav, article, figure {
 	display: block;
}
 
.body{
	clear:both;
	margin: 0 auto;
	width: 900px;
}



.wrapper {
	/*min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -60px;*/
	height: 620px;
}


#logo{
	position:relative;
	float: left;
}

#stuff{		/*title and login*/
	float: right;
	top: -90;
	left: 0;
	
}

#response	/* text as result of an API call*/
{
	position: relative;
	top: 12px;
	text-align: center;
	line-height:98%;
	
}

a:link {
	text-decoration:none;
	color:#33cccc;
}
a:hover{
	color:#cc3333;
}

#quotes1 {
	position: relative;
	top: 150px;
	height: 315px;
}

#quotes2 {
	position: relative;
	top: 150px;
	height: 315px;
}

#quotes3 {
	position: relative;
	top: 150px;
	height: 315px;
}

#welcome {
	position: relative;
	top: 10px;
	height: 395px;
	width: 390px;
}

#images {
	position: relative;
	top: 8px;
	height: 315px;
  background-color: white;
}

#images img
{
	transition: all 0.4s ease;
	-webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
}

#images:hover img {
	opacity: 0.35;
}

#images:hover img:hover {
	opacity: 1;
	width: 265px;
  	height: 265px;
}

.slide {
	height:315px;
	width:900px;
	
}

div.img
{
  margin: 8px;
  border: 0px;
  float: left;
}	
div.img img
{
  display: inline;
  margin: 0px;
  border: 14px solid #efefef;
  width: 246px;
  height: 246px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  /*IE DOES NOT SUPPORT BORDER RADIUS*/
  -moz-box-shadow:0px 0px 5px #000000;
  -webkit-box-shadow:0px 0px 5px #000000;
  box-shadow:0px 0px 5px #000000;
  /*IE DOES NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
}

p {
	text-shadow: 2px 2px 1px #bbbbbb;
	font-size: 1.0em;
	color: #444444;
	margin-right: .9em;
}

h1  {
	text-shadow: 2px 2px 1px #bbbbbb;
	font-family: "trebuchet ms", sans-serif;
	font-size: 1.05em;
	color: #444444;
	margin-right: .9em;
}




.footer{
	height: 50px;
	background-color:#ffffcc;	
}
table.footer{
	margin-top: 10px;
	width: 900px;
}


/* used for moving logo*/
.bottom{
position:relative;
top:0;
left:80;
-webkit-transition: margin-left;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
z-index:1;
}
.bottom:hover{
	margin-left:65px;
}

.top{
	position: absolute;
	top:0;
	left:0;
	z-index:5;
}

input {
	font-family: "trebuchet ms", sans-serif;	
	 border: 6px solid #efefef;
  	-moz-border-radius:2px;
  	-webkit-border-radius:2px;
 	 border-radius:2px;
  /*IE DOES NOT SUPPORT BORDER RADIUS*/
  -moz-box-shadow:0px 0px 1px #000000;
  -webkit-box-shadow:0px 0px 1px #000000;
  box-shadow:0px 0px 1px #000000;
  /*IE DOES NOT SUPPORT BLUR PROPERTY OF SHADOWS*/  
    
}

input:hover, input:focus {  
     border: 6px solid #efefef;
  	-moz-border-radius:2px;
  	-webkit-border-radius:2px;
 	 border-radius:2px;
  /*IE DOES NOT SUPPORT BORDER RADIUS*/
  -moz-box-shadow:0px 0px 5px #000000;
  -webkit-box-shadow:0px 0px 5px #000000;
  box-shadow:0px 0px 5px #000000;
  /*IE DOES NOT SUPPORT BLUR PROPERTY OF SHADOWS*/  
    }  

a.next2 {
		position:relative;
		top: 12px;
		font-size:30px;
		font-size:30px;
		color:#444444;
		text-decoration:none;
		display:block;
		width:178px;
		padding:3px;
		text-align:center;
		background-color: #9BD0FF;
		-moz-border-radius:2px;
		-webkit-border-radius:2px;
		-o-border-radius:2px;
		border-radius:2px;

		-moz-box-shadow:0px 0px 5px #000000;
 		 -webkit-box-shadow:0px 0px 5px #000000;
 		 box-shadow:0px 0px 5px #000000;
		 
		 font-family: "trebuchet ms", sans-serif;
		 font-size: 1.05em;
		 
		background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#fff));
		background:-moz-linear-gradient(0% 90% 90deg, #ffffff, #ccc);


}