/*******************************************************************************
\file templates.css
\author Benson Tan
\par bensontan.1989\@gmail.com
\date Aug 09, 2013
\brief
This css contain the master pages of the CMS-longxin

Copyright (C) 20xx DPM. 
Reproduction or disclosure of this file or its contents without the 
prior written consent of DPM is prohibited. 
*******************************************************************************/





/* Reset css -----------------------------------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; }


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* End of reset css -----------------------------------------------------------------*/



/* My Master Page */

/* Body Structure -------------------------------------------------------------------*/
* { 
    *behavior:  url('../Scripts/boxsizing.htc'); /* This is to support ie7 */
    -webkit-box-sizing: border-box; /* Safari  */
    -moz-box-sizing: border-box;    /* Firefox */
    box-sizing: border-box; 
    
    padding: 0;
    margin: 0; 
}

html { 
    width: 100%; 
    height: 100%; 

    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%;     /* 2 */
}

body {
    font: 62.5% 'Open Sans', sans-serif;
    text-align: left;
    line-height: 1;
    min-height: 100%;
    width: 100%;
    height: auto;
}





/* Position & Container --------------------------------------------------------------*/
.clear { clear: both;  }
.right { float: right; }
.left  { float: left;  }

.margin { margin: 0 auto; }
.top    { vertical-align: top;    }
.bottom { vertical-align: bottom; }

.border { border: 1px solid #d0d0d0; }
.container { width: 100%; height: auto; }
.container100 { width: 100%; height: 100%; }

.inline      { display: inline; }
.inlineblock { display: inline-block; }
.block       { display: inline; }

/*#header_wrap #menu_btm { width: 100%; height: auto; text-align: justify; float: left;  }
#header_wrap #menu_btm a { color: #d7c06e;  display: inline-block;  *display: inline; width: auto; zoom: 1; }*/
.stretcher { width: 100%; display:inline-block; font-size: 0; line-height: 0; }
/* Text -----------------------------------------------------------------------------*/
h1 { }
h2 { }
h3 { }
h4 { }
h5 { }
h6 { }
p  { }

.unbold  { font-weight: normal; }
.bold700 { font-weight: 700;    }
.bold800 { font-weight: 800;    }
.bold    { font-weight: bold;   }

.lineheight20 { line-height: 2.0; }
.lineheight15 { line-height: 1.5; }
.lineheight10 { line-height: 1.0; }

.justify { text-align: justify; }
.center  { text-align:center; }

.px10 { font-size: 10px; }
.px11 { font-size: 11px; }
.px12 { font-size: 12px; }
.px13 { font-size: 13px; }
.px14 { font-size: 14px; }
.px15 { font-size: 15px; }
.px16 { font-size: 16px; }
.px17 { font-size: 17px; }
.px18 { font-size: 18px; }
.px19 { font-size: 19px; }
.px20 { font-size: 20px; }
.px21 { font-size: 21px; }
.px22 { font-size: 22px; }
.px23 { font-size: 23px; }
.px24 { font-size: 24px; }

/* Dropdown -------------------------------------------------------------------------*/
.dropdownList { position: relative; color: #6a6a6a; cursor: pointer; }
.dropdownList a { position: relative; z-index: 998; }
.dropdownList div { position: absolute; top: 24px; z-index: 999; width: auto; display: none; }

.dropdownList div ul { width: auto; height: auto;  }
.dropdownList div ul li { width: auto; text-align: center;     }
.dropdownList div ul li a {  color: #fff; cursor: pointer; font-size: 13px; text-transform: uppercase;  font-weight: bold; }
/*.dropdownList div ul li a:hover { color: #cbcbcb; }*/

.nav_top { width: 210px !important; height: 41px; margin: 0 auto; background: url('../Images/Base/nav_top.jpg') no-repeat; padding-top: 15px !important; }
/*.nav_mid { width: 210px !important; height: 41px; margin: 0 auto; background: url('../Images/Base/nav_mid.jpg') no-repeat; padding-top: 15px !important; }*/
/*.nav_btm { width: 210px !important; height: 41px; margin: 0 auto; background: url('../Images/Base/nav_btm.jpg') no-repeat; padding-top: 10px !important; }*/ 


/* SubDropdown ----------------------------------------------------------------------*/
.subdropdownlist { position: relative; color: #6a6a6a; cursor: pointer; }
.subdropdownlist a { position: relative; z-index: 998; color: #6a6a6a; }
.dropdownList span { position: absolute; top: 10px; left: 139px; z-index: 999; width: 230px; display: none; }

.subdropdownlist span ul { width: 100%; height: auto; }
.subdropdownlist span ul li { width: 100%; text-align: center; padding-top: 5px !important; }
.subdropdownlist span ul li a {  color: #6a6a6a; cursor: pointer;  }
.subdropdownlist span ul li a:hover { color: #c0c0c0; }


/* Form -----------------------------------------------------------------------------*/
.pointer { cursor: pointer; }
textarea { resize: none;    }

input[type="text"], input[type="password"], textarea {
         border:1px solid #ccc; 
        -webkit-box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    -moz-box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    background: rgba(255,255,255,0.5);
}
input[type="submit"]{ border: none; padding: 0 !important; }
/* Table  ---------------------------------------------------------------------------*/

/* Shape ----------------------------------------------------------------------------*/
.radius { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.radius-top-left { border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; }
.radius-top-right { border-top-right-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; }
.radius-bottom-left { border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; }
.radius-bottom-right { border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; }


.arrow-up { width: 0; height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid black;
}

.arrow-down { width: 0; height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #f00;
}

.arrow-right { width: 0; height: 0; 
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid #7b7b7b;
}

.arrow-left { width: 0; height: 0; 
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent; 
	border-right:10px solid #7b7b7b; 
}



/* Shadow & Gradient ----------------------------------------------------------------*/
.gradient {
    background: #d41e1e; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d41e1e", endColorstr='#900f0f'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#d41e1e), to(#900f0f)); /* for webkit browsers */
    background: -moz-linear-gradient(top, #d41e1e, #900f0f); /* for firefox 3.6+ */
}


.inner-shadow {
    -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 0 16px rgba(0,0,0,0.1);
}

.drop-shadow {
    -moz-box-shadow: 0px 4px 10px -2px #000;
    -webkit-box-shadow: 0px 4px 10px -2px #000;
    box-shadow: 0px 4px 10px -2px #000;
}

.text-shadow { text-shadow:1px 1px #00294e; }

.img-shadow { position: relative; }
.img-shadow::before { 		
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    box-shadow: inset 0 0 8px rgba(0,0,0,.6);
    -moz-box-shadow: inset 0 0 8px rgba(0,0,0,.6);
    -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.6); 
}
.img-shadow img { float: left; }




/* Table  ---------------------------------------------------------------------------*/
td, th { padding: 0; }


/* Struture Setting -----------------------------------------------------------------*/
img     { display: block; border: 0; margin:0 auto; }
/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) { overflow: hidden; }

a { background: transparent; text-decoration: none; }
a:hover, a:active { outline: 0; }
a:link            {}
a:visited         {}
a img             { border: 0; }

.rollover       { opacity: 1; transition: opacity 1s; -webkit-transition: opacity 1s;  }
.rollover:hover { opacity: 0.5; filter:alpha(opacity=50); }

/**
 * Correct `block` display not defined in IE 8/9.
 */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) { display: none; height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */
[hidden], template { display: none; }

/* End of Table Structure -----------------------------------------------------------*/