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

.news-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);

	.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;
		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-number {
		width:80px;
	}
	
	.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;
				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;
				font-size: 1em;
			
				.ww-grid-entry-name {
					word-wrap: break-word;
					font-size: 1.12em;
					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.12em;
					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;					
				}
			}
		}
	}

	.accordion-group {
		border: 0;
	}
}

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

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