@import "compass";
@import "mixins";

.groups-portlet {

	$orange-color: #E98003;
	$radius-a: 6px;
	$radius-b: 8px;
	$shadow-a: 0 1px 2px rgba(0,0,0,0.4);
	$shadow-b: 0 2px 3px rgba(0,0,0,0.4);

	.search-query {
		width:200px;
	}
	
	.clear {
		clear: both;
	}
	
	.detail-column-last {
		overflow: visible;

		.detail-column-content {
			padding: 0px 30px;
		}
	}

	.ww-portlet {
		h2 {
			font-size: 22px;
			color: $orange-color;
		} 
		h3 {
			font-size: 20px; 
			color: #999;
		} 
		h4 {
			font-size: 18px;
			color: #000;
		} 
	}
	
	.ww-portlet2 {
		padding: 8px;
		margin-bottom: 5px;
		border: none;
		background: #fcfcfc;
		-webkit-border-radius: $radius-a;
		-moz-border-radius: $radius-a;
		border-radius: $radius-a;
		-webkit-box-shadow: $shadow-a;
		-moz-box-shadow: $shadow-a;
		box-shadow: $shadow-a;
			
		h2 {
			font-size: 22px;
			font-weight: bold;
			color: $orange-color;
		} 
		h3 {
			font-size: 20px; 
			color: #999;
		} 
		h4 {
			font-size: 18px;
			color: #000;
		} 
	}
	
	.ww-entry-thumb {
		width:100%;

		img {
			min-width: 50%;
			max-width: 96%;
			max-height: 275px;
			-webkit-border-radius: $radius-b; 
			-moz-border-radius: $radius-b; 
			border-radius: $radius-b; 
		}
	}
	
	.ww-entry-thumb2 {
		width: 96px;
		height: 96px;
		background: #fff;
		overflow: hidden;
				
		img {
			width: 100%;
			height: 100%;
			-webkit-border-radius: $radius-b; 
			-moz-border-radius: $radius-b; 
			border-radius: $radius-b; 
			border: #f5f5f5 solid 1px;
		}
	}
	
	.ww-entry-text {
		width: 98%;
		text-align: left;
		word-wrap: break-word;
		margin-bottom: 10px;
		font-size: 1em;
		line-height: 145%;
		padding: 10px;
		
		a:link, a:visited { color:$orange-color; }
		a:hover { text-decoration:underline; }
	}

	.ww-entry-text2 {
		text-align: left;
		margin-bottom: 10px;
		font-size: 1em;
		line-height: 145%;

		-ms-word-break: break-all;
		word-break: normal; 
		word-break: break-word;
		word-wrap: break-word;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		hyphens: auto;					
	}

	.ww-entry-text3 {
		text-align: left;
		margin-bottom: 7px;
		font-size: 1em;
		line-height: 130%;

		-ms-word-break: break-all;
		word-break: normal; 
		word-break: break-word;
		word-wrap: break-word;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		hyphens: auto;					
	}

	.ww-entry-name {
		word-wrap: break-word;
		font-size: 1.12em;
		line-height: 125%;
		font-weight: bold;
		color: $orange-color;
	}
				
	.ww-entry-author {
		color: #777;
	}
	.ww-entry-author a {
		color:$orange-color;
		text-decoration:none;
	}
	.ww-entry-author a:hover {
		color:$orange-color;
		text-decoration:underline;
	}
	
	.ww-entry-date {
		color: #777;
	}
	
	.ww-search {
		margin-bottom:50px;
	}
	
	.ww-select-box {
		width:185px;
	}

	.ww-input {
		width:500px;
	}
	
	.ww-input-box {
		width:500px;
		height:80px;
	}

	.ww-input-reply {
		width:500px;
		height:50px;
	}

	.ww-grid-container {
		width: 100%;

		.ww-grid-entry {
			margin: 0 0 10px 0;
			width: 100%;
			min-height: 86px;
			padding: 8px;
			border: none;
			background: #fafafa;

			.ww-grid-entry-thumb {
				width:84px;
				-webkit-border-radius: $radius-b; 
				-moz-border-radius: $radius-b; 
				border-radius: $radius-b; 
				text-align:center;
				overflow:hidden;
				
				img {
					-webkit-border-radius: $radius-b; 
					-moz-border-radius: $radius-b; 
					border-radius: $radius-b; 
				}
			}
		
			.ww-grid-entry-info {
				margin: 0;
				margin-top: -86px;
				padding: 0;
				padding-left: 100px;
				font-size: 1em;
			
				.ww-grid-entry-name {
					word-wrap: break-word;
					font-size: 1.11em;
					line-height: 125%;
					font-weight: bold;
					color: $orange-color;
					margin-bottom: 4px;
				}
				.ww-grid-entry-name a, .ww-grid-entry-name a:hover {
					color: $orange-color;
					text-decoration: none;

					-ms-word-break: break-all;
					word-break: normal; 
					word-break: break-word;
					word-wrap: break-word;
					-webkit-hyphens: auto;
					-moz-hyphens: auto;
					hyphens: auto;					
				}

				.ww-grid-entry-text {
					text-align: left;
					margin-bottom: 2px;
					
					-ms-word-break: break-all;
					word-break: normal; 
					word-break: break-word;
					word-wrap: break-word;
					-webkit-hyphens: auto;
					-moz-hyphens: auto;
					hyphens: auto;					
				}
				.ww-grid-entry-text a, .ww-grid-entry-text a:hover {
					color:#000;
					text-decoration:none;
				}

				.ww-grid-entry-subs {
					padding-top: 3px;
					font-size: .9em;
					color: #999;
					
					-ms-word-break: break-all;
					word-break: normal; 
					word-break: break-word;
					word-wrap: break-word;
					-webkit-hyphens: auto;
					-moz-hyphens: auto;
					hyphens: auto;					
				}
				.ww-grid-entry-subs a, .ww-grid-entry-subs a:hover {
					color: $orange-color;
					text-decoration: none;
				}
			}
		}

		.ww-grid-entry2 {
			margin: 0 0 15px 0;
			min-height: 86px;
			padding: 8px;
			border: none;
			background: #fcfcfc;
			-webkit-border-radius: $radius-a; 
			-moz-border-radius: $radius-a; 
			border-radius: $radius-a; 
			-webkit-box-shadow: $shadow-a;
			-moz-box-shadow: $shadow-a;
			box-shadow: $shadow-a;

			.ww-grid-entry-thumb {
				width:84px;
				height:84px;
				-webkit-border-radius: $radius-b; 
				-moz-border-radius: $radius-b; 
				border-radius: $radius-b; 
				text-align:center;
				overflow:hidden;
				
				img {
					-webkit-border-radius: $radius-b; 
					-moz-border-radius: $radius-b; 
					border-radius: $radius-b; 
				}
			}
		
			.ww-grid-entry-info {
				margin: 0;
				margin-top: -86px;
				padding: 0;
				padding-left: 100px;
			
				.ww-grid-entry-name {
					word-wrap: break-word;
					font-size: 1.11em;
					line-height: 125%;
					font-weight: bold;
					color: $orange-color;
					margin-bottom: 4px;
				}
				.ww-grid-entry-name a, .ww-grid-entry-name a:hover {
					color: $orange-color;
					text-decoration: none;
					
					-ms-word-break: break-all;
					word-break: normal; 
					word-break: break-word;
					word-wrap: break-word;
					-webkit-hyphens: auto;
					-moz-hyphens: auto;
					hyphens: auto;					
				}

				.ww-grid-entry-text {
					text-align: left;
					word-wrap: break-word;
					margin-bottom: 2px;
				}
				.ww-grid-entry-text a, .ww-grid-entry-text a:hover {
					color: #000;
					text-decoration:none;
					
					-ms-word-break: break-all;
					word-break: normal; 
					word-break: break-word;
					word-wrap: break-word;
					-webkit-hyphens: auto;
					-moz-hyphens: auto;
					hyphens: auto;					
				}

				.ww-grid-entry-subs {
					padding-top: 4px;
					font-size: .88em;
					color: #999;
					word-wrap: break-word;
				}
				.ww-grid-entry-subs a, .ww-grid-entry-subs a:hover {
					color: $orange-color;
					text-decoration: none;
					
					-ms-word-break: break-all;
					word-break: normal; 
					word-break: break-word;
					word-wrap: break-word;
					-webkit-hyphens: auto;
					-moz-hyphens: auto;
					hyphens: auto;					
				}
			}
		}
	}

	.ww-grid-container1 {
		width: 100%;

		.ww-grid-entry {
			margin: 0 0 20px 0;
			width: 100%;
			padding:0;
			border:none;

			.ww-grid-entry-thumb1 {
				float:left;
				width:84px;
				height:84px;
				-webkit-border-radius:84px;
				-moz-border-radius:84px;
				border-radius:84px;
				border:#f5f5f5 solid 1px;
				overflow: hidden;
				
				img {
					width:100%;
					height:100%;
							   
				}
			}
		
			.ww-grid-entry-thumb2 {
				float:left;
				width:84px;
				height:84px;
				border:#f5f5f5 solid 1px;
				overflow: hidden;
				
				img {
					width:100%;
					height:100%;
				}
			}
		
			.ww-grid-entry-info {
				float:left;
				margin:0;
				margin-left:20px;
			
				.ww-grid-entry-name {
					word-wrap: break-word;
					font-weight: bold;
					font-size: 1.12em;
					color:$orange-color;
					padding: 10px;
				}
				.ww-grid-entry-name a, .ww-grid-entry-name a:hover {
					color:$orange-color;
					text-decoration:none;

					-ms-word-break: break-all;
					word-break: normal; 
					word-break: break-word;
					word-wrap: break-word;
					-webkit-hyphens: auto;
					-moz-hyphens: auto;
					hyphens: auto;					
				}

				.ww-grid-entry-text {
					background: #f5f5f5;
					text-align: left;
					word-wrap: break-word;
					font-size: 1em;
					line-height: 125%;
					padding: 10px;
				}
				.ww-grid-entry-text a, .ww-grid-entry-text a:hover{
					color:#000;
					text-decoration:none;
					
					-ms-word-break: break-all;
					word-break: normal; 
					word-break: break-word;
					word-wrap: break-word;
					-webkit-hyphens: auto;
					-moz-hyphens: auto;
					hyphens: auto;					
				}

				.ww-grid-entry-subs {
					padding-top: 5px;
					font-size: .9em;
					color: #999;
					
					-ms-word-break: break-all;
					word-break: normal; 
					word-break: break-word;
					word-wrap: break-word;
					-webkit-hyphens: auto;
					-moz-hyphens: auto;
					hyphens: auto;					
				}
				.ww-grid-entry-subs a, .ww-grid-entry-subs a:hover {
					color: $orange-color;
					text-decoration: none;
				}
			}
		}
	}
	
	.ww-grid-container2 {
		width: 100%;

		.ww-grid-entry {
			margin: 0 15px 15px 0;
			padding: 8px;
			float: left;
			width: 220px;
			height:270px;
			overflow: hidden;
			border: none;
			background: #fcfcfc;
			-webkit-border-radius: $radius-a; 
			-moz-border-radius: $radius-a; 
			border-radius: $radius-a; 
			-webkit-box-shadow: $shadow-a;
			-moz-box-shadow: $shadow-a;
			box-shadow: $shadow-a;
			
			.ww-grid-entry-thumb {
				height:125px;
				-webkit-border-radius: $radius-b; 
				-moz-border-radius: $radius-b; 
				border-radius: $radius-b; 
				text-align:center;
				overflow:hidden;
			}
		
			.ww-grid-entry-info {
				margin-top: 10px;
				padding: 0;
				font-size: 1em;
			
				.ww-grid-entry-name {
					word-wrap: break-word;
					font-size: 1.11em;
					line-height: 125%;
					font-weight: bold;
					color: $orange-color;
					margin-bottom: 4px;
				}
				.ww-grid-entry-name a, .ww-grid-entry-name a:hover {
					color: $orange-color;
					text-decoration: none;

					-ms-word-break: break-all;
					word-break: normal; 
					word-break: break-word;
					word-wrap: break-word;
					-webkit-hyphens: auto;
					-moz-hyphens: auto;
					hyphens: auto;					
				}

				.ww-grid-entry-text {
					text-align: left;
					margin-bottom: 2px;
					
					-ms-word-break: break-all;
					word-break: normal; 
					word-break: break-word;
					word-wrap: break-word;
					-webkit-hyphens: auto;
					-moz-hyphens: auto;
					hyphens: auto;					
				}
				.ww-grid-entry-text a, .ww-grid-entry-text a:hover {
					color:#000;
					text-decoration:none;
				}

				.ww-grid-entry-subs {
					padding-top: 5px;
					font-size: .9em;
					color: #999;
					
					-ms-word-break: break-all;
					word-break: normal; 
					word-break: break-word;
					word-wrap: break-word;
					-webkit-hyphens: auto;
					-moz-hyphens: auto;
					hyphens: auto;					
				}
				.ww-grid-entry-subs a, .ww-grid-entry-subs a:hover {
					color: $orange-color;
					text-decoration: none;
				}
			}
		}

		.ww-grid-entry2 {
			margin: 0 25px 25px 0;
			padding: 8px;
			float: left;
			width: 220px;
			height:270px;
			overflow: hidden;
			border: none;
			background: #fcfcfc;
			-webkit-border-radius: $radius-a; 
			-moz-border-radius: $radius-a; 
			border-radius: $radius-a; 
			-webkit-box-shadow: $shadow-a;
			-moz-box-shadow: $shadow-a;
			box-shadow: $shadow-a;
			
			.ww-grid-entry-thumb {
				height:125px;
				-webkit-border-radius: $radius-b; 
				-moz-border-radius: $radius-b; 
				border-radius: $radius-b; 
				text-align:center;
				overflow:hidden;
				
				img {
					-webkit-border-radius: $radius-b; 
					-moz-border-radius: $radius-b; 
					border-radius: $radius-b; 
				}
			}
		
			.ww-grid-entry-info {
				margin-top: 10px;
				padding: 0;
				font-size: 1em;
			
				.ww-grid-entry-name {
					word-wrap: break-word;
					font-size: 1.11em;
					line-height: 125%;
					font-weight: bold;
					color: $orange-color;
					margin-bottom: 4px;
				}
				.ww-grid-entry-name a, .ww-grid-entry-name a:hover {
					color: $orange-color;
					text-decoration: none;

					-ms-word-break: break-all;
					word-break: normal; 
					word-break: break-word;
					word-wrap: break-word;
					-webkit-hyphens: auto;
					-moz-hyphens: auto;
					hyphens: auto;					
				}

				.ww-grid-entry-text {
					text-align: left;
					margin-bottom: 2px;
					
					-ms-word-break: break-all;
					word-break: normal; 
					word-break: break-word;
					word-wrap: break-word;
					-webkit-hyphens: auto;
					-moz-hyphens: auto;
					hyphens: auto;					
				}
				.ww-grid-entry-text a, .ww-grid-entry-text a:hover {
					color:#000;
					text-decoration:none;
				}

				.ww-grid-entry-subs {
					padding-top: 5px;
					font-size: .9em;
					color: #999;
					
					-ms-word-break: break-all;
					word-break: normal; 
					word-break: break-word;
					word-wrap: break-word;
					-webkit-hyphens: auto;
					-moz-hyphens: auto;
					hyphens: auto;					
				}
				.ww-grid-entry-subs a, .ww-grid-entry-subs a:hover {
					color: $orange-color;
					text-decoration: none;
				}
			}
		}
	}

	.ww-group-container {
		width: 100%;

		.ww-group-entry{
			margin: 0;
			width: 100%;
			padding:0;
			border:none;

			.ww-group-entry-name {
				font-weight: bold;
				font-size: 1.7em;
				color:$orange-color;
				padding: 0px;
			}
		}
	}
	
	.ww-member-container {
		width: 100%;

		.ww-member-entry{
			background: #fcfcfc;
			margin: 0 10px 10px 0;
			float: left;
			text-align: center;
			width: 159px;
			height:169px;
			padding:10px 0 10px 0;
			overflow: hidden;
			border:none;
			-webkit-border-radius: $radius-a; 
			-moz-border-radius: $radius-a; 
			border-radius: $radius-a; 
			-webkit-box-shadow: $shadow-a;
			-moz-box-shadow: $shadow-a;
			box-shadow: $shadow-a;

			.ww-member-entry-thumb {
				float:none;
				width:112px;
				height:112px;
				-webkit-border-radius:84px;
				-moz-border-radius:84px;
				border-radius:84px;
				border: 2px solid #fefefe;
				margin:0 auto;
				overflow: hidden;
			}
		
			.ww-member-entry-thumb-online {
				float:none;
				width:112px;
				height:112px;
				-webkit-border-radius:84px;
				-moz-border-radius:84px;
				border-radius:84px;
				border: 2px solid lime;
				margin:0 auto;
				overflow: hidden;
			}
		
			.ww-member-entry-name {
				float:none;
				font-size: 16px;
				font-weight: bold;
				color:$orange-color;
				padding:5px;
			}
			.ww-member-entry-name a, .ww-member-entry-name a:hover {
				color:$orange-color;
				text-decoration:none;
			}

			.ww-member-entry-menu {
				float:none;
				padding:5px;
				color: #666;
			}
		}
	}	

	.ww-member-container2 {
		width: 100%;

		.ww-grid-entry2 {
			margin: 0 0 15px 0;
			min-height: 86px;
			padding: 8px;
			border: none;
			background: #fcfcfc;
			-webkit-border-radius: $radius-a; 
			-moz-border-radius: $radius-a; 
			border-radius: $radius-a; 
			-webkit-box-shadow: $shadow-a;
			-moz-box-shadow: $shadow-a;
			box-shadow: $shadow-a;

			.ww-member-entry-thumb {
				width: 84px;
				height: 84px;
				background: #fff;
				border: #fafafa solid 1px;
				-webkit-border-radius:84px;
				-moz-border-radius:84px;
				border-radius:84px;
				overflow: hidden;
				
				img {
					width: 100%;
					height: 100%;
				}
			}
		
			.ww-member-entry-thumb2 {
				width:84px;
				height:84px;
				display:inline-block;
				-webkit-border-radius:84px;
				-moz-border-radius:84px;
				border-radius:84px;
				border: #fafafa solid 1px;
				overflow: hidden;
				
				img {
					height:84px;
					min-width:84px;
				}
			}

			.ww-member-entry-thumb-online {
				width: 80px;
				height: 80px;
				background: #fff;
				border: 2px solid lime;
				-webkit-border-radius:84px;
				-moz-border-radius:84px;
				border-radius:84px;
				overflow: hidden;
				
				img {
					width: 100%;
					height: 100%;
				}
			}

			.ww-member-entry-info {
				margin: 0;
				margin-top: -84px;
				padding: 0;
				padding-left: 100px;
			
				.ww-member-entry-name {
					word-wrap: break-word;
					font-weight: bold;
					font-size: 1.12em;
					color:$orange-color;
					margin-bottom: 4px;
				}
				.ww-member-entry-name a, .ww-member-entry-name a:hover{
					color:$orange-color;
					text-decoration: none;
					
					-ms-word-break: break-all;
					word-break: normal; 
					word-break: break-word;
					word-wrap: break-word;
					-webkit-hyphens: auto;
					-moz-hyphens: auto;
					hyphens: auto;					
				}

				.ww-member-entry-text {
					text-align: left;
					word-wrap: break-word;
					margin-bottom: 2px;
				}
				.ww-member-entry-text a, .ww-member-entry-text a:hover{
					color:#000;
					text-decoration:none;
					
					-ms-word-break: break-all;
					word-break: normal; 
					word-break: break-word; 
					word-wrap: break-word;
					-webkit-hyphens: auto;
					-moz-hyphens: auto;
					hyphens: auto;					
				}

				.ww-member-entry-subs {
					float: right;
					padding-right: 10px;
					font-size: .88em;
					color:#999;
				}
				.ww-member-entry-subs a, .ww-member-entry-subs a:hover{
					color:$orange-color;
					text-decoration: none;

					-ms-word-break: break-all;
					word-break: normal; 
					word-break: break-word; 
					word-wrap: break-word;
					-webkit-hyphens: auto;
					-moz-hyphens: auto;
					hyphens: auto;					
				}
			}
		}
	}
	
	.ww-member-profile {
		width: 100%;
		padding: 5px 0px 5px 5px;
		box-sizing: border-box;
		background: #fcfcfc;
		
		.ww-user-thumb {
			width:115px;
			height:115px;
			-webkit-border-radius:84px;
			-moz-border-radius:84px;
			border-radius:84px;
			border: 2px solid #f5f5f5;
			margin:0 auto;
			overflow: hidden;
		}

		.ww-user-name {
			font-size: 22px;
			font-weight: bold;
			color: $orange-color;
			margin-bottom: 10px;

			-ms-word-break: break-all;
			word-break:normal; 
			word-break:break-word; 
			word-wrap:break-word;
			-webkit-hyphens: auto;
			-moz-hyphens: auto;
			hyphens: auto;					
		}
		
		.ww-user-text {
			text-align: left;
			margin-bottom: 5px;

			-ms-word-break: break-all;
			word-break:normal; 
			word-break:break-word; 
			word-wrap:break-word;
			-webkit-hyphens: auto;
			-moz-hyphens: auto;
			hyphens: auto;					
		}
		
		.ww-user-subs {
			font-size: 15px;
			color:#999;
		}
	}

	.accordion-group {
		border: 0;
	}
}

@include respond-to(phone) {
	.groups-portlet {
		.ww-input {
			width:275px;
		}
	
		.ww-input-box {
			width:275px;
			height:80px;
		}

		.ww-input-reply {
			width:275px;
			height:40px;
		}
	}
}