/*
Theme Name: Tectonium Blue Theme
Description: Official Theme of Tectonium
*/

@font-face
{
font-family: mainfont;
src: url('fonts/liberation-sans-edited.ttf'),
     url('fonts/liberation-sans-edited.eot'); /* IE9 */
} 

@font-face
{
font-family: altfont;
src: url('fonts/amble-regular-webfont.ttf'),
     url('fonts/amble-regular-webfont.eot'); /* IE9 */
} 

body {
	margin: 0;
	padding: 10px 0;
	color: #222222;
	font: 16px mainfont, Verdana, Helvetica, sans-serif;
	line-height: 20px;
	background: #f9f9f9 url('images/mainbg.gif');
}

a {
	text-decoration: none;
	color: #777777;
}

a:hover {
	color: #999999;
}

.testlink {
display: inline;
margin: 0;
padding: 0 6px;
background: #0000ff;
/*controls testlink experimental link at the bottom of content*/
/*to be used later for the inline icons to open maps and notes*/
}

#wrap {
	max-width: 1300px;
	width: 95%;
	min-width: 350px; /* min-width:300px in header.php. applies only in mobile */
	margin: 0 auto;
	padding:0;
	border:4px solid #ececec;
	border-radius: 4px;
	overflow:hidden;
	background: #f9f9f9;
}

#cloak {
	width: 200%;
	margin: 0;
	padding:0;
	border:0;
	overflow:hidden;
}

#front {
	width: 50%;
	margin: 0;
	border:0;
	float: left;
	overflow:hidden;
}

#topbar {
	width: 50%;
	height: 130px;
	margin: 0 0 0 -50%;
	border:0;
	padding:0;
	float: left;
	overflow:hidden;
}

#icons {
	height: 75px;
	float: right;
	margin: 0;
	padding: 5px;
	border: 0;
}

#title {
	height: 55px;
	width: 400px;
	float: left;
	margin: 0;
	padding: 15px 5px;
	border: 0;
}

#title h3 {
	font: bold italic 30px altfont, Arial, sans-serif; 
	color: #bbbbbb;
	margin:0;
	padding:0;
	border:0;
}

#title p {
	font: italic 14px mainfont, Verdana, sans-serif; 
	color: #aaaaaa;
	margin:0;
	padding:8px 0 0 0;
	border:0;
}

#navigation {
	width: 100%;
	height: 40px;
	margin: 0 auto;
	border:0;
	padding:0;
	display: block;
	overflow:hidden;
	background: #f7f7f7;
	border-top: 1px solid #ececec;
	border-bottom: 4px solid #ececec;
}

#front, #back {padding: 140px 0 0 0}

#content {
	width: 100%;
	height: auto;
	float:left;
}

#content-in {
	width: auto;
	height: auto;
	margin: 0;
	padding:10px 330px 10px 20px;
	border:0;
	overflow:hidden;
}

#gistdata, #gistdata tr, #gistdata tr td {border: 0;}

#gistdata tr td {padding: 5px 0;}

#gistdata td:first-child {
	font-family: altfont, Arial, sans-serif;
	color: #444444;	
}

#content-in img {
	border: 1px solid #fefefe;
	padding: 2px;
	max-width:100%;
	height: auto;
}

#content-in .wp-caption {width:auto !important;}
/*over-writes the fixed in-line css width imposed by [caption] tag*/

.aligncenter, img.aligncenter,
div.aligncenter, p img.aligncenter {
	display: block;
	margin: 5px auto;
}

.alignleft {
	float: left;

}

.alignright {
	float: right;
}

.external {
	padding-right: 11px;
	background: url('images/external.gif') no-repeat right top;
} /* provides indicator icon for external links */

#back {
	width: 50%;
	margin: 0;
	border:0;
	float: left;
}

#leftbar {
	float:left;
	padding:10px;
	width: 10px;
}
/* The lefbar is invisible at the moment... collapsed to 10 px width... but can be expanded should I need to put something on the left of the content area. Note that when you expand the width of this, the left padding of the #content-in should be proportionally adjusted.*/

#rightbar {
	float:right;
	padding:10px 10px 10px 0;
	width: 300px;
}



#leftbar, #rightbar {
	height: auto;
	margin: 0;
	border:0;
	position: relative;
	right: 100%;
}

#rightbar {
	height: auto;
	margin: 0;
	border:0;
	overflow:hidden;
	position: relative;
	right: 100%;
}

#head, #content, #foot{
	margin: 0;
	padding:0;
	border:0;
	overflow:hidden;
}

#foot {
	width: auto;
	background: #f7f7f7;
	border-top: 2px solid #ececec;
	display:block;
	padding: 10px;	
	clear:both;
}

#foot p {
	font: 12px mainfont, Verdana, sans-serif; 
	color: #222222;
	margin:0;
	padding:0 0 10px 0;
	border:0;
	text-align: center;
}


#mobile-navigation {
	width: 120px;
	margin: 0 0 0 -60px;
	padding: 5px;
	background: #f7f7f7;
	border: 3px solid #eeeeee;
	position: absolute;
	top: -130000px;
	left: 50%;
	box-shadow: 0 1px 3000000px 1px #888888;
	display:none; /*sets-up initial state of slidetoggle element*/
}

#search {
	max-width: 220px;
	width: 100%;
	margin: 0 0 0 -125px;
	padding: 5px;
	background: #f7f7f7;
	border: 3px solid #eeeeee;
	position: absolute;
	top: 130px;
	left: 50%;
	box-shadow: 0 1px 10px 1px #aaaaaa;
	border-radius: 4px;
	display:none;  /*sets-up initial state of slidetoggle element*/
}

#content #content-in .turnpage {
	clear:both; 
	float:none;
	display:block;
	font-weight:bold;
	font: 14px altfont, Arial, sans-serif;
	margin: 16px 0;
	padding: 2px 0;
	background: #f4f4f4;
	overflow:hidden;
}

.right {
	float: right;
}

.left {
	float: left;
}

/*style*/

#navigation ul, #mobile-navigation ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#navigation ul li, #mobile-navigation ul li {
	margin: 0;
	padding: 10px 0;
	font: 18px altfont, Arial, sans-serif;
}

#navigation ul li a {
	color: #999999;
	padding: 0 5px;
}

.buildings, .buildings li {float:left;}

.buildings li a {
	border-right: 1px solid #999999;	
}

.meta, .meta li {float:right;}

.meta li a {
	border-left: 1px solid #999999;	
}
.mobile-menu {
	visibility:hidden; 
	width:0; 
	height:0;}

.exitbutton {
	float:right; 
	width: 18px; 
	height: 18px; 
	text-align: center; 
	border: 2px solid #cccccc; 
	font-size: 13px;
	font-weight: bold;
	color: #aaaaaa; 
	background: #d8d8d8; 
	border-radius: 18px;
}

#icons ul {
margin:0;
padding:0;
border:0;
float:right;
}


#icons ul li {
margin:4px;
padding:0;
border:0;
float:left;
list-style-type: none;
border:1px solid #aaaaaa;
border-radius:6px;
overflow:hidden;
}

#icons ul li a {
margin:0;
padding:0;
border-radius:6px;
border:2px solid #f9f9f9;
width: 25px;
height: 25px;
overflow:hidden;
display:block;
background-image:url('images/icons.jpg');
}

#home-icon{
	background-position:0 0;		
}

#about-icon{
	background-position:-25px 0;		
}

#search-icon{
	background-position:-50px 0;		
}

#contact-icon{
	background-position:-75px 0;		
}

#searchform form {
	padding: 0;
}

#searchform fieldset {
	border: 0;
	margin: 0;
	padding: 0
}

#searchform input {
	background: #e8e8e8;
	font-size: 14px;
	color: #222222;
	margin: 0;
	padding: 5px;
	border: 0;
	overflow:hidden;
}

#searchform #s {
	width: 140px;
	height: 16px;
	float:left;
	border: 2px solid #dddddd;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
}

#searchform .button {
	background: #eaeaea;
	float:left;
	height: 30px;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	border: 2px solid #dddddd;
	font-size: 12px;
	padding: 3px 5px;
}

#searchform .button:hover {
	background: #efefef;
}

#searchform .button:active {
	background: #f5f5f5;
}

.sideads {
	height: 720px;
}

.panel {
	width: 25%;
	height: 300px;
	border: 0;
	padding:0;
	margin:0;
	float:left;
	min-width: 120px;
	overflow:hidden;
	border-bottom: 1px solid #eaeaea;
}

.panel .panel-in {
	padding: 5px;
}

.panel .panel-in img, .panel .panel-in a img {
	max-width: 180px;
	width:95%;
	height: auto;
	margin:0 auto;
	float:none;
	display:block;
	clear:both;
}

.panel .panel-in span {
	margin: 0;
	padding: 10px 0;
	text-align: left;
	color:  #222222;
	font-size: 14px;
	line-height: 16px;
	overflow: hidden;
	float:none;
	display:block;
	clear:both;
}

#contentpane {
width: 35%;
float: left;
margin: 0;
padding:0;
border:0;
}

#contentpane2 {
width: 65%;
float: left;
margin: 0;
padding:0;
border:0;
}

#contentpane .contentpane-in {
padding: 5px 20px 5px 0;
}

.contentpane-in {width: auto; display: block;}

#contentpane2 .contentpane-in {
padding: 5px 0 5px 10px;
}

.contentpane-out {
width: 34%;
min-width: 270px;
float: left;
margin: 0;
padding:0 10px 10px 0;
border:0;
}

.fullpanel {
	width:100%;
	margin:0 auto;
	float:none;
	display:block;
	clear:both;
}

.fullpanel img {
	max-width:95%;
	height: auto;
	margin:0 auto;
	padding: 2px;
	float:none;
	display:block;
	clear:both;
	border: 2px solid #222222;
}

.contentpane-in span, .fullpanel span, .contentpane-out span {
	font-size: 12px;
    margin: 10px 0;
	text-align:center;
	display:block;
	width: 100%;
	padding: 0;
}


.contentpane-in img, .contentpane-in a img {
	max-width: 250px;
	width:auto;
	height: auto;
	margin:0 auto;
	float:none;
	display:block;
	clear:both;
}

#content-in h1 {
	margin: 20px 0 10px 0;
	padding: 0 0 3px 0;
	text-align: center;
	color: #222222;
	font-size: 26px;
	font-weight:bold;
	letter-spacing: 1px;
	line-height: 33px;
	border-bottom: 2px solid #222222;
}

#content-in h2{
	margin: 0;
	padding: 10px 0;
	text-align: left;
	color: #222222;
	font-size: 22px;
	line-height: 26px;
	font-weight:bold;
}

#content-in h3{
	margin: 0;
	padding: 7px 0;
	text-align: left;
	color:  #222222;
	font-size: 20px;
	font-weight:bold;
	overflow: hidden;
}

#content-in h4{
	margin: 0;
	padding: 0 0 7px 0;
	text-align: left;
	color:  #222222;
	font-size: 16px;
	font-weight:bold;
	font-style:italic;
	overflow: hidden;
}

/* h6 is header above thumbnail */

#content-in .panel .panel-in h6{
	margin: 0;
	padding: 5px 0;
	text-align: left;
	color:  #222222;
	font-size: 16px;
	line-height:18px;
	font-weight:bold;
	height: 36px;
	overflow: hidden;
}

/* h5 is for comments */

#content-in h5{
	margin: 6px 0;
	padding: 3px 0;
	text-align: left;
	color:  #222222;
	border-bottom: 1px solid #222222;
	font-size: 17px;
	line-height:18px;
	font-weight:bold;
	letter-spacing: 1px;
	overflow: hidden;
}

#content-in p {padding: 0 0 6px 0;}

#content-in li {padding: 5px 0;}

#content-in a img {border: 2px solid #cccccc; padding: 2px;}

#content-in a:hover img {background: #dddddd;}



/*table*/

table {
width: 100%;
border-collapse:collapse;
}

td, th
{
vertical-align:top;
text-align: left;
border: 3px solid #ececec; 
padding: 3px;
}

/*divider area*/

#sum table {
width: auto;
border-collapse:collapse;
}

#sum td
{
vertical-align:top;
text-align: left;
border: 0; 
margin:0;
padding: 0 0 6px 0; 
}

/*divider between summary and main content*/

#divider {
	display:block; 
	clear:both; 
	float:none; 
	width:100%; 
	margin:0 0 12px 0; 
	padding:0; 
	border-bottom: 3px solid #ececec; 
	height: 2px; 
	overflow:hidden;
}

/*comments and contact form*/

.comment {padding: 7px 0; width:100%; border-bottom: 2px solid #f5f5f5; clear:both}

.comment-author {
margin: 0;
border: 0;
}

.comment-author img {
float:left;
margin: 0 10px 0 0;
border: 0;
}

#content-in form fieldset {
border:0;
}

#content-in form fieldset div {
	display: block; 
	clear:both;
	width: 95%; 
	padding: 5px 0;
}

#content-in form fieldset label {
	width:135px; 
	float:left; 
	padding:0; 
	border: 0; 
	margin:0;
	position: relative;
	top: 3px;
	display:block;
	min-height:3px;
}

#content-in form fieldset input {
	width: 98%;
	max-width:400px; 
	padding: 2px; 
	margin:2px 0; 
	float:left;
	border-radius:3px; 
	background: #f7f7f7; 
	border: 1px solid #cccccc; 
	color: #222222;
 	font: 13px mainfont, sans-serif;
}

#content-in form fieldset textarea {
	width: 98%;
	max-width:400px; 
	height:200px; 
	padding: 2px; 
	margin:2px 0; 
	border-radius:3px; 
	background: #f7f7f7; 
	border: 1px solid #cccccc; 
	color: #222222;
 	font: 13px mainfont, sans-serif;
}

#content-in form fieldset .button {
	width: 98%;
	max-width:400px; 
	float:left; 
	padding: 2px; 
	margin:2px; 
	font: bold 15px mainfont,sans-serif; 
	border-radius:5px;
	border: 1px solid #bbbbbb; 
	background: #dddddd; 
	color: #222222;
}

#content-in form fieldset .button:hover {
	background: #eeeeee; 	
}

#content-in form fieldset .button:active {
	background: #fafafa;	
}

/*links used to trigger toggle elements*/

#search-icon, .mobile-menu, .exitbutton {cursor: pointer;}

/*ads*/

.in-add, .in-add-mobile {display: block; float: none; clear:both; margin:15px auto; padding: 0;}

.in-add {width: 730px;}

.in-add-mobile {width: auto;}

/*responsive*/

@media (max-width: 1245px) {

#wrap {
	max-width: 900px;
}

#content-in {
	padding:10px;
}

#back {
	margin: 0;
	border:0;
	display: block;
	float: none;
	clear:both;

}

#back{
	padding:0;
}

#leftbar, #rightbar {
	position: relative;
	right: 0;
}

#leftbar {
	float: left;
	width:300px;
	padding:10px 40px 10px 10px;
}

#rightbar {
	float: left;
	width: 320px;
}

.panel {
	width: 25%;
	height: 310px; 
}

#title {
	width: 330px;
	float: left;
	margin: 0;
	padding: 15px 5px;
	border: 0;
}

#title h3 {
	font: bold italic 25px altfont, Arial, sans-serif; 
}

#content-in form fieldset label {clear:none; float:left; width:134px;}

} /*end 1245px*/

/*at this screen width, the website will start to look ugly.
the 728 x 90 banner will start to be partially covered by the edge of layout
but it does not matter because this will only be visible to those
PC users who intentionally reduce screen width. 
Those who have this width by default are mostly mobile users.
*/

@media (max-width: 860px) {

.panel { height: 300px; }

} /*end 860px*/


@media (max-width: 810px) {

.panel { height: 290px; }

} /*end 810px*/


@media (max-width: 790px) {

.panel { height: 285px; }

} /*end 790px*/


@media (max-width: 760px) {


body {
	font: 14px mainfont, Verdana, Helvetica, sans-serif;
	line-height: 17px;
}
	
#content-in h1 {
	margin: 16px 0 8px 0;
	font-size: 22px;
	line-height: 26px;
}

#content-in h2{
	margin: 0;
	padding: 8px 0;
	font-size: 18px;
	line-height: 22px;
}

#content-in h3{
	padding: 6px 0;
	text-align: left;
	font-size: 16px;
}

#content-in h4{
	padding: 0 0 6px 0;
	text-align: left;
	font-size: 14px;
}

#content-in .panel .panel-in h6{
	padding: 5px 0;
	font-size: 13px;
	line-height:15px;
	height: 30px;
}

.panel { height: 260px; }

.panel .panel-in span{
	padding: 10px 0;
	font-size: 12px;
	line-height: 14px;
	overflow: hidden;
	float:none;
	display:block;
	clear:both;
}

#content-in h5{ /*comment header */
	font-size: 14px;
	line-height:16px;
}

.contentpane {
width: 100%;
clear:both;
}

#leftbar {
	width: 160px;
}
} /*end 760px*/

@media (max-width: 720px) {

#contentpane, #contentpane2 {
width: 100%;
float: none;
clear: both;
}

#contentpane .contentpane-in, #contentpane2 .contentpane-in {
width: auto; 
padding: 0 5px 0 5px;
display: block;}

} /*end 720px*/


@media (max-width: 670px) {

.panel { height: 250px; }

} /*end 670px*/

@media (max-width: 641px) {

#content-in form fieldset label {clear:both; float:none; width:90%;}

#mobile-navigation {
	top: 130px;
}

.mobile-menu {visibility:visible; width:auto; height:auto; overflow:hidden;}

.buildings {margin:0; padding:0; border:0; overflow: hidden; width:0; height:0;}

.meta {float:left;}

.meta li a {border-left: 0; border-right: 1px solid #999999}


} /*end 641px*/

@media (max-width: 624px) {
.panel {height: 240px; }
} /*end 624px*/

@media (max-width: 574px) {
.panel { height: 230px; }

#leftbar {
	width: 120px;
}

#title {
	width: 130px;
	height: 75px;
	float: left;
	margin: 0;
	padding: 5px;
	border: 0;
}

#title h3 {
	font: bold italic 23px altfont, Arial, sans-serif; 
}

#title p { /*hide tagline in mobile screen*/
	margin: 0; padding: 0; border:0;
	width: 1px; padding: 1px;
	visibility:hidden;
	overflow:hidden;
	float:left;
}

} /*end 574px*/

@media (max-width: 540px) {
.panel {width: 33.33%; height: 255px; }
#leftbar {display: none;}
} /*end 540px*/

@media (max-width: 514px) {
.contentpane-out {
width: 100%;
float: none;
display: block;
clear: both;
margin: 0;
padding:0 0 10px 0;
border:0;
}

.contentpane-out a img {
width: auto;
float: none;
display: block;
clear: both;
margin: 10px auto;
}

} /*end 514px*/

@media (max-width: 478px) {

.panel { height: 240px;}

.contentpane {
	width: 100%;
	float: none;
}

} /*end 478px*/

@media (max-width: 460px) {

#leftbar ul {font: 11px altfont, Arial, sans-serif; margin:0;padding:0;border:0;}

.aligncenter, img.aligncenter,
div.aligncenter, p img.aligncenter {
	display: block;
	margin: 5px auto;
	float: none;
}

.alignleft {
	display: block;
	margin: 5px auto;
	float: none;
}

.alignright {
	display: block;
	margin: 5px auto;
	float: none;
}

} /*end 460px*/

@media (max-width: 415px) {

.panel {
	width: 50%;
	height: 265px; 
}


} /*end 415px*/


@media (max-width: 395px) {

#leftbar {
	float: left;
	width: 300px;
}

#rightbar ul {font: 12px altfont, Arial, sans-serif; margin:0;padding:0;border:0;}

.sideads {
	height: auto;
}

#leftbar { /*left skyscraper ad to disappear on mobile*/
	overflow: hidden;
	margin: 0;
	padding: 10px;
	border:0;
	width: 1px;
	height: 1px;
	overflow:hidden;
	visibility:hidden;
}

#back {
	height: auto;
	background: transparent;
}

body {
	font: 12px mainfont, Verdana, Helvetica, sans-serif;
	line-height: 16px;
}

#content-in h1 {
	margin: 14px 0 8px 0;
	font-size: 19px;
	line-height: 24px;
}

#content-in h2{
	margin: 0;
	padding: 8px 0;
	font-size: 16px;
	line-height: 22px;
}

#content-in h3{
	padding: 6px 0;
	text-align: left;
	font-size: 14px;
}

#content-in h4{
	padding: 0 0 6px 0;
	text-align: left;
	font-size: 12px;
}

.contentpane-in span, .fullpanel span, .contentpane-out span {
	font-size: 11px;
    margin: 10px 0;
}


} /*end 395px*/

@media (max-width: 378px) {
.panel { height: 255px; }

#title {
	width: 84px;
	height: 55px;
	float: left;
	margin: 0;
	padding: 15px 5px;
	border: 0;
	overflow:hidden;
}

#title h3 {
	font: bold italic 17px altfont, Arial, sans-serif; 
}

} /*end 378px*/

@media (max-width: 337px) {
.panel { height: 245px; }
} /*end 337px*/