@base_url: "/assets/site/images";
@font_family: 'Maven Pro';
@font_size: 12px;

@blue_1: #6fb5e9;
@blue_2: #0384c4;
@blue_3: lighten(@blue_2, 40%);
@blue_4: darken(@blue_2, 5%);
@white: #FFFFFF;
@black: #333;
@grey_1: #f6f6f6;
@grey_2: #e6e6e6;
@grey_3: #bbb;
@grey_4: #f8f8f8;
@grey_5: #fbfbfb;
@grey_6: #666;
@green: #8b8c30;
@red: #a80000;

body {
	background: @white url("@{base_url}/stripe-white.png");
	font-family: @font_family;
	font-size: @font_size;
}

.container-header {
	.logo {
		padding: 30px 0 0 0;
		height: 65px;
		float: left;
		font-size: 16px;
		font-weight: 700;
		color: @blue_2;
		text-align: right;
		
		span {
			padding: 0 10px 0 0;
			letter-spacing: -1px;
		}
	}
	
	.flag {
		display: none;
	}
}

.container-nav {
	background: @blue_1;
	border-bottom: 5px solid @grey_1;
	border-top: 5px solid @grey_1;
	height: 25px;
	
	.top-nav {
		height: 25px;
		
		li {
			float: left;
			display: block;
			border-right: 1px solid @white;
			padding: 5px 12px 0 12px;
			height: 20px;
			background: @blue_2;
			
			a {
				color: @white;
				text-decoration: none;
				font-size: 1 + @font_size;
				
				&:hover {
					color: @blue_3;
				}
			}
			
			&:last-child {
				border: none;
				background: @blue_1;
			}
			
			&:first-child {
				background: @blue_1;
			}
		}
	}
}

.container-content {
	
	.box {
		.title {
			font-size: @font_size + 6;
			color: @black;
			border-bottom: 5px solid @grey_2;
			padding: 20px 0 5px 0;
			font-weight: 500;
			margin: 0 0 10px 0;
			letter-spacing: -1px;
			line-height: 15px;
			
			&.no-border {
				border: none;
				margin: 0;
			}
			
			&.more-pad {
				padding: 50px 0 5px 0;
			}
			
			&.pad {
				padding: 30px 0 5px 0;
			}
			
			a {
				font-size: @font_size + 3;
				font-weight: 900;
				color: @blue_2;
				text-decoration: none;
				letter-spacing: -1px;
			}
		}
		
		.text-content {
			font-size: @font_size + 2;
			
			p {
				padding: 0 0 15px 0;
			}
			
			strong {
				font-weight: 700;
			}
			
		}
		
		.graph {
			border-bottom: 1px solid @grey_2;
			border-top: 1px solid @grey_2;
			background: @grey_1;
			padding: 10px;
			
			#graph-friends {
				padding: 20px 0 0 0;
			}
			
			#graph-listed {
				padding: 20px 0 0 0;
			}
		}
		
		.timeline {
			border-bottom: 1px solid @grey_2;
			border-top: 1px solid @grey_2;
			background: @grey_1;
			padding: 10px;
			height: 573px;
			
			.tweet-date {
				text-align: center;
				background: @white;
				font-weight: 700;
				padding: 5px;
				color: @blue_2;
			}
			
			.tweet-text {
				font-size: 11px;
				padding: 10px 5px;	
			}
	
		}
		
		.profile {
			border-bottom: 1px solid @grey_2;
			border-top: 1px solid @grey_2;
			background: @grey_1;
			padding: 10px;
			height: 161px;
			
			table{
				border-collapse: collapse;
			}
			
			.data {
				border-bottom: 1px solid @grey_2;
				
				.img {
					padding: 10px 0 10px 0;
					img {
						.border-radius(3px);
					}
				}
				
				.name {
					padding: 0 20px 0 10px;
					font-size: 15px;
					font-weight: 700;
					letter-spacing: -1px;
					color: @blue_4;
					min-width: 100px;
					
					span {
						font-size: 12px;
						font-weight: 400;
						color: @blue_2;
					}
				}
				
				.desc {
					font-size: 13px;
					font-weight: 400;
					letter-spacing: -1px;
					color: @blue_2;
					padding: 0 10px 0 20px;
				}
			}
			
			.stats {
				background: @white;
				border-bottom: 1px solid @grey_2;
				
				td {
					padding: 10px 0;
					text-align: center;
					font-weight: 900;
					color: @black;
					font-size: 14px;
					
					span {
						font-weight: 400;
						font-size: 12px;
					}
					
					.green {
						color: @green;
					}
					
					.red {
						color: @red;
					}
				}
			}
			
			.myrank {
				td {
					font-weight: 900;
					color: @black;
					font-size: 25px;
					text-align: center;
					padding: 5px 0 0 0;
					line-height: 15px;
					
					span {
						color: @black;
						font-weight: 400;
						font-size: 12px;
					}
					
					.green {
						color: @green;
					}
					
					.red {
						color: @red;
					}
				}
			}
			
		}
		
		.banner-box {
			width: 300px;
			height: 250px;
			background: @grey_2;
		}
		
		.banner-full {
			width: 728px;
			height: 90px;
			background: @grey_2;
			margin: 30px 0 0 106px;
		}
		
		.share-box {
			margin: 10px 0 0 0;
			padding: 10px 0 0 20px;
			height: 30px;
			border-bottom: 1px solid @grey_2;
			border-top: 1px solid @grey_2;
			background: @grey_1;
			
			&.others {
				margin: 10px 0 10px 0;
			}
		}
		
		.share-tweet {
			float: left;
			width: 120px;
		}
		
		.share-plus {
			float: left;
			width: 80px;
		}
		
		.share-like {
			float: left;
			width: 90px;
		}
		
		.share-follow {
			float: left;
			width: 200px;
		}
		
		.share-links {
			float: left;
			width: 468px;
			height: 15px;
			padding: 2px 0 0 0;
		}
		
		.friends {
			li {
				float: left;
				padding: 0 4px 1px 0;
				
				a {
					img {
						.opacity(80);
						.border-radius(3px);
					}
					
					&:hover {
						img {
							.opacity(100);
						}
					}
				}
			}
		}
		
		.last_updated {
			li {
				float: left;
				padding: 0 1px 1px 0;
				
				a {
					img {
						.opacity(80);
						.border-radius(3px);
					}
					
					&:hover {
						img {
							.opacity(100);
						}
					}
				}
			}
		}
		
		.search {
			input {
				border: 1px solid @grey_2;
				font-size: 12px;
				color: @grey_3;
				font-style: italic;
				padding: 10px;
				position: relative;
				.border-radius(3px);
			}
			
			.text {
				width: 510px;
			}
			
			.btn {
				background: @blue_2;
				border: 1px solid @blue_2;
				.box-shadow;
				.border-radius(3px);
				font-weight: 900;
				color: @white;
				font-style: normal;
			}
		}
		
		.grid {
			
			width: 100%;
			border-collapse: collapse;
			border-top: 1px solid @grey_2;
			border-bottom: 1px solid @grey_2;
			
			tr {
				background: @grey_5;
				
				td {
				
				}
				
				.ladder {
					padding: 0 10px 0 20px;
					font-weight: 900;
					font-size: 15px;
					text-align: right;
					color: @grey_3;
		
					span {
						font-weight: 900;
						font-size: 22px;
					}
					
				}
				
				.grade {
					padding: 0 20px 0 0;
					text-align: right;
					font-weight: 900;
					font-size: 16px;
					color: @black;
		
					
					span {
						font-weight: 400;
						font-size: 14px;
					}
				}
				
				.img {
					padding: 10px 0;
					
					a {
						text-decoration: none;
						img {
							.border-radius(3px);
						}
						
						&:hover {
							img {
								.opacity(80);
							}
						}
					}
					
				}
				
				.name {
					padding: 0 20px 0 10px;
					font-size: 15px;
					font-weight: 400;
					letter-spacing: -1px;
					
					a {
						color: @blue_2;
						text-decoration: none;
						
						&:hover {
							color: @grey_3;
						}
					}
			
					
					.description {
						font-weight: 400;
						color: @black;
						font-size: 11px;
						letter-spacing: 0px;
					}
					
					.screen_name {
						a {
							font-weight: 700;
							color: @blue_4;
							text-decoration: none;
							
							&:hover {
								color: @grey_3;
							}
						}
					}
				}
				
				&:nth-child(odd) {
					background: @grey_4;
				}
			}
		}
	}
	
}

.container-footer {
	background: url("@{base_url}/stripe-blue.png");
	margin: 20px 0 0 0 ;
	border-top: 5px solid @grey_1;
	
	.footer {
		padding: 20px 0;
		text-align: center;
		clear: both;
		color: @white;
		
		a {
			color: @white;
			text-decoration: none;
		}
	}
}

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.box-shadow {
  -webkit-box-shadow: inset 1px 1px 0 rgba(255,255,255, .75);
     -moz-box-shadow: inset 1px 1px 0 rgba(255,255,255, .75);
          box-shadow: inset 1px 1px 0 rgba(255,255,255, .75);
}

.opacity(@opacity: 100) {
  filter: e(%("alpha(opacity=%d)", @opacity));
  -khtml-opacity: @opacity / 100;
    -moz-opacity: @opacity / 100;
         opacity: @opacity / 100;
}