@charset "utf-8";
/* CSS Document */
.clearfix {
	display: block;	
	clear: both;
}
/* Global styles */
a {
    color: #004276;
}
        
.left {
    float: left;
}

.right {
    float: right;
}
div.view-more {
    text-align: right;
    font-size: 8pt;
}

html, body {
	height: 100%;
}

body.tripulu {
	margin: 0;
	padding: 0;
	background: url(../img/bg-body.png) repeat-x white top left;
	
	font-family: Arial, Tahoma, Verdana, sans-serif;
	font-size: 9pt;
}

div.positioner {
	
	width: 985px;
	margin: 0 auto 0 auto;
		
	min-height: 100%;
}


div.header {
	position: relative;
	
	height: 82px;
}

	div.header div.logo {
		position: absolute;
		top: 16px;
		left: 0px;
		
	}

		div.header div.logo a {
			display: block;
			
			background: url(../img/logo-tripulu.jpg) top left no-repeat black;
			
			width: 300px;
			height: 59px;
		}
		
	div.header div.user-tools {
		position: absolute;
		top: 31px;
		right: 0px;
		
		color: white;
	}
	
        div.header div.user-tools ul {
            margin: 0px;
            padding: 0px;
            
            list-style-type: none;
        }
        div.header div.user-tools ul.logged-in {
            font-size: 8pt;
        }
        div.header div.user-tools li {
            float: left;
            border-left: 1px solid #999;
            padding: 0 8px;
            color: #999;
        }
            div.header div.user-tools li:first-child {
                border-left-width: 0;
            }
        div.header div.user-tools a {
            color: #999;
            text-decoration: none;
            line-height: 29px;
        }
        div.header div.user-tools span.username {
            line-height: 29px;
        }
        div.header div.user-tools a.fbconnect_login_button img {
            margin-top: 3px;
        }

div.function-bar {
	position: relative;
	
	height: 32px;
}

	div.function-bar div.nav-categories {
		position: absolute;
		top: 0px;
		//top: 0px;
		left: 150px;
	}
		div.function-bar div.nav-categories ul {
			height: 32px;
			list-style-type: none;
			margin: 0px;
			padding: 0px;
			border-left: 1px solid #666;
		}

		div.function-bar div.nav-categories li {
			display: block;
			float: left;
			
			height: 32px;
			line-height: 32px;

			border-right: 1px solid #666;
			
			text-align: center;
			
			position: relative;
		}
		
		div.function-bar div.nav-categories strong {
            visibility: hidden;
            padding: 0 1.5em;
		}

		div.function-bar div.nav-categories a {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 15;
            
            
            display: block;
            
            font-size: 10pt;
            text-decoration: none;
            text-align: center;
            color: #1a71ae;
            
            padding: 0px 0px;
            line-height: 32px;
            
            height: 32px;
            width: 100%;
		}
			div.function-bar div.nav-categories li a.active,
			div.function-bar div.nav-categories li a:hover {
				color: white;
				font-weight: bold;
			}

			div.function-bar div.nav-categories li.hover,
			div.function-bar div.nav-categories li.active {
				background: url(../images/navigation/bg-fill.png) top right repeat-x transparent;
			}			

			div.function-bar div.nav-categories li div {
				position: absolute;
				top: 0px;
				z-index: 10;
				
				height: 32px;
				width: 15px;
			}
				div.function-bar div.nav-categories li div.l {
					left: 0px;
					background: url(../images/navigation/bg-left.png) top left no-repeat transparent;
				}
				div.function-bar div.nav-categories li div.r {
					right: 0px;
					background: url(../images/navigation/bg-right.png) top right no-repeat transparent;
				}

	div.function-bar div.search {
		position: absolute;
		top: 4px;
		//top: 3px;
		right: 0px;
	}
	
        div.function-bar div.search .input {
            padding: 0;
        }
		div.function-bar div.search input.search-terms {

			text-align: right;
			color: #888;
			
			padding: 2px 7px 0px 0px;
			margin: 0px 28px 0px 0px;
			
			width: 200px;
			height: 18px;
			
			border: 1px solid #999;
		}

		div.function-bar div.search button {
			position: absolute;
			top: 0px;
			//top: 1px;
			right: 0px;
			background: url(../img/bg-searchbtn.png) top left no-repeat;
			width: 28px;
			height: 22px;
			margin: 0px;
			padding: 0px;
			border-width: 0px;
			
			cursor: pointer;
		}

div.breadcrumbs {
	margin: 12px 0px 10px 150px;
	
	font-size: 8pt;
}
    div.breadcrumbs a {
        margin: 0 0.5em;
    }

div.main-box {
	position: relative;
	
	width: 100%;
	
	margin: 0;
	padding: 0 0 125px 0;
}

div.paginator {
    text-align: right;
    position: relative;
    margin: 1em 0;
}
    div.paginator div.per-page {
        float: left;
        height: 2em;
        margin-top: -1px;
        color: #999;
    }
        div.paginator div.per-page select {
            font-size: 9pt;
            margin-left: 0.5em;
        }
    div.paginator ul {
        margin: 0;
        padding:0;
        list-style-type: none;
        height: 2em;
    }
        div.paginator li {
            display: inline;
            padding: 5px 0 5px 5px;
        }
        div.paginator a {
            display: inline;
            border: 1px solid #e8ebfa;
            color: #999;
            padding: 1px 5px;
            text-decoration: none;
            font-weight: bold;
        }
        div.paginator a:hover {
            cursor: pointer;
        }
        div.paginator a.on {
            background-color: #e8ebfa;
            color: white;
        }
        div.paginator a.prev,
        div.paginator a.next {
            border: 1px solid #ddd;
            text-decoration: none;
            font-weight: normal;
        }

	div.left-sidebar {
		position: absolute;
		top: 0px;
		left: 0px;
		
		width: 135px;
	}
		div.left-sidebar h1 {
			margin: 0px;
			padding: 3px 8px;
			
			font-size: 10pt;
			
			background-color: #e6ecfa;
		}
		div.left-sidebar h2 {
            color: #999;
            font-size: 9pt;
            font-weight: normal;
            margin: 1em 0 0.5em 4px;
		}
	
		div.left-sidebar a {
			color: #003661;
			text-decoration: none;
		}
		div.left-sidebar a:hover {
			text-decoration: underline;
		}
		div.left-sidebar ul {
			list-style-type: none;

			padding-left: 0px;
			margin: 5px 0px 0px 4px;
			
			font-size: 9pt;
		}
            div.left-sidebar ul li {
                line-height: 1.8em;
            }
			div.left-sidebar ul ul {
				padding-left: 20px;
				margin: 5px 0px 0px 0px;
				list-style-image: url(../img/bullet-sidebar.png);
			}
				div.left-sidebar ul ul li {
					line-height: 14pt;
					vertical-align: px;
				}
				/*
					div.left-sidebar ul ul li a {
						background: url(../img/bullet-sidebar.png) 0px 3px no-repeat white;
						padding-left: 12px;
					}
				*/
	div.body {
		position: relative;
		left:  150px;
		
		width: 560px;
	}
	
		div.body h1 {
			margin: 0px 0px 0px 0px;
			padding: 0px 0px 0px 0px;
			font-weight: normal;
			font-size: 20pt;
			color: #004276;
		}
		
			div.body h1.section,
			div.body div.header {
				margin: 0px;
				padding: 3px 8px;
				font-size: 10pt;
				background-color: #e6ecfa;
				font-weight: bold;
				display: block;
				height: auto;
			}
			
			div.body h1 a {
				text-decoration: none;
			}

		div.body p.byline {
			margin: 0px;
			color: #666;
			
			line-height: 14pt;
		}
			div.body p.byline a {
				color: #004276;
				text-decoration: none;
			}

		div.body p.publine {
			margin: 0px;
			color: #666;
			font-size: 7pt;
		}

		div.body li,
		div.body p {
			color: #666;
			line-height: 1.4em;
		}
		
		div.body .photo {
			width: 100%;
			margin: 5px 0 10px;
		}
		
		div.body div.photo img {
			border: 1px solid #CCC;
			width: 100%;
		}
		
		.caption, .author {
			color: #666;
			font-size: 7pt;
		}
		
		div.body div.profile {
			width: 100%;
			margin: 10px 0;
		}
		
		div.body div.profile p {
			margin: 0;
			font-size: 85%;
			color: #666;
		}

		div.body div.profile p.comment {
			margin: 10px 0 0 63px;
			margin-top: 10px;
		}
		
		div.body div.profile img.avatar {
			margin-right: 10px;
			padding: 2px;
			border: 1px solid #e6ecfa;
		}
		
		div.body div#rating {
			border: 1px solid #ddd;
			margin: 5px 0 20px 0;
			padding: 10px 20px;
		}
		
		div.body div#rating p.rating-callout {
			position: relative;
			display: inline;
			top: 5px;
			color: #999;
			text-align: left;
			font-size: 11.5pt;
			width: 100px;
		}
		
		div.body div#rating p.rating-callout span {
			font-size: 7pt;
			position: relative;
			top: -8px;
		}
	
			div.body div#rating div#image-group {
			}
			
		
				div.body div#rating div#image-group span.rating-text {
					position: relative;
					top: -8px;
					margin: 0 10px;
					font-size: 7.5pt;
				}
		
			span.good { color: green; }
		
			span.average { color: gray; }
		
			span.bad { color: red; }
			
			a.rating-link { text-decoration: none; }
			
			
		div.body div#comments div#comment-add {
			margin: 5px 1px 5px;
			padding-bottom: 10px;
			border-bottom: 1px solid #CCC;
			text-align: right;
		}
		
		div.body div#comments div#comment-add textarea {
			border: 1px solid #CCC;
			width: 100%;
			margin: 10px 0;

		}
		
		div.body #comments input {
			border: 1px solid #004276;
			background: #004276;
			color: white;
		}
		
		
		/* Businesses index */
		div.body .business-index {
            min-height: 625px;
		}
			div.body .business-index .header {
				position: relative;
				background-color: #e6ecfa;
				height: auto;
			}

				div.body .business-index .header h1 {
					margin: 0px;
					padding: 6px 8px;
					
					font-size: 10pt;
					font-weight: bold;
				}
				div.body .business-index .header form {
					position: absolute;
					top: 5px;
					right: 10px;
					font-size: 8pt;
				}
				div.body .business-index .header select {
					font-size: 8pt;
				}
					div.body .loading {
						float: left;
						
						width: 16px;
						height: 16px;
						
						margin-right: 5px;
						
						background: url(../images/wait.gif) no-repeat transparent top left;
						
						display: none;
					}
						div.body .loading.show {
							display: block !important;
						}

			div.body .business-index .one-item {
				position: relative;
				z-index: 10;
				min-height: 140px;
				padding: 16px 0px 4px 0px;
				border-bottom: 1px solid #999;
			}

                div.body .business-index .one-item a.thumbnail:hover {
                    border-bottom: 0px none white !important;
                }
				div.body .business-index .one-item img {
				    position: relative;
				    z-index: 10;
				    
					float: left;
					width: 140px;
					height: 125px;
					margin: 0px 10px 0px 0px;
					border: 1px solid #EEE;
				}
				
				div.body .business-index .one-item .review-profile {
					float: left;
					width: 140px;
					height: 145px;
					border-right: 1px solid #EEE;
					margin: 0px 10px 0px 0px;
				}
				
				div.body .business-index .one-item .review-profile img {
					height: 75px;
					width: 75px;
					padding: 0 55px 10px 0;
					border-width: 0px !important;
				}
				
				div.body .business-index .one-item .review-profile p {
					margin: 0;
				}
				
				div.body .business-index .one-item .review-ratings {
					margin-top: 10px;
				}

				div.body .business-index .one-item div.rating-box {
					position: relative;
					float: right;
					
					border: 1px solid #999;
					padding: 6px;
					
					width: 115px;
					
					color: #999
				}
					div.body .business-index .one-item div.rating-box span {
						position: absolute;
						right: 6px;
					}

				div.body .business-index .one-item a {
					text-decoration: none;
				}
                    div.body .business-index .one-item .item-body {
                        position: relative;
                        z-index: 5;
                    }
                    	div.body .business-index .one-item .item-body p {
                    		margin: 15px 0 10px 152px;
                    		color: #999;
                    	}
					div.body .business-index .one-item h1 a:hover {
						border-bottom: 1px solid #003661;
					}
                    div.body .business-index .one-item div.view-more {
                        position: absolute;
                        right: 0.5em;
                        bottom: 1.5em;
                    }
                        div.body .business-index .one-item div.view-more a {
                            font-weight: normal;
                            white-space: nowrap;
                            text-decoration: underline;
                        }

				div.body .business-index .one-item h1 {
					font-size: 12pt;
				}
				div.body .business-index .one-item h2 {
					font-size: 10pt;
					font-weight: normal;
					color: #999;
					
					padding: 0px;
					margin: 0px;
				}
				div.body .business-index .one-item .price {
					line-height: 1em;
					margin: 0.8em 0 0.5em 0;
				}


	div.right-sidebar {
		position: absolute;
		top: 33px;
		right: 0px;
		
		width: 240px;
		
		/*display: none;*/
	}

		div.right-sidebar .box {
			margin-bottom: 25px;
		}

		div.right-sidebar .scrollable {
			height: 200px;
			overflow: auto;
			
			border: 1px solid #CCC;
			margin: 1px 0px 0px 0px;
			
			padding: 4px 4px 4px 4px;
		}
		
		div.right-sidebar div#photo-gallery {
			margin: 5px 0;
			height: 290px;
			width: 255px;
			overflow: auto; 
		}
		
			div.right-sidebar div#photo-gallery img {
				margin: 1px;
				display: block;
				float: left;
				
				width: 75px;
				height: 75px;
				
				cursor: pointer;
			}
		
		div.right-sidebar a {
			text-decoration: none;
		}

		div.box h1,
		div.right-sidebar h1 {
			margin: 0px;
			padding: 3px 8px;
			
			font-size: 10pt;
			font-weight: bold;
			
			background-color: #e6ecfa;
			color: black;
		}

		div.right-sidebar h2 {
			font-size: 9pt;
		}

		div.right-sidebar img {
			float: left;
			
			width: 70px;
			height: 70px;
			
			border: 1px solid #EEE;
			margin: 0px 10px 0px 0px;
			
		}

		/* Popular Blogs box */
		div.right-sidebar .popular-blogs .one-item {
			clear: both;
			margin: 0px 0px 0px 0px;
			
			height: 75px;
		}
		div.right-sidebar .popular-blogs p.comments {
			text-align: right;
			font-size: 8pt;
		}
			div.right-sidebar .popular-blogs p.comments a {
				color: #999;
			}

		/* Most Recent Reviews */
		div.right-sidebar .recent-reviews .one-item {
			clear: both;
			margin: 0px 0px 0px 0px;

			height: 75px;
		}
		div.right-sidebar .recent-reviews p.comments {
			text-align: right;
			font-size: 8pt;
		}
			div.right-sidebar .recent-reviews p.comments a {
				color: #999;
			}
			
		/* Advertising box */
		.box.deals img,
		.box.advertising img {
			float: left;
			
			width: 70px;
			height: 70px;
			
			border: 1px solid #EEE;
			margin: 0px 10px 0px 0px;
		}
		
		.box.deals .one-item,
		.box.advertising .one-item {
			clear: both;
			margin: 1em 0;
			
			height: 75px;
		}
		.box.advertising h1,
		.box.deals h1 {
			margin: 0px;
			padding: 3px 8px;
			
			font-size: 10pt;
			
			background-color: #e6ecfa;
		}

		.box.advertising h2,
		.box.deals h2 {
			font-size: 9pt;
			margin: 0 0 0.3em 0;
		}

		.box.advertising p,
		.box.deals p {
			font-size: 8pt;
			margin: 0 0 1em 0;
		}
			.box.deals p a,
			.box.advertising p a {
				color: #999;
				text-decoration: none;
			}
		
		.box.deals .with-us,
		.box.advertising .with-us {
			text-align: right;
			margin-top: 0.8em;
		}
			.box.deals .with-us a,
			.box.advertising .with-us a {
				text-decoration: underline;
			}
			
		/* Discussions box */
		.box.discussions h1 {
			margin: 0px;
			padding: 3px 8px;
			
			font-size: 10pt;
			
			background-color: #e6ecfa;
		}
		
		

div.footer {
	position: relative;
	
	width: 100%;
	height: 95px;
	
	background-color: black;
	color: #999;
		
	font-size: 8pt;
	
	margin-top: -95px;
}
	div.footer.static {
		position: static !important;
		bottom: auto !important;
	}

	div.footer .wrapper {
		position: relative;
		
		width: 985px;
		
		margin: 0 auto;
		padding: 25px 0 0 0;
	}

	div.footer ul.navigation {
		float: right;

		list-style-type: none;
		
		margin: 0;
		padding: 0;
	}

		div.footer ul.navigation li {
			float: left;
			
			border-left: 1px solid #999;
			padding: 0 6px;
		}
			div.footer ul.navigation li:first-child {
				border-left-width: 0px !important;
			}
		div.footer ul.navigation a {
			color: #999;
			text-decoration: none;
		}

		
/** Repeatable elements **/
/* Member badge */
.member-badge {
	font-size: 8pt;
	color: #888;
	
	position: relative;
	
	margin-bottom: 1.5em;
}
	.member-badge a {
		font-size: 10pt;
		text-decoration: none;
	}
	.member-badge img {
		width: 48px;
		height: 48px;
		
		border: 1px solid #EEE;
		margin: -3px 10px 0px 0px;
	}
    .member-badge div.badge-content {
        margin-left: 60px;
    }
    .member-badge div.thumbnail {
        position: absolute;
        left: 0; top: 0;
    }
    .member-badge div.element {
        float: left;
        padding-right: 3px;
        white-space: nowrap;
    }
    .member-badge div.element.clear {
        clear: left;
    }

/* Business badge */
.business-badge {
    font-size: 8pt;
    color: #888;
    
    height: 50px;
    margin: 1em 0;
    
    display: none;
    clear: both;
}
    .business-badge a {
        text-decoration: none;
        font-size: 10pt;
    }
    .business-badge img {
        float: left;
        
        width: 48px;
        height: 48px;
        
        border: 1px solid #EEE;
        margin: -3px 10px 0px 0px;
    }
    .business-badge h2 {
        font-size: 9pt;
        font-weight: normal;
        margin: 0;
    }
    .business-badge p {
        margin: 0;
    }

/* Story badge */
.story-badge {
    position: relative;
    
	font-size: 9pt;
	color: #888;
	
	height: 50px;
	margin: 1em 0;
}
    .story-badge a {
        text-decoration: none;
    }
    .story-badge div.story-comments-link {
        position: absolute;
        bottom: 0;
        left: 55px;
    }
        .story-badge div.story-comments-link a {
            color: #999;
        }
    .story-badge div.ph,
    .story-badge img {
        float: left;
        
        width: 48px;
        height: 48px;
        
        border: 1px solid #EEE;
        margin: 0px 5px 0px 0px;
    }

/* Posted date */
div.posted-date {
	float: right;
	
	font-size: 8pt;
	color: #888;
}
	div.posted-date abbr {
		cursor: help;
	}

	
/* Discussions box */

.column.discussions,
.box.discussions {
	
}
	.column.discussions h2,
	.box.discussions h2 {
		font-size: 8pt;
		font-weight: normal;
		color: #888;
		
		margin: 0 2px;
	}
	
	.column.discussions .one-discussion,
	.box.discussions .one-discussion {
		padding: 8px 2px;
		border-bottom: 1px dotted #AAA;
		clear: both;
		
		font-size: 9pt;
		text-align: right;
		
	}
		.column.discussions .one-discussion a,
		.box.discussions .one-discussion a {
			text-decoration: none;
			color: #999 !important;
		}
	
		.column.discussions .one-discussion .topic,
		.box.discussions .one-discussion .topic {
			float: left;
		}
		
		.column.discussions .one-discussion .comments,
		.box.discussions .one-discussion .comments {
			font-size: 8pt;
		}
		
		.column.discussions .more,
		.box.discussions .more {
			text-align: right;
			margin: 8px 0 0 0;
		}
			.column.discussions .more a,
			.box.discussions .more a {
				text-decoration: underline;
			}