/* CSS Structure 
1. CSS Reset 
2. Layout
3. Search

/* -----------------------------------------------------------------------------------------------------
	1. CSS Reset
--------------------------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, em, 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,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
p { text-align: left;  font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0;}

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none;  }


/* -----------------------------------------------------------------------------------------------------
	2. Layout
--------------------------------------------------------------------------------------------------------*/

/* Default font settings. 
   The font-size percentage is of 16px. (0.813 * 16px ~ 13px) */
body { 
  font-size: 81.3%;
  color: #333;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;;
  background: #65abc4 url(../images/base/bg.jpg) repeat;
}
/* Main layount
-------------------------------------------------------------- */
.wrapper { background: url(../images/base/background.jpg) top repeat-x; height: 800px; margin:0; padding: 0; position: relative;}
.full { width: 980px; height: 180px; margin: 0 auto; }
#main{	
	padding-top: 60px;
	width: 800px; height: 480px; 
	margin: 0 auto; text-align:center;
	}
#main h1 { 
	font-family: 'Gochi Hand', cursive;
	font-size: 120px;
	padding:0;
	margin:0; 
	font-weight: 400; 
	color:#FFF;
	line-height: 0.8em;
	}
.oldie #main h1 {
  zoom: 1;
  text-shadow: none;
}
#main h2 { 
	font-family: 'Gochi Hand', cursive;
	font-weight: 400;
	font-size: 60px;
	padding:0;
	margin:0;  
	color:#FFF;
	}
#main p.back{
	font-family: 'Arvo', serif;
	font-weight: 400;
	padding: 40px 0 10px 0;
	margin:0; 
	text-align: center;
	font-size: 20px;
	margin-top: 5px;
	color: #fff;
	}
.tagline h1,.tagline h2, .tagline p.back{
	text-shadow: 3px 2px 1px #5c98a7;
}
.oldie .tagline h1,.oldie .tagline h2,.oldie .tagline p.back {
  zoom: 1;
  background: white;
  filter: progid:DXImageTransform.Microsoft.Chroma(Color=white) progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=4, Color=#cdcdcd);
}

#main h3 { font-size: 26px; color: #223e5e; padding-top: 20px;  }
#main  a {  color: #fff568; }
#main a:hover { color: #f9634e;}
#search { 
	margin: 0 auto; 
	width: 350px;
	height: 60px ;
	background:url(../images/base/search_bg.png) top left no-repeat;
	color: #44567a;
	margin-bottom: 40px;

	}

p.coppy { 
	text-align: center; padding-top: 10px; color: #dce9cb; 
	padding-bottom: 60px;
	}

/*-------------------------------------------------------------
	3. Search
-------------------------------------------------------------*/	
input::-webkit-input-placeholder {
    color:    #44567a;
}
input:-moz-placeholder {
    color:    #44567a;
}
input:-ms-input-placeholder /* placeholder only style */   
{
    color:    #44567a;
}
#input {
	border: none;
	outline:none;
	margin: 11px 0 0 12px;
	width: 261px;
	height: 38px;
	padding: 0px 5px 0px 10px;
	background: url(../images/base/input.jpg)top left no-repeat;
	font-size: 18px;
	text-align: left;
	float: left;
	color: #44567a;
	outline:none;
	text-shadow: 0px 1px 0px #e0e6f3;
    filter: dropshadow(color=#e0e6f3, offx=0, offy=1);
}
#input:hover{
	color: #44567a;
	border: none;
	outline:none;
	width: 261px;
	height: 38px;
	padding: 0px 5px 0px 10px;
	border: none;
	background: url(../images/base/input.jpg)bottom left no-repeat;
	
}
#submit {
	margin: 11px 0 0 6px;
	width: 46px;
	height: 38px;
	border: none;
	background: url(../images/base/search_botton.jpg) bottom no-repeat;
	color: #fff;
	text-indent: -999999px;
	float:left;		
}
#submit:hover {
	cursor:pointer;
	background: url(../images/base/search_botton.jpg) top no-repeat;
	text-indent: -99989px;
}

/*-------------------------------------------------------------
	4. Style Switching
-------------------------------------------------------------*/	
#style{  
	background: #000 url(../images/top1.jpg) repeat;
	padding-top: 15px;
	display: none;
	color: #f5e4cb;
	height: 155px;
	font-size: 1.1em;
	}
#selection { 
	position: absolute; display: block; 
	width: 100px; height: 58px; top: 0px; right: 200px;
	background: url(../images/on.png) top left no-repeat;
	text-indent: -9999px;
	z-index: 4000;
	}
#selection:hover {top: 0px; }

/* Image hover
-------------------------------------------------- */

.lomo {
	position: relative; 
	display: inline-block;
		-webkit-transition: opacity .2s ease-in-out;
		   -moz-transition: opacity .2s ease-in-out;
			-ms-transition: opacity .2s ease-in-out;
			 -o-transition: opacity .2s ease-in-out;
				transition: opacity .2s ease-in-out;
}                    
.lomo img {
	display: block;
}  
.lomo:hover:after {
	/* The box shadow is set to black and mkes the nice inner glowing
	   effect on mouse hover */
			
	 background-image:url(../images/zoom.png);
     background-repeat:no-repeat;
     background-position:center;
	-moz-box-shadow: inset 0 0 30px #333;  
	-webkit-box-shadow: inset 0 0 30px #333;   
	box-shadow: inset 0 0 30px #333;
	/* Positionning this black glow on mouse hover */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;  
	z-index: 2;              
	content: "";
}