@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: 'Raleway', 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: 0 0 30px 0;
    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;
}
.ovrf{
    overflow:hidden;
}
#main_container {
    background: url("images/grey_triangle_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;
}
.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("images/passion_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 {
    background: #fff;
    overflow: hidden;
    z-index: 4;
}
.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: url("images/footer_striped_bg.jpg") repeat-x 0 0;
    height: 350px;
    position: relative;
    padding: 60px 0 10px;
    color: #fff;
    z-index: 2;
}
#footer h3{
    color: #fff;
    font-size: 1.375em;
    font-weight: 300;
    text-transform: uppercase;
}
#footer p{
    line-height: 1.2em;
    margin-bottom: 15px;
}
#footer .widget {
    margin-bottom: 50px;
    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:0.8em;
    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: #3b3b3b;
    display: block;
    padding: 15px 0;
    width: 100%;
    position: relative;
    z-index: 99;
}
.header2 {
    height: 50px;
}
#logo_white{
    height: 40px;
    float: left;
    width: 155px;
}
#logo_white a{
    background: url("images/passion_logo_white.png") no-repeat scroll center transparent;
    height: 40px;
    width: 155px;
    display: block;
}
.navigation2 {
    width: 55%;
    margin: 0;
    float: left;
}
#content_container {
    margin: 70px 0;
    overflow: hidden;
}
#left {
    width: 16%;
    float: left;
    padding: 10% 2.5% 5% 4.5%;
    display: block;
    color: #3a3a3a;    
}
#component {
    width: 70%;
    float: left;
    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;
    border-bottom: 2px dotted #c8c8c8;
    margin-top: 25px;
    padding-bottom: 35px;
}
#left .widget:first-child {
    margin-top: 0;
}

/**************** 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;
    border-bottom: 2px dotted #d8d8d8;
    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 .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 .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 .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;    
}