@charset "UTF-8";
/* CSS Document */


/*	Less Framework 4 with 18/24 type presets
	http://lessframework.com
	by Joni Korpi
	License: http://opensource.org/licenses/mit-license.php	*/

/*	Resets
	------	*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 10px;

}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
} 

a img {border: 0;}

/* globals */

body {
	width:90%;
	margin: 0 auto;
	}
img,
object,
embed,
iframe {	
    display: block;
    max-width: 100%;
    height: auto;
}

object {
    margin-bottom: 2em;
}


/* General */
h1, h2, h3, h4, p, li, a {
	 font-family: "Rubik", helevetica, arial, sans-serif;
	 font-weight: 700;
	line-height: 1.5em;
	color: #333;
}

h1 {
	font-size: 1.8em;
}

h2 {
	font-size: 1.5em;	
	margin:0;
	
}

h3{	font-size:1.5em;
	margin: 0 0 .75em 0;	
}

 p, li{
 font-family: "Rubik", helevetica, arial, sans-serif;
 font-size: 1.3em;
 color: #333;
 text-decoration: none;
 font-weight: 400;
}

a{
	margin: 0;
 font-family: "Rubik", helevetica, arial, sans-serif;
 font-size: 1.25em;
 color: #67b1c8; /* blue */
 text-decoration: none;
 text-transform:uppercase;
 letter-spacing:2px;
 font-weight: 700;

}
a:active{
	color:#4392aa; /*dark blue*/
}	

a:hover{
	color:#2c7e98; /*darkest blue*/	
}


ol{
	list-style:none;
	}

ul {
	list-style:none;
	padding: 0 0 0 15px;
	
}
	
hr{
	height:1px;
	background-color:#999;
	margin: 30px 0;
	clear:both;
} 



/*	Structure
    ------------------	*/
	
#wrapper {
	width:90%;
	margin: 50px auto 20px auto;
	text-align: center;
	/*background-color: #ccc;*/
	overflow:hidden;	
	}



/*********************** Left SIDE ************/

aside{
	width: 17%;
	float: left;
	position:fixed;	
	/*background-color:#ccc;*/
}

aside img{
	margin: 0 auto 5em auto;
	width:90%;
}	

aside p{
	text-align:center;	
}

nav{
	display: block;
	
}

nav hr{
	width: 100px;
	margin: 1em auto;
	background-color: #333;	
}
nav ul{
	margin:0;
	padding: 0;
}
nav li{
	margin: 0 0 1em 0;	
}

nav li hr{
	width: 50px;	
}


/*************************** MAIN **************************/

main{
	width: 73%; /* 784 px / 929px */
	float: right;
	/*background-color: #0F9;*/
	padding: 0 20px;
	overflow:hidden;
	margin-bottom:20px;
}

main ul{
	margin:0 auto;	
}



main li a{
	/*color: #09C; */
	width: 160px;
	height: 160px;
	margin: 20px;
	float:left;
	
}


#pret{
	text-indent:-9999px;
	background-image: url(../images/pret-thumb.jpg);
	background-position: 0 0;	
	background-repeat: no-repeat;
}

main li a#pret:hover{
	background-position:0 -160px;
	
}

main li a#time{
	text-indent:-9999px;
	background-image: url(../images/time-thumb.jpg);
	background-position: 0 0;	
	background-repeat: no-repeat;
}

main li a#time:hover{
	background-position:0 -160px;
	
}

main li a#fiesta{
	text-indent:-9999px;
	background-image: url(../images/fiesta-thumb.jpg);
	background-position: 0 0;	
	background-repeat: no-repeat;
}
main li a#fiesta:hover{
	background-position:0 -160px;
	
}

main li a#buddy-run{
	text-indent:-9999px;
	background-image: url(../images/buddy-run-thumb.jpg);
	background-repeat: no-repeat;
	background-position:top;	
}

main li a#buddy-run:hover {
	background-position:0 -160px;}

main li a#roadtrip{
	text-indent:-9999px;
	background-image: url(../images/roadtrip-thumb.jpg);
	background-repeat:no-repeat;
}	

a#roadtrip:hover{
	background-position:0 -160px;}



#cook{
	text-indent:-9999px;
	background-image: url(../images/cook-thumb.jpg);
	background-repeat:no-repeat;	
}

#cook:hover{
	background-position:0 -160px;}
	
#on-dot{
	text-indent:-9999px;
	background-image:	url(../images/on-the-dot-thumb.jpg);
	background-repeat:no-repeat;	
}

#on-dot:hover{
	background-position:0 -160px;}



#taste{
	text-indent:-9999px;
	background-image:	url(../images/taste-thumb.jpg);
	background-repeat:no-repeat;	
}

#taste:hover{
	background-position:0 -160px;}

	
#summer{
	text-indent:-9999px;
	background-image: url(../images/summer-thumb.jpg);
	background-repeat:no-repeat;
	
}

#summer:hover{
	background-position:0 -160px;}



#az{
	text-indent:-9999px;
	background-image: url(../images/az-thumb.jpg);
	background-repeat:no-repeat;
	background-position:top;	
}

#az:hover{
	background-position:0 -160px;
}


#rome{
	text-indent:-9999px;
	background-image: url(../images/rome-thumb.jpg);
	background-repeat:no-repeat;
	
	}

#rome:hover{
	background-position:0 -160px;}



#salinger{
	text-indent:-9999px;
	background-image:url(../images/salinger-thumb.jpg);
	background-repeat:no-repeat;
	}


#salinger:hover{
	background-position:0 -160px;}

#logo{
	text-indent:-9999px;
	background-image:url(../images/logo-thumb.jpg);
	background-repeat:no-repeat;
	}


#logo:hover{
	
	background-image:url(../images/logo-thumb-o.jpg);

	}


.hidden{
	display: none;	
}

#about{
	width: 75%;
	text-align: left;
	}

#about h1, h2, h3, p {
	text-align:left;
	margin: 0 0 1.75em 0;
}

#about h1{
	font-size: 2em;	
	margin-bottom:.75em;
}

#about p{
	font-size: 1.7em;
	line-height:2em;
	margin: 0 0 2em 0;
}


#about ul{
	margin:0;
	padding:0;
}
#about li{
	margin:0 0 1.25em 0;
	padding:0;
	text-align: left;
}

#about a{
	text-align: left;
	font-size: 1.25em;
	text-decoration:none;
	text-transform:none;
	letter-spacing:0;
	display:inline;
	}
	
#about a.button{
	display:inline-block;
	border:2px solid #67b1c8;
	padding:8px;
	margin-bottom:20px;	
}


/************************* FOOTER ******************************/





footer{
	margin:30px auto; 

}

/************* SUB PAGES **********************/


main.sub img{
	margin:0 0 30px 0;
	width:100%;
}

main.sub a{
	display:inline-block;
	border:2px solid #67b1c8;
	padding:8px;
	margin-bottom:20px;
}



@media screen and (min-width:320px) and (max-width:660px) {
	aside{
		float:none;
		width:90%;
		position:relative;	
		margin:0 auto;
	}
	
	aside img{
		width:50%;	
		margin-bottom:0;
	}
	
	aside hr{
		display:none;	
	}
	
	aside ul li{
		display:inline;
		margin:.5em;	
	}
	main{
		float:none;
		width:90%;	
		text-align:center;
		margin:0 auto;
	}
	
	main.sub{
		margin:0 auto;	
	}
	#about h1, #about p, #about h2{
		text-align:center;	
	}
}