Generated by SassMeister.com.

SassMeister-input-HTML.html

 <div class="site-wrap large"> 
<nav class="mobile-nav">
	<button type="button" class="hamburger icon-hamburger"><span class="visually-hidden">Toggle Menu</span></button>
	<a href="/index" class="logo icon-logo-icon"><span class="visually-hidden">Morgan Stanley</span></a>
	<div class="mobile-search">
		<form name="echo" method="POST" action="http://www.morganstanley.com/web/search-ms/webapp/search" id="searchMS-mobile">
			<label class="search icon-search" for="search-mobile">
				<span class="visually-hidden">Search</span>
			</label>
			<div class="search-input-wrap">
				<input type="text" id="search-mobile" name="query" value placeholder="Search">
			</div>
		</form>
	</div>
</nav>
<nav class="main-nav">
	<a href="/index" class="logo icon-logo-icon"><span class="visually-hidden">Morgan Stanley</span></a>
	<nav class="sub-nav">
		<ul>
			<li class="no-drop">
				<a href="#">Ideas</a>
			</li>
			<li class="icon-down-nav">
				<a href="#" class="trigger">People</a>
				<ul class="dropdown target">
					<li>
						<a href="#">Students &amp; Graduates</a>
					</li>
					<li>
						<a href="#">Experienced Professionals</a>
					</li>
					<li>
						<a href="#">Financial Advisors</a>
					</li>
					<li>
						<a href="#">Employee Profiles</a>
					</li>
				</ul>
			</li>
			<li class="icon-down-nav">
				<a href="#" class="trigger">What We Do</a>
				<ul class="dropdown target">
					<li>
						<a href="#">Wealth Management</a>
					</li>
					<li>
						<a href="#">Investment Management</a>
					</li>
					<li>
						<a href="#">Investment Banking</a>
					</li>
					<li>
						<a href="#">Securities</a>
					</li>
				</ul>
			</li>
			<li class="icon-down-nav">
				<a href="#" class="trigger">About Us</a>
				<ul class="dropdown target">
					<li>
						<a href="#">Heritage</a>
					</li>
					<li>
						<a href="#">Diversity</a>
					</li>
					<li>
						<a href="#">Philanthropy</a>
					</li>
					<li>
						<a href="#">Sustainability</a>
					</li>
					<li>
						<a href="#">Global Offices</a>
					</li>
				</ul>
			</li>
			<li class="icon-down-nav client">
				<a href="#" class="icon-person trigger">Client Login</a>
				<ul class="dropdown target drop-left">
					<li>
						<a href="https://www.morganstanleyclientserv.com/">Morgan Stanley Online</a>
					</li>
					<li>
						<a href="https://secure.ms.com/public/login/webapp/public_Login?uri=/clink/clink/webapp/cls_MainShell&failedauth=login&denymsg=No%20such%20user&method=GET&msuniqueid=XaE5fceFl7UQZBh9InB">ClientLink</a>
					</li>
					<li>
						<a href="https://www.icsdelivery.com/morganstanley/formNew3.asp">E-Delivery</a>
					</li>
					<li>
						<a href="https://login.matrix.ms.com/public/login/webapp/public_Login?uri=/matrix/portal/docs/&failedauth=login&denymsg=No%20such%20user&method=GET&msuniqueid=XURnwGpcnyLqTOwWkVA">Matrix</a>
					</li>
				</ul>
			</li>
			<li class="desktop-search">
				<form name="echo" method="POST" action="http://www.morganstanley.com/web/search-ms/webapp/search" id="searchMS">
					<label class="search icon-search" for="search-desktop">
						<span class="visually-hidden">Search</span>
					</label>
					<div class="search-input-wrap">
						<input type="text" id="search-desktop" name="query" value>
					</div>
				</form>
			</li>
		</ul>
	</nav>
</nav>		<div class="wrapper">
	<div class="container">
		<div class="inner">
			<h1>Morgan Stanley</h1>
<div>
    </div>
<div>
    </div>
		</div>
	</div>
		</div>		<footer class="footer-main">
	<div class="find-advisor">
		<form class="falocator" method="get" action="http://www.morganstanleyfa.com/locator/">

			<fieldset>
				<legend>Find a Financial Advisor, Branch and Private Wealth Advisor near you.</legend>
				<div class="input-wrapper">
					<label for="zip" class="visually-hidden">Enter zipcode</label>
					<input type="text" name="ZIP" id="zip" placeholder="Enter ZIP code" >
					<button type="submit" value="submit" class="round-btn blue">Go</button>
					<a href="http://www.morganstanleyfa.com/locator/">more</a>
				</div>
			</fieldset>
		</form>
	</div>
	<div class="footer-gray">
		<nav class="social container">
			<ul class="inner">
				<li><a href="#" class="icon-twitter"><span>twitter</span></a></li>
				<li><a href="#" class="icon-linkedin"><span>linkdin</span></a></li>
				<li><a href="#" class="icon-play"><span>youtube</span></a></li>
			</ul>
		</nav>
		<nav class="footer-links container">
			<div class="inner">
				<ul>
					<li><a href="#">Reaserch Disclosure</a></li>
					<li><a href="#">Inverstor Relations</a></li>
					<li><a href="#">Corporate Governance</a></li>
					<li class="drop"><a href="#">Newsroom</a></li>
					<li><a href="#">Careers</a></li>
				</ul>
			</div>
		</nav>
		<div class="container">
			<div class="inner">
				<nav class="footer-legal-links ">
					<ul>
						<li><a href="#">Privacy &amp; Cookies</a></li>
						<li><a href="#">Terms of Use</a></li>
						<li><a href="#">Contact Us</a></li>
					</ul>
				</nav>
				<p class="copyright"><span>&copy;</span> 2014 Morgan Stanley. All rights reserved.</p>
			</div>
		</div>
	</div>
</footer>
		<div class="menu-overlay">
			<button type="button" class="icon-close-button"><span class="visually-hidden">close</span></button>
		</div>
	</div>

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// Guff (v1.0.0)
// ----

// Set base font size
$rem-base: 16px !default;
// Set line height ratio base. Accepts px, em, rem or int values
$line-height-base: 26px !default;
// Vertical rhythm ratio
$type-rhythm-ratio: 1.14 !default;
// Desktop Media Query
$desktop: "(min-width: 1000px)";
// Tablet Media Query
$tablet: "(min-width: 600px) and (max-width: 999px)";
// Mobile Media Query
$mobile: "(max-width: 599px)";
//tablet an mobile
$tablet-mobile: "(min-width: 0px) and (max-width: 999px)";
// Set Grid Column Count
$grid-columns: 12 !default;
// Set Grid Gutter (percentage)
$grid-gutter: 2.5;
// Set Grid Padding (as px)
$grid-padding: 30px;
// Set Grid Max Width (as px)
$grid-max-width: 1240px;

//colors
$border-gray: #cccccc;
$footer-gray: #f2f2f2;
$footer-links: #747474;
$text-gray: #4c4c4c;
$input-border: #d6d6d6;
$social-gray: #6b6b6b;
$social-gray-hover: #b8b8b8;
$hover-gray: #808080;

$button-blue: #3182c1;
$button-blue-hover: #469adb;

@import "guff";
	* { box-sizing:border-box; }
	.large { }
	
	ul, li, nav { margin:0; padding:0; display:block; }
	
	.sub-nav {
	  @include clear;

	  a { 
	    text-decoration:none;
	    font-family: sans-serif;
	    display:block;
	    padding:0 25px;
	    background:white;
	    color: #aaa;
	    &:hover {
	      background: #eee;
	      color: $hover-gray;
	      }
	    }
	    
	   li {
	     display:block;
	     position:relative;
	     > a {  border-bottom:1px solid transparent; }
	     > a:hover { border-bottom:1px solid $border-gray; }
	   } 	  
	   
	  .icon-down-nav, 
	  .no-drop { 
	    float:left;
	    line-height:95px;
	    height:95px;
	    background:white;
	    border-left:1px solid #ccc;
	    
	    > a {
	      position:relative;
	      max-height:86px;
	    }
	  }
	  
	  .icon-down-nav > a {
	    position:relative;
	    padding-right:50px;
	  }
	  
	  .icon-down-nav > a:before {
	    content: "\e607";
	    display:block;
	    position:absolute;
	    right:25px; 
	    z-index:10;
	  }
	  
	  .no-drop > a { max-height:95px; }
	  
	  .dropdown {
	    display:none;
	    position:absolute;
	    left:-1px;
	    top:85px;
	    width:262px;
	    z-index:5;
	    border:1px solid $border-gray;
	    border-style: solid solid none solid;
	    box-shadow:7px 7px 0 rgba(50,50,50,0.1);
	    li {
	      line-height:65px;
	    }
	    a {
	      border-bottom:1px solid $border-gray !important;
	    }
	  }
	  
	  li:hover .dropdown,
	  a:focus ~ .dropdown,
	  .dropdown:hover,
	  .is-expanded .dropdown {
	    display:block;
	  }
	  
	  li:hover > a {
	    
	      z-index:20;
	  }
	}
/*	
	.sub-nav > ul {
		height: 95px;

		> li {
		//	border: transparent 1px solid;
			cursor: pointer;
			float: left;
			height: 94px;
			line-height: 5.5;
			position: relative;
			z-index: 1;

			&.client {
				margin-left: -1px;


			}

			&:before {
				color: $text-gray;
				display: block;
				font-size: 5px;
				margin-top: -3px;
				opacity: 0.5;
				position: absolute;
				right: 17px;
				top: 50%;
				z-index: 20;
			}

			&:hover {
				border-bottom: 0;
				border: #cccccc 1px solid;
				z-index: 3;
				.about:after {
					display: none;
				}

				a,
				a._active {
					color: $hover-gray;
					z-index: 11;
					background-color: #fff;
				}
			}

	

			a {
				display: block;
				padding: 2px 35px 2px 25px;
				position: relative;
				vertical-align: middle;
			}

			

			.icon-person {
				&:before {
					font-size: 20px;
					margin: 0 20px 0 0;
					position: relative;
					top: 2px;
				}
			}

			&.desktop-search {
				border: 0;
				height: 97px;
				position: static;
				width: 50px;
				&:hover {
					&:after {
						display: none;
					}
					label{
						&:before {
							color: $social-gray-hover;
						}
					}
				}
				._desktop-search-open & {
						background: #fff;
				}

				form {
					display: inline;
				}

				label {
					color: #666;
					cursor: pointer;
					display: block;
					height: 100%;
					

					

					&:before {
						@include transition(all 300ms ease-in-out);
						display: block;
						font-size: 20px;
						margin-top: -12px;
						position: relative;
						text-align: center;
						top: 50%;
					}

					
				}

				.search-input-wrap {
					background-color: #fff;
					bottom: -51px;
					display: none;
					height: 50px;
					left: -30px;
					position: absolute;
					right: -30px;
					
					._desktop-search-open & {
						display: block;
					}

					input {
						border: 0;
						bottom: 0;
						font-size: 16px;
						height: 51px;
						left: 0;
						padding: 0 30px;
						position: absolute;
						right: 0;
						top: 0;
						width: 100%;
					}
				}
			}
		}

		li {

			a {
				font-family: 'karlabold';
			}

			.large & 
				{
				&:hover .dropdown, & a:focus ~ .dropdown {
						background-color: #fff;
						display: block;

					}
			}	
		}


		.dropdown {
			border: $border-gray 1px solid;
			display: none;
			left: -1px;
			position: absolute;
			top: 85px;
			width: 262px;

			&.drop-left {
				left: inherit;
				right: -1px;
			}

			li {
				border-top: #e5e5e5 1px solid;
				display: block;
				height: inherit;
				line-height: 1;
				padding: 0;

				&:first-child {
					border-top: none;
				}

				
				a {
					display: block;
					font-family: "karlaregular", sans-serif;
					padding: 25px;
					&:focus, :hover & {
					 
						background-color: $footer-gray;
						color: $text-gray;
						z-index: 12;
					}
				}

				&:hover, & a:focus {
					z-index: 12;

				}
			}
		}

	} */

SassMeister-output.css

.sub-nav:after {
  content: "";
  display: table;
  clear: both;
}

* {
  box-sizing: border-box;
}

ul, li, nav {
  margin: 0;
  padding: 0;
  display: block;
}

.sub-nav a {
  text-decoration: none;
  font-family: sans-serif;
  display: block;
  padding: 0 25px;
  background: white;
  color: #aaa;
}
.sub-nav a:hover {
  background: #eee;
  color: #808080;
}
.sub-nav li {
  display: block;
  position: relative;
}
.sub-nav li > a {
  border-bottom: 1px solid transparent;
}
.sub-nav li > a:hover {
  border-bottom: 1px solid #cccccc;
}
.sub-nav .icon-down-nav,
.sub-nav .no-drop {
  float: left;
  line-height: 95px;
  height: 95px;
  background: white;
  border-left: 1px solid #ccc;
}
.sub-nav .icon-down-nav > a,
.sub-nav .no-drop > a {
  position: relative;
  max-height: 86px;
}
.sub-nav .icon-down-nav > a {
  position: relative;
  padding-right: 50px;
}
.sub-nav .icon-down-nav > a:before {
  content: "\e607";
  display: block;
  position: absolute;
  right: 25px;
  z-index: 10;
}
.sub-nav .no-drop > a {
  max-height: 95px;
}
.sub-nav .dropdown {
  display: none;
  position: absolute;
  left: -1px;
  top: 85px;
  width: 262px;
  z-index: 5;
  border: 1px solid #cccccc;
  border-style: solid solid none solid;
  box-shadow: 7px 7px 0 rgba(50, 50, 50, 0.1);
}
.sub-nav .dropdown li {
  line-height: 65px;
}
.sub-nav .dropdown a {
  border-bottom: 1px solid #cccccc !important;
}
.sub-nav li:hover .dropdown,
.sub-nav a:focus ~ .dropdown,
.sub-nav .dropdown:hover,
.sub-nav .is-expanded .dropdown {
  display: block;
}
.sub-nav li:hover > a {
  z-index: 20;
}

/*	
	.sub-nav > ul {
		height: 95px;

		> li {
		//	border: transparent 1px solid;
			cursor: pointer;
			float: left;
			height: 94px;
			line-height: 5.5;
			position: relative;
			z-index: 1;

			&.client {
				margin-left: -1px;


			}

			&:before {
				color: $text-gray;
				display: block;
				font-size: 5px;
				margin-top: -3px;
				opacity: 0.5;
				position: absolute;
				right: 17px;
				top: 50%;
				z-index: 20;
			}

			&:hover {
				border-bottom: 0;
				border: #cccccc 1px solid;
				z-index: 3;
				.about:after {
					display: none;
				}

				a,
				a._active {
					color: $hover-gray;
					z-index: 11;
					background-color: #fff;
				}
			}

	

			a {
				display: block;
				padding: 2px 35px 2px 25px;
				position: relative;
				vertical-align: middle;
			}

			

			.icon-person {
				&:before {
					font-size: 20px;
					margin: 0 20px 0 0;
					position: relative;
					top: 2px;
				}
			}

			&.desktop-search {
				border: 0;
				height: 97px;
				position: static;
				width: 50px;
				&:hover {
					&:after {
						display: none;
					}
					label{
						&:before {
							color: $social-gray-hover;
						}
					}
				}
				._desktop-search-open & {
						background: #fff;
				}

				form {
					display: inline;
				}

				label {
					color: #666;
					cursor: pointer;
					display: block;
					height: 100%;
					

					

					&:before {
						@include transition(all 300ms ease-in-out);
						display: block;
						font-size: 20px;
						margin-top: -12px;
						position: relative;
						text-align: center;
						top: 50%;
					}

					
				}

				.search-input-wrap {
					background-color: #fff;
					bottom: -51px;
					display: none;
					height: 50px;
					left: -30px;
					position: absolute;
					right: -30px;
					
					._desktop-search-open & {
						display: block;
					}

					input {
						border: 0;
						bottom: 0;
						font-size: 16px;
						height: 51px;
						left: 0;
						padding: 0 30px;
						position: absolute;
						right: 0;
						top: 0;
						width: 100%;
					}
				}
			}
		}

		li {

			a {
				font-family: 'karlabold';
			}

			.large & 
				{
				&:hover .dropdown, & a:focus ~ .dropdown {
						background-color: #fff;
						display: block;

					}
			}	
		}


		.dropdown {
			border: $border-gray 1px solid;
			display: none;
			left: -1px;
			position: absolute;
			top: 85px;
			width: 262px;

			&.drop-left {
				left: inherit;
				right: -1px;
			}

			li {
				border-top: #e5e5e5 1px solid;
				display: block;
				height: inherit;
				line-height: 1;
				padding: 0;

				&:first-child {
					border-top: none;
				}

				
				a {
					display: block;
					font-family: "karlaregular", sans-serif;
					padding: 25px;
					&:focus, :hover & {
					 
						background-color: $footer-gray;
						color: $text-gray;
						z-index: 12;
					}
				}

				&:hover, & a:focus {
					z-index: 12;

				}
			}
		}

	} */

SassMeister-rendered.html

 <div class="site-wrap large"> 
<nav class="mobile-nav">
	<button type="button" class="hamburger icon-hamburger"><span class="visually-hidden">Toggle Menu</span></button>
	<a href="/index" class="logo icon-logo-icon"><span class="visually-hidden">Morgan Stanley</span></a>
	<div class="mobile-search">
		<form name="echo" method="POST" action="http://www.morganstanley.com/web/search-ms/webapp/search" id="searchMS-mobile">
			<label class="search icon-search" for="search-mobile">
				<span class="visually-hidden">Search</span>
			</label>
			<div class="search-input-wrap">
				<input type="text" id="search-mobile" name="query" value placeholder="Search">
			</div>
		</form>
	</div>
</nav>
<nav class="main-nav">
	<a href="/index" class="logo icon-logo-icon"><span class="visually-hidden">Morgan Stanley</span></a>
	<nav class="sub-nav">
		<ul>
			<li class="no-drop">
				<a href="#">Ideas</a>
			</li>
			<li class="icon-down-nav">
				<a href="#" class="trigger">People</a>
				<ul class="dropdown target">
					<li>
						<a href="#">Students &amp; Graduates</a>
					</li>
					<li>
						<a href="#">Experienced Professionals</a>
					</li>
					<li>
						<a href="#">Financial Advisors</a>
					</li>
					<li>
						<a href="#">Employee Profiles</a>
					</li>
				</ul>
			</li>
			<li class="icon-down-nav">
				<a href="#" class="trigger">What We Do</a>
				<ul class="dropdown target">
					<li>
						<a href="#">Wealth Management</a>
					</li>
					<li>
						<a href="#">Investment Management</a>
					</li>
					<li>
						<a href="#">Investment Banking</a>
					</li>
					<li>
						<a href="#">Securities</a>
					</li>
				</ul>
			</li>
			<li class="icon-down-nav">
				<a href="#" class="trigger">About Us</a>
				<ul class="dropdown target">
					<li>
						<a href="#">Heritage</a>
					</li>
					<li>
						<a href="#">Diversity</a>
					</li>
					<li>
						<a href="#">Philanthropy</a>
					</li>
					<li>
						<a href="#">Sustainability</a>
					</li>
					<li>
						<a href="#">Global Offices</a>
					</li>
				</ul>
			</li>
			<li class="icon-down-nav client">
				<a href="#" class="icon-person trigger">Client Login</a>
				<ul class="dropdown target drop-left">
					<li>
						<a href="https://www.morganstanleyclientserv.com/">Morgan Stanley Online</a>
					</li>
					<li>
						<a href="https://secure.ms.com/public/login/webapp/public_Login?uri=/clink/clink/webapp/cls_MainShell&failedauth=login&denymsg=No%20such%20user&method=GET&msuniqueid=XaE5fceFl7UQZBh9InB">ClientLink</a>
					</li>
					<li>
						<a href="https://www.icsdelivery.com/morganstanley/formNew3.asp">E-Delivery</a>
					</li>
					<li>
						<a href="https://login.matrix.ms.com/public/login/webapp/public_Login?uri=/matrix/portal/docs/&failedauth=login&denymsg=No%20such%20user&method=GET&msuniqueid=XURnwGpcnyLqTOwWkVA">Matrix</a>
					</li>
				</ul>
			</li>
			<li class="desktop-search">
				<form name="echo" method="POST" action="http://www.morganstanley.com/web/search-ms/webapp/search" id="searchMS">
					<label class="search icon-search" for="search-desktop">
						<span class="visually-hidden">Search</span>
					</label>
					<div class="search-input-wrap">
						<input type="text" id="search-desktop" name="query" value>
					</div>
				</form>
			</li>
		</ul>
	</nav>
</nav>		<div class="wrapper">
	<div class="container">
		<div class="inner">
			<h1>Morgan Stanley</h1>
<div>
    </div>
<div>
    </div>
		</div>
	</div>
		</div>		<footer class="footer-main">
	<div class="find-advisor">
		<form class="falocator" method="get" action="http://www.morganstanleyfa.com/locator/">

			<fieldset>
				<legend>Find a Financial Advisor, Branch and Private Wealth Advisor near you.</legend>
				<div class="input-wrapper">
					<label for="zip" class="visually-hidden">Enter zipcode</label>
					<input type="text" name="ZIP" id="zip" placeholder="Enter ZIP code" >
					<button type="submit" value="submit" class="round-btn blue">Go</button>
					<a href="http://www.morganstanleyfa.com/locator/">more</a>
				</div>
			</fieldset>
		</form>
	</div>
	<div class="footer-gray">
		<nav class="social container">
			<ul class="inner">
				<li><a href="#" class="icon-twitter"><span>twitter</span></a></li>
				<li><a href="#" class="icon-linkedin"><span>linkdin</span></a></li>
				<li><a href="#" class="icon-play"><span>youtube</span></a></li>
			</ul>
		</nav>
		<nav class="footer-links container">
			<div class="inner">
				<ul>
					<li><a href="#">Reaserch Disclosure</a></li>
					<li><a href="#">Inverstor Relations</a></li>
					<li><a href="#">Corporate Governance</a></li>
					<li class="drop"><a href="#">Newsroom</a></li>
					<li><a href="#">Careers</a></li>
				</ul>
			</div>
		</nav>
		<div class="container">
			<div class="inner">
				<nav class="footer-legal-links ">
					<ul>
						<li><a href="#">Privacy &amp; Cookies</a></li>
						<li><a href="#">Terms of Use</a></li>
						<li><a href="#">Contact Us</a></li>
					</ul>
				</nav>
				<p class="copyright"><span>&copy;</span> 2014 Morgan Stanley. All rights reserved.</p>
			</div>
		</div>
	</div>
</footer>
		<div class="menu-overlay">
			<button type="button" class="icon-close-button"><span class="visually-hidden">close</span></button>
		</div>
	</div>