/*-------------------------------------------------------------------------

    Typography Definitions

-------------------------------------------------------------------------*/
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 1, 2011 */

@font-face {
    font-family: 'CiscoSansBold';
    src: url('/web/mobile/sol/md/fonts/ciscosansbold-webfont.eot');
    src: url('/web/mobile/sol/md/fonts/ciscosansbold-webfont.eot?iefix') format('eot'),
         url('/web/mobile/sol/md/fonts/ciscosansbold-webfont.woff') format('woff'),
         url('/web/mobile/sol/md/fonts/ciscosansbold-webfont.ttf') format('truetype'),
         url('/web/mobile/sol/md/fonts/ciscosansbold-webfont.svg#webfont8pkvgkxE') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CiscoSansExtraLight';
    src: url('/web/mobile/sol/md/fonts/ciscosansextralight-webfont.eot');
    src: url('/web/mobile/sol/md/fonts/ciscosansextralight-webfont.eot?iefix') format('eot'),
         url('/web/mobile/sol/md/fonts/ciscosansextralight-webfont.woff') format('woff'),
         url('/web/mobile/sol/md/fonts/ciscosansextralight-webfont.ttf') format('truetype'),
         url('/web/mobile/sol/md/fonts/ciscosansextralight-webfont.svg#webfontFLqfaivC') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CiscoSansRegular';
    src: url('/web/mobile/sol/md/fonts/ciscosansregular-webfont.eot');
    src: url('/web/mobile/sol/md/fonts/ciscosansregular-webfont.eot?iefix') format('eot'),
         url('/web/mobile/sol/md/fonts/ciscosansregular-webfont.woff') format('woff'),
         url('/web/mobile/sol/md/fonts/ciscosansregular-webfont.ttf') format('truetype'),
         url('/web/mobile/sol/md/fonts/ciscosansregular-webfont.svg#webfontzmIuSJha') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CiscoSansOblique';
    src: url('/web/mobile/sol/md/fonts/ciscosansregularoblique-webfont.eot');
    src: url('/web/mobile/sol/md/fonts/ciscosansregularoblique-webfont.eot?iefix') format('eot'),
         url('/web/mobile/sol/md/fonts/ciscosansregularoblique-webfont.woff') format('woff'),
         url('/web/mobile/sol/md/fonts/ciscosansregularoblique-webfont.ttf') format('truetype'),
         url('/web/mobile/sol/md/fonts/ciscosansregularoblique-webfont.svg#webfontP4FkZOni') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CiscoSansThin';
    src: url('/web/mobile/sol/md/fonts/ciscosansthin-webfont.eot');
    src: url('/web/mobile/sol/md/fonts/ciscosansthin-webfont.eot?iefix') format('eot'),
         url('/web/mobile/sol/md/fonts/ciscosansthin-webfont.woff') format('woff'),
         url('/web/mobile/sol/md/fonts/ciscosansthin-webfont.ttf') format('truetype'),
         url('/web/mobile/sol/md/fonts/ciscosansthin-webfont.svg#webfontYV2ijA8e') format('svg');
    font-weight: normal;
    font-style: normal;
}

/**
 *	Resets
 */
p {
	padding: 0;
	margin: 0;
}
/**/
a span {
	margin-left: -1000px;
}
.content .banner {
	height: 200px;
	/*max-width: 320px;*/
	width: 100%;
}
.content .banner .layer-top {
	position: relative;
	top: 0;
	right: 0;
	z-index: 20;
	/*background: transparent url('../img/guide.jpg') no-repeat 0 0;*/
	background: transparent url('/web/mobile/images/mobile_md_hero-image.jpg') no-repeat center right;
	background-size: 800px 173px;
	height: 173px;
}
.content .banner .layer-top .hero-content {
	padding: 10px 8px;
}
.content .banner .layer-top h1 {
	font-family: 'CiscoSansExtraLight', sans-serif;
	font-size: 18px;
	color: #333132;
	width: 200px;
	line-height: 20px;
}
.content .banner .layer-top span.cisco-blue {
	font-family: 'CiscoSansBold', sans-serif;
	font-size: 18px;
	color: #008bb0;
}
.content .banner .layer-top p.copy {
	font-family: 'CiscoSansExtraLight', sans-serif;
    font-size: 11px;
	width: 180px;
	margin-top: 7px;
	color: #212121;
}
.content .banner .layer-top a.watch-video {
	position: relative;
	top: 22px;
	left: 2px;
	background: transparent url('/web/mobile/images/mobile_md_watch-video-btn.jpg') no-repeat 0 0;
	background-size: 136px 37px;
	display: block;
	width: 136px;
	height: 37px;
	overflow: hidden;
}
.content .banner ul.nav {
	/*max-width: 480px;*/
	width: 100%;
	position: relative;
	z-index: 30;
	/*top: 168px;*/
	top: -5px;
	margin: 0;
	list-style: none;
}
.content .banner ul.nav li {
	width:49.9%;
}
.content .banner ul.nav li:first-child {
	width:50%;
}
.content .banner ul.nav li {
	font-family: 'CiscoSansBold', sans-serif;
	font-size: 12px;
	margin-top: 3px;
	padding: 4px 0 2px;	
	float: left;
	text-align: center;
	background-color: #d0d0d0;
	border-top: 1px solid #8e8e8e;
	border-bottom: 1px solid #b7b7b7;
}
.content .banner ul.nav li.selected {
	width: 50%;
	margin: 0;
	padding: 7px 0 3px;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	border-top: 1px solid #b7b7b7;
	border-bottom: none;
	background-color: #fff;
	/*background-image: linear-gradient(bottom, rgb(255,255,255) 10%, rgb(233,233,233) 45%, rgb(208,208,208) 78%);
	background-image: -o-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(233,233,233) 45%, rgb(208,208,208) 78%);
	background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(233,233,233) 45%, rgb(208,208,208) 78%);
	background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(233,233,233) 45%, rgb(208,208,208) 78%);
	background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 10%, rgb(233,233,233) 45%, rgb(208,208,208) 78%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.1, rgb(255,255,255)),
		color-stop(0.45, rgb(233,233,233)),
		color-stop(0.78, rgb(208,208,208))
	);*/
}
/*.content .banner .layer-bottom {
	position: relative;
	top: 0;
	left: 0;
	z-index: 10;
	background: transparent url('../img/banner-image.jpg') no-repeat 140px 0;
	background-size: 180px 173px;
	height: 173px;
}*/
.content .main {
	max-width: 300px;
	padding: 10px;
}
.content .main h1 {
	font-family: 'CiscoSansExtraLight', sans-serif;
	font-size: 13px;
	color: #333132;
	margin-top: 2px;
}
.content .main span.cisco-blue {
	font-family: 'CiscoSansBold', sans-serif;
	font-size: 13px;
	color: #008bb0;
}
.content .main p.copy {
	font-family: 'CiscoSansRegular', sans-serif;
    font-size: 10px;
	margin-top: 7px;
}
.content .video-list .video {
	padding: 10px;
	background-color: #eaeaea;
	min-height: 65px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #a0a1a1;
}
.content .video-list .video img {
	width: 108px;
	height: 65px;
	float: left;
}
.content .video-list .video .copy {
	margin-left: 118px;
}
.content .video-list .video .copy h1 {
	font-family: 'CiscoSansBold', sans-serif;
	font-size: 13px;
	color: #626262;
}
.content .video-list .video .copy p {
	font-family: 'CiscoSansExtraLight', sans-serif;
    font-size: 12px;
}

.click-to-chat {
	margin: 10px; 0;
}

@media only screen and (min-width : 480px) {

.content .banner {
	height: 167px;
	/*max-width: 480px;*/
}
/*.content .banner ul.nav {
	max-width: 480px;
	top: 138px;
}*/
.content .banner .layer-top {
	background: transparent url('/web/mobile/images/mobile_md_hero-image.jpg') no-repeat top right;
	height: 145px;
}
.content .banner .layer-top h1 {
	width: 70%;
}
.content .banner .layer-top p.copy {
	width: 70%;
}
/*.content .banner .layer-bottom {
	background: transparent url('../img/banner-image.jpg') no-repeat 300px -19px;
	height: 145px;
}*/
.content .main {
	max-width: 100%;
}
.content .video-list .video .copy {
	width: 70%
}

}