/*
 * -----Typography CSS-------
 *
 * author: Aram Balakjian
 * date: 26th March 2009
 * 
 * Layout for BrushedSilver template
 * 
 * Provided by SSbits.com
 * 
 *
 * 
 */
/* GENERIC STYLES */
.typography * {
	font-family: sans-serif;
}
/* PARAGRAPHS */
.typography p {
 	color: #444;
 	line-height: 1.6em;
 	font-size: 1.3em;
	padding: 10px 0;
	text-align: left;
}

blockquote {
	margin: 25px;
	font-size: 1.4em;
	color: #777;
}	


/* LINKS */
.typography a { 
 	text-decoration: none;
	color: #486475;
}
.typography a:hover {
 	text-decoration: underline;
}


/* LIST STYLES */
.typography ul, 
.typography ol {
	margin: 10px;
}


.typography li {
 margin: 10px 10px;
  list-style: disc;
  padding-left: 2px;
}
 
p.caption {
	font-size: 10px;
	line-height: 1.3em;
  	text-align:left;
	background-color: #FFFFFF;
	box-shadow: #c8c8c8 1px 1px 5px;
	padding: 8px;
}

/* HEADER STYLES */

.typography h1,
.typography h2 { 
	color: #494949;
	margin: 10px 0 0 0;
	clear: both;
	font-weight: 700;
	font-family: sans-serif;
}
.typography h1 {
	font-size: 2.1em;
}
.typography h2 { 
	color: #494949;
 	font-size: 1.8em;
}
	
.typography h3 {
	font-weight: 600;
	font-size: 1.6em;
	font-family: sans-serif;
}
.typography h4 {
	font-size: 1.6em;
	color: #494949;
	clear: both;
	font-weight: 600;
	line-height: 1.5em;
	border-bottom: 1px solid #CFDAE1;
	font-family: Arial, sans-serif;
}
.typography h5 {
	font-size: 1.4em;
	color: #222;
	font-weight: 300;
}
.typography h6 {
	font-size: 12px;
	color: #555;
	font-weight: 300;
	line-height: 14px;
	}

.mylists {
	font-size: 12px;
	color: #5b5b5b;
	clear: both;
	padding-left: 25px;
	font-weight: bold;
	line-height: 16px;
}
.mysmlists {
	font-size: 11px;
	color: #5b5b5b;
	clear: both;
	padding-left: 5px;
	font-weight: 600;
	line-height: 13px;
}
.txtlists {
	color: #555;
 	line-height: 1.6em;
 	font-size: 1.3em;
	clear: both;
	padding-left: 45px;
}
.bigpara {
	font-size: 1.3em;
	color: #222;
	width: 95%;
	clear: both;
	font-weight: normal;
	line-height: 21px;
}

.colorbox {
/*	background:#6B5352; */
	border-top:1px solid #CFDAE1;
/*	padding: 25px; */
	margin:25px 0px;
}

.colorboxpe {
	padding: 1px;
	border: 1px solid #A7A7A7;
	color: #000;
	font-size: 1.0em;
	font-family: sans-serif;
	width: 180px;
/*	background: #555555;
	font-size: 8px;
	color: #FFFFFF;
	clear: both;*/
}


.projexp {

	font-size:small;
	font-weight:bold;
	margin: -1px 0 0 0;
	color: #555555;
	width: 160px;
        max-height:14px;
	text-align: left;
}

.solidbox {
	font-size: 1.3em;
	color: #494949;
	width: 95%;
	clear: both;
	font-weight: normal;
	line-height: 21px;
}

/*OUR STYLES */


/* ADDRESS STYLES */	
.typography pre {
	font-family:"Courier New",Courier;
	display:block;
	font-size:1.2em;
	margin:2em 5em;
	padding:0.5em;
	border:1px #ccc solid;
	background:#eee;;
}
.typography label {
 	display: block;
	margin: 10px 0 -10px 0;
	color: #777;
}

.typography q {
	display:block;
	font-size:0.8em;
	margin:1em 1em;
	padding:0.5em;
	border:1px #ccc solid;
}


/* TABLE STYLING */
.typography table {
	margin: 10px;
	font-size: 1.2em;
	color: #666;
	border-collapse:collapse;
}
	.typography td {
		padding:5px;
	}

/* WYSIWYG EDITOR ALIGNMENT CLASSES */
.typography .left {
	text-align:left;
}
.typography .center {
	text-align:center;
}
.typography .right {
	text-align:right;
}
.typography img.right {
	float:right;
	margin-left:20px;
}
.typography img.left {
	float:left;
	margin-right:20px;
}
.typography img.leftAlone {
	float: left;
	margin-right: 100%;
}
.typography img.center {
	float:none;
	margin-left:auto;
	margin-right:auto;
	display:block;
}

.typography img.project {
	float:none;
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
	display:block;
}

.projlink {
      float: left;
      width: 160px;
      height: 120px;
      overflow: hidden;
      margin: 10px;
      position: relative;
      text-align: center;
      cursor: pointer;
      background: url("http://www.sfmi.com/assets/Uploads/banner-3-900x436.jpg");
      background-size: cover;
}

.projlink:nth-of-type(-n+4) {
    margin-top: 20px;
}

.projlink:nth-of-type(4n-3) {
    margin-left: 15px;
}

img.projpage {
     width: 160px;
      height: 120px;
      overflow: hidden;
}

.projlink:hover {
      background: white;
}

.projlink:hover img.projpage {
      opacity: .3;
}

.projlink p.projtitle {
      position: absolute;
      z-index: 2;
      color: #222;
      font-weight: bolder;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: none;
      font-family: helvetica, sans-serif;
      font-size: 1.3em;
      line-height: 1.3em;
      text-transform: uppercase;
      padding: 0;
      margin: 0;
}

.projlink a {
      color: inherit;
      padding: 0;
      margin: 0;
}

.projlink a:hover {
      text-decoration: none;
}

.projlink:hover .projtitle {
      display: block;
}

.typography img.sociallink {
      float: left;
      display: inline;
}


/* FORMS */
.typography label {
	font-size: 1em;
}
.typography input.text, .typography textarea {
	font-size: 1em;
}