@font-face {
    font-family: 'mfg_labs_iconsetregular';
    src: url('font/mfglabsiconset-webfont.eot');
    src: url('font/mfglabsiconset-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/mfglabsiconset-webfont.woff') format('woff'),
         url('font/mfglabsiconset-webfont.ttf') format('truetype'),
         url('font/mfglabsiconset-webfont.svg#mfg_labs_iconsetregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body{
    background: url(images/background.jpg) center 0 repeat #edf3f5;
    color: #3a3a3a;
    font-family: 'Open Sans', Tahoma, Arial, Helvetica, sans-serif;
    font-size: 0.81255em; /*14px/16px = 0.875 (14px is the target size. 16px is the base for all screensize.)*/
    line-height: 1.75em;
}
html{ 
    height: 100%;
}
* {
    margin: 0;
    padding: 0; 
}

/**************** HTML5 fix - do not edit/remove ****************/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
    margin: 0;
    padding: 0;
}
img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
/**************** HTML5 fix - end ****************/
#content_grey_header p{ 
    padding: 0 0 1.25em 0;
    margin: 0;    
}
img, fieldset {
    border: 0;
}
.extrabold {
    font-weight: 900;
}
strong, em, b, i, .bold {
    font-weight: 700;
}
.light {
    font-weight: 300;
}
.ultralight {
    font-weight: 200;
}
sup {
    vertical-align: baseline;
    position: relative;
    top: -0.65em;
    font-size: 70%;
}
sub {
    top: 0.4em;
}
h1, h2, h3, h4, h5, h6{
    
}
/*font-size calculation: (actual size) - (target size) / (target size) x 100(to get percentage) + 100%  */
h1 { 
    font-size: 200%; /* 28px-14/14*100= 100 + 100%   */  
    font-weight: 400;
    color: #262626;
    margin: 20px 0px!important;
    padding: 0;
}
h2{ 
    font-size: 145%; /* 20px-14/14*100= 42.857143 + 100%   */
    font-weight: 400;
    color: #3a3a3a;
    margin: 0 0 30px 0;
    padding: 0;
}
h3 { 
    font-size: 130%; /* 18px-14/14*100= 28.571429 + 100%   */
    font-weight: 400;
    color: #3a3a3a;
    margin: 0 0 30px 0;
    padding: 0;
}
h4 { 
    font-size: 115%; /* 16px-14/14*100= 14.285714 + 100%   */
    font-weight: 400;
    color: #3a3a3a;
    margin: 0 0 15px 0;
    padding: 0;
}
h5 { 
    font-size: 115%; /* 16px-14/14*100= 14.285714 + 100%   */
    font-weight: 400;
    color: #3a3a3a;
    margin: 0;
    padding: 0;
}
h6 { 
    font-size: 100%; /* 14px-14/14*100= 0 + 100%   */
    font-weight: 400;
    color: #3a3a3a;
    margin: 0;
    padding: 0;
}
h7 { 
    font-size: 86%; /* 12px-14/14*100= -14.28571428571429 + 100% = 85.714286   */
    font-weight: 400;
    color: #3a3a3a;
    margin: 0;
    padding: 0; 
}

a, a:hover { 
    outline: none;
    text-decoration: none;
    color: #5D5D5D;
}
a:hover{ 
    text-decoration: underline;
}

ul{ 
    padding: 0;
    margin: 0;
}
ul li{ 
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ol{ 
    padding: 0;
    margin: 0;
}
ol li{ 
    padding: 0;
    margin: 0;
}

/**************** Background Colors ****************/
.red {
    background-color: #e42d1f;
}
.pink {
    background-color: #f6aa9a;
}
.rose {
    background-color: #c97365;
}
.maroon {
    background-color: #581d13;
}
.salmon {
    background-color: #f2836b;
}
.green {
    background-color: #8ebd7b;
}
.lime {
    background-color: #beca7d;
}
.lightyellow {
    background-color: #f2e1ac;
}
.yellow {
    background-color: #f4b800;
}
.teal {
    background-color: #83b9b3;
}
.darkteal {
    background-color: #568983;
}
.lightblue {
    background-color: #abe0eb;
}
.periwinkle {
    background-color: #a7bee3;
}
.violet {
    background-color: #bba2bb;
}
.white {
    background-color: #fff;
}
/**************** Font Colors ****************/
.red_text {
    color: #e42d1f;
}
.pink_text {
    color: #f6aa9a;
}
.rose_text {
    color: #d01b30;
}
.maroon_text {
    color: #581d13;
}
.salmon_text {
    color: #fa6241;
}
.green_text {
    color: #60a843;
}
.lime_text {
    color: #b0cc1c;
}
.lightyellow_text {
    color: #f2e1ac;
}
.yellow_text {
    color: #ffb400;
}
.teal_text {
    color: #83b9b3;
}
.darkteal_text {
    color: #568983;
}
.lightblue_text {
    color: #46c1da;
}
.periwinkle_text {
    color: #6f73cb;
}
.violet_text {
    color: #aa5eaa;
}
.white_text {
    color: #fff;
}

/**************** Element Styling ****************/
.global_wrap {
    max-width: 1024px;
    margin: auto;
    position: relative;
	-webkit-box-shadow: 0px 0px 32px -4px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 32px -4px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 32px -4px rgba(0,0,0,0.75);
}
/*.ovrf{
    overflow:hidden;
}*/
#main_container {
    background: url("images/steel_bg.jpg") repeat scroll 0 0 #fff;
}
#top_highlighter {
    background: #ededed;    
    font-size: 68%;
    font-weight: 300;
    text-align: right;
    color: #757575;
    padding: 5px 0;
    width: 100%;
    display:block;
    overflow: hidden;
    z-index: 3;
}
.quickcart_login{
    width: 70%;
    float: right;
    padding: 5px 10px 0 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: right;
    line-height: 1.5em;
}
.top_search{
   /* width: 25%;*/
    float: right;
    text-align: right;
    height: 25px;
	margin:8px;
}
.top_search br{
    display: none;
}
#header{
    background: #fff;
    display: block;
    border-bottom: 4px solid #dfdfdf;
    padding: 20px 0;
    width: 100%;
    position: relative;
    z-index: 99;
}
.header {
    height: 56px;
}
#logo a{
    background: url("http://meikasteel.com/template/pro/meikasteel/meika/css/images/meika_logo.png") no-repeat scroll 0 0 transparent;
    height: 56px;
    float: left;
    width: 140px;
    margin-left: 20px;
}
.navigation{    
    float: right;
    overflow: visible;
    width: 78%;
}
#home{    
    position: relative;
    padding: 70px 0;
    z-index: 6;
}
#home .article_title_area{    
    display: none;
}
#rotator {
    max-width: 1024px;
	margin: auto;
	position: relative;
}
.hero-carousel {
    
}
#mid_highlight {
    background: #fff;
    position: relative;
    padding: 60px 0;
    z-index: 5;
}
#mid_highlight h2 {
    color: #413d3e;
    font-size: 2.25em;
    font-weight: 300;
}
#mid_highlight .highlight-item {
    float: left;
    padding: 10px 1.9em;
}
#brand_slider {
    background: #fff;
    height: 200px;
    position: relative;
    padding: 60px 0 70px;
    color: #8d8b8b;
}
#brand_slider h1, 
#brand_slider h2, 
#brand_slider h3 {
    text-transform: uppercase;
}
#footer {
    background: #252527;
	min-height: 300px;
	position: relative;
	padding: 30px 0 30px;
	color: #fff;
	z-index: 2;
}
#footer h3{
    color: #fff;
    font-size: 2em;
    font-weight: 300;
    text-transform: uppercase;
	font-family: 'Pathway Gothic One', sans-serif;
}
#footer p{
    line-height: 1.2em;
    margin-bottom: 15px;
}
#footer .widget {
    margin-bottom: 30px;
    overflow: hidden;
}
.footer-item { /*208/1024*100=20.3125*/
    width: 20.2%; 
    margin-right: 50px;
    float: left;
}
.footer-item2 { /*208/1024*100=24.414*/
    width: 24.5%;
    float: left;
}
#copyright{
    width:100%;
    background-color:#131314;
    z-index: 1;
}
.copyright {
    clear: both;
    content: ".";
    display: block;
    height: 25px;
    padding: 15px 0;
    font-size:1em;
    text-align: center;
    color: #fff;
}
.copyright a{    
    
    font-weight: bold;
    text-decoration: none;
    color: #fff;
}
.copyright a:hover{
    text-decoration: underline;
}

/**************** Element Styling ****************/
#header2 {
    background: url(/storage/upload/meikasteel/images/base/header.jpg) #ED8D02;
    display: block;
    padding: 10px 0px 20px 0px;
    width: 100%;
    position: relative;
    z-index: 99;
}
.header2 {
    min-height: 90px;
}
#logo_white{
    height: 40px;
    float: left;
    width: 155px;
}
#logo_white a{
    background: url("images/meika_logo.png") no-repeat scroll center transparent;
    height: 90px;
	width: 230px;
    display: block;
}
.navigation2 {
    margin: 0;
    float: right;
	color: #fff;
	font-size: 2em;
	font-weight: 300;
	text-transform: uppercase;
	font-family: 'Pathway Gothic One', sans-serif;
}
#content_container {
    margin: 0px;
    overflow: hidden;
}
#left {
    width: 16%;
    float: left;
    padding: 5% 2.5% 5% 4.5%;
    display: block;
    color: #3a3a3a;    
}
#component {
    width: 70%;
    float: right;
    padding: 5% 4% 5% 2.5%;    
    display: block;
    color: #3a3a3a;
}
/* 
#left h3 {
    font-size: 115%; /*16px-14/14*100= 14.285714 + 100%   
    font-weight: 300;
    color: #a6a6a6;
    margin-bottom: 15px;
}*/


#left .widget {
    background: transparent;
    display: block;
    margin-top: 25px;
    padding-bottom: 20px;
}
#left .widget:first-child {
    margin-top: 0;
}

.sidebar h3
{
position: relative;
z-index: 1;
}

.sidebar span
{
text-align: center;
padding: 10px;
background: #00B1E5;
color: #fff;
font-size: 1.4em;
font-weight: 300;
text-transform: uppercase;
font-family: 'Pathway Gothic One', sans-serif;
width: 200px;
position: relative;
left: -59px;
float: left;
z-index: 1;
top: -25px;
}

 
.sidebar h3:before 
{
content: url(/storage/upload/meikasteel/images/base/ribbon.png);
height: 0px;
width: 0px;
position: relative;
left: -59px;
top: 34px;
z-index: -1; 
}

.meikarotator
{
max-width: 1024px;
margin: auto;
position: relative;
-webkit-box-shadow: 0px 0px 32px -4px rgba(0,0,0,0.75); 
-moz-box-shadow: 0px 0px 32px -4px rgba(0,0,0,0.75);
box-shadow: 0px 0px 32px -4px rgba(0,0,0,0.75);
}

.sidebar_aboutus
{
font-size: 15px;
}


/**************** CLEARFIX ****************/
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    height: 0; }
.clearfix {
    display: inline-block;
}
.clearfix {
    display: block;
    zoom: 1;
}
.clearfix:after, .clr {
    clear:both;
}


/**************** MISC CSS - add your own here ****************/
/**************** Gallery CSS ****************/
.gallery_category_title h1 {
    font-size: 200%; /* 28px-14/14*100= 100 + 100%   */  
    text-transform: uppercase;
    color: #3e3e3e;
}
.gallery_back_button span.back_btn{
    background: url(images/icons/back_teal36.png) no-repeat;
}
.gallery_category_divider {
    display: none;
}
.mbpgallery-category-box-file a, .mbpgallery-category-box-file button, .mbpgallery-category-box-file {
    color: #62a69f;
    font-size: 105%;
    line-height: 1.2em;
    text-decoration: none;
}
.mbpgallery-category-box-file a:hover, .mbpgallery-category-box-file button:hover, .mbpgallery-category-box-file:hover {
    text-decoration: underline;
    background: transparent;
    border: none;
}
.mbpgallery-category-box-file {
    height: auto !important;
    background: transparent;
    border: none;
    float: left;
    margin: 5px 4%;
    overflow: visible;
    padding: 5px;
    text-align: center;
}
.imgTriggerBox span {
    display: block;
}
/**************** Login / Registration Form CSS ****************/
.m_login.myform,
.register.myform {
    padding: 0 !important;
    width: auto !important;
}
.contact_detail_block .position,
.m_login.myform h1, #maincol h1,
.register.myform h1, #maincol h1 {
    margin: 0 0 15px !important;
    border: 0 !important;
    color: #3A3A3A !important;
    font-size: 200% !important;
    font-weight: 400 !important;
}
.m_login.myform label,
.register.myform label {
    color: #3e3e3e !important;
    display: block;
    float: left;
    font-weight: 600;
    line-height: 1;
    text-align: left;
    width: 120px;
}
.m_login.myform p,
.register.myform p, p.desc {
    border-bottom: 1px solid #AAAAAA;
    color: #3e3e3e;
    font-size: 100%;
    margin-bottom: 20px;
    padding: 10px 0;
}
.m_login.myform button, .m_login.myform .submit,
.register.myform button, .register.myform .submit {
    width: auto;
    margin: 0 5px 0 0;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 85%;
    background: #83b9b3 !important;
    color: #fff;
}
.m_login.myform button:hover, .m_login.myform .submit:hover
.register.myform button:hover, .register.myform .submit:hover {
    color: #fff;
    background-color: #568983;
}

/**************** Contact Form CSS ****************/
.contact_detail_block {
    /*margin-bottom: 25px;
    padding: 20px 0;
    overflow: hidden;*/
}
.contact_block .contact_form {
    margin: 0 0 15px !important;
    border: 0 !important;
    color: #3A3A3A !important;
    font-size: 140% !important;
    font-weight: 400 !important;
}
.contact_detail_block .address,
.contact_detail_block .city,
.contact_detail_block .state {
    margin: 0 !important;
}
.contact_form_div .contact_field {
    margin-bottom: 15px;
}
.contact_detail_block .address span,
.contact_detail_block .phone span,
.contact_detail_block .fax span,
.contact_detail_block .email span,
.contact_detail_block .website span{
    margin-right: 8px;
    padding: 8px;
}
.contact_detail_block .address span img,
.contact_detail_block .phone span img,
.contact_detail_block .fax span img,
.contact_detail_block .email span img,
.contact_detail_block .website span img{
    display: none;
}
.contact_detail_block .phone span {
    background: url('images/icons/con_tel.png') no-repeat center;    
}

.contact_detail_block .address span {
    background: url('images/icons/con_address.png') no-repeat center;    
}

.contact_detail_block .fax span {
    background: url('images/icons/con_fax.png') no-repeat center;    
}
.contact_detail_block .email span {
    background: url('images/icons/con_email.png') no-repeat center;    
}
.contact_detail_block .website span {
    background: url('images/icons/con_website.png') no-repeat center;    
}

.slogan
{
text-align: center;
padding: 10px;
background: #252527;
color: #fff;
font-size: 1.7em;
font-weight: 300;
text-transform: uppercase;
font-family: 'Pathway Gothic One', sans-serif;
}

.wrapper{
	width:95%;
	max-width:900px;
	margin:0px auto;
}

/************************************************************************************
    COLUMN
*************************************************************************************/
.col {
  float: left;
  margin-left: 3.2%;
  margin-bottom: 10px;
}
.fullwidth .col {
  float: none;
  margin-left: 0;
}
/* grid4 col */
.grid4 .col {
  width: 22.6%;
}
/* grid3 col */
.grid3 .col {
  width: 31.2%;
}
/* grid2 col */
.grid2 .col {
  width: 48.4%;
}
/* clear col */
.grid4 .col:nth-of-type(4n+1),
.grid3 .col:nth-of-type(3n+1),
.grid2 .col:nth-of-type(2n+1) {
  margin-left: 0;
  clear: left;
}

.button
{
float: right;
}

.col h2
{
font-size: 1.7em;
font-weight: 300;
text-transform: uppercase;
font-family: 'Pathway Gothic One', sans-serif;
text-align: center;
padding: 15px;
margin:0px;
}

.featured_products
{
max-width: 1024px;
margin: auto;
position: relative;
height: 200px;
background: url(http://meikasteel.com//template/pro/meikasteel/meika/css/images/wood_bg.png);
-webkit-box-shadow: inset 0px 0px 85px 10px rgba(0,0,0,0.48);
-moz-box-shadow: inset 0px 0px 85px 10px rgba(0,0,0,0.48);
box-shadow: inset 0px 0px 85px 10px rgba(0,0,0,0.48);
margin-bottom: 50px;
}

.featured_products_title
{
max-width: 1005px;
margin: auto;
text-align: center;
padding: 10px;
background: #252527;
color: #fff;
font-size: 1.7em;
font-weight: 300;
text-transform: uppercase;
font-family: 'Pathway Gothic One', sans-serif;
}

.shadow
{
max-width: 1024px;
margin: auto;
}

.shadow:after
{
content:url(http://meikasteel.com/storage/upload/meikasteel/images/base/shadow.png);
}


.homebutton
{
background-color: #00B1E5;
border-radius: 3px;
border: 1px solid #0886AC;
color: #FFF !important;
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
line-height: 20px;
padding: 8px 14px;
text-decoration: none;
text-transform: uppercase;
}

.homebutton:hover
{
background-color: #0298C4;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.homebutton:active
{
background-color: #12A4CF;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
-ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

.homebutton a
{
color: #FFF;
}

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

.map
{
width: 100% !important;
border: 0px !important;
position: static !important;
margin: 0px !important;
}

.gmap3
{
width: 100% !important;
}

.loadie {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #000;
	width: 0;
	height: 4px;
	-webkit-transition: width 0.5s ease-out;
	box-shadow: 0px 1px 5px rgba(0,0,0,0.25);
}


.fade {
  transition: all 300ms linear 700ms;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  opacity: 1;
}

.fade.out {
  opacity: 0;
}

/* blue button */ 

.update_btn, .address_info a {
-moz-box-shadow: inset 0px 1px 0px 0px #bbdaf7 !impotant;
-webkit-box-shadow: inset 0px 1px 0px 0px #bbdaf7 !important;
box-shadow: inset 0px 1px 0px 0px #bbdaf7;
background-color: #79bbff !important;
-moz-border-radius: 6px !important;
-webkit-border-radius: 6px !important;
border-radius: 6px !important;
border: 1px solid #84bbf3 !important;
display: inline-block !Important;
color: #ffffff !important;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px !important;
text-decoration: none !important;
text-shadow: 1px 1px 0px #528ecc;
line-height: 1em;
margin-bottom: 30px;
margin-top: 10px;
}

.update_btn:hover, .address_info a:hover {
	background-color:#378de5 !important;
    color:#ffffff;
}

.update_btn:active, .address_info a:active {
	position:relative;
	top:1px;
}

.pay_btn
{
line-height: 1em !important;
text-decoration:none !important;
}