@charset "UTF-8";
/* CSS Document */
/*@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,200,600);*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
/** COLOR PALLETE

Dark Blue: #082e44 / 8,46,68
Light (Medium) Blue #ddedf9 / 221,237,249
Bright Blue: #2bbcf2 / 43,188,242

Light Gray: #f1f1f1 / 241,241,241
Medium Gray: #e6e6e6 / 230,230,230


**Gradient Backgrounds
Light Lightest Blue: #ecf9ff
Light Medium Blue: #ddedf9
Light Darkest Blue: #c8e4f5

/**
 * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
 * Richard Clark (http://richclarkdesign.com)
 * http://cssreset.com
 */
 
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1.5;
}

* {margin:0;}

.pagewrap {
    /*margin-bottom: -40px;*/
    min-height: 800px;
    padding-top: 35px;
    position: relative;
    top: -15px;
}

.pagewrap:after{
	display:block;
}
.sitefooter, .pagewrap:after {
	height:40px;
	clear:left;
}

.sitefooter {
    color: #FFFFFF;
    padding-left: 70px;
    padding-top: 4px;
	font-size:.8em;
	display:block;
	position:relative;
	
}
.sitefooter a{ color:#fff;
}
#contentwrapper {width:100%; height:100%;}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}
nav ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}


abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}


hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #e6e6e6;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}

p {line-height:1.5em; margin-bottom:15px;}
h3 {color:#2bbcf2; font-weight:400; font-size:1em;} 
.clear {clear:both;}

/** END RESESTS**/


html { 
 background: url(../images/wave2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}



html, body {font-family:'Open Sans', Arial, Helvetica, sans-serif; font-weight:300; overflow-x:hidden; overflow-y:auto;}

a {
color: #082e44; text-decoration:none;
}
a:hover {
color: #2bbcf2;
}
a, a:hover {
-o-transition: color 0.25s ease-in;
-webkit-transition: color 0.25s ease-in;
-moz-transition: color 0.25s ease-in;
transition: color 0.25s ease-in;
}
a.activetab, a.activetab:hover {border-bottom:4px solid rgba(43,188,242,1)/*rgba(51,97,123,1)*/; padding-bottom:14px; color:#082e44; cursor:default;
}
section, article, header {
display: block;
width: 100%;
}
article {
width: 96%;
padding: 3em 2%;
}

button, input.getstarted {padding:15px; font-size:1.1em; text-transform:uppercase; color:#fff; background:rgba(8,46,68,1);  border:none; cursor:pointer; letter-spacing:.04em;
	-webkit-transition:background-color 0.25s linear;
	-moz-transition:background-color 0.25s linear;
	-o-transition:background-color 0.25s linear;
	-ms-transition:background-color 0.25s linear;
	transition:background-color 0.25s linear;

}

button:hover, input.getstarted:hover {
	cursor: pointer;
	background-color: rgba(43,188,242,1); 
	
	}
	
button.getstarted {float:right; 	
	/*-webkit-box-shadow: 0px 0px 8px 3px rgba(43,188,242,0.3);
	-moz-box-shadow: 0px 0px 8px 3px rgba(43,188,242,0.3);
	 box-shadow: 0px 0px 8px 3px rgba(43,188,242,0.3);*/
}

input.loginbox {
	width:40%; 
	margin:5px 0 15px 0; 
	padding:10px;
	border:1px solid #cccccc;
	 /* Webkit (Safari/Chrome) */ -webkit-box-shadow: inset 2px 2px 4px 0px #555555;
	/* Mozilla Firefox */ -moz-box-shadow: inset 2px 2px 4px 0px #555555;
	/* Proposed W3C Markup */ box-shadow: inset 2px 2px 4px 0px #555555;
	font-size:1.1em;
	color:#888888
}
label {text-transform:uppercase; font-weight:600;}

/** HEADER MENU **/

header nav {
width:100%; margin:70px 0 0 0; height:130px; background:rgba(255, 255, 255, 0.85);
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25);
}
header nav ul {
    float: left;
    margin-left: 210px;
    list-style-type: none;
    margin-top: 88px;
}
header nav ul li {
display: inline;
margin-left: 1em;
margin-right:2.2em;
}
header nav ul li:first-child {
margin-left: 0;
}
header nav ul li:last-child {
margin-right:0;}

header nav ul li ul {
display: none;
}



/** END MENU **/




/*** COLUMNS ***/


.leftcolumn {float:left; width:580px; margin:0 10px 30px 0;}
.rightcolumn {float:left; width:300px; margin:0 0 80px 10px;}

.contentcolumn {width:32.5%; float:left; background:#fff;}
.contentcolumn > div.contentimage {max-width:100%; height:auto; border-bottom:1px solid #d3d3d3; overflow:hidden; min-height:200px;}
.contentcolumn > div.create {background:url(../images/createBig.jpg) top left no-repeat; }
.contentcolumn > div.send {background:url(../images/sendBig.jpg) top left no-repeat; }
.contentcolumn > div.analyze {background:url(../images/analyzeBig.jpg) top left no-repeat; }

.contentcolumn:nth-child(n+1) > img, .contentcolumn:nth-child(n+2) > img  {border-left:1px solid #d3d3d3;}
.columnbox {padding:25px 15px 30px 15px;}
.columnbox > div {float:left; margin-left:12px; width:75%;}
.columnbox > div > h2 {font-size:1.2em; color:#082e44; font-weight:100; margin-bottom:-5px;}
.columnbox > div > h2.sticky { margin-top:95px;}
.columnbox > div > p {color:#35617d; font-size:.9em; line-height:1.5em; margin-bottom:15px;}

.columnbox > div > p.pfixedheight {min-height:70px;}
.columnbox > div > p:last-child {margin-bottom:30px;}
.columnbox > button { padding:6px; margin-top:20px; margin-left:40px; border:none;}

.fullwidthcolumn {width:96.5%; float:left; background:#fff; margin-bottom:20px;}
.fullwidthcolumn > .columnbox > div {width:96%;}
#faq-list p {color:#35617d; font-size:.9em; line-height:1.5em; margin-bottom:15px;}

/********** SECONDARY PAGE STYLES ***************/

#navwrap {width:100%; display:block;}


div.sublinks a {background:rgba(8,46,68,1); color:#fff; display:inline-block; padding:2% 3%; font-size:1em; margin:0 2px 10px 0;
	cursor:pointer; letter-spacing:.04em;
	-webkit-transition:background-color 0.25s linear;
	-moz-transition:background-color 0.25s linear;
	-o-transition:background-color 0.25s linear;
	-ms-transition:background-color 0.25s linear;
	transition:background-color 0.25s linear;
	

}

div.sublinks a:hover{
	cursor: pointer;
	background-color: rgba(43,188,242,1);
} 

th {padding:5px; font-size:1em; text-transform:uppercase; color:#fff; background:rgba(8,46,68,1);  border:none;
}

.pricetable {padding:0; margin:0; width:100%;}
.pricetable td {text-align:center; color:#555555; padding:5px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}	
.pricetable td.price {font-weight:bold; color:#2bbcf2;}
.wideUL {width:80%; color:#35617D; font-size:.9em; line-height:1.6em; margin-left:20px;}

/**** OTHER STYLES ***/ 
div#logo {
	 background-image: url("../images/monsoonLogoLG.png");
    float: left;
    height: 81px;
	margin-left: 70px;

    margin-top: 30px;
    width: 320px;
    z-index: 9999999;
}

span > ul {color:#35617D; font-size:.9em; line-height:1.6em; margin-left:20px; width:62%;}
span > ul li { }
h1 {color:#fff; font-size:2.0em; font-weight:400; margin:0 0 .5em 0; padding:0;}
h2.subhead {color:#fff; font-size:1.1em; font-weight:300; margin:0 0 0 0; padding:0; line-height:1.4em;}

div#bodycontent {margin-top:50px; margin-left:70px; width:960px;}
.contentarea {width:97%; clear:both;  margin-top:30px;}
.break390{display:none;}
.floatright {float:right; margin:10px 0 20px 40px; display:block;}
.floatleft {float:left; margin: 10px 40px 20px 0; display:block;} 
.spacer20 {margin-top:20px;}
.spacer40 {margin: 30px 0 40px 0;}
.bottomspacer40 {margin-bottom:40px;}
.border {border:1px solid #c6c6c6;}
.glow {	-webkit-box-shadow: 0px 0px 6px 0px #7cb7d7;
	-moz-box-shadow: 0px 0px 6px 0px #7cb7d7;
	box-shadow: 0px 0px 6px 0px #7cb7d7;}
.scale {width:30%; max-width:244px;}
.minustop {margin-top:-15px;}
/****** GRADIENTS *******/
.gradient1{
	 /* IE10 */
	background-image: -ms-linear-gradient(top, #ecf9ff 0%, #FFFFFF 100%);
	/* Mozilla Firefox */
	background-image: -moz-linear-gradient(top, #ecf9ff 0%, #FFFFFF 100%);
	/* Opera */
	background-image: -o-linear-gradient(top, #ecf9ff 0%, #FFFFFF 100%);
	/* Webkit (Safari/Chrome 10) */
	background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #ecf9ff));
	/* Webkit (Chrome 11+) */
	background-image: -webkit-linear-gradient(top, #ecf9ff 0%, #FFFFFF 100%);
	/* Proposed W3C Markup */
	background-image: linear-gradient(top,#ecf9ff 0%, #FFFFFF 100%);
	 }
	 
.gradient2{
	 /* IE10 */
	background-image: -ms-linear-gradient(top, #dcecf9 0%, #FFFFFF 100%);
	/* Mozilla Firefox */
	background-image: -moz-linear-gradient(top, #dcecf9 0%, #FFFFFF 100%);
	/* Opera */
	background-image: -o-linear-gradient(top, #dcecf9 0%, #FFFFFF 100%);
	/* Webkit (Safari/Chrome 10) */
	background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #dcecf9));
	/* Webkit (Chrome 11+) */
	background-image: -webkit-linear-gradient(top, #dcecf9 0%, #FFFFFF 100%);
	/* Proposed W3C Markup */
	background-image: linear-gradient(top,#dcecf9 0%, #FFFFFF 100%);
	 }	 
	 
.gradient3{
	 /* IE10 */
	background-image: -ms-linear-gradient(top, #bce0f5 0%, #FFFFFF 100%);
	/* Mozilla Firefox */
	background-image: -moz-linear-gradient(top, #bce0f5 0%, #FFFFFF 100%);
	/* Opera */
	background-image: -o-linear-gradient(top, #bce0f5 0%, #FFFFFF 100%);
	/* Webkit (Safari/Chrome 10) */
	background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #bce0f5));
	/* Webkit (Chrome 11+) */
	background-image: -webkit-linear-gradient(top, #bce0f5 0%, #FFFFFF 100%);
	/* Proposed W3C Markup */
	background-image: linear-gradient(top,#bce0f5 0%, #FFFFFF 100%);
	 }	 
	 

	 
.circle {
    background: none repeat scroll 0 0 #2bbcf2;
    border-radius: 50% 50% 50% 50%;
    color: #FFFFFF;
    font-size: 1.2em;
    height: 25px;
    padding: 4px 4px 0;
    text-align: center;
    width: 22px;
	float:left;
	line-height:1;
}

ul.fourrow {
	color:#35617D; font-size:.9em; line-height:1.6em; 
    list-style: none outside none;
    margin: 0px;
	padding-bottom:30px;
    width: 100%;
}
ul.fourrow li {
	 display: inline-block;
    float: left;
    margin-right: 20px;
    padding: 0 10px 10px 0;
    width: 20%;
}
ul.fourrow li img {
	margin:10px 0 6px;}
	


@media screen and (max-width:1024px) {
	html { 
  background: url(../images/mobilewave2.jpg) no-repeat top center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


header nav {margin:15px 0 0 0; height:80px;}
div#logo {margin-top:17px; margin-left:65px; background-image:url(../images/monsoonLogoMD.png); width:200px; height:51px;}
header nav ul {    
	float: right;
	margin-left:0;
    list-style-type: none;
    padding: 0;
    margin-top: 48px;
    width: 320px;
}
header nav ul li {margin:0 4% 0 2%; font-size:.9em;}
a.activetab, a.activetab:hover {padding-bottom:5px;}

div#bodycontent {margin-top:40px; margin-left:65px; width:90%;}
.leftcolumn {float:left; width:65%; margin:0 2% 30px 0;}
.rightcolumn {float:left; width:25%; margin:0 0 0 2%; }

.sitefooter {padding-left: 65px; padding-top: 4px;}
.columnbox > div > p.pfixedheight {height:90px;}

ul.fourrow {
	margin-bottom: 170px;
}

ul.fourrow li {
	width: 40%;
}





}


@media screen and (max-width:840px) {
	
	h1 {font-size:1.8em;}
div#logo {margin-left:6.25%;}
div#bodycontent {margin-top:40px; margin-left:6.25%; width:90%;}
.sitefooter {padding-left: 0; padding-top: 20px; text-align:center;}
.leftcolumn {float:none; width:100%; margin:0 0 0 0;}
.rightcolumn {float:left; width:100%; margin:20px 0px }
button.getstarted {float:left;}

.contentcolumn {width:100%; float:none; min-height:0px; max-height:auto; background:#fff; margin-bottom:10px; height:350px;}
.contentcolumn > img {width:auto; height:100px; border-bottom:none; float:left; }
.contentcolumn:nth-child(n+1) > img, .contentcolumn:nth-child(n+2) > img  {border-left:none;}
.columnbox {width:92%;}


.columnbox > div {width:60%;}
.columnbox > div > p.pfixedheight {height:auto; min-height:0;}
.columnbox > button { float:right; margin-top:0px; margin-left:5px;}
.columnbox > button.homepage {margin-bottom:20px;}

.fullwidthcolumn {width:100%;}
.fullwidthcolumn > .columnbox > div {width:100%;}
.spacer20 {margin-top:0px;}
input.loginbox {width:60%;}
.minustop {margin-top:0;}
}

@media screen and (max-width:680px) {
html{background: url(../images/mobilewave2.jpg) no-repeat top left fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
header nav {margin:0; height:50px; }
div#logo {margin-top:10px; background-image:url(../images/monsoonLogoSM.png); width:120px; height:31px;}
header nav ul {
	margin-left: 0;
    margin-top: 17px;
	width:285px;
}
div#ienav {float:right; width:100%;}
header nav ul li {font-size:.8em;}
a.activetab, a.activetab:hover {padding-bottom:6px;}

h1{font-size: 1.6em;}

span > ul {width:96%;}

.columnbox > div {width:50%;}
.columnbox > div > p.pfixedheight {height:0px; min-height:0;}
.fullwidthcolumn > .columnbox > div {width:95%;}

ul.fourrow {
	margin-bottom: 240px;
}
.floatclear {float:none !important; margin: 0 auto 25px;}
.pricetable td, th {font-size:.9em;}
}


@media screen and (max-width:535px) {
	
	div.sublinks {border-top:1px solid rgba(124,183,215,.5); padding-top:20px;}
/*	div.sublinks a {    font-size: 0.9em;
    margin-right: 3px;
    min-width: 28.25%;
    padding: 4% 2%;
    text-align: center; }
	div.sublinks a.bottomsublinks {min-width:45%;}*/
	
/*	div.sublinks a{
	    font-size: 0.9em;
    margin-right: 6px;
    min-width: 22%;
    padding: 4% 2%;
    text-align: center;
	}*/

ul.fourrow li img {
    float: left;
    margin: 30px 10px 0 0;
}


}
@media screen and (max-width:480px) {


header nav {margin:0; height:50px;}
div#logo {margin-top: 7px; background-image:url(../images/monsoonLogoSM.png); width:120px; height:31px;}
header nav ul {margin-left:200px;}
h1 {font-size:1.4em;}
h2.subhead {font-size:1.0em; line-height:1.3em;}
div#intro {height:200px;}
	.leftcolumn {margin-top:90px;}

.contentcolumn {height:445px;}
.contentcolumn > img {width:auto; height:100px; border-bottom:none; float:left; }
.contentcolumn:nth-child(n+1) > img, .contentcolumn:nth-child(n+2) > img  {border-left:none;}
.columnbox {float:left; padding:25px 15px 15px; width:92%;}


.columnbox > div {float:left; margin-left:12px; width:75%;}
.columnbox > div > p.pfixedheight {margin-bottom:15px; min-height:0; height:auto;}
.columnbox > button { float:left; margin-top:20px; margin-left:0px;}
.columnbox > button.homepage { float:left; margin-top:20px; margin-left:40px;}

.floatright, .floatleft {display:none;}
.fullwidthcolumn > .columnbox > div {width:90%;}
input.loginbox {width:90%;}


ul.fourrow {
	margin-bottom: 310px;
}
ul.fourrow li {
	width:100%;
}
}

@media screen and (max-width:390px) {
	.leftcolumn {max-width:255px;}
	div#intro {height:240px;}
	.contentarea {top:20px;}
	.break390{display:inline-block;}
	span > ul {width:85%;}
}

@media screen and (max-width:345px) {
		div.sublinks a {min-width:38%; text-align:center; margin-bottom:2px;}
		div.sublinks a.bottomsublinks {min-width:44%;}
		input.loginbox {width:88%;}
}