/* RESPONSIVE STYLES */

/* I'm separating these stylesheets so I can only import clean css into this one
and keep all the mess in the other, older one. Ultimately I'll consolidate them
and remove the other but for now I'm keeping both. */

/* color reference
blue: #0f9ace
yellow: #ffe80d
*/

/* OVERWRITES FROM /CSS/STYLES.CSS */
/* When I get rid of the old stylesheet, I should be able 
to remove all of these without any issue at all. */
h1 {
	width: auto;
	height: auto;
	margin: 0 0 20px 0;
}
#logo {
	margin: 0;
	height: auto;
	background: none;
}
#content {
	max-width: 100%;
	width: 100%;
	left: 0;
}
#menu-b {
	margin: 0;
}
#menu-b li a {
	font-weight: 600;
	color: #777;
	padding: 0 7px;
}

.menu li {
	float: none;
	display: inline-block;
}
#logo > a {
	float: none;
	position: static;
	top: 0;
}
#page-holder {
	float: none;
	width: 100%;
	margin: 0;
	height: auto;
}
.breaker {
	height: auto;
	background: none;
	border-bottom: 1px dashed #000;
}
.body_access #page-holder {
	margin: 50px 0;
}
.body_logout #page-holder {
	margin: 0;
	text-align: left;
}
.body_logout #page-holder div {
	margin: 50px 0 50px 150px;
}
.body_logout #page-holder h1,
.body_logout #page-holder h2 {
	width: 80%;
	width: -webkit-calc(90% - 150px);
	width: -moz-calc(90% - 150px);
	width: calc(90% - 150px);
}
h3,
h3 a {
	font-family: 'Roboto-Condensed-bold', Arial, sans-serif !important;
}

/* DEFAULT STYLES */
html {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	background-color: #fff;
}
body {
	max-width: 100%;
	height: 100%;
	background-color: #fff;
}
*, *:before, *:after {
	box-sizing: inherit;
}
.clear {
	clear: both;
}
.hidden {
	display: none;
}
ul {
	list-style: none;
}
.error {
	background-color: #900;
	color: #ff0;
	font-weight: bold;
	padding: 10px;
	margin-top: 10px;
}
.error a {
	color: #fff;
}
.error a:hover {
	text-decoration: underline;
}
.body_client_error .error {
	width: 100%;
	max-width: 800px;
	min-width: 200px;
	margin: 20px auto !important;
}
.bg-white {
	background-color: #fff !important;
}
.align-center {
	text-align: center !important;
}
.align-right {
	text-align: right !important;
}
.pad-bottom {
	padding-bottom: 10px;
}
.left50 {
	float: left;
	width: 50%;
	text-align: left;
}
.right50 {
	float: left;
	width: 50%;
	text-align: right;
}
.file-footer div.right50 {
	padding-top: 2px;
	color: #6d6d6d;
	font-size: 13px;
}

.disabled,
.disabled:hover {
	cursor: default;
	filter: alpha(opacity=50) !important;
	opacity: 0.5 !important;
}
input[type="submit"],
input[type="button"],
.client form label.button {
	display: inline-block;
	padding: 5px 10px;
	border: 1px solid #999;
	background-color: #ededed;
	border-radius: 3px;
	font-size: 13px;
	line-height: 13px;
	vertical-align: top;
	color: #333;
	margin: 0 4px;
}
input[type="submit"]:hover,
input[type="button"]:hover,
.client form label.button:hover {
	cursor: pointer;
	background-color: #fff;
}
.danger input[type="submit"] {
	background-color: #f00;
	color: #ff0;
}
.darker_bg {
	background-color: #e6cf00 !important;
}

/* progress bar styles */
.active-progress {
	background: #ccc;
	height: 10px;
}
#bar {
	background-color: #c64dff;
	height: inherit;
}
.stripes {
    background-size: 30px 30px;
	background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
		transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
		transparent 75%, transparent);
	animation: animate-stripes 2s linear infinite;
}
@keyframes animate-stripes {
	from { background-position: 0 0; }
	to { background-position: 60px 0; }
}
.client-button {
	display: inline-block;
	padding: 5px 10px;
	border: 1px solid #999;
	background-color: #ededed;
	border-radius: 3px;
	font-size: 14px;
	line-height: 14px;
	vertical-align: top;
	margin-right: 5px;
}
.client-button.disabled,
.client-button.disabled:hover {
	cursor: default;
	border: 1px solid #aaa;
	background-color: #ededed;
}
.client-button:hover {
	cursor: pointer;
	background-color: #fff;
}
.button input[type='file'] {
    position: absolute;
    left: -99999rem;
}
.client form label.button {
	width: auto;
	font-size: 14px;
	padding: 4px 6px;
	text-align: center;
}
#file-output,
#folder-output {
    height: 25px;
    line-height: 25px;
    display: inline-block;
}

/* HEADER */
#site-header {
	border-bottom: 1px dashed #000;
	position: relative;
	height: 111px;
	max-width: 100%;
}
#site-header div {
	position: absolute; /* logo and nav blocks */
}

/* LOGO */
#logo {
	top: 0;
	left: 0;
	padding: 20px 0 20px 20px;
}
#logo a {
	margin: 0 auto;
}

/* SITE NAV */
#site-nav {
	top: 0;
	right: 0;
	height: 41px;
	width: 450px;
	margin: 40px 15px 20px 0;
	background: url(../img/bg_top-nav.png) no-repeat top right;
	position: relative;
}
#menu-b {
	display: inline-block;
	position: absolute;
	right: 9px;
	top: 0;
}
.menu li {
	background: #fff;
} 
.menu li.active,
.menu li:hover {
  background-color: #FFE80D;
  color: #353535;
}

/* CONTENT */
#content {
	background-color: #fff;
}

/* MAIN CONTENT */
#main_content_wrapper {
	position: relative;
	background-color: #fff;
}
#main_content {
}

/* category title */
.category-title h1 {
    text-align: center;
    line-height: normal;
    font-size: 24px;
    margin: 0 20px 20px 20px;
}

/* SIDEBAR */
#access-nav { /* hide access nav by default */
	display: none;
}
.sub_nav {
	width: 100%;
	background-color: #ffe80d;
	text-align: center;
}
.sub_nav li {
	display: inline-block;
}
.sub_nav li a,
.sub_nav li div {
	display: block;
	padding: 12px 10px;
	color: #777;
	font-size: 130%;
	font-weight: 600;
}
.sub_nav li.active,
.sub_nav li a:hover {
	background-color: #fff6a1;
}
.note {
	margin-top: 10px;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: .25px;
	color: #999;
}

/* FOOTER */
#site-footer {
	padding: 10px 0;
	background: #ededed;
	text-align: center;
}
#site-footer ul {
	list-style: none;
}
#site-footer li {
	display: inline-block;
}
#site-footer li + li::before {
	content: "\00a0\00a0|\00a0\00a0\00a0";
}
#site-footer li,
#site-footer li a {
	whitespace: nowrap;
	font-size: 14px;
	font-weight: 600;
}
#site-footer li a:hover,
#site-footer li.active a {
	color: #900; /* #0f9ace */
}

/* overwrites of Magnific Popup */
.mfp-iframe-holder .mfp-content {
	max-width: 80%;
}
.mfp-title {
	position: absolute;
	background-color: #000;
	color: #999;
	width: 100%;
	font-size: 16px;
}
.mfp-title b {
	font-weight: bold;
}
.mfp-title div {
	padding: 10px;
}

.button {
	font-size: 14px;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 5px 10px;
	background-color: #fff;
}
.button:hover {
	background-color: #eee;
	cursor: pointer;
}

/* clients section styles */
.wide-cell {
	width: 100%;
}
.alt-tr-bg tr,
.alt-tr-bg-odd tr {
	background: #fff;
}
.alt-tr-bg-odd tr:nth-child(odd),
.alt-tr-bg tr:nth-child(even) {
	background: #eee;
}
.client_secured #site-header {
	border-bottom: 0;
}
.client #main_content {
	text-align: center;
}
.client h1 {
	color: #000;
}
.client form ul li {
	white-space: nowrap;
}
.client form ul li {
	margin: 10px 0;
}
.client form label {
	width: 30%;
	display: inline-block;
	text-align: right;
	padding: 0 10px 0 0;
}
.client form input[type="text password url email"] {
	font-size: 20px;
	width: 70%;
	display: inline-block;
}
.client form input {
	font-size: 14px;
}
.client form .button {
	margin-top: 5px;
}

.client .client-form {
	display: inline-block;
	margin: 20px;
	padding: 30px 20px 20px 20px;
	max-width: 450px;
	width: calc(100% - 40px);
	min-width: 100px;
	background-color: #fff;
	border: 1px solid #ccc;
}
.client .message {
	padding: 10px 20px;
	margin: 20px 0;
	background-color: #20b420;
	color: #ff0;
}
.client h2 {
	margin-top: 5px;
	font-size: 20px;
	font-weight: bold;
}
.client .error {
	background-color: #f00;
	padding: 10px 20px;
	margin: 20px 0;
}
ul.errorlist  {
	list-style: disc;
	display: inline-block;
	margin-left: 20px;
	margin: 0 auto 10px auto;
}
.errorlist li {
	text-align: left;
}
.client p {
	margin: 10px 0;
	font-size: 16px;
}
.clip_container {
	width: 100%;
	display: block;
	padding: 0;
	margin: 30px 0;
}
.clip_container #selectPaneHolderHolder {
	margin: 0 auto;
	width: 100%;
	max-width: 1200px;
}
.clip_container #selectPaneHolder {
	width: 100%;
	float: none;
	top: 0;
	left: 0;
	text-align: center;
}
.clip_container #selectPaneHolder a.selector {
	float: none;
	display: inline-block;
	vertical-align: top;
	padding: 0 20px;
	margin-bottom: 25px;
	width: 30%;
	width: -webkit-calc(33% - 40px);
	width: -moz-calc(33% - 40px);
	width: calc(33% - 40px);
	height: auto;
}
.clip_container #selectPaneHolder a.selector div {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
	padding: 58.25% 0 0 0;
	margin-bottom: 5px;
}
.clip_container #selectPaneHolder a.selector img {
	margin: 0;
	display: block;
	max-width: 100%;
	width: 100%;
	max-height: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.clip_container #selectPaneHolder a.selector span {
	width: 100%;
	height: auto;
	text-align: left;
}
.client .projects {
	max-width: 800px;
	margin: 0 auto;
}
.projects table {
	width: 100%;
	margin: 20px 0;
}
.projects th {
	font-weight: normal;
	color: #646464;
	text-align: center;
	font-size: 18px;
}
.projects td,
.projects td a {
	text-align: center;
	font-size: 15px;
	white-space: nowrap;
}
.projects th, 
.projects td {
	border: 1px solid #000;
	padding: 10px;
}
.projects td a {
	color: #8000bb;
}
.projects td a:hover {
	text-decoration: underline;
}

#error404 {
    padding: 50px 40px 40px 40px;
    text-align: center;
    height: auto;
    min-height: 100%;
}

/* MEDIUM */
@media all and (max-width: 830px) {
	
	#site-header {
		border-bottom: none;
		height: auto;
	}
	#site-header div {
		position: static;
	}
	#logo {
		width: 100%;
		text-align: center;
		float: none;
		padding: 20px 0;
	}
	#site-nav {
		width: 100%;
		text-align: center;
		float: none;
		top: auto;
		right: auto;
		margin: 0;
		padding: 0;
		height: 46px;
		background: #ededed;
		background-image: none;
	}
	#menu-b {
		margin: 0;
		position: static;
	}
	#menu-b li a {
		height: 46px;
		line-height: 46px;
	}
	.menu li {
		background: none;
	}
    .category-title h1 {
        font-size: 20px;
    }
	
	#site-footer li + li::before {
		content: "";
	}
	#site-footer li {
		margin: 5px 10px;
	}
	.body_logout #page-holder {
		text-align: center;
	}
	.body_logout #page-holder div {
		margin: 50px 0;
	}
	.body_logout #page-holder h1,
	.body_logout #page-holder h2 {
		width: 100%;
	}
	.sub_nav li a,
	.sub_nav li div {
		padding: 6px 5px;
		font-size: 110%;
	}
	.clip_container #selectPane {
		text-align: center;
	}
	.clip_container #selectPaneHolderHolder {
		margin: 0 auto;
		width: 100%;
	}
	.clip_container #selectPaneHolder {
		margin-top: 0;
	}
	.clip_container #selectPaneHolder a.selector {
		width: 40%;
		width: -webkit-calc(50% - 40px);
		width: -moz-calc(50% - 40px);
		width: calc(50% - 40px);
	}
	.clip_container #selectPaneHolder a.selector span {
		margin: 0;
		text-align: center;
	}
	
}

/* NARROW */
@media all and (max-width: 400px) {
	
	.clip_container #selectPaneHolder a.selector {
		padding: 0;
		margin: 20px auto;
		display: block;
		width: 80%;
	}
    .category-title h1 {
        margin-bottom: 0;
    }
	
	#logo img {
		width: 85%;
	}
	#site-nav {
		height: 35px;
	}
	#menu-b li a {
		height: 35px;
		line-height: 35px;
		padding: 0 5px;
		font-size: 15px;
	}
	#site-footer {
		padding: 5px;
	}
	#site-footer li {
		margin: 3px 7px;
	}

}