/* 
    Document   : YT_basic
    Created on : 30 oct. 2012, 16:51:47
    Author     : Sylver
    Description:
        Basic CSS markup for YT
*/

/* RESET */
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td
{
    margin: 0;
    padding: 0;
}

/* GENERAL PAGE LAYOUT & default settings */
html 
{ 
    -webkit-font-smoothing: antialiased; /* maxvoltar.com/archive/-webkit-font-smoothing */
}

body
{
    background: url("graphics/bg_03.gif") navy repeat;
    font: normal 1em calibri, Tahoma, sans-serif;
    position: relative;
    width: 100%;
}
img,
object 
{
    border-style: none;
    max-width: 100%;          /* Fluid images */
}

em {
    font-style: italic;
}

b {
    font-weight: bold;
}

strong
{
    font-style: italic;
    font-weight: bold;
}

h1 {
    font-size: 1.8em;
    font-weight: normal;
    padding: 7px 3px 7px 20px;  
    margin: 10px 0px 10px 0;
    text-align: left;
}
#content h1
{
    background-color: #C9DDFC;
    border: 1px solid #91B7F0;
    margin: 10px 0px 30px 0;
    width: 97%;
}
h2, .likeH2 {
    font-size: 1.25em;
    font-style: normal;
    font-weight: bold;
    padding: 5px 3px;
}
h3 {
    font-size: 1.20em;
    font-style: normal;
    font-weight: bold;
    padding: 10px 2px;
    text-align: center;
}
p 
{
    padding: 4px;
    line-height: 130%;
}
ul, ol
{
    margin-left: 35px;
}

/* Snippets from HTML5 boilerplate */
pre 
{
    padding: 15px;
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word; /* IE */
}
/* align checkboxes, radios, text inputs with their label */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }

/* Drop shadow*/
.shadow {
	-moz-box-shadow: 0px 0px 5px #000;
	-webkit-box-shadow: 0px 0px 5px #000;
	box-shadow: 0px 0px 5px #000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=0, Color='#000000');
}

/* Login & Registration */
.loginRegForm
{
    display:block;
    padding: 15px 10%;
    background-color: #C9DDFD;
    height: 470px;
    margin-top: -498px;
}

.loginForm
{
	padding:5px;
	width:40%;
	float:left;
}
.loginForm h2
{
	text-align:center;
	margin: 10px;
}
#ForgotPassword
{
	text-align:center;
}
.RegForm
{
	padding:5px;
    width:56%; 
	border-left: 1px dashed navy;
    float:left;
}
.RegForm h2
{
	text-align:center;
	margin: 10px;
}
#LoggedIn
{
    float: left;
    padding: 5px 10px;
}
.welcome{
	text-align: justify;
	margin: 5px 5px 10px 5px;
}
.instructions{
	text-align: center;
	margin: 5px 5px 10px 5px;
}
.legend
{
	float:left; 
	text-align:right;
	padding: 2px 5px;
	width: 40%;
}
.legendTbl
{
	text-align:right;
	padding: 2px 5px;
	width: 40%;
}
.input
{
	text-align: left;
	padding: 2px 5px;
	margin:2px 0px;
}
#emailValidation
{
    position: absolute;
    margin: 15% 25% 10% 25%;
    padding: 0px 5px;
    width: auto;
    min-width: 400px;
    min-height: 100px;
    max-width: 500px;
    height: auto;
    background-color: #ccccff;
    border: 2px groove navy;
}


/* Home template */
#main
{
    background-color: white;
    border-left: 1px solid black;
    border-right: 1px solid black;
    min-height: 900px;
    min-width: 750px;
    width: 70%;
    max-width: 956px;
    margin: 0 auto;
}
#topBar
{
    background-color: #91b7f0; 
    height: 46px;
}
#CompanyName
{
    float: left;
    padding: 5px 20px;
    font-size: 1.5em;
}
#topBarItems
{
    width: 300px;
    margin: 0 0px 0 auto;
}
#login
{
    float: left;
    cursor: pointer;
    
}
#langSelector img
{
    margin: 5px 10px;
}
#mnu_top
{
    padding:15px;
    font-size: 1em;
    text-align: right;
}
#mnu_top a
{
    text-decoration: none;
    color: black;
}
/* main presentation area of the home page */
#mainBox
{
    background:  url('graphics/bg_TopArea_02.png') lightblue no-repeat; 
    background-size: cover;
    height: 414px;
    max-height: 414px;
}
#innerMainBox
{
    position: relative;
    width: 600px;
    margin: 0 auto;
}
#pitch
{
    float: left;
    width: 322px;
}
#ksp
{
    margin: 12px 0 0 0;
}
#ksp li
{
    list-style-type: none;
    background-image: url("graphics/bulletPoint_Checkmark_01.png");
    background-repeat: no-repeat;
    font-size:  1.125em;
    padding: 0px 0px 15px 40px;
}
#mainPicture
{
    float: right;
    width: 230px;
}
#callToAction
{
    width: 500px;
    margin: 30px auto;
}
#bt_prices
{
    float: left;
    margin: 0 10px 0 0px;
}
#bt_translate
{
    position: relative;
}
/* Horizontal menu bar */
#mnu_bar
{
    max-width: 900px;
    width: 90%;
    margin: -25px auto 20px auto;
}
#mnu_bar_left
{
    background-image: url('graphics/bg_mnu_left_01.png');
    background-repeat: no-repeat;
    width: 30px;
    height: 53px;
    float: left;
}
#mnu_bar_middle
{
    background-image: url('graphics/bg_mnu_middle_01.png');
    background-repeat: repeat-x;
    width: 91.113%;
    height: 53px;
    float: left;
    padding: 12px 0 0 0;
    text-align: center;
}
#mnu_bar_middle a
{
    color: white;    
    margin: 0px 1%;
    text-decoration: none;    
}
#mnu_bar_right
{
    background-image: url('graphics/bg_mnu_right_01.png');
    background-repeat: no-repeat;
    width: 30px;
    height: 53px;
    float: left;
}
#content
{
    margin: 10px 5%;
}
#content_tpltclean
{
    margin: 10px 5%;
}
#content_tpltclean h1
{
    background-color: #C9DDFC;
    border: 1px solid #91B7F0;
    margin: 10px 0px 30px 0;
    width: 97%;
}
#content_tpltclean p
{
    margin: 20px 0;
}
#content_left
{
    position: relative;
    padding: 10px;
    width: 60%;
    float: left;
}
.tbl_prices
{
    margin: 10px auto;
}
#quoteBox
{
    float: right;
    border: 1px #91b7f0 dotted;
    width: 30%;
    margin: 20px 3.2%;
}
#client_testimonial
{
    width: 80%;
    margin: 10px auto;
    text-align: center;
    font-family: serif;
    font-style: italic;
    font-size: 1.1em;
}
#mnu_boxes_container
{
    margin: 35px 7.3% 45px 5.7%;
    border: 1px #91b7f0 dotted;
    padding: 20px 0;
}
.mnu_box
{
    float: left;
    margin: 0 0 0 3.33%;
    width: 29%;
}
.mnu_box h2
{
    text-align: center;
    margin: 0 0 15px 0;
}
.mnu_box li
{
    list-style: none;
    padding: 0 0 5px 20%;
}
.mnu_box li a
{
    text-decoration: none;
    color: black;
}
.mnu_box li a:hover
{
    font-weight: bold;
    background-color: lightblue;
    border: 1px solid #91b7f0;
    padding: 5px;
    margin: 2px;
}
/* Footer */
#footer
{
    height: 190px;
    width: 100%;
    background: url('graphics/bg_footer.png');
    border-top: 1px black solid;
}
.footer
{
    padding: 20px 0px 0 0;
    font-size: 0.95em;
    width: 26%;
}
#commonTranslations td, #commonTranslations th 
{
    padding: 5px;
}
#leaderBoard1
{
    margin: 20px 5px;
}
/* Services page*/
.servIcon
{
    float: left;
    padding: 30px 20px;
}

/* Email opt-in */
#signup
{
    min-height: 300px; 
    width: 600px; 
    background-color: white; 
    position: relative; 
    margin: auto; 
    z-index: 6;
    padding: 10px; 
    border-radius: 25px; 
    border: 2px solid #91b7f0;
}
#optIn
{
    
}
.bt_blue_green
{
    height: 30px; 
    min-width:100px; 
    margin: 0 3px;
    display: inline-block; 
    padding: 2px 5px; 
    background-color: #C9DDFC; 
    color: navy;
    border-radius: 5px; 
    border: 2px solid #91B7F0;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    cursor: pointer;
}
.bt_blue_green:hover
{
        background-color: lightgreen;
        color: teal;
        border-color: teal;
        font-weight: bold;
}
#optInEmail
{
    height: 30px; 
    width: 200px; 
    background-color: white; 
    padding: 2px 5px; 
    border-radius: 10px; 
    border: 2px solid #91b7f0; 
    outline: none; 
    float: left;
}
#shadow
{
    height: 100%; 
    width: 100%; 
    background-color: rgba(0,0,0,0.9);
    position: absolute; 
    left: 0; 
    top:0; 
    z-index: 5;
}