Bones/css/skeleton.ontraport.css

/* ====================================================================================================================
@brief ONTRAPORT's skeleton extension file
===================================================================================================================== */

/* =====================================================================================================================
Skeleton Grid Size Extension
	1) Adds new column sizes for rows with 7, 8, or 9 columns.
	2) Adds a tablet responsive size for screens 850px - 550px wide.
		a) For Multi-Item the tablet is as follows:
		
				12 colums -> 4 columns -> 1 column
				11 colums -> 4 columns -> 1 column
				10 colums -> 4 columns -> 1 column
				9 colums -> 3 columns -> 1 column
				8 colums -> 3 columns -> 1 column
				7 colums -> 3 columns -> 1 column
				6 colums -> 2 columns -> 1 column
				5 colums -> 2 columns -> 1 column
				4 colums -> 2 columns -> 1 column
				3 columns -> 3 columns -> 1 column
				2 columns -> 2 columns -> 1 column
				1 column -> 1 column -> 1 column
				
===================================================================================================================== */
@media (min-width: 550px) {
	.column.first-visible,
	.columns.first-visible {
		margin-left: 0; 
	}
	/* For rows 7 columns accross */
	.one-and-half.columns {
		width: 10.6666667%;
	}
	/* For rows 8 columns accross */
	.one-and-third.columns {
		width: 8.6666667%;
	}
	/* For rows 9 columns accross */
	.one-and-fourth.columns {
		width: 7.3333333%;
	}
	
	.offset-by-one.column.first-visible, 
	.offset-by-one.columns.first-visible {
		margin-left: 8.66666666667%;
	}
}
/* For devices smaller than 768px */
@media (min-width: 550px) and (max-width: 850px) {
	.u-cf {
		text-align: center;
	}
	[class*="tablet-"].columns {
		float: none;
		display: inline-block;
	}
	
	.tablet-three.columns {
		width: 21.2333333%;
	}
	.tablet-three.first-in-row.columns {
		margin-left: 0;
	}
	.tablet-four.columns {
		width: 30.111112%
	}
	.tablet-four.first-in-row.columns {
		margin-left: 0;
	}
	.tablet-six.columns {
		width: 47.56666667%;
	}
	.tablet-six.first-in-row.columns {
		margin-left: 0;
	}
	
	.offset-by-one.column.first-visible, 
	.offset-by-one.columns.first-visible {
		margin-left: 0;
	}
}
/* =====================================================================================================================
blocks
===================================================================================================================== */
.block-wrapper {
    padding-top: 3em;
    padding-bottom: 3em;
    width: 100%;
}

/* =====================================================================================================================
buttons
===================================================================================================================== */
.button {
	height: auto;
	max-width: 100%;
	padding: 0;
	white-space: normal;
	border: 0;
	color: inherit;
	text-transform: none;
	border-radius: 0;
	cursor: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	background-color: inherit;
    margin-bottom: 0;
}
.button:hover {
	color: inherit;
	border-color: inherit;
}
.button--round,
.button-style.button--round {
    border-radius: 500px;  
}
.button-style {
    padding: 10px 20px;
    border-radius: 3px;
    text-decoration: none;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -ms-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
}
.button-style:hover {
    opacity: .9;
}

/* =====================================================================================================================
Images
===================================================================================================================== */

.opt-circle {
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 500px; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 500px; 
  
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 500px;  
} 

/* =====================================================================================================================
Fonts 
===================================================================================================================== */

.opt-center {
    text-align: center;
}

.opt-bold {
    font-weight: bold;
}

.opt-big {
    font-size: 1.2em;
}

.opt-medium {
    font-size: 1em;
}

.opt-small {
    font-size: .8em;
}

.opt-red {
    color: red;  
}

/**
 * Adding CSS rules for WYSIWYG HTML 5 Support
 * https://github.com/xing/wysihtml5/wiki/Supported-Commands
 */
 .wysiwyg-text-align-center {
	 display: inline-block;
	 width: 100%;
	 text-align: center;
}

.wysiwyg-text-align-left {
	display: inline-block;
	width: 100%;
	text-align: left;
}

.wysiwyg-text-align-right {
    display: inline-block;
    width: 100%;
    text-align: right;
}

/* =====================================================================================================================
Container
===================================================================================================================== */

.container.container {
    max-width: 1200px;
}