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

.helpdesk-portlet-samenbeter {

	$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);

	.clear {
		clear: both;
	}

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

	.ww-input-box2 {
		width: 99%;
		height: 210px;
		background:#F0F0F0;
	}

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

	.title-header {
		width:100%;
		display: table-cell; 
		text-align: center;
		margin: 0;
	}
		
	.title-header a {
		text-decoration: none;
	}
	.title-header a:hover {
		text-decoration: none;
	}
		
	.title-header h3 {
		padding: 0;
		font-size: 16px;
		font-weight: normal;
	}

	.item-text {
		-ms-word-break: break-all;
		word-break: normal; 
		word-break: break-word;
		word-wrap: break-word;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		hyphens: auto;					
	}
	
	.item-line {
		margin-top: 7px;
	}
	.item-line a {
		text-decoration: none;
	}
	.item-line a:hover {
		text-decoration: none;
	}
	.item-thumb {
		float: left;
		width: 50px;
		height: 50px;
		border-radius: 50px;
		-webkit-border-radius: 50px;
		-moz-border-radius: 50px;
		border: none;
		overflow: hidden;
				
		img {
			width: 100%;
			height: 100%;
		}
	}
	
	.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;
				border-radius:84px;
				-webkit-border-radius:84px;
				-moz-border-radius:84px;
				border:#f5f5f5 solid 1px;
				overflow: hidden;
				
				img {
					width:100%;
					height:100%;
				}
			}
		
			.ww-grid-entry-thumb2 {
				float:left;
				width:84px;
				height:84px;
				-webkit-border-radius: $radius-b; 
				-moz-border-radius: $radius-b; 
				border-radius: $radius-b; 
				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;
					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;					
				}
			}
		}
	}
}

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

		.ww-input-box2 {
			width: 350px;
			height: 150px;
			background:#F0F0F0;
		}

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