/* localist css */
@import url(reset.css);

/* color palette primer */
/*
- localist is made up of 5 primary colors, each with a specific content type.
- there are light and dark versions of each, to be used where appropriate
- colors have generic names, as branding changes would render them inaccurate
- for a quick color change of an entire color type, search/replace the entire project for the colors below
*/

/* for all default platform intents and purposes, here are the color declarations:*/
/* used on box_container, sectionheader, lots of other places */

/* default: grey (system) */
/* used for content related to the Localist API, or other deep platform functions */
.dark_systemcolor {
	background-color: #666;
}
.light_systemcolor {
	background-color: #efefef;
}
.section_dark_systemcolor {
	border-bottom: 3px solid #444;
	background-color: #666;
}
.selected_tab_systemcolor, a.dark_systemcolor:hover {
	background-color: #444;
}

/* default: blue (system) */
/* used for user settings, or other generic options unrelated to content types */
.dark_colorone { 
	background-color: #3ea6e0;
}
.light_colorone {
	background-color: #e9f1fa;
}
.section_dark_colorone {
	background-color: #3ea6e0;
	border-bottom: 3px solid  #068ad2;
}
.selected_tab_colorone, a.dark_colorone:hover {
	background-color: #068ad2;
}

/* default: green (people) */
/* represents users  */
.dark_colortwo {
	background-color: #7cd239;
}
.light_colortwo {
	background-color: #c8ff9b;
}
.section_dark_colortwo {
	background-color: #7cd239;
	border-bottom: 3px solid  #48a500;
}
.selected_tab_colortwo, a.dark_colortwo:hover {
	background-color: #48a500;
}

/* default: yellow (reviews/misc) */
/* represents reviews, or miscellaneous content */
.dark_colorthree {
	background-color: #ffcf58;
}
.light_colorthree {
	background-color: #fffc9b;
}
.section_dark_colorthree {
	background-color: #ffcf58;
	border-bottom: 3px solid  #ffb600;
}
.selected_tab_colorthree, a.dark_colorthree:hover {
	background-color: #ffb600;
}

/* default: orange (venues) */
/* represents venues */
.dark_colorfour {
	background-color: #ffa45b;
}
.light_colorfour {
	background-color: #ffdf9c;
}
.section_dark_colorfour {
	background-color: #ffa45b;
	border-bottom: 3px solid  #fc7000;
}
.selected_tab_colorfour, a.dark_colorfour:hover {
	background-color: #fc7000;
}

/* default: red (events) */
/* represents events, or plans */
.dark_colorfive {
	background-color: #ff5e5d;
}
.light_colorfive {
	background-color: #ffd2b8;
}
.section_dark_colorfive {
	background-color: #ff5e5d;
	border-bottom: 3px solid #ff0200;
}
.selected_tab_colorfive, a.dark_colorfive:hover {
	background-color: #ff0200;
}

/*-random default styling elements------------------------*/
a {
	text-decoration: none;
	color: #3ea6e0;
}

li.right {
	float: right;
}

.right {
	float: right;
}

.center {
	text-align: center;
}

body {
	height: 100%;
}

/*-global fonts-------------------------------------------*/

body, input, textarea {
	/* default font specified here */
	/* this is used throughout the entire site unless explicitly stated on a class */
	font-family: "Helvetica Neue", helvetica, arial, sans-serif;
}

/*-404/500 styling----------------------------------------*/
body.nopage {
	background-color: #2a2a2a;
}

	.nopage h4 a {
		color: #fff;
		display: block;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		font-family: helvetica, arial, sans-serif;
	}

/*-global inputs-------------------------------------*/
.form_box input, .modal_content fieldset input, table input {
	border: 1px solid #ccc;
	color: #333;
	background-color: #ffebc4;
}

	input[disabled], .form_box input[disabled] {
		background-color: #f0f0f0;
	}
	
	input.hiddeninput, .form_box input.hiddeninput {
		display: none;
	}
	
	.input_placeholder, .form_box .input_placeholder {
		color: #999;
	}

select {
	font-size: 14px;
}

textarea {
	border: 1px solid #ccc;
	padding: 5px;
	font-size: 12px;
	color: #333;
	background-color: #ffebc4;
}

/*-global grid-------------------------------------*/
/* columns */
/* column dimensions are based on the 960 12 column grid */
.grid_container {
	width: 940px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 80px;
	overflow: hidden;
}

.grid_nav,
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	display: inline;
	float: left;
	position: relative;
	margin: 0px 10px;
}

	.grid_container .grid_1 {
		width: 60px;
	}

	.grid_container .grid_2 {
		width: 140px;
	}

	.grid_container .grid_3 {
		width: 220px;
	}

	.grid_container .grid_4 {
		width: 300px;
	}

	.grid_container .grid_5 {
		width: 380px;
	}

	.grid_container .grid_6 {
		width: 460px;
	}

	.grid_container .grid_7 {
		width: 540px;
	}

	.grid_container .grid_8 {
		width: 620px;
	}

	.grid_container .grid_9 {
		width: 700px;
	}

	.grid_container .grid_10 {
		width: 780px;
	}

	.grid_container .grid_11 {
		width: 860px;
	}

	.grid_container .grid_12{
		width: 940px;
	}
	
/*-modal box grid-------------------------------------------*/
/* modal grid */
.modal_content {
	width: 620px;
	overflow: hidden;
	margin: 0px 0px 15px 0px;
}

.modalgrid_1,
.modalgrid_2,
.modalgrid_3,
.modalgrid_4 {
	display: inline;
	float: left;
	position: relative;
	margin: 15px 10px 0px 10px;
}

	.modal_content .modalgrid_1 {
		width: 135px;
	}

	.modal_content .modalgrid_2 {
		width: 290px;
	}

	.modal_content .modalgrid_3 {
		width: 430px;
	}

	.modal_content .modalgrid_4 {
		width: 600px;
	}
	
/*-setting margins on first and last grid containers */	
.alpha {
	margin-left: 0;
}

.omega {
	margin-right: 0;
}

/*-action menu---------------------------------------*/
#menu {
	float: right;
}

	#menu .action_menu {
		float: right;
	}
	
		#menu .action_menu li {
			float: left;
		}
		
		#menu .action_menu li a {
			float: left;
			display: block;
			color: #fff;
			font-size: 12px;
			line-height: 50px;
			padding: 0px 20px;
		}
	
		/* join button in header */
		#menu .action_menu li.join a {
			background-color: #3ea6e0;
			border: 3px solid #068ad2;
			font-size: 14px;
			padding: 5px 30px;
			line-height: 20px;
			font-weight: bold;
			margin-top: 7px;
		}
		
			#menu .action_menu li.join a:hover {
				background-color: #068ad2;
			}

			/*#menu .action_menu li.login a:hover {
				text-decoration: underline;
			}*/
		
		/* new messages and invitations counter */
		#menu .action_menu li.new_items a {
			font-size: 20px;
			height: 30px;
			margin: 10px 10px 0px 0px;
			line-height: 30px;
			-moz-border-radius: 5px;			
			-webkit-border-radius:5px;
			background-color: #3ea6e0;
		}
		
			#menu .action_menu li.new_items a:hover {
				background-color: #068ad2;
			}
			
		/* search input in header */
		#menu .action_menu li.search_action {
			margin-left: 10px;
		}
		
			#menu .action_menu li.search_action input {
				border: 0px;
				background-color: #fff;
				font-size: 12px;
				height: 16px;
				width: 150px;
				color: #444;
				margin-top: 12px;
				padding: 5px 0px 5px 2px;
			}
			
				#menu .action_menu li.search_action input .placeholder_text {
					color: #333;
				}
		
			#menu .action_menu li.search_action button {
				text-indent: -9999px;
				border: 0px;
				background: #fff url(../images/main/search_submit.png) center center no-repeat;
				margin: 0px 22px 0px -25px;
				border-top: 0px;
				width: 20px;
			}
		
		/* profile icon */
		#menu .action_menu li.profile_icon {
			width: 20px;
			height: 20px;
		}
		
		#menu .action_menu li.profile_icon img {
			border: 3px solid #fff;
			margin-top: 12px;
		}
		
		#menu .action_menu li.profile_icon a {
			padding: 0px;
		}

    #menu .action_menu_items {
      background: #2a2a2a;
			padding: 0px 20px 10px 20px;
			-webkit-border-bottom-right-radius: 10px;			
			-webkit-border-bottom-left-radius:10px;
			-moz-border-radius-bottomleft: 10px;
			-moz-border-radius-bottomright: 10px;
			z-index: 9999;
    }

			#menu .action_menu_items li {
				font-size: 12px;
				line-height: 25px;
				border-bottom: 1px dotted #444;
			}
			
				#menu .action_menu_items li:last-child {
					border-bottom: 0px;
				}
						
				#menu .action_menu_items li a {
					display: block;
					color: #3ea6e0;
				}
				
					#menu .action_menu_items li a:hover {
						color: #068ad2;
					}
				
					#menu .action_menu_items li a.menu_item_red {
						color: #ff5e5d;
					}
					
						#menu .action_menu_items li a.menu_item_red:hover {
							color: #ffd2b8;
						}
						
					#menu .action_menu_items li a.menu_item_green {
						color: #c8ff9b;
					}
					
						#menu .action_menu_items li a.menu_item_green:hover {
							color: #068ad2;
						}

/* box header */
/* used on main external pages */
.box_header {
	overflow: hidden;
	margin-bottom: 10px;
}

	.box_header.settings {
		border-bottom: 1px solid #ccc;
		padding-bottom: 10px;
	}

	.box_header h1 {
		font-size: 20px;
		font-weight: bold;
		color: #444;
		line-height: 25px;
	}
	
	.box_header h2 {
		clear: both;
		color: #3ea6e0;
		font-size: 14px;
		font-weight: bold;
		line-height: 25px;
	}
	
		.box_header h2 small a {
			font-size: 10px;
			color: #444;
			font-weight: normal;
		}
		
	.box_header h3 {
		color: #ffa45b;
	}
	
		.box_header h3 small {
			font-size: 11px;
			color: #666;
		}
	
		.box_header h3 a {
			color: #ffa45b;
		}
		
			.box_header h3 a:hover {
				text-decoration: underline;
			}
		
	.box_header h4 {
		text-align: right;
		font-size: 20px;
		font-weight: bold;
		color: #444;
		line-height: 25px;
	}
	
		.box_header h4 span {
			float: left;
			line-height: 30px;
		}
		
		.box_header h4 select {
			margin-top: 5px;
		}
		
		.box_header h4 a {
			color: #fff;
			font-size: 12px;
			padding: 5px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
		}
	
	.box_header p {
		color: #444;
		font-size: 14px;
		line-height: 20px;
		margin-top: 10px;
		clear: both;
	}

/* box image */
/* used on main external pages */
.box_image {
	overflow: hidden;
	margin-bottom: 10px;
	text-align: center;
}

	.box_image img {
		padding: 5px;
		border: 1px solid #ccc;
		background-color: #fff;
	}
	
	.box_image a {
		display: block;
		text-align: center;
	}


/* generic boxes */
/* used as main content elements throughout site */
.box_container, .modal_container {
	overflow: hidden;
	margin-bottom: 20px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.modal_container {
	width: 620px;
	margin-bottom: 0px;
}

	.modal_container.light_colorone {
		background-color: #fff;
	}
	
	.modal_container h1, .modal_container h2 {
		font-size: 14px;
		color: #fff;
		font-weight: bold;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		-webkit-border-top-right-radius: 5px;			
		-webkit-border-top-left-radius:5px;
		padding: 5px 10px 3px 10px;
		overflow: hidden;
		height: 100%;
		border-bottom: 1px solid #068ad2;
	}

	.box_container h1, .box_container h2 {
		font-size: 14px;
		color: #fff;
		font-weight: bold;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		-webkit-border-top-right-radius: 5px;			
		-webkit-border-top-left-radius:5px;
		padding: 5px 10px;
		overflow: hidden;
		height: 100%;
	}
	
		.box_container h2 a {
			color: red;
			float: right;
		}
		
			.modal_container h2 a {
				color: #efefef;
				float: right;
				font-size: 20px;
				line-height: 16px;
			}
	
		.box_container h1 span, .modal_container h1 span, .modal_container h2 span {
			float: left;
		}

	.box_container p, .modal_container p {
		font-size: 10px;
		color: #444;
		line-height: 15px;
		padding-top: 5px;
	}
	
	.box_container.colorone, .modal_container.colorone {
		background-color: #3ea6e0;
	}
	
.box_content {
	padding: 10px;
	overflow: hidden;
	color: #444;
	font-size: 12px;
}

	.box_content fieldset { /* wraps the form block */
		padding: 10px 0px;
		border-bottom: 1px solid #ccc;
		clear: both;
	}

	.box_content legend { /* labels the form block */
		display: block;
		font-size: 18px;
		padding-top: 10px;
		color: #3ea6e0;
		margin-bottom: 5px;
	}

	.box_content label { /* labels the input */
		display: block;
		font-size: 14px;
		line-height: 28px;
	}
	
	.box_content input {
		padding: 5px 0px 5px 2px;
	}
	
	.box_content img {
		margin-left: auto;
		margin-right: auto;
	}
	
	.box_content h2 {
		font-size: 12px;
		color: #444;
	}
	
	.box_container h3 {
		color: #444;
		font-size: 16px;
		font-weight: bold;
	}
	
	.box_content ins {
		color: #444;
		font-size: 12px;
		text-decoration: none;
	}
	
	.box_content p {
		font-size: 12px;
		line-height: 20px;
		margin-bottom: 5px;
	}

	.box_content a {
		color: #444;
		font-weight: bold;
		text-decoration: underline;
	}
	
/*- static content ------------------------------*/
/* used in help center, terms page, etc. */
.static_box {
	color: #444;
}

	.static_box a {
		display: block;
		line-height: 25px;
	}	

	.static_box h4 {
		font-size: 14px;
		line-height: 40px;
	}	

	.static_box p {
		font-size: 12px;
		margin-bottom: 20px;
		line-height: 20px;
	}
	
		.static_box p a {
			display: inline;
		}

/*- form box -------------------------------------*/
.form_box {
	color: #444;
	overflow: hidden;
	height: 100%;
}

	.form_box fieldset { /* wraps the form block */
		float: left;
		width: 100%;
		margin-top: 5px;
		margin-bottom: 5px;
		border-bottom: 1px solid #ececec;
	}

	.form_box legend { /* labels the form block */
		display: block;
		font-size: 18px;
		padding-top: 10px;
		color: #3ea6e0;
		margin-bottom: 5px;
	}
	
		.form_box legend span {
			display: block;
		}

	.form_box label { /* labels the input */
		text-align: right;
		font-size: 14px;
		line-height: 28px;
		display: block;
		padding: 0px 0px 10px 0px;
	}
	
		.form_box label span {
			float: left;
		}
		
		.form_box label int {
			font-weight: bold;
			color: #666;
		}
	
		.form_box label textarea {
			width: 50%;
			height: 50px;
			padding: 5px 0px 5px 2px;
		}
	
		.form_box label input {
			width: 50%;
			padding: 5px 0px 5px 2px;
			font-size: 14px;
		}
		
			.form_box label input.checkbox_input {
				width: 5%;
				margin-top: 5px;
			}
		
		.form_box label select {
			width: 50%;
		}
		
		.form_box label ins {
			text-decoration: none;
			font-size: 14px;
			color: #999;
		}
	
	.form_box h4 {
		color: #red;
		font-size: 12px;
		float: left;
		width: 100%;
	}
	
		.form_box h4 span {
			font-weight: bold;
		}
	
	.form_box p {
		font-size: 11px;
		margin-top: 5px;
	}
	
	
		.form_box p.picked_item_list {
			overflow:hidden;
		}
		
		.form_box p span.picked_item {
			float: left;
			padding: 5px;
			background: #3ea6e0;
			margin-right: 5px;
			color: #fff;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			margin-bottom: 5px;
		}
	
		.form_box p span a {
			color: red;
		}

	.form_box p.error {
		color: red;
	}
	
	.filter_list {

	}
	
		.filter_list label {
			font-size: 12px;
			line-height: 15px;
			border-bottom: 1px solid #ccc;
			overflow: hidden;
			margin-top: 15px;
			height: 100%;
		}
		
			.filter_list label:first-child {
				margin-top: 0;
			}
	
		.filter_list label span {
			font-weight: bold;
			font-size: 14px;
		}
		
		.filter_list ul {
			
		}
		
		.filter_list ul li {
			font-size: 12px;
			line-height: 20px;
		}
		
			.filter_list ul li.selected {
				font-weight: bold;
				color: #666;
			}
		
			.filter_list ul li ul {
				margin-left: 10px;
			}

		.filter_list ul li ul li {
			font-size: 12px;
		}

		.filter_list .sub_show_more {
			font-weight: bold;
		}

/* birthday selects */
/* month */
#user_profile_birthday_3i {
	width: 63px;
}

/* day */
#user_profile_birthday_2i {
	width: 63px;
}

/* year */
#user_profile_birthday_1i {
	width: 75px;
}

/*-section headers-------------------------------------------*/
.sectionheader {
}

	.sectionheader h3.space {
		margin-top: 20px;
	}

	.sectionheader h3 {
		font-size: 13px;
		color: #fff;
		height: 100%;
		text-align: right;
		line-height: 18px;
		overflow: hidden;		
		padding: 5px 10px 3px 10px;
	}

		.sectionheader h3 a {
			color: #fff;
			text-decoration: underline;
		}
		
			.sectionheader h3 a:hover {
			}

		.sectionheader h3 span {
			float: left;
			font-weight: bold;
			font-size: 14px;
		}

	.sectionheader h4 {
		padding: 5px 10px;
		font-size: 12px;
		line-height: 15px;
		color: #555;
		text-align: right;
	}

		.sectionheader h4 a {
			color: #555;
		}

/*-action bar-------------------------------------------*/
#action_bar {
	background-color: #444;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	overflow: hidden;
	padding: 10px;
	text-align: right;
	color: #666;
	margin: 5px 0px 10px 0px;
}

	#action_bar select {
		font-size: 11px;
	}

	#action_bar span {
		float: left;
	}
	
		#action_bar span input {
			background-color: none;
			border: default;
		}

	#action_bar a {
		text-decoration: underline;
		font-weight: bold;
	}

			
/*-breadcrumbs---------------------------------*/
#breadcrumbs {
	margin: 5px 0px 10px 0px;
	background-color: #444;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	overflow: hidden;
	width: 100%;
	font-size: 12px;
	z-index:2;
	position: relative;
	line-height: 30px;
}

	#breadcrumbs li {
		float: left;
		color: #efefef;
		background: #444 url(../images/main/grey_crumb.png) right center no-repeat;
	}
	
		#breadcrumbs li a {
			padding: 0px 30px 0px 20px;
			display: block;
			color: #fff;
			font-weight: bold;
		}

	#breadcrumbs li.first_crumb {
		-moz-border-radius-bottomleft: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-bottomright: 0px;
		-moz-border-radius-topright: 5px;
		-webkit-border-bottom-left-radius:5px;
		-webkit-border-top-left-radius:5px;
		-webkit-border-bottom-right-radius:0px;
		-webkit-border-top-right-radius:5px;
		border: 0px;
		background: #666 url(../images/main/first_crumb.png) right center no-repeat;
	}
	
		#breadcrumbs li.first_crumb a {
			padding-right: 20px;
		}
	
	#breadcrumbs li.last_crumb {
		border-right: 0px;
		background: none;
		padding: 0px 30px 0px 20px;
	}

/*-left navigation----------------------------------------*/
/* global */
.grid_nav {
	width: 138px;
	border-right: 2px solid #ccc;
}

.grid_nav li {
	line-height: 30px;
}

	.grid_nav li span {
		color: #3ea6e0;
	}

.grid_nav a {
	color: #444;
}

	.grid_nav a:hover {
		color: #068ad2;
	}

	.grid_nav .profile a {
	color: #000;
	font-weight: bold;
	}
	
		.grid_nav .profile a:hover {
			color: #068ad2;
		}

.grid_nav li.navspacer {
	height: 20px;
}

/*-no content stuff---------------------------------*/
.nocontent {
	background-color: #efefef;
	border: 1px solid #ddd;
	padding: 20px 0px 20px 0px;
	width: 80%;
	margin: 10px 0px 10px 10%;
	text-align: center;
	overflow: hidden;
}

	.nopage .nocontent {
		border-width: 10px;
		background-color: #fafafa;
	}

	.nocontent h3 {
		color: #3ea6e0;
		font-size: 16px;
		font-weight: bold;
	}

	.nocontent p {
		font-size: 14px;
		line-height: 20px;
		color: #444;
	}

	.nocontent p a {
		color: #3ea6e0;
	}
	
		.nocontent p a:hover {
			color: #068ad2;
		}

/*-content count stuff-------------------------------*/
.count_container {
	float: left;
	margin-bottom: 10px;
}

.count {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

	.count a {
		display: block;
		color: #fff;
		text-align: center;
		padding: 10px 0px;
	}
	
		.count a var {
			display: block;
			font-weight: bold;
			font-size: 25px;
			line-height: 28px;
		}
		
		.count a small {
			font-size: 12px;
			line-height: 15px;
		}

/*-paging stuff--------------------------------------*/
.pagination_container {
	margin-top: 10px;
	height: 30px;
	border-bottom: 1px solid #efefef;
}

/* page date */
/* used on calendar pages, in place of page numbers */
.page_heading {
	text-align: center;
}

	.page_heading h1 {
		font-weight: bold;
		font-size: 18px;
		color: #3ea6e0;
	}

/* page numbers */
.page_numbers {
	text-align: center;
}

	.page_numbers h3 {
		text-align: center;
		font-size: 14px;
		color: #068ad2;
		padding-top: 5px;
	}

		.page_numbers h3 a {
			margin: 0px;
			border: 1px solid #ccc;
			padding: 2px 10px;
			color: #999;
			display: inline;
		}

			.page_numbers h3 a:hover {
				border: 1px solid #068ad2;
				background-color: #3ea6e0;
				color: #fff;
			}
	
.active_page {
	display: inline;
	padding: 2px 11px;
}

/* page arrows */
.pagearrow {
	width: 45px;
	background-color: #3ea6e0;
}

	.pagearrow.left {
		float: left;
	}

	.pagearrow.right {
		float: right;
	}

	.pagearrow a {
		background-color: #3ea6e0;
		border-bottom: 3px transparent;
	}
	
		.pagearrow a:hover {
			background-color: #068ad2;
		}

/*-autocomplete stuff-----------------------------*/
div.auto_complete {
	width: 349px;
	background: #fff;
	z-index: 9999 !important;
}

div.auto_complete ul {
	margin: 0;
	padding: 0;
	border: 1px solid #ddd;
	width: 100%;
	list-style-type: none;
}

div.auto_complete ul li {
  padding: 4px;
	border-top: 1px solid #ddd;
	font-size: 12px;
	line-height: 16px;
	color: #222;
	background-color: #e9f1fa;
  overflow: hidden;
}

div.auto_complete ul li img {
  float: left;
  padding-right: 5px;
}

div.auto_complete ul li span {
	font-size: 13px;
	font-weight: bold;
	line-height: 16px;
	color: #222;
}

div.auto_complete ul li div.location {
  font-size: 11px;
  line-height: 14px;
  margin-top: 2px;
  color: #333;
}

div.auto_complete ul li.selected {
	background-color: #3ea6e0;
	color: #fff;
}

div.auto_complete ul li:hover {
	cursor: pointer;
}

div.auto_complete ul strong.highlight {
	font-weight: bold;
	margin: 0;
	padding: 0;
}

/*-status bar ------------------------------------*/
/*-used to mark as attending events, etc. -*/
.status_bar {
	overflow: hidden;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-top-right-radius:0px;
	-webkit-border-top-left-radius:0px;
	-webkit-border-bottom-right-radius: 5px;			
	-webkit-border-bottom-left-radius:5px;
	margin-bottom: 10px;
	margin-top: -13px;
	z-index: 1;
	position: relative;
	line-height: 20px;
}

	.status_bar h4 {
		text-align: right;
		color: #ccc;
		display: block;
		padding: 10px;
		font-size: 14px;
	}

		.status_bar h4 a {
			color: #fff;
			margin: 0px 20px;
		}
		
			.status_bar h4 a:hover {
				text-decoration: underline;
			}
	

		.status_bar h4 span {
			float: left;
			color: #fff;
			font-weight: bold;
			font-size: 16px;
		}

/*-item list stuff -------------------------------*/
/* img padding */
/* sets sizes and padding borders on item list images */
/* 20x20 */
.img_tiny {
	width: 20px;
	height: 20px;
	padding: 1px;
}

/* 50x50 */
.img_small {
	width: 50px;
	height: 50px;
	padding: 2px;
}

/* 80x80 */
.img_medium {
	width: 80px;
	height: 80px;
	padding: 3px;
}

/* 200x150 */
.img_big {
	width: 200px;
	height: 150px;
	padding: 5px;
}

/* item content */
/* sets left margin on content in lists. the purpose is to prevent text wrapping around the image, depending on the size of the image */
.item_content_tiny {
	margin-left: 34px;
}

.item_content_small {
	margin-left: 66px;
}

.item_content_medium {
	margin-left: 98px;
}


/*-global item styles */
.item {
	overflow: hidden;
	padding: 10px;
	border-bottom: 1px solid #ddd;
	clear: both;
	height: 100%;
}

	.item:last-child {
		border-bottom: 0px;
	}

	.item img {
		float: left;
		display: inline;
		margin: 0px 10px 0px 0px;
		border: 1px solid #ccc;
		background-color: #fff;
	}

	.item h3 {
		overflow: hidden;
		color: #999;
		display: block;
		line-height: 24px;
		height: 100%;
	}
	
		.item h3 span {
			float: left;
		}

			.item h3 span a {
				color: #555;
				display: inline;
			}
	
			.item h3 span a:hover {
				text-decoration: underline;
			}
			
			.item h3 span.dateright {
			  float: right;
			}
			
			.item h3 span.deletex {
  			float: right;
  			margin-left: 5px;
  			display: inline;
  		}
  		
  		.item h3 span.deletex a {
  		  color: red;
  		}
  		
  		.item h3 span.deletex a:hover {
  		  text-decoration: none;
  		}
		
	.item h4 {
		color: #555;
		display: block;
		line-height: 16px;
	}
	
		.item h4 a {
			color: #3ea6e0;
		}
	
	.item h5 {
		color: #333;
		display: block;
	}

		.item h5 a {
			color: #3ea6e0;
		}
		
	.item p {
		font-size: 14px;
		line-height: 20px;
		color: #444;
		margin-bottom: 10px;
	}
		
/*-query item */
/* used on pages like browse, search and calendar to display results */
.query_item img {
  margin: 0px 10px 0px 0px;
}

	.query_item h3 {
		font-size: 16px;
		font-weight: bold;
	}

	.query_item h4 {
		font-size: 12px;
		font-weight: normal;
	}

	.query_item h5 {
		line-height: 15px;
		font-size: 12px;
		font-weight: normal;
	}
	
		.query_item h5.plan_text {
			color: #068ad2;
      margin-top: 5px;
		}

/*-featured item */
.featured_wrapper {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	background-color: #efefef;
	margin-bottom: 20px;
	border-bottom: 0px;
}

.featured_item {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	background-color: #efefef;
	margin-bottom: 20px;
	border-bottom: 0px;
}

	.featured_item h3 {
		font-size: 16px;
		font-weight: bold;
	}

	.featured_item h4 {
		font-size: 12px;
		font-weight: normal;
		line-height: 20px;
	}

	.featured_item h5 {
		line-height: 15px;
		font-size: 12px;
		font-weight: normal;
	}

/*-event item + venue item */
.event_item.sponsored {
	padding: 10px;
}

.event_item h3 {
	font-size: 16px;
	font-weight: bold;
}

.event_item h4 {
	font-size: 12px;
	font-weight: normal;
}

.event_item h5 {
	line-height: 15px;
	font-size: 12px;
	font-weight: normal;
}

.event_item h5 a.event_item_venue {
	font-weight: bold;
	line-height: 17px;
	font-size: 14px;
	color: #FFA45B;
}
	
/*-venue item */
.venue_item h3 {
	font-size: 16px;
	font-weight: bold;
}

.venue_item h4 {
	font-size: 12px;
	font-weight: normal;
}

.venue_item h5 {
	line-height: 15px;
	font-size: 12px;
	font-weight: normal;
}
	
/*-invite item */
/* used in invitation lists */
.invite_item {
	text-align: right;
	height: 24px;
}

	.invite_item label {
		line-height: 20px;
		padding: 0;
	}

		.invite_item label span {
			color: #068ad2;
			cursor: pointer;
		}

/*-message center item */
/* used in message center */
.manage_item {
	margin-bottom: 5px;
	padding: 5px;
}

.pointer {
  cursor: pointer;
}

	.manage_item h3 {
		font-size: 16px;
		font-weight: bold;
		color: #444;
	}
	
		.manage_item h3.manage_user {
			line-height: 24px;
			
		}
		
		.manage_item h3.manage_user small {
			font-weight: normal;
			font-size: 10px;
		}

	.manage_item h4 {
		font-size: 12px;
	}
	
		.manage_item h4.unread {
			font-weight: bold;
		}
	
	.manage_item p {
		font-size: 12px;
	}
	
	.manage_item textarea {
		width: 97%;
		margin: 5px 0px 10px 0px;
	}
	
/*-message center item */
/* used in message center */
.feed_item {
	margin-bottom: 5px;
	border-bottom: 1px solid #ccc;
	padding: 10px;
}

	.feed_item h3 {
		font-size: 12px;
		line-height: 24px;
		color: #444;
	}
	
		.feed_item h3 a {
			color: #444;
		}
	
	.feed_item span.unread {
		font-weight: bold;
	}

/*-new review item */
/* used for review form */
.newcontent_item {
	margin-bottom: 10px;
	border-top: 1px solid #efefef;
}

	.newcontent_item h3 {
		font-size: 14px;
		font-weight: normal;
	}

	.newcontent_item h4 {
		font-size: 12px;
		font-weight: normal;
	}

	.newcontent_item textarea {
		width: 97%;
		margin-bottom: 10px;
		margin-top: 5px;
	}

	/*-review item */
	.rev_neut {
		display: inline;
	}

	.rev_pos {
		display: inline;
		color: #7cd239;
	}

	.rev_neg {
		display: inline;
		color: #ff5e5d;
	}

/*-special item */
.special_item h3 {
	font-size: 16px;
	font-weight: bold;
}

.special_item h4 {
	font-size: 12px;
	font-weight: normal;
}

.special_item h5 {
	line-height: 15px;
	font-size: 12px;
	font-weight: normal;
}

/*-comment item-*/
.comment_item h3 {
	font-size: 14px;
	font-weight: bold;
}

.comment_item p {
	font-size: 12px;
	font-weight: normal;
	line-height: 20px;
	margin-bottom: 10px;
}

.comment_item h5 {
	line-height: 15px;
	font-size: 12px;
	font-weight: normal;
}

/*-icon item*/
/* used for peoplerow, etc. */
/* people listing */
.icon_item {
	margin-left: auto;
	margin-right: auto;
}

	.icon_item td {
		padding: 2px;
		width: 50px;
	}

/*-ugc item*/
/* used for comment, review, photo forms on external pages */
.ugc_item {
	margin-bottom: 5px;
	cursor: pointer;
	padding: 10px 5px;
	background-color: #efefef;
	border-bottom: 5px solid #ccc;
}

	.ugc_item h3 span {
		margin-bottom: 5px;
	}
	
	.ugc_item textarea {
		width: 97%;
		margin-bottom: 10px;
		height: 50px;
	}
	
	.add_comment_button, .add_review_button, .add_photo_button {
		float: left;
	}

/* breaker bar in item list */
.list_break {
	background-color: #999;
}

	.list_break h3 {
		text-align: center;
		height: 20px;
		padding-top: 2px;
		font-size: 14px;
		line-height: 17px;
		color: #fff;
		font-weight: normal;
	}

/* sub-links on an item */
/* link that appear below items in a list */		
.link_action {
	overflow: hidden;
	border-bottom: 1px solid #efefef;
	padding: 10px 0px;
}

	.link_action a {
		float: left;
		padding: 5px;
		color: #444;
		margin: 0px 10px 0px 0px;
		font-size: 14px;
		background-color: #efefef;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border: 1px solid #ccc;
	}
	
		.link_action a:hover {
			background-color: #ccc;
		}

/*-user action*********************************/
/* used on venue/event/user external as attendance/messaging buttons */
.user_action {
	margin: 10px 0px 20px 0px;
	text-align: center;
}

.user_action a, .user_action input {
	padding: 5px 10px;
	color: #fff;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin: 5px auto;
	font-size: 16px;
	background-color: #3ea6e0;
	border-bottom: 2px solid #068ad2;
	border-right: 2px solid #068ad2;
	border-top: 1px solid #068ad2;
	border-left: 1px solid #068ad2;
	text-align: center;
}

	.user_action a:hover, .user_action input:hover {
		background-color: #068ad2;
	}


/*-detail list *******************************/
/* used for venue directions*/
.detail_list {
	overflow: hidden;
}

	.detail_list.venue_details {
		width: 50%;
	}

.detail_list h3 {
	font-size: 12px;
	line-height: 19px;
	color: #3ea6e0;
	margin-top: 5px;
	font-weight: bold;
}

.detail_list li {
	font-size: 12px;
	line-height: 19px;
	color: #222;
}

.detail_list li a {
	color: #444;
}

	.detail_list a.ticket {
		font-size: 16px;
	}

/*-event details---------------------*/
.extra_details {
	margin-top: 10px;
	overflow: hidden;
	height: 100%;
}

	.extra_details dl {
		float: left;
		width: 50%;
	}

	.extra_details dt {
		font-size: 12px;
		line-height: 20px;
		color: #666;
		margin-top: 10px;
		font-weight: bold;
		display: inline;
	}
	
	.extra_details dd {
		line-height: 19px;
		color: #222;
		display: block;
	}
	
		.extra_details dd p {
			font-size: 11px;
			line-height: 14px;
			margin-top: 0px;
			padding-right: 20px;
		}


	.extra_details dd p a {
		color: #068ad2;
		
	}
	.extra_details.venue_details {
		width: 50%;
	}
	
/*-used for event/venue/plan photo -------------*/
p.description {
	clear: none;
}

p.description img {
	padding: 5px;
	border: 1px solid #ccc;
	background-color: #fff;
	float: right;
	margin-left: 5px;
}	

/*-alert stuff-----------------------------*/

.alertmessage
{
	float: left;
	margin-bottom: 10px;
	margin-left: 20%;
	margin-right: 20%;
	width: 60%;
	background-color: #fae8ea;
	border: 1px solid #f1ccd1;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

	.alertmessage h3
	{
		text-align: right;
		color: #292929;
		font-size: 14px;
		padding: 10px;
	}
	
		.alertmessage h3 span {
			float: left;
		}
		
		.alertmessage h3 a {
			color: red;
		}

.error_marker {
	color: red;
}
	
.fbactionbuttons {
	float: left;
	margin-top: 5px;
}

/*- form submit button-----------------------*/
/* also used as actions on item lists */
.action_button {
	float: right;
	text-align: center;
	margin-bottom: 5px;
}
	
	.action_button a {
		color: #3ea6e0;
		font-size: 14px;
	}
	
	.action_button input, .action_button a {
		background-color: #3ea6e0;
		padding: 5px;
		color: #fff;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		margin: 0px 5px;
		font-size: 12px;
		border-bottom: 1px solid #068ad2;
		border-right: 1px solid #068ad2;
		border-top: 0px;
		border-left: 0px;
		display: block;
		float: left;
		font-weight: bold;
	}

		.action_button input:hover, .action_button a:hover {
			background-color: #068ad2;
		}

		.action_button input:last-child, .action_button a:last-child {
			margin-right: 0px;
		}
		
		.action_button a.link {
			background: none;
			padding: 0;
			margin: 0;
			-moz-border-radius: 0;
			-webkit-border-radius: 0;
			border: 0px;
			color: #3ea6e0;
			line-height: 28px;
		}
		
			.action_button a.link:hover {
				background: none;
			}
		
		.action_button input.good, .action_button a.good {
			background-color: #7cd239;
			border-color: #5b9a2a;
		}

			.action_button input.good:hover, .action_button a.good:hover {
				background-color: #5b9a2a;
			}

		.action_button input.bad, .action_button a.bad {
			background-color: #ff5e5d;
			border-color: #bd4544;
		}

			.action_button input.bad:hover, .action_button a.bad:hover {
				background-color: #bd4544;
			}
			
	.action_button.left {
		float: left;
	}
			
		.action_button.right input, .action_button.right a {
			margin-right: 0px;
			margin-left: 5px;
		}

/*-ticket link actions --------------------------------*/
.ticket_action {
	display: inline;
	float:right;
}

	.ticket_action a {
		display: block;
		border: 1px solid #ff0200;
		color: #fff;
		padding-left: 10px;
		padding-right: 10px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}
	
		.ticket_action a:hover {
			background-color: #ff5e5d;
		}

/*-ugc actions---------------------------------------*/
.action_ugc {
	padding: 10px;
	background-color: #efefef;
	border-bottom: 1px solid #ccc;
}

/*-ad boxes-------------------------------------------*/
.adbox {
	width: 300px;
	margin: 20px auto;
}

	.adbox p {
		font-size: 10px;
		color: #555;
		background-color: #efefef;
		text-align: center;
		letter-spacing: 2px;
	}

/*-footer-------------------------------------------*/
#dev_block {
	background-color: #2a2a2a;
	font-size: 12px;
	border-bottom: 5px solid #ccc;
}

	#dev_block h5 {
		padding: 5px 10px 5px 10px;
		color: #ccc;
		background-color: #444;
	}



/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*- below this section are page-specific classes ---------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/

/*-invite container----------------------------------*/
/* used on "invite friends" partial */
.invite_container {
	height: 210px;
	overflow: scroll;
	background-color: #fff;
	border: 1px solid #ccc;
}

.invite_item {
	padding-left: 10px;
}

#x-invite-friends textarea {
	width: 97%;
	margin: 10px 0px;
}


/*-signup ------------------------------------------*/
#recaptcha_image {
	border: 1px solid #efefef;
}

  #recaptcha_image.error_image {
    border-color: red;
  }

/*-dashboard ---------------------------------------*/
.percent {
	margin-bottom: 10px;
}

	.percent p {
		font-size: 18px;
		color: #444;
		text-align: center;
		padding: 10px 5px;
		font-weight: bold;
		margin-bottom: 0px;
		text-align: right;
		background-color: #fff;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	}
	
		.percent p span {
			float: left;
			font-size: 25px;
			
		}
	

	.percent_item span {
		display: block;
		margin-bottom: 10px;
	}
	
		.percent_item span a {
			text-decoration: none;
			font-size: 14px;
			color: #fff;
			display: block;
			padding: 5px;
			text-align: right;
			font-weight: bold;
		}
		
			.percent_item span abbr {
				float: left;
				font-weight: normal;
			}
	
	.percent_item var {
		font-size: 14px;
		color: #fff;
		padding: 5px;
		font-weight: bold;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	}

/*-message center-----------------------------------*/
.form_trigger {
	clear: both;
	width: 100%;
	color: #ccc;
}

/*-event create ---------------------------------*/
.date-preview.added {
	margin-bottom: 5px;
	padding: 5px;
	background-color: #7cd239;
	border-bottom: 1px solid #34a400;
	border-right: 1px solid #34a400;
	border-top: 1px solid #7cd239;
	border-left: 1px solid #7cd239;
}

	.date-preview.added a {
		float: right;
	}

.date-preview.wrapper {
	margin-bottom: 10px;
	padding: 5px;
	background-color: #8f8f8f;
	border-bottom: 1px solid #616161;
	border-right: 1px solid #616161;
	border-top: 1px solid #8f8f8f;
	border-left: 1px solid #8f8f8f;
}

	.date-preview.wrapper h2, .date-preview.added h2 {
		color: #fff;
		font-size: 12px;
		font-weight: normal;
		margin-right: 10px;
	}

#x-new-instance-input, #x-new-instance-start-input, #x-new-instance-end-input {
	display: inline;
}

/*-business external stuff ----------------------------*/
#map {
	margin: 5px 0px;
	height: 250px;
	border: 1px solid #ccc;
}

#map-address {
	width: 250px;
}

#map-address strong {
	display: block;
	font-weight: bold;
	font-size: 15px;
	line-height: 17px;
	padding-bottom: 5px;
	margin-bottom: 0px;
}

#map-address p {
	float: left;
	width: 155px;
	padding: 0px;
	margin: 0px;
	font-size: 12px;
}

#map-address a {
	float: right;
	display: inline;
	margin-bottom: 5px;
	font-size: 12px;
	color: #068ad2;
}

/*-event & plan external stuff---------------------------*/
/* event details */
#map {
	margin: 10px 0px;
	height: 300px;
	border: 1px solid #979797;
}

.venuedetails {
	margin-top: 5px;
}

	.venuedetails img {
		float: left;
		padding: 5px;
		border: 1px solid #ccc;
	}

	.venuedetails h3 {
		margin-left: 70px;
		font-size: 14px;
		color: #444;
		font-weight: bold;
	}

		.venuedetails h3 a {
			color: #444;
		}

	.venuedetails h4 {
		line-height: 15px;
		font-size: 12px;
		font-weight: normal;
		color: #666;
		margin-left: 70px;
	}

/* mini calendar */
#minicalendar {
	width: 280px;
	padding: 0;
	margin: 0;
	font-size: 12px;
	font-weight: normal;
	text-align: center;
	background-color: #fff;
	margin-top: 5px;
}

#minicalendar .selected {
	background-color: #068ad2;
	color: #fff;
	font-weight: bold;
}

	#minicalendar .selected a {
		color: #fff;
	}

#minicalendar .today {
	font-weight: bold;
	height: 30px;
}

#minicalendar .dimday {
	color: #a7a7a7;
	font-weight: normal;
	height: 30px;
}

	#minicalendar .dimday a {
		color: #999;
	}

#minicalendar .active {
	font-weight: bold;
	height: 30px;
}

	#minicalendar .today a, .active a {
	  height: 30px;
	}
	
#minicalendar th{
	font-size: 14px;
	font-weight: normal;
	color: #666;
	text-align: center;
}

#minicalendar td{
	height: 30px;
	text-align: center;
	background-color: #efefef;
	font-size: 14px;
}

	#minicalendar td a {
		color: #111;
		display: block;
		height: 30px;
		line-height: 30px;
		text-decoration: none;
	}

	#minicalendar td a:hover {
		background-color: #068ad2;
		color: #fff;
		font-weight: bold;	
	}
	
.subcal_actions {
	padding: 5px;
	background-color: #fff;
	text-align: center;
	font-size: 12px;
}

	.subcal_actions a {
		color: #068ad2;
	}

/* minical arrows */
.minical {
	margin-top: 0px;
}

	.minical a {
		float: left;
		text-decoration: none;
		display: block;
		text-align: center;
		font-size: 18px;
		padding: 2px 10px 5px 10px;
		background-color: #3ea6e0;
		color: #fff;
	}
	
		.minical a:hover {
			background-color: #068ad2;
		}

		.minical a.right {
			float: right;
		}

/* list view specific */
.date_divider {
	border-bottom: 1px solid #ddd;
}

	.date_divider h2 {
		font-size: 15px;
		line-height: 18px;
		color: #068ad2;
		padding: 5px;
		font-weight: bold;
		background-color: #e9f1fa;
	}
	
/*-modal box------------------------------------- */

	.modal_content fieldset { /* wraps the form block */
		float: left;
		width: 100%;
	}

	.modal_content legend { /* labels the form block */
		display: block;
		font-size: 18px;
		padding-top: 10px;
		color: #3ea6e0;
		margin-bottom: 5px;
	}

	.modal_content label { /* labels the input */
		display: block;
		font-size: 14px;
		line-height: 28px;
		color: #444;
	}
	
	.modal_content input {
		padding: 5px 0px 5px 2px;
		font-size: 14px;
	}
	
		.modal_content input.full {
			width: 98%;
		}
	
		.modal_content .action_button input {
			padding: 5px;
		}

	.modal_content textarea {
		width: 97%;
		height: 50px;
		margin: 10px 0px;
	}
	
	.modal_content h2 {
		color: #444;
	}

	.modal_content h4 {
		font-size: 16px;
		color: #444;
		font-weight: bold;
	}

	.modal_content p {
		font-size: 14px;
		color: #666;
	}
	
		.modal_content p span.picked_item {
			float: left;
			padding: 5px;
			background: #3ea6e0;
			margin-right: 5px;
			color: #fff;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
		}

		.modal_content p span a {
			color: red;
		}

	.modal_content p.error {
		color: red;
	}
	
	.modal_content p.login_message {
		font-size: 14px;
		padding-top: 0px;
	}
	
	.modal_content .fb_box {
		margin-left: 48px;
		margin-top: 25px;
	}
	
	.user_list {
		height: 250px;
		
	}
	
/* login custom code */
.login_choices {
	text-align: center;
	font-size: 12px;
	margin-top: 15px;
	padding: 10px 0px;
}

	.login_choices a {
		padding: 6px 50px;
		border: 1px solid #ccc;
		text-align: left;
		-moz-border-radius-topleft: 3px;
		-moz-border-radius-topright: 3px;
		-moz-border-radius-bottomleft: 3px;
		-moz-border-radius-bottomright: 3px;
		-webkit-border-top-right-radius:3px;
		-webkit-border-top-left-radius:3px;
		-webkit-border-bottom-right-radius: 3px;			
		-webkit-border-bottom-left-radius:3px;
		color: #068ad2;
	}
	
		.login_choices .button-login-fb {
			background: url(../images/lightbox/fb_connect.gif) no-repeat scroll 6px 50%;
		}
		
		.login_choices .button-login-localist {
			background: url(../images/lightbox/localist.gif) no-repeat scroll 6px 50%;
		}
	
	
		.login_choices a:hover, .login_choices a.current {
			background-color: #efefef;
			border: 1px solid #ddd;
			color: #333;
		}
	
	
		.login_choices a.current {
			background-color: none;
		}


/* this is the shading */
#ibox_w{
	position: absolute;
	top: 0px;
	left: 0px;
  z-index:99998;
	width: 100%;
	height: 100%;
	background-color: #000;
	margin:0;
	padding:0;
	filter: alpha(opacity=0);
	-moz-opacity: 0.0;
	opacity: 0.0;
}

/* this is the loading indicator when doing ajaxy stuff to get the content */
#ibox_progress {	
	margin:0;padding:0;
	position: absolute;
  z-index:99999;
}

/* this wraps div#ibox_content, really don't mess with it. */
#ibox_wrapper {
	position: absolute;
	top: 0px;
	left: 0px;
  z-index:100000;
	margin: 0;
  padding: 0;
	width: 600px;
}

/* this div is where the content actually goes */
#ibox_content {
  background-color: transparent;
	width:100%;
	height:100%;
	position:relative;
	top:0px;
	left:0px;
  margin: 0;
  padding: 0;
  z-index: 100000;
}

iframe.select_fix {
  display:none;/*sorry for IE5*/
  display/**/:block;/*sorry for IE5*/
  position:absolute;/*must have*/
  top:0;/*must have*/
  left:0;/*must have*/
  z-index:1;/*must have*/
  filter:mask();/*must have*/
  width: 100%;/*must have for any big value*/
  height: 100%;/*must have for any big value*/
}