@import url(tripoli.css);
/* your custom styles goes here */

/*= FONT & COLORS
=== === === === === === === === === ===
Green		=> #293
Purple	=> #939
Light Gray	=> #ddd
Gray		=> #888
"Black"	=> #111
"Red"		=> #c33
"Pink"	=> #ecc
"Blue"	=> #36c

Light Blue	=>#9cf ...not used in CSS right now...
*/
body
{
	font-family: Arial, "Lucida Grande", sans-serif;
	background:#bbb;
	color:#222;
}

.content input, .content textarea
{
	font-family: Arial, "Lucida Grande", sans-serif;
}
a:link
{
	color:#36c;
}
a:visited
{
	color:#939;
}
a:hover
{
	color:#c33;
}
a:active,.a:focus
{
	color:#222;
}

blockquote
{
	color:#222;
}

/*= WRAPPER =*/
#wrapper
{
	background:#fff;
	border:#939 2px solid;
}

/*= MASTHEAD =*/
#masthead
{
	color:#293;
}
#masthead a:link, #masthead a:visited
{
	color:#293;
}
#masthead a:hover
{
	color:#c33;
}
#masthead a:active,#masthead .a:focus
{
	color:#222;
}
#masthead li
{
	border-left:#293 1px solid;
}
#masthead h1
{
	height:143px;
	width:560px;
	background:transparent url(images/text-logo-BETA.gif) no-repeat 0% 0%;
}

/*= MENU =*/
#menu
{
	height:1%;
	background:#939 url(images/bg_nav.gif) repeat-x  0 50%;
}
#nav li
{
	border-right:#fff 1px solid;
}
#nav a
{
	text-decoration:none;
	font-weight:bold;
}
#nav a:link, #nav a:visited
{
	color:#fff;
}
#nav a:hover
{
	color:#ccc;
}
#nav a:active,#nav .a:focus
{
	color:#c33;
}


/*= FOOTER =*/
#footer
{
	background:#293 url(images/bg_footer.gif) repeat-x scroll 0 50%;
	color:#ddd;
}
#footer a:link, #footer a:visited
{
	color:#ddd;
}
#footer a:hover
{
	color:#c33;
}
#footer a:active, #footer .a:focus
{
	color:#222;
}


/*= ERROR & WARNING =*/
.error label
{
	color:#c33;
}
.warning
{
	padding:1em;
	font-weight:bold;
}
.error input, .error textarea, .warning
{
	background:#ecc;
	border:1px solid #c33;
}
.error input:focus, .error textarea:focus
{
	background:#fff;
}

.content input.button
{
	border:1px #939 outset;
	padding:.2em .5em;
	overflow:visible;

	color:#fff;
	background:#939 url(images/bg_nav.gif) repeat-x scroll 0 50%;
}




/*= LAYOUT
=== === === === === === === === === === */
body
{
	margin:3em 0 5em;
}

.content
{
	margin:1em;
}

/*= WRAPPER
=== === === === === === === === === === */
#wrapper
{
	width:75em;
	margin:0 auto;
}



/*= MASTHEAD
=== === === === === === === === === === */
#masthead
{
	
}

/*= META =*/
#masthead ul
{
	margin:0;
	padding:0;
	float:left;
	list-style:none;
}

#masthead li
{
	float:left;
}
#masthead li.first
{
	border:none;
}

#masthead li a
{
	display:block;
	padding:0 .5em .2em;
}


/*= QUICK SEARCH =*/
#masthead .search
{
	margin:0;
	text-align:right;
	float:right;
	max-width:75%;
}

#masthead .search fieldset
{
	margin:0;
	padding:0;
	border:0;
}

#masthead .content .search div
{
	float:left;
	margin-left:.75em;
}

/*= LOGO =*/
#masthead h1
{
	clear:both;
	font-size:1em;
	margin:2em auto 2.5em;
	text-indent:-1000em;

}
#masthead h1 a
{
	display:block;
	height:100%;
	width:100%;
}

#masthead .tagline
{
	display:none;
}

/*= MENU
=== === === === === === === === === === */

#menu .content
{
	margin:0;
}

#nav
{
	margin:0;
	padding:0;
	list-style:none;
}
#menu li
{
	float:left;
}
#menu li.share
{
	float:right;
	border:0;
}
#menu a
{
	display:block;
	padding:.5em 1.5em;
}

/*=MAIN
=== === === === === === === === === === */
#main
{
}

#main .content
{
	margin:3em 2em 4em;
}

/*=FOOTER
=== === === === === === === === === === */
#footer
{
	height:1%;
}
#footer .content
{
	height:100%;
	margin:0;
	padding:.5em 1em;
	text-align:right;
}
#footer .content p
{
	margin:0;
}
#footer ul
{
	margin:0;
	padding:0;
	float:left;
	list-style:none;
}

#footer li
{
	float:left;
}
#footer li.first
{
	border:none;
}

#footer li a
{
	display:block;
	padding:0 .5em .2em;
}

/*= USERNAMES
=== === === === === === === === === === */
.username
{
	/* Nothing for now. */
}

/*= TABS
=== === === === === === === === === === */
ul.tabs
{
	margin:2em 0;
	padding:0 1em;
	list-style:none;
	border-bottom:#939 1px solid;	
}

.tabs li
{
	border:#939 1px solid;
	position:relative;
	bottom:-1px;
	float:left;
	margin:0 .5em;
	padding:0;
}
.tabs li.active
{
	border-bottom:#fff 1px solid;
}
.tabs a
{
	display:block;
	padding:.1em .5em .2em;
	text-decoration:none;
	background:#ddd;
}
.tabs li.active a
{
	background:#fff;
}
/*= FORMS
=== === === === === === === === === === */
label
{
	display:block;
}
.radio label, .checkbox label, #occurrence label
{
	display:inline;
}
.note
{
	font-style:italic;
}

.search legend
{
	display:none;
}

/*= SEARCH =*/
.search
{
	margin:0;
}

.search legend
{
	display:none;
}

#main .search fieldset
{
	margin:1.5em 0;
	padding:0;
	border:0;
}

#main .search div
{
	float:left;
	margin-right:1em;
}

.search label
{
	display:inline;
	margin-right:.25em;
}

/*= LOGIN PAGE =*/
#login_form
{
	float:left;
	width:22em;
}

#registration_blurb
{
	margin-left:24em;
	padding-left:2em;
	padding-bottom:1em;
	border-left:#939 1px solid;
}

.reviewMeta
{
	clear:both;
}

/*= PREVIEW
=== === === === === === === === === === */
#preview
{
	padding:1em 2em;
	border: #939 1px solid;
	background:#eee;
}


/*= GRAPES & RATINGS
=== === === === === === === === === === */

.reviewMeta
{
	clear:both;
}


/*= FORM =*/

.content fieldset.rating
{
	display: block; /* I know, right?	Friggin' IE doesn't get it right without this though. */
	height:1.6em;
	width:20em;
	margin:1em 0;
	padding:0;
	border:0;
	position:relative;
}
.content .rating legend
{
	display:block;
	margin:0;
	padding:0;
}
.content .rating legend span
{
	display:block;
	margin:0;
	padding:0;
	position:absolute;
	top:0;
	left;0;
}

.rating label
{
	background-image:url(images/transparent.gif);
	
	display:block;
	height:20px;
	width:20px;
	margin:0;
	padding:0;
	line-height:1px;
	text-indent:-1000em;

	position:absolute;
	top:0;
	z-index:5;
}
.content .rating label input
{
	height:1px;
	width:1px;
	margin:0;
	padding:0;
	font-size:1px;
	line-height:1px;
}

.rating label.na
{
	right:100px;
}
.rating label.one
{
	right:72px;
}
.rating label.two
{
	right:54px;
}
.rating label.three
{
	right:36px;
}
.rating label.four
{
	right:18px;
}
.rating label.five
{
	right:0;
	/*width:120px;
	background-image: url(images/grapesRating.png);
	z-index:1;*/
}

/*= HOVER =*/
.rating label:hover,
.rating label.na-hover,
.rating label.one-hover,
.rating label.two-hover,
.rating label.three-hover,
.rating label.four-hover,
.rating label.five-hover
{
	background:#fff url(images/grapesRating.png) no-repeat;
	background-position: -360px 50%;
	z-index:2;
	width:120px;
	right:0;
}

RegExp.lastMatch
/*= VIEW VineReview =*/
.reviewMeta
{
	clear:both;
}

ul.rating
{
	float:left;
	margin:.25em 2.5em 1.6em 0;
	list-style:none;
	width:23em;
}
.rating li span
{
	display:block;
	float:left;
}
.rating .score
{
	float:right;
	text-indent:-1000em;
	height:20px;
	width:120px;
	background: url(images/grapesRating.png) no-repeat left 50%;
}


/*= Background Image Positions=*/
.rating .na:hover, .rating label.na-hover
{
	background-position: left 50%;
}
.rating .rated_10,
.rating .one:hover, .rating label.one-hover
{
	background-position: -240px 50%;
}
.rating .rated_15
{
	background-position: -360px 50%;
}
.rating .rated_20,
.rating .two:hover, .rating label.two-hover
{
	background-position: -480px 50%;
}
.rating .rated_25
{
	background-position: -600px 50%;
}
.rating .rated_30,
.rating .three:hover, .rating label.three-hover
{
	background-position: -720px 50%;
}
.rating .rated_35
{
	background-position: -840px 50%;
}
.rating .rated_40,
.rating .four:hover, .rating label.four-hover
{
	background-position: -960px 50%;
}
.rating .rated_45
{
	background-position: -1080px 50%;
}
.rating .rated_50,
.rating .five:hover, .rating label.five-hover
{
	background-position: -1200px 50%;
}

/*= Google MAP
=== === === === === === === === === === */
#map
{
	position: relative;
}

#mapWindow
{
	width:300px;
	height:25em;
}

#mapWindow h3
{
	margin-top:0;
}

#mapWindow ul.rating
{
	float:none;
}

/*=EXTRAS
=== === === === === === === === === === */
.content .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.content .clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .content .clearfix {height: 1%;}
.content .clearfix {display: block;}
/* End hide from IE-mac */