/* Default Tag Styles */
html, body {
	background-color: rgb(51,51,51);
	color: #fff;
	font-size: 8pt;
	line-height: 1.2em;
	font-weight: normal;
	font-family: "Arial Rounded MT Bold", Arial, "Helvetica Neu Bold", "Helvetica Bold", "MS Trebuchet", sans-serif;
}

p { margin-bottom: 1em; }

a, a:visited, a:active { color: inherit; }
a:hover { color: rgb(247, 148, 29); } /* yellow */

/* General Text Styles */
.blue { color: rgb(0, 174, 230); }
.pink { color: rgb(251, 37, 129); }
.yellow { color: rgb(247, 148, 29);}

.no-decoration { text-decoration: none; }

.bold { font-weight: bold; }

.hidden { visibility: hidden; }

.align-right { text-align: right; }
.align-left { text-align: left; }

.float-right { float: right; }
.float-left { float: left; }

.block { display: block; }
.margin-bottom { margin-bottom: 10px; }

.skip-line { margin-bottom: 1em; }
.skip-5-lines { margin-bottom: 5em; }

.width70p { width: 70%; }

.valign-top { vertical-align: top; }

ul.linear li { display: inline; }

/* General Text Header Styles */
.header-section {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.25em;
}

.big-header {
	font-weight: bold;
	font-size: 1.45em;
	text-transform: uppercase;
	line-height: 1em;
}


/* UL Table */
ul.table li {
	display: inline;
	float: left;
}

ul.table li.last { margin-right: 0; }

/* Clear Floats using .clear */
.clear {
	width: 100%;
	height: 0;
	clear: both !important;
	display: inline-block;
}
.clear:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

html .clear { height: 1%; }


/* ************************************* ************************************* ************************************* */
/* Containers */

/* Page is 780px wide, 70px margins. Page content is 640px wide */
#container-super {
	z-index: -1;
	margin: 0 auto;
	padding: 0;
	width: 780px;
	text-align: left;
	background: url(/images/backgrounds/BackgroundRepeat1px.png) repeat; 
}

#container-super #backgroundGradient {
	position: absolute;
	top: 0;
	z-index: 0;
	width: 780px; 
	height: 362px;
	margin: 0;
	padding: 0;
	background: url(/images/backgrounds/BackgroundGradient-780x362.png);
	background-repeat: no-repeat;
}

#container-super #container-menu {
	position: relative;
	top: -56px;
	z-index: 1;
}

/* Menu */
ul#menu {
	height: 20px;
	width: 640px;
	margin-left: 70px;
}

ul#menu li {
	display: inline;
	list-style: none;
}

ul#menu li a {
	float: left;
	color: #fff;
	margin: 0 0.9em 0 0.9em;
	font-size: 1em;
	text-decoration: none;
	text-transform: uppercase;
	line-height: 1.6em; /* 1.7 thicker line */
}

ul#menu li a:hover, ul#menu li a.selected {
	background: url(/images/backgrounds/MenuSelect.png) repeat-x fixed top left;
}

ul#menu li.first a { margin-left: 0; }

/* Logo */
#container-logo {
	position: relative;
	top: 40px;
	z-index: 10;
	margin: 0;
	padding: 0;
	width: 780px;
	height: 61px;
	margin-bottom: 0;
	text-align: right;
	display: block;
}

#container-logo h1 {
	background:url(/images/CirrusLogo.png) no-repeat;
	background-position: top right;
	height: 61px;
	width: 170px;
	display: block;
	float: right;
	text-decoration: none;
	margin: 0;
	padding: 0;
	margin-right: 70px;
}

#container-logo h1 span { visibility: hidden; }

/* ************************************* */
/** PAGE CONTAINER **/

#container-super #container-page {
	position: relative;
	top: 10px;
	z-index: 2;
	width: 640px;
	margin: 0;
	margin-top: 20px;
	/* Margin bottom 20px = 0 */
	padding: 0 70px 80px 70px;			
}

/* ************************************* ************************************* ************************************* */
/** HOMEPAGE **/

#content-boxes {
	position: relative;
	top: 465px;
	
	margin-top: 20px;
	margin-bottom: 0;
	padding-bottom: 0;
	width: 640px;
	height: 125px;
	background: url(/images/backgrounds/HomeContentBoxBorder-640x6.png) repeat-y top left;
}

#content-boxes .content-box {
	margin-left: 0.8em;
	padding-right: 8px;
	margin-bottom: 0;
	padding-bottom: 0;
	width: 200px;
	height: 125px;
	display: inline;
	float: left;
}

#content-boxes .first { margin-left: 0; }
#content-boxes .last { padding-right: 0; }

#content-boxes p {
	margin-top: 1em;
	margin-bottom: 0; /* to balance out general style */
}

/* Center Box Section Header */
#center-content h2 {
	margin-top: 1.8em;
	/* text-align: justify; */
}

#focus-box {
	position: relative;
	top: -125px;
	
	height: 445px;
	width: 640px;
	
	margin-bottom: 20px;
	
	z-index: 4;
}

#focus-box #alternative-content-overlay {
	position: relative;
	top: -76px;
	width: 580px;
	/*height: 76px; */
	background-color: #ccc;
	margin: 0 auto;
	padding: 10px;
	color: #000;
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	
}

#focus-box #alternative-content-overlay img {
	padding-top: 1em;
}

/* Twitter Feed */
ul.twitter-feed { width: 100%; }
ul.twitter-feed li { 
	width: 100%;
	margin-bottom: 1em;
	clear:both;
	float: left;
}	
#content-boxes ul.twitter-feed p { margin-top: 0; }
ul.twitter-feed strong.twitter-name, ul.twitter-feed p.twitter-tweet {
	float: left;
	display: inline;
}
ul.twitter-feed strong.twitter-name { width: 40px; }
ul.twitter-feed p.twitter-tweet { width: 160px; /* text-align: justify; */ }

.thickgreyborder { border: 6px solid #333; }

.nospace { margin: 0; padding: 0; }
.noborder { border: none; }

/* ************************************* ************************************* ************************************* */
/** PORTFOLIO **/

.portfolio-block {
	height: 200px;
	margin-top: 40px;
	padding-top: 40px;
	border-top: 2px solid #333;
}

.portfolio-block-first {
	height: 200px;
}

.portfolio-left-box {
	display: inline;
	float: left;
	margin-right: 20px;
	width: 250px;
}

.portfolio-description {
	margin-left: 20px;
	display: inline;
	float: left;
	width: 348px; 
}

#portfolio-introduction {
	width: 70%;
	margin-bottom: 2em;
}
#portfolio-introduction h2 { margin-bottom: 1em; }
#portfolio-introduction p { margin-bottom: 5em; }

ul.portfolio-actions {
	margin-left: 10px;
	margin-top: -10px;
}

ul.portfolio-actions li {
	display: inline;
	float: right;
	margin-left: 1em;
}
ul.portfolio-actions li a { text-decoration: none; color: rgb(247, 148, 29); } /* yellow */
ul.portfolio-actions li a:hover { text-decoration: underline; color: rgb(247, 148, 29); } /* yellow */

/* ************************************* ************************************* ************************************* */
/** CONTACT US **/
#contact-us-form label {
	width: 55px;
	text-align: right;
	display: inline-block;
	margin-right: 0.5em;
}

#contact-us-form .form-field {
	margin-bottom: 1em;
}

#contact-us-form input, #contact-us-form textarea {
	background-color: #333;
	color: #fff;
	border: 1px solid #666;
}

#contact-us-form input[type=text] {
	width: 200px;
}

#contact-us-form input.error, #contact-us-form textarea.error {
	border: 1px solid red;
}

#contact-us-form label.error {
	text-align: left;
	margin-left: 10px;
	width: 15em;
	display: inline-block;
	color: red;
}

#contact-us-form input[type=submit] {
		width: 100px;
		margin-left: 63px;
}

.contact-us-error, .contact-us-success {
	width: 256px;
	line-height: 1.5em;
	margin-top: -3em;
	margin-bottom: 2em;
	margin-left: 63px;
	background-color: #333;
	border: 1px solid #666;
	padding: 5px;
}

.contact-us-error p {
	color: red;
	margin-bottom: 2px;
}
.contact-us-success p {
	color: #fff;
	margin-bottom: 2px;
}

/* ************************************* ************************************* ************************************* */
/** ABOUT US **/

#about-us .about-us-block {
	width: 100%;
	margin-top: 20px;
	clear: both;
}

#about-us .about-email {
	margin-bottom: 2px;
}

#about-us .about-text {
	margin-top: 10px;
	width: 325px;
}

#about-us .about-social-links {
	margin-top: 10px;
}

#about-us .about-social-links ul li {
	margin-left: 10px;
	color: rgb(247, 148, 29); /* yellow */
}

#about-us .about-social-links li a { text-decoration: none; }
#about-us .about-social-links li a:hover { text-decoration: underline; }