@import "../../../../../Base/Content/sass/compass";
@import "../../../../../Base/Content/sass/bootstrap/variables";
@import "../Variables";

#contentRow {

	/* Links in spans often used together with glyphicons */
    .wt-linkText { color: $wizdom-link-color; }
    .wt-linkText:hover { color: $wizdom-link-hover-color; cursor: pointer; }

	/* The following style hides the social panel text by default. In Noticeboard list view the text is set to display: inline */
	.socialPanel {
		span { 
			&.wt-linkText { 
				display: none; 
			}
		}
	}

	.clear-padding {
		padding: 0 !important;
	}

	.wt-2column {


		html:not(.wt-editmode) & {

			.row-eq-height {
				@media (min-width:$screen-tablet) {
					display: -webkit-box;
					display: -webkit-flex;
					display: -ms-flexbox;
					display:         flex;
				}
			}

		}

		background-color: $wizdom-content-background-color;
		h1.wt-page-title,
		h1.wt-news-title {
			font-size:36px !important;
            input.ms-long { width: 100%; }
		}

		div.wt-page-content {
			line-height:28px;
			font-size:15px;
			img {
				// why?? possible problem with max-width in firefox / ie
				max-width: 100%;
				margin: 0; // override inline style set by SP

				&.ms-webpart-menuArrowImg  {
					max-width: none !important;
					margin: 0 !important;
				}

			}
			.ms-webpart-chrome {
				img {
					max-width:none;
				}
			}
		}

		.wt-right-column {
			.wt-pagecontrol {
				& .ms-webpart-chrome {
					box-shadow:none;
				}
			}
		}
			
		& > .container-fluid {
			margin-top:-10px;

			@media (max-width:$screen-tablet) {
				margin-top:0;
			}
		}

		&.wt-white {
			background-color:#fff;
		}

		.wt-shadow {


			@media (max-width:$screen-tablet) {
				min-height:unset !important;
			}

			position: relative;
			&:before {
				@include box-shadow(inset -15px 0 15px -15px rgba(0,0,0,0.4));
				content: " ";
				height: 100%;
				left: 0;
				position: absolute;
				top: 0;
				width: 15px;
				background-color:$wizdom-backgound-color;

				@media (max-width:$screen-tablet) {
					width:0;
				}
			}

			&:after {
				@include box-shadow(inset 15px 0 15px -15px rgba(0,0,0,0.4));
				content: " ";
				height: 100%;
				position: absolute;
				top:0;
				right: -15px;
				width: 15px;

				@media (max-width:$screen-tablet) {
					width:0;
				}
			}


			@media (max-width:$screen-desktop) {
				overflow:visible;
			}

			padding-top:50px;
			padding-left:65px; // because of shadow fix
			padding-right:50px;

			@media (max-width:$screen-tablet) {
				padding-top:10px;
				padding-left:10px;
				padding-right:10px;
			}

			hr.separator { 
				text-align: left;
				margin-right: 0;
				margin-left: 0;
				margin-top: 13px; 
				margin-bottom: 20px; 
				width: 60px !important; 

				border: none;
				border-bottom: 2px solid #1775bc;
			}

		}
	}

	.wt-right-column {
		.contentPage & {
			padding-left:25px;
			padding-right:25px;

			@media (max-width:$screen-desktop) {
				padding-left:10px;
				padding-right:10px;
			}
		}
	}

	.contentPage {
		#wizdomPageLayout {

		}
	}

}