/**
 * Licensed to The Apereo Foundation under one or more contributor license
 * agreements. See the NOTICE file distributed with this work for
 * additional information regarding copyright ownership.

 * The Apereo Foundation licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file except in
 * compliance with the License. You may obtain a copy of the License at:
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* DESKTOP & TABLET LAYOUT CSS (not mobile) */

/* _floatLeft & _floatRight display inline on mobiles */
#x_pageDiv .x_floatLeft {
	margin-left:	0px;
	padding:		10px;
}

#x_pageDiv .x_floatRight {
	margin-right:	0px;
	padding:		10px;
}

/* these all display as width 100% on mobiles */
.width40 {
	width:	40%;
}

.width50 {
	width:	50%;
}

.width60 {
	width:	60%;
}

.width80 {
	width:	80%;
}

.width100 {
	width:	100%;
}

/* displays as one column on mobiles */
.splitScreen {
	padding:	0 0 0 50%;
	position:	relative;
}

.splitScreen.small {
	padding:	0 0 0 20%;
}

.splitScreen.medium2 {
	padding:	0 0 0 30%;
}

.splitScreen.medium {
	padding:	0 0 0 40%;
}

.splitScreen.large {
	padding:	0 0 0 60%;
}

.splitScreen.xlarge {
	padding:	0 0 0 80%;
}

.splitScreen .left {
	position:	absolute;
	top:		0;
	left:		0;
	width:		50%;
}

.splitScreen.small .left {
	width:		20%;
}

.splitScreen.medium2 .left {
	width:		30%;
}

.splitScreen.medium .left {
	width:		40%;
}

.splitScreen.large .left {
	width:		60%;
}

.splitScreen.xlarge .left {
	width:		80%;
}

.splitScreen .right {
	margin-left: 1em;
}

.autocolumns2{
	-webkit-columns: 2 250px;
	-moz-columns: 2 250px;
	columns: 2 250px;
	column-gap: 4em;
	column-rule: 4px solid lightgrey;
  }
.autocolumns3{
	-webkit-columns: 3 250px;
	-moz-columns: 3 250px;
	columns: 3 250px;
	column-gap: 4em;
	column-rule: 4px solid lightgrey;
}
.autocolumns4{
	-webkit-columns: 4 200px;
	-moz-columns: 4 200px;
	columns: 4 200px;
	column-gap: 4em;
	column-rule: 4px solid lightgrey;
}
.autocolumns5{
	-webkit-columns: 4 150px;
	-moz-columns: 4 150px;
	columns: 4 150px;
	column-gap: 4em;
	column-rule: 4px solid lightgrey;
}
.autocolumnsruler{
	column-rule: 4px solid lightgrey;
}
