/* @import url('https://fonts.googleapis.com/css?family=Roboto'); */
/* @import url('https://fonts.googleapis.com/css?family=Nanum+Gothic+Coding'); */
/*@import url('https://fonts.googleapis.com/css?family=Fira+Mono');*/
/*nav*/
html {
	font-family: Arial Narrow, AvenirNextCondensed-Regular, Arial, sans-serif;
overflow-x: hidden !important;
}
a[rel="tooltip"] {
	margin: 10px !important;
	min-height: 50px !important;
	min-width: 50px !important;
	background: rgb(106,151,196);
	border-radius: 90px;
}
.footer-content {
	width: 90%;
	margin: 20px auto;
}
body.html.structural-calculator {
	margin: 0 !important;
  overflow-x: hidden;
	}

#branding_nav {
		width: 90%;
		margin: 0 5% 0;
		display: inline-block;

}
#logo a img {

}
#logo img {
	height: 85px;
image-rendering: auto;
letter-spacing: 0.5px;
max-height: 90px;
max-width: 100%;
position: relative;
text-decoration: none;
width: 175px;
}
#logo {
	display: inline-block;
	position: relative;
	width: 20%;
	float: left;
	min-width: 175px !important;
  }
/*nav menu*/
#nav {
	width: 80%;
	float: left;
	height: 100%;
}
#nav ul {
	list-style-type: none;
	float: right;
}
#nav ul li {
	display: block;
	float: left;

}
#nav ul li a {
	font-family: Arial Narrow, AvenirNextCondensed-Regular, Arial, sans-serif;
	color: white;
	display: block;
margin: 5px 7.5px;
padding: 9px 15px;
font-size: 14px;
font-stretch: normal;
font-style: normal;
font-variant-caps: normal;
font-weight: normal;
letter-spacing: 0.5px;
text-decoration: none !important;
border-color: #082535;
border-radius: 2px;
border-style: solid;
}
.leaf a:hover {
	background: #ff9036 !important;
}
.quick_estimate {
	border-color: rgb(117, 191, 140) !important;
border-radius: 2px;
border-style: solid;
}
.get_quotes {
	background-color: rgb(117, 191, 140) !important;
border-style: solid;
}
/*body content*/
h1 {
	font-family: Arial Narrow, AvenirNextCondensed-Regular, Arial, sans-serif;
font-size: 34px;
color: rgb(1, 140, 200);
text-transform: uppercase;
text-align: center;
font-weight: bold !important;
letter-spacing: 1px;
margin-bottom: 15px;
}
h2 {
color: rgb(1, 140, 200);
display: block;
font-family: Arial Narrow, AvenirNextCondensed-Regular, Arial, sans-serif;
font-size: 28px;
font-weight: bold;
letter-spacing: 1px;
text-align: center;
text-transform: none;
vertical-align: baseline;
white-space: normal;
}
p {
	font-family: Arial Narrow, AvenirNextCondensed-Regular, Arial, sans-serif;
font-size: 18px;
letter-spacing: 0.5px;
}
.whitespace {
	border-color: transparent;
	color: transparent;
	margin: 30px 0;
}
#section-content {
		width: 90%;
		margin: 0 5% 0;
		display: inline-block;
}



/*footer*/

footer {
	background:#092c3f;
	width: 100%;
	color: white;
	position: relative;
	padding: 0 20px;
}
.footer_container {
	width: 100%;
	margin: 0 auto;
	padding: 15px 10px;
}
footer img {
	height: 38px;
	width: auto;
}
footer p {
	color: white;
}
footer a {
	color: #75bf8c;
}

footer a:hover {
	color: #ff9036;
}
.fineprint {
	font-size: 10px;
	display: block;
	bottom: 0;
	margin-top: 10px;
}
.fineprint a {
	font-size: 10px;
}
#zone-seo-wrapper {
	height: 0 !important;
	display: none;
}

/*calculator pages */
.inputTable {
	background-color: blue !important;
}


/*sidebar*/
/*home*/

.calculator-top-level {
	width: 49%;
	padding: 0.5%;
	display: block;
	float: left;
	text-align: center;
}
.disclaimer {
	margin-top: 30px;
}

.node {
	list-style-type: none;
    padding: 0;
}


 .node.menu li a:hover {
	background: rgb(117, 191, 140);
}
#block-block-8 ul {
	list-style-type: none;
	float: right;
}
#block-block-8 ul li {
	display: block;
	float: left;
}




/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */

@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */

/*footers*/
.float-left {
	display: block;
	float: left;
	width: 68%;
}
.float-right {
			display: block;
	float: right;
	width: 18%;
	margin-right: 14px;
}
footer {
	height: 80px;

}

}
@media only screen and (min-width: 851px) {

#region-content {
	width: 80%;
	float: left;
}
.region-sidebar-first {
	margin: 20px 0 40px;
	border-top: 1px solid black ;
	display: inline-block;
	width: 12%;
	float: right;
}
 .node.menu li a {
display: block;
float: left;
font-family: Arial Narrow, AvenirNextCondensed-Regular, Arial, sans-serif;
display: block;
margin: 5px 1px;
padding: 9px 11px;
font-size: 12px;
letter-spacing: 0.5px;
text-decoration: none !important;
width: 80%;
color: white;
background: #082535;
padding: 9px 15px !important;
text-align: center;
}

}
/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 850px) {
	table {
	  border-collapse:separate;
	  border-spacing: 0 20px;
	}
#region-content {
	width: 100%;
	float: none;
}
.region-sidebar-first {
	margin: 20px 0 40px;
	border-top: 1px solid black ;
	display: inline-block;
	width: 100%;
	float: left;
}

 .node.menu li a {
display: block;
float: left;
font-family: Arial Narrow, AvenirNextCondensed-Regular, Arial, sans-serif;
display: block;
margin: 5px 7.5px;
padding: 9px 15px;
font-size: 12px;
letter-spacing: 0.5px;
text-decoration: none !important;
width: 20%;
color: white;
background: #082535;
padding: 9px 15px !important;
text-align: center;
}


}


@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
 .node.menu li a {
	width: 40%;
}
	/*footers*/
	.float-left {
		display: block;
		float: left;
		width: 100%;
		margin-bottom: 20px;

	}
	.float-right {
				display: block;
		float: left;
		width: 100%;
		margin-right: 0;
		margin-bottom: 20px;
	}
footer {
	height: auto;
}

}
/* CSS Document */


.inputClass{
	width: 77%;
	background-color:#FFFF00 !important;
	border: none;
	padding: 12px 5px;
}
select.<div class="flexrow11"> {
	width: 90%;
}

/*BY PK*/
.inputClass1{

	background-color:#BCFAF7  !important;
}
.inputClasssmall{
	width: 50px !important;
	background-color:#FFFF00 !important;
}


/*BY PK*/
.outClass{
	width: 77%;
	border:none;
	text-align:center;
	font-weight:bold;
	background-color:#FFFFFF;
	padding: 12px 5px;
}
/*BY PK*/
.outClass1{
	width: 40px;
	border:none;
	text-align:center;
	font-weight:bold;
	background-color:#BCFAF7 !important;
}
/*BY PK*/
#snowImage{
	background-image:url(img/snow.jpg);
	height:240px;
	width:600px;
}
#snowImage td{
	height:15px;
	margin:0px;
	padding:0px;
	color:#8F3937;
	font-size:11px;
	font-weight:bold;
}
#snowImages2{
	background-image:url(img/snow_2.jpg);
	height:135px;
	width:285px;
	margin:auto;
}
#snowImages2 td{
	color:#8F3937;
	font-size:11px;
	font-weight:bold;
}
.inputTable, .outputTable{

	background-color: #cff0ff !important;
	width:100% !important;
	padding: 5px;

}
/*BY PK*/
.inputTable th, .outputTable th{
	text-align:center;
    color:white;
	font-weight:bold;
	background-color: #a8e4ff !important;
	color: #082535;
	padding-left:10px;

}

.table_div {
	width: 90% !important;
}
.table_div .outClass, .table_div .inputClass {
	padding: 12px 8px !important;
}

.inputTable td, .outputTable td{

	padding-left:10px !important;

}
/*BY PK*/
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:9998;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
width:575px;
z-index:9999;
padding:12px;
font-size:11px;
background-color:#EAEAEA;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}
#popupContactContent{
	font-size:11px;
	text-align:justify
}
#popupContactContent a{
	color:#000066;
	font-weight:bold;
}
blockquote{
	margin-top:0px;
	padding-top:0px;
	margin-bottom:0px;
	padding-bottom:0px;
	font-size:11px;
}

.divScreen, .divToolTip{
	display:none;

}


#tooltip {
	position:absolute;
	z-index:9999;
	color:#fff;
	font-size:10px;
	width:auto;
	min-width: 300px !important;
}
#tooltip::after {
	content: "x";
	position: absolute;
	top: 25px;
	right: 10px;
	color: black
}
.tooltipvisible {
	position: fixed;
	left: 50%;
	margin-left: -50px; !important;
}

#tooltip .tipBody {
	background-color:#EEEEE6;
	padding:5px 5px 5px 15px;
	color:#000000;
}


/* ASCE705I_W_M_S_HP_Shapes */
#ASCE705I_W_M_S_HP_Shapes_tbl1{
	background-image:url(../common/images/ASCE705I_W_M_S_HP_Shapes_im.gif);
	height:167px;
	width:249px;
	margin: 150px 20px;
	transform: scale(1.75);

}

#ASCE705I_W_M_S_HP_Shapes_tbl1 td{
	height:15px;
	margin:0px;
	padding:0px;
	color:#8F3937;
	font-size:11px;
	font-weight:bold;
}

/* ASCE705I_C_MC_Shapes */
#ASCE705I_C_MC_Shapes_tbl1{
	background-image:url(../common/images/ASCE705I_C_MC_Shapes_im.gif);
	height:166px;
	width:193px;
	margin: 150px 20px;
	transform: scale(1.75);
}
#image-exception {
	margin: 150px 60px ;
}
#image-exception img {
	transform: scale(1.75);

}

#ASCE705I_C_MC_Shapes_tbl1 td{
	height:15px;
	margin:0px;
	padding:0px;
	color:#8F3937;
	font-size:11px;
	font-weight:bold;
}

/* ASCE705I_WT_MT_ST_Shapes */
#ASCE705I_WT_MT_ST_Shapes_tbl1{
	background-image:url(../images/ASCE705I_WT_MT_ST_Shapes_im.gif);
	height:151px;
	width:250px;
	margin: 150px 20px !important;
	transform: scale(1.75);
}

#ASCE705I_WT_MT_ST_Shapes_tbl1 td{
	height:15px;
	margin:0px;
	padding:0px;
	color:#8F3937;
	font-size:11px;
	font-weight:bold;
}
/* Beam Elastic Start */
.divChart{
	width:702px;
	height:242px;
}
.outClassBig{
	width: 160px !important;
	border:none;
	text-align:center;
	font-weight:bold;
	background-color:#FFFFFF;
}
#sbwsaImage{
	background-image:url(../common/images/sbwsa.jpg);
	height:378px !important;
	width:438px !important;
	margin: 180px 20px;
	transform: scale(1.75);
}
#XBALLImage{
	/*background-image:url(../images/XBALL.jpg);*/
	background-image:url(../common/images/XBALL.jpg);
	height:265px !important;
	width:627px !important;
	margin: 150px 60px;
	transform: scale(1.25);
}

#XBALL2SImage{
	background-image:url(../common/images/XBALL2S.jpg);
	height: 340px !important;
	width: 628px !important;
	margin: 130px 50px;
	transform: scale(1.25);
}
#beamImage{
	background-image:url(../common/images/BOEF.jpg) !important;
	height:200px !important;
	width:445px !important;
	margin: 130px 50px;
	transform: scale(1.25);
}

#beamImage td{
	height:18px;
	margin:0px;
	padding:0px;
	color:#8F3937;
	font-size:11px;
	font-weight:bold;
}
#chart1, #chart2 {
	min-height: 290px;
	background-repeat: no-repeat;
	width: 90%;
	background-size: 100%;
}
#sbaImage{
	height:200px !important;
	width:300px !important;
	background-image:url(../common/images/sba.jpg);
	margin: 150px 40px;
	transform: scale(1.75);
}

.errred{
	color:#F00;
	/*font-weight:bold;*/
}
.err{
	color:#F00;
	font-weight:bold;
}

.rot-neg-90 {
  /* rotate -90 deg, not sure if a negative number is supported so I used 270 */
  -moz-transform: rotate(270deg);
  -moz-transform-origin: 50% 50%;
  -webkit-transform: rotate(270deg);
  -webkit-transform-origin: 50% 50%;
  /* IE support too convoluted for the time I've got on my hands... */
}
.rotate {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

#branding_nav {
	display: flex;
	justify-content: space-around;

}
header {
	background-color: #082535;
	width: 100%;
	margin: 0 !important;
	max-height: none !important;

}

.content {
	width: 90% !important;
	padding: 20px 10px;
}
.flexcontainer {
  background-color: #cff0ff !important;
  padding: 20px 10px;
	margin-bottom: 50px;
}

.flexcontainer.slide {
	min-width: 640px !important;
}
.flexrow, .flexrow2, .flexrow3,.flexrow4, .flexrow4e, .flexrow6, .flexrow7,.flexrow8,.flexrow5, .flexrow11, .flexrow12 .flexrows5, .flexrows2, .flexrows3,.flexrows4   {
  width: 100%;
  clear: both;
  display: flex;
  justify-content: space-between;
  padding: 15px 2px;
	font-family: Arial Narrow, AvenirNextCondensed-Regular, Arial, sans-serif;
	font-size: 16px;
}
.threemw .flexrow div:nth-child(2) {
	width: 75%;
}
.centerer {
	width: auto;
	text-align: middle;
}
.twelverow div.tt, .twelverow div.unit {
	max-width: 5%;
}
.flexrow8 div {
	width: 12.5%;
}
.flexrow.twelverow div:first-child {
	width: 10% !important;
}
.flexrow.twelverow div:nth-child(2) {
	width: 10% !important;
}
.flexrow7 div {
	width: 14%;
}
.flexrow3 div {
	width: 33%;
}
.flexrow3 div {
	width: 45%;
}
.flexrow3 div.unit {
	width: 10%;
}
.flexrow4 div {
	width: 20%;
}
.flexrow4e div {
	width: 20%;
}
.flexrow4 div:nth-of-type(3) {
		width: 10% !important;
		 word-wrap: break-word;
		 font-size: 10px;
}

.flexrow4 div:first-child {
	width: 35%;
}
.flexrow4 div:last-child {
	width: 35%;
	word-wrap: break-word;
}
.flexrow6 div {
	width: 16.67%;
}
.flexrow5 div {
	width: 20%;
}
.flexrow11 div {
	width: 9%;
}
 /* splits */

 .flexrows3 div {
 	width: 17.5%;
 }
 .flexrows3 div:first-child {
 	width: 65%;
 	word-wrap: break-word;
 }
 /* .flexrows3 div {
	 width: 25%;
 } */
 .flexrows4 div {
 	width: 16%;
 }
 .flexrows4 div:last-child {
 	width: 50%;
 	word-wrap: break-word;
 }
.flexrows5 div {
	width: 15%;
}
.flexrows5 div:nth-child(4) {
	width: 20%;
	word-wrap: break-word;
}
.flexrows5 div:last-child {
	width: 35%;
}
.flexrows2 div {
	width: 65%;
}
.flexrows2 div:last-child {
	width: 35%;
	padding: 0 15px;
}
a[rel="tooltip"] {
	padding: 5px 15px;
}
.header {
	font-weight: bold;
	font-size: 22px;
}
.headerow {
	background-color: #a8e4ff !important;
	font-weight: bold;
	font-size: 18px;
	align-items: center;
justify-content: center;
}
.errred {
	align-items: center;
justify-content: center;
color: red;
}
.headerow-small {
	background-color: #a8e4ff !important;
	font-weight: bold;
text-align: center !important;
}
.flexrow:nth-child(even) {
  /* background: #BAD8E5; */
}

.flexstart, .flexrow div:first-child {
  width: 30% !important;
  display: block;
  flex-direction: column;
  text-align: left;
  font-weight: bold;
}
.flexcenter, .flexrow div:nth-of-type(2) {
  display: block;
  width: 30%;
  text-align: left;
}
.unit, .flexrow div:nth-of-type(3) {
  width: 8%;
	padding: 0px 5px;
}
.flexcenter input, .flexcenter select {
  width: 75% !important;
}
.flexend, .flexrow div:nth-of-type(4) {
text-align: left;
  width: 30%;
}

hr.spacer {
  border-color: transparent;
  margin-top: 50px !important;
}
ul.relatedres {
  list-style-type: none;
}
.flexgrid {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
		padding: 30px 20px;
		margin-bottom: 50px;
}
.flexgrid div {
	width: 45%;
	padding: 10px;
}
#pageBOEF {
	width: 100%;
	max-width:  840px;
	margin:auto;
}
#pageBOEF.narrow {
	max-width: 564px !important;
}

/* desk only */
@media (min-width:1050px) {
	.narrow {
		width: 80% !important;
		margin: 0 auto !important;
	}
	#menu {
		display: none !important;
	}
	/* ASCE705I_WT_MT_ST_Shapes */
	#ASCE705I_WT_MT_ST_Shapes_tbl1{
		background-image:url(../images/ASCE705I_WT_MT_ST_Shapes_im.gif);
		/* height:151px;
		width:996px; */
		margin:auto;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	#ASCE705I_WT_MT_ST_Shapes_tbl1 td{
		height:15px;
		margin:0px;
		padding:0px;
		color:#8F3937;
		font-size:11px;
		font-weight:bold;
	}

  #snowImage {
    background-image: url(img/snow.jpg);
    height: 395px;
    width: 996px;
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
  #snowImage td, #snowImages2 td {
    font-size: 13.5px;
  }
#snowImages2 {
  background-image: url(img/snow_2.jpg);
  height: 478px;
  width: 100%;
  margin: auto;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

}
@media screen and (min-width: 634px) {
	.footer_container {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.footer_container ul {
	list-style-type: none;
	margin-right: 20px;
	text-decoration: none;
	width: 60%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
}
.footer_container a {
	text-decoration: none;

}
.footer_container a:hover {
background: navy !important;
}
}

/* cell */

@media (max-width:1049px) {
	.hide {
display: none !important;
	}
	#nav ul li {
		float: none !important;
	}
	#menu, .close {
		display: block !important;
		border: 2px solid white;
		color: white;
	}
	#menu a, .close a {
		padding: 9px 15px !important;
	}

	#snowImage td, #snowImages2 td {
		font-size: 12px;
	}
	#snowImages2 {
	  background-image: url(img/snow_2.jpg);
		height: 340px;
		width: 600px;
	  margin: auto;
	  background-repeat: no-repeat;
	  background-size: 100% 100%;
	}
}
@media (max-width:633px) {
	.divToolTip {
		border: 1px solid black;
		margin: 12px 0;
		padding: 10px;
	}
	.divToolTip br {
		/* display: none; */
	}
	#tooltip {

	padding: 30px 5px 5px !important;
		position: absolute;
		z-index: 9999;
		color: #fff;
		font-size: 10px;
		width: 90vw;
		min-width: 1px !important;
		max-width:  90vw !important;
		left: 5% !important;
		height: 50vh;
		font-size: 20px !important;
		line-height: 1.5 !important;
	}
	footer .leaf a {
		margin: 10px!important;
		min-height: 48px !important;
		min-width: 48px !important;
	}
	a {
		margin: 8px !important;
	}
/* #backgroundPopup {
	display: block;
} */
  a[rel="tooltip"] {
		display: none;
	}/*
	a[rel="tooltip"]:after {
		content: attr(title) ": " !important;
		display: block !important;
	} */


	.footer_container ul {
	list-style-type: none;
	text-decoration: none;
	width: 60%;
	display: flex;
	flex-direction: column;
	align-items: left;
	justify-content: space-around;
	padding-left: 0;
	margin-left: 0;
	}
	.footer_container a {
		text-decoration: none;
		padding: 5px 2px;
		display: block;
	}
	.footer_container a:hover {
	background: navy !important;
	}
	select, input {
		min-width: 75px;
		min-height: 48px !important;
		margin: 10px !important;
	}

	.bigimage {
		max-width: 100%;
	}
	.flexrow, .flexrow3,.flexrow4,.flexrow6,.flexrow5   {
	font-size: 14px;
	}
	#pageBOEF {
		width: 90%;
		max-width:  90% !important;
		margin:auto;
		padding: 10px;
	}

	.outClass, .inputClass {
		padding: 5px;
	}
.flexrow {
	font-size: 13.4px;
}
a[rel="tooltip"] {
	padding: 11px !important;
}

#tooltip {
	position:absolute;
	z-index:9999;
	color:#fff;
	font-size:10px;
	width:auto;
	min-width: 200px !important;
	left: 0px !important;
}

  .tableslider, .bigimage {
    display: block;
    max-width: 100vw !important;
    overflow-x: scroll;
    margin: 50px 0;
  }
	.tableslider::before {
		background: yellow;
		padding: 2px 10px;
		color: navy;
		content: "Swipe to view full table >";
	}
	.flexgrid {

	}
	.flexgrid h3 {
		text-align: center;
	}
	.flexgrid div {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;

	justify-content: space-between;

	}
}