main.less

@import 'lib/colors';
@import 'lib/fonts';

/* temp wdn hack */
.dcf-nav-menu-child ul {
	list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
	margin-bottom: 0;
	padding-left: 0;
}

a {
	text-decoration: none;
}

label > input { /* HIDE RADIO */
	visibility: hidden; /* Makes input not-clickable */
	position: absolute; /* Remove input from document flow */
}

label img {
	padding: 5px;
}

label > input + img, label > input + img + img { /* IMAGE STYLES */
	cursor: pointer;
	box-shadow: 0px 0px 8px #DDDDDD;
}

label > input:checked + img, label > input:checked + img + img { /* (RADIO CHECKED) IMAGE STYLES */
	box-shadow: 0px 0px 8px #1B9AE8;
}

form legend {
	font-size: 1.5em;
}

textarea {
	resize: vertical;
}

.page-title {
	margin-top: 0;
}

div.left, section.left, td.left, th.left {
	text-align: left;
}

div.center, section.center, td.center, th.center, label.center {
	text-align: center;
}

div.right, section.right, td.right, th.right {
	text-align: right;
}

img.height-36 {
	max-height: 108px;
}

img.height-38 {
	max-height: 114px;
}

img.height-40 {
	max-height: 120px;
}

.approval-bug {
	text-align: center;
	background: @light-triad;
	border: 1px solid @triad;
	border-radius: 1em;
	padding: 1em;
	color: @cream;
	.sans-serif-font();
	&.approved {
		background: @light-complement;
		border: 1px solid @complement;
	}
	&.denied {
		background: lighten(@scarlet, 25%);
		border: 1px solid @scarlet;
	}
}

.caps {
	text-transform: uppercase;
	color: inherit;
}

.featured-icon {
    background-color: #00BD3C;
    height: 144px;
    width: 144px;
    border-radius: 80px;
    float: none!important;
    margin: 0 auto!important;
    &.red {
    	background-color: #D00000;
    }
    &.blue {
    	background-color: #1B9AE8;
    }
}

.table-actions {
	line-height: 1;
	a, button {
		vertical-align: middle;
	}
}

.delete-form {
    display: inline;
    padding: 0;
}

svg.preview {
	background-color: #FFF;
	border: 2px dashed var(--b);
	max-width: 100%;
	/* disable for now, not displaying correctly in current 5.0 implementation */
	/*max-height: 100%;*/
}

.lockup-hero {
    position: relative;
    overflow: hidden;
    height: 25.24em;
    height: 42vh;
    background-color: #000;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    video {
    	width: 100%;
    }
}

.lockup-hero-text {
    position: relative;
    bottom: auto;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    text-align: center;
}

.lockup-hero-heading {
    z-index: 1;
    margin: 0;
    font-size: 2.67em;
    text-transform: uppercase;
    color: #fff;
    .hero-line {
	    display: inline-block;
	    line-height: 1;
	    border-top: 1px solid rgba(255, 255, 255, 0.2);
	    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	}
}

.is-video.lockup-hero .lockup-hero-video {
    position: absolute;
    top: 0;
    left: 0;
}

.tooltip {
	> div {
	    position: absolute;
	    display: none;
	    background-color: var(--bg-body);
	    color: var(--body);
	    box-shadow: 0px 1px 4px var(--b);
	    padding: .75em;
	    bottom: 160%;
	    left: -91px;
	    width: 200px;
	    text-align: left;
	    z-index: 250;
	}

	> div:before {
	    background-color: var(--bg-body);
	    content: "";
	    display: block;
	    width: 15px; 
	    height: 15px; 
	    position: absolute;
	    bottom: -8px;
	    left: 50%;
	    margin-left: -7px;
	    transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	    -o-transform: rotate(45deg);
	    -moz-transform: rotate(45deg);
	    -webkit-transform: rotate(45deg);
	    box-shadow: 0px 0px 4px RGBA(0,0,0,0.25);
	}

	> div:after {
	    content:"";
	    height: 12px;
	    width: 40px;
	    background-color: var(--bg-body);
	    display: block;
	    position: absolute;
	    bottom: 0px;
	    left: 50%;
	    margin-left: -24px;
	}

	&.hang-right > div {
	    left: -27px;
	}

	&.hang-left > div {
	    left: -157px;
	}

	&.hang-right > div:before {
	    left: 34px;
	    margin-left: -7px;
	}

	&.hang-right > div:after {
	    left: 34px;
	    margin-left: -24px;
	}

	&.hang-left > div:before {
	    left: 166px;
	    margin-left: -7px;
	}

	&.hang-left > div:after {
	    left: 166px;
	    margin-left: -24px;
	}

    background-color: var(--bg-body);
    color: #1B9AE8;
    display: inline-block;
    text-align: center;
    position: relative;
    line-height: 1.6em;
    font-size: .8125rem;

    ul li {
	    margin-bottom: .75em;
	}

	span.heading{
	    font-family: "Tungsten A","Tungsten B",HelveticaNeueCondensed,HelveticaNeue-Condensed,"Helvetica Neue Condensed",HelveticaNeueRomanCondensed,HelveticaNeue-Roman-Condensed,"Helvetica Neue Roman Condensed","Arial Narrow",HelveticaNeue,"Helvetica Neue",HelveticaNeueRoman,HelveticaNeue-Roman,"Helvetica Neue Roman",Helvetica,Tahoma,Geneva,Arial,sans-serif;
	    font-size: 1.777em;
	}

	&:hover > div {
	    display: block;
	}

	p {
	    margin: 0;
	}

	&.italic *{
	    font-style: italic;
	}
}

.toolbox, .visual-island {
    background: var(--bg-dialog);
    margin-bottom: 1em;
    word-wrap: break-word;
	padding: 0 !important;
	.tools, .details {
		padding: 1em;
		border-left: 1px solid var(--b);
		border-right: 1px solid var(--b);
		border-bottom: 1px solid var(--b);
		&.top-border {
			border-top: 1px solid var(--b);
		}
	}

    h1, h2, h3, h4, h5, h6, .vi-header{
		display: block;
		font-size: .802em !important;
		margin: 0;
		border-bottom: 1px solid var(--heading);
		font-family: "Gotham SSm A","Gotham SSm B",Verdana,"Verdana Ref",Geneva,Tahoma,"Lucida Grande","Lucida Sans Unicode","Lucida Sans","DejaVu Sans","Bitstream Vera Sans","Liberation Sans",sans-serif;
		width: 100%;
		background-color: var(--heading);
		padding: 1em;
		text-transform: uppercase;
		color: var(--inverse);
		font-weight: 400;
		font-style: normal;
		text-align: center;
	}

	p {
		padding: 0 1em 1em 1em;
	}

	ul {
		padding: 0;
		padding-left: 1em;
		margin: 0;
	    a {
	    	border-bottom: none;
	    	font-family: "Gotham SSm A","Gotham SSm B",Verdana,"Verdana Ref",Geneva,Tahoma,"Lucida Grande","Lucida Sans Unicode","Lucida Sans","DejaVu Sans","Bitstream Vera Sans","Liberation Sans",sans-serif;
	    }
	}
}

.dcf-notice {
    margin-top: 1em;
}

@media (min-width: 0px) {
	.lockup-hero {
	    height: 5em;
	    height: 10vh;
	    max-height: 8em;
	}
}

@media (min-height: 480px) and (min-width: 480px) {
	.lockup-hero {
	    height: 15em;
	    height: 30vh;
	    max-height: 22em;
	}
}

@media (min-height: 718px) and (min-width: 960px) {
	.lockup-hero {
	    height: 25.24em;
	    height: 56vh;
	    max-height: 31.474em;
	}
}

@media (min-height: 895px) and (min-width: 1044px) {
	.lockup-hero {
	    height: 31.474em;
	    height: 75vh;
	    max-height: 33.645em;
	}
}


@media (min-width: 480px) {
	.lockup-hero-heading {
	    font-size: 3.16em;
	}
}
@media (min-width: 768px) {
	.lockup-hero-heading {
	    font-size: 4.21em;
	}
}
@media (min-width: 1044px) {
	.lockup-hero-heading {
	    font-size: 4.74em;
	}
}