﻿
/*************************************************************/
/*
/*   Style Sheets for LockMagic website v1.0
/* 
/*************************************************************/
/*  TOC
/*  1. Reset CSS - do not change or amalgamate the clearfix styles
/*  2. Structure 
/*  3. Defaults 
/*  4. Links and Navigation - Top, Main Features, Footer
/*  5. Signin Buttons
/*************************************************************/



/****************** 1. Reset CSS ******************/
html, body{
	margin: 0;
	padding: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	border-left:0;
	background-color: #666666;
} 
div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, sub,  tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border-style: none;
    border-color: inherit;
    border-width: 0;
    margin: 0;
    padding: 0;
    font-weight: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
body { line-height: 1; }
ol, ul { list-style: none; }
caption, th, td { text-align: left; font-weight: normal; }	
.clearfix:after { content:".";  display:block;  height:0;  clear:both; visibility:hidden; }	
.clearfix { display:inline-block; }	
.clearfix { display: block; }
* html .clearfix { height: 1%; }
.clearfloat {  clear:both; height:0; font-size: 1px; line-height: 0px; }


/****************** 2. Defaults ******************/

body { font: 12px Arial, Helvetica, sans-serif; }
a { text-decoration: none; font-size: 12px; font-weight: bold; color: #20528C; }
a:hover { color: #347ED1; }

h1 { font-size: 22px; color: #333; font-weight: bold; line-height: 50px; }
h2 { font-size: 17px; color: #fff; font-weight: bold; line-height: 38px; }
h3 { font-size: 15px; color: #00294F; font-weight: bold; line-height: 30px; }
h4 { font-size: 15px; color: #E74A1D; font-weight: bold; line-height: 30px; }
h5 { font-size: 12px; color: #333; font-weight: bold; }
h6 { font-size: 14px; color: Orange; font-weight: bold; font-family:Verdana; }

.fleft { float: left; }
.fright { float: right; }

hr { border-style: none; height: 1px; margin: 10px auto; border-top: dotted 1px #999999; }
.hdeco { border-bottom: #999 dotted 1px; }
.clear-bg { background: none: }


/****************** 3. Structure ******************/
.wrap { padding: 30px; width: 1024px; margin: 0 auto; }

#main-bg-top {
	background: #FFF url(../images/main-bg-top.jpg) top left no-repeat;
	width: 1024px;
	height: 10px;
}
#main-bg-bottom {
	background: #FFF url(../images/main-bg-bottom.jpg) top left no-repeat;
	height: 12px;
}

.header-wrap { background-color:#FFF; }

#main-gradient-top {
	background: #FFF url(../images/main-bg-gradient.jpg) bottom left no-repeat;
	width: 1024px;
	height: 25px;
}

#main-bg-header { width: 1024px; background-color:#FFF; }
#mainlogo { margin-left: 25px; margin-top: 10px; float:left; 
}
.Logo
{
    background-image: url('../images/lockmagic-logo.jpg'); 
    width:216px;
    height:78px;
    }
#header-wrap { width: 100% }
.body-wrap {
    background-color:#FFF;
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
	padding: 15px 15px 0px 15px;
	height: 100%;
}

.small-spacer { margin-top: 10px; }
.lcontent-wrap { width: 72.5%; height: 100%; float: left; }
.userpanel-wrap { padding-top: 20px; width: 47%; }
.userpanel-wrap ul { list-style: square; padding-left: 15px; }
.userpanel-wrap ul li{ padding-top: 5px; padding-bottom: 5px; }
.rcontent-wrap { width: 26.5%; height: 100%; float: right; }
.rsidepanel {background-color: #F8F8F8; border: solid 1px #E0E0E0; padding: 5px;}
.userpanel { background-color: #E2EEFF; border: solid 1px #AFD1FF; padding: 10px;}
.icon-wrap { padding: 10px 7px 10px 15px;}



.small-link {vertical-align:text-top;}
.small-link img {padding-right:5px;}
.small-link a {font-size:12px; font-weight:normal;}

#search-top 
{
	margin-top: 10px;
	margin-bottom: 15px;
	background: #FFF url(../images/lockmagic-bg.jpg) -368px -96px no-repeat;
	width:184px;
	height: 26px;
	margin-left: 400px;
}

#search-top input 
{
    position:absolute;
    color: #888;
    font-size: 11px;
    padding-left: 15px;
    padding-top: 5px;
    background:none;
	border: 0;
	width: 140px;
	height: 20px;
}

.logo-mso {
	background: url(../images/logo-msol.jpg) center left no-repeat;
	width: 135px;
	height:28px;
	padding: 5px;
}

.subheader-bg {
    background: #003465 url(../images/lockmagic-bg.jpg) 0 -130px no-repeat;
    width: 1024px;
    height: 64px;
}

.subheader-bg .headertxt { font-size: 20px; color: #fff; padding: 18px; padding-left: 110px; }

/****************** 4. Links and Navigation ******************/
#features-wrap { background-color: #003465; width: 1024px; height: 456px; z-index: -1000; }
.features-content-wrap { width: 750px; }
.features-nav { font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #FFF;}
.features-nav ul { list-style: none; }
.features-nav ul li {
	background: #002B54 url(../images/lockmagic-bg.jpg) 0px -65px no-repeat;
	width: 252px;
	height: 65px;
	line-height: 65px;
}
.features-nav ul li a { margin: 0; font-weight: bold; color:#FFF; text-decoration: none; text-align: left; }
.features-nav ul li a:hover { color: #00FFFF; border: 0;}
.features-nav ul li:hover, .features-nav ul li.active {
	/*color: #00FFFF;
	background: #004993 url(../images/lockmagic-bg.jpg) 0px 0px no-repeat;
	width: 252px;
	height: 65px;*/
}


#sub-nav-wrap { height: 40px;  }
#sub-nav, #sub-nav ul { list-style: none; line-height: 40px;  }
#sub-nav ul li { background: url(../images/top-nav-divider.jpg) center left no-repeat; }
#sub-nav a { display: block; text-decoration: none; }
#sub-nav li { float: left; width: 116px; }
#sub-nav ul li a { text-align: center; }
#sub-nav li ul  {
    position: absolute;
    z-index: 1000;
    width: 280px; 
    display: none; 
    background-color: #003465; 
    margin-top: -5px;
}
#sub-nav li ul li {
	background: url(../images/lockmagic-bg.jpg) -252px 0 no-repeat;
	width: 280px;
}
#sub-nav li ul li:hover {
	background-color: #003C78;
	background: url(../images/lockmagic-bg.jpg) -252px -44px no-repeat;
	width: 280px;
}
#sub-nav li ul li a  {
    padding-top: 2px; 
    padding-left: 40px; 
    font-size: 11px; 
    text-align: left; }
#sub-nav li ul li a:hover { color: #00FFFF; background: none; }
#sub-nav ul li a  {
	color: #999999;
	text-decoration: none;
	font-size: 18px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold
}
#sub-nav li:hover a {
	color: #fff;
    background: url(../images/lockmagic-bg.jpg) -252px -88px no-repeat;
}

#sub-nav li:hover ul { display: block; }
#sub-nav li:hover ul a { color: #2D96FF; }
#sub-nav li:hover ul li a { background: none; }
#sub-nav ul a:hover { color: #fff; text-decoration: none; }

.footer-nav { color: #fff; font-size: 11px; font-weight: normal; vertical-align: middle; padding: 10px 0 0 0;}
.footer-nav ul{ list-style: none; line-height: 40px;}
.footer-nav li { float: left; padding: 0 10px 0 10px;
	background: url(../images/footer-divider.jpg) center right no-repeat;
}
.footer-nav a {
	color: #fff;
	font-size: 11px;
	font-weight: normal;
	display: block;
	text-decoration: none;
}
.footer-nav a:hover { color: #D8D8D8;}

.tabs-nav { width: 100%; background-color: #F8F8F8;}
.tabs-nav li { float: left; width: 120px; padding: 5px; } 
.tabs-nav .active { background-color: #F8F8F8;}
.tabs-border 
{
    background-color: #F8F8F8;
    border-left: solid 1px #E0E0E0;
    border-right: solid 1px #E0E0E0;
    border-bottom: solid 1px #E0E0E0;
    padding: 5px;
}

.tabs-border-active
{
    background-color: #F8F8F8;
    border-top: solid 1px #E0E0E0;
    border-left: solid 1px #E0E0E0;
    border-right: solid 1px #E0E0E0;
    padding: 15px;
}
.tabs-border-inactive
{
    background-color: #CCC;
    padding: 15px;
    color: #FFF;
}
/****************** 5. Sign in Buttons ******************/

.button-live
{
    background: url(../images/signinbuttons.png);
    background-position: 0px -100px;
    width: 150px;
    height: 50px;
}

.button-live:hover
{
    background: url(../images/signinbuttons.png);
    background-position: -150px -100px;
    width: 150px;
    height: 50px
}

.button-google
{
    background: url(../images/signinbuttons.png);
    background-position: 0px -50px;
    width: 150px;
    height: 50px
}

.button-google:hover
{
    background: url(../images/signinbuttons.png);
    background-position: -150px -50px;
    width: 150px;
    height: 50px
}

.button-yahoo
{
    background: url(../images/signinbuttons.png);
    background-position: 0px -250px;
    width: 150px;
    height: 50px
}

.button-yahoo:hover
{
    background: url(../images/signinbuttons.png);
    background-position: -150px -250px;
    width: 150px;
    height: 50px
}

.button-aol
{
    background: url(../images/signinbuttons.png);
    background-position: 0px 0px;
    width: 150px;
    height: 50px
}

.button-aol:hover
{
    background: url(../images/signinbuttons.png);
    background-position: -150px 0px;
    width: 150px;
    height: 50px
}


.button-openid
{
    background: url(../images/signinbuttons.png);
    background-position: 0px -200px;
    width: 150px;
    height: 50px
}

.button-openid:hover
{
    background: url(../images/signinbuttons.png);
    background-position: -150px -200px;
    width: 150px;
    height: 50px
}


.icon-securefolder {
    background: url(../images/solutions-icon.jpg) 0 0 no-repeat;
    width: 51px;
    height: 52px;
}

.icon-secureemail {
    background: url(../images/solutions-icon.jpg) -51px 0 no-repeat;
    width: 51px;
    height: 52px;
}

.icon-securebackup {
    background: url(../images/solutions-icon.jpg);
    background-position: -102px 0;
    width: 51px;
    height: 52px;
}

.blueFiller	{background-color: #003465;height:5px;}

.nextstep_links td {padding-top:5px; padding-bottom:5px;}

.products_table td {padding-top:3px;padding-bottom:3px;vertical-align:middle;padding-left:5px;border-style:solid;border-color:White;border-width:1pt;}
.products_table .header	{background-color:#4F81BD;color:White;}
.products_table .row	{background-color:#D0D8E8;}
.products_table .altRow	{background-color:#E9EDF4;}