/*
..................................................
Filename: _network.css
Author: Chad Harrington
Date: 10/01/2010

Supporting Files: reset.css, _global.css
Project: CSS Clean-up

Description: The mobility.css file is used for
the Mobility section of the site; it contains
styles/rules that are global to Mobility.
..................................................
*/

p {
	font-size: 13px;
	line-height: 18px;
	color: #6e6e6e;
}

p.more {
	color: #0069ad;
	font-size: 12px;
}


/*
..................................................
Top band with section header and horizontal 

navigation
..................................................
*/
#sectionNav {
	height: 12px;
	padding-bottom: 10px;
	overflow: hidden;
	/*background: #f2f2f2;*/
	border-bottom: 1px solid #E3E3E3;
}

.ppage {
	margin-bottom: 20px;
	padding-bottom: 15px;
	background: transparent url("/networking/graphics/sectionNavDivider.gif") bottom left repeat-x;
}

div#main #sectionNav h2 {
	font-size: 12px;
	line-height: 12px;
	color: #76d750;
	/*margin: 0 0 0 10px;
	padding: 6px 8px;*/
	margin: 0;
	padding-left: 22px;
	float: left;
}

#sectionNav h2 a:hover {
	text-decoration: underline;
}

ul#sectionNavMenu {
	font-size: 12px;
	line-height: 12px;
	float: right;
	clear: none;
}

ul#sectionNavMenu li {
	display: inline;
}

ul#sectionNavMenu li a,
ul#sectionNavMenu li a:visited {
	color: #666666;
	float: left;
	padding: 0 8px;
}

ul#sectionNavMenu li a:hover { 
	color: #0069ad; 
	text-decoration: none;
}

/*
..................................................
Hero Image Banner
..................................................
*/
#banner-wrap { 
	height: 390px; /* Needed for IE */
	position: relative;
	width: 800px;
/*	border: 1px solid #e3e3e3;*/
}
.samsung-banner-wrap{
	height:401px !important;
}

h3.productsubhead {
	display:block;
	font-size: 12px;
	line-height: 26px;
	text-indent: 18px;
	color: #000;
	margin: 0;
	float: left;
	width: 800px;
	overflow: hidden;
	height: 20px;
}

hr.productsubhead {
	display:block;
	margin: 0;
	width: 800px;
	background: transparent url("/networking/graphics/diagonal-hr.jpg") top left no-repeat;
	height: 26px;
}


/*
..................................................
Body and Shop Header Banner
..................................................
*/

#bodyheader {
display: block;
width: 800px;
height: 179px;
background: transparent url("/networking/graphics/topBannerBg.jpg") top left no-repeat;
}

#shopheader {
display: block;
width: 800px;
height: 235px;
background: transparent url("/networking/graphics/shopBg.jpg") top left no-repeat;
}

#softheader {
display: block;
width: 800px;
height: 463px;
background: transparent url("/networking/graphics/softBg.jpg") top left no-repeat;
}


#bodyheader h2, #shopheader h2, #softheader h2 {
font-size: 20px;
font-weight: bold;
width: 450px;
padding: 30px 0 0 40px;
}

#bodyheader h3, #shopheader h3, #softheader h3 {
font-size: 13px;
line-height: 18px;
width: 350px;
padding: 10px 0 0 40px;
line-height: 120%;
}

/*
..................................................
START MOBILITY SPECIFIC RULES
..................................................
*/

/* - mobility-specific top navigation on states - */

.landing #sectionNav h2.landing a,
.ereader #sectionNav ul#sectionNavMenu li.ereader a,
.ipad #secionNav ul#sectionNavMenu li.ipad a,
.iphone #secionNav ul#sectionNavMenu li.iphone a,
.ipod #secionNav ul#sectionNavMenu li.ipod a,
.laptop-netbook #sectionNav ul#sectionNavMenu li.laptop-netbook a,
.landing #sectionNav h2.landing a:visited, 
.ereader #sectionNav ul#sectionNavMenu li.ereader a:visited, 
.ipad #sectionNav ul#sectionNavMenu li.ipad a:visited, 
.iphone #sectionNav ul#sectionNavMenu li.iphone a:visited,
.ipod #sectionNav ul#sectionNavMenu li.ipod a:visited,
.laptop-netbook #sectionNav ul#sectionNavMenu li.laptop-netbook a:visited { color: #76d750; font-weight: }

.landing #sectionNav h2.landing a:hover,
.erader #sectionNav ul#sectionNavMenu li.ereader a:hover,
.ipad #sectionNav ul#sectionNavMenu li.ipad a:hover,
.iphone #sectionNav ul#sectionNavMenu li.iphone a:hover,
.ipod #sectionNav ul#sectionNavMenu li.ipod a:hover,
.laptop-netbook #sectionNav ul#sectionNavMenu li.laptop-netbook a:hover,
.landing #sectionNav h2.landing a:visited:hover, 
.ereader #sectionNav ul#sectionNavMenu li.ereader a:visited:hover, 
.ipad #sectionNav ul#sectionNavMenu li.ipad a:visited:hover, 
.iphone #sectionNav ul#sectionNavMenu li.iphone a:visited:hover, 
.ipod #sectionNav ul#sectionNavMenu li.ipod a:visited:hover,
.laptop-netbook #sectionNav ul#sectionNavMenu li.laptop-netbook a:visited:hover { color: #76d750; }


/*
..................................................
Three column box-style product intro links that

change on hover
..................................................
*/
a.homebox {
	/* apply first and second boxes in 3 column grid */
	display: block;
	float: left;
	width: 267px;
	height: 200px;
	background-position: 0px 0px;
	background-repeat: repeat-x;
}

a.homeboxlast {
	/* apply to third box in 3 column grid (1px narrower) - makes all 3 boxes add to 800px */
	display: block;
	float: left;
	width: 266px;
	height: 200px;
	background-position: 0px 0px;
	background-repeat: repeat-x;
}

a.homebox:hover,
a.homeboxlast:hover {
	background-position: 267px 0px;
	text-decoration: none;
}

a#ipodbox {
	/* add id only containing unique background sprite images unique products */
	background-image: url("/networking/graphics/index_ipodBg.jpg");
}

a#iphonebox { background-image: url("/networking/graphics/index_iphoneBg.jpg"); }
a#ipadbox { background-image: url("/networking/graphics/index_ipadBg.jpg"); }
a#laptopbox { background-image: url("/networking/graphics/index_laptopBg.jpg"); }
a#netbookbox { background-image: url("/networking/graphics/index_netbookBg.jpg"); }
a#ereaderbox{ background-image: url("/networking/graphics/index_ereaderBg.jpg"); }

a.homebox h3,
a.homeboxlast h3 {
	color: #FFF;
	font-size: 12px;
	font-weight: normal;
	line-height: 16px;
	margin: 176px 50px 0 20px;
}


/*
..................................................
Four column box-style product intro links that

change on hover
..................................................
*/
a.prodbox {
	/* 5 column grid */
	display: block;
	float: left;
	/*width: 200px;*/
	width: 198px;
	height: 198px;
	background-position: 0px 0px;
	background-repeat: repeat-x;
	border: 1px solid #fff;
	margin-bottom: 16px;
	text-align: center;
}


a.prodbox:hover {
	/*background-position: 200px 0px;*/
	text-decoration: none;
	border: 1px solid #76d750;
}

.prodbox img {
	margin-top: 10px;
}

/* add the following id only containing background sprite images unique products 

a.prodbox#box1 { background-image: url("/mobility/graphics/index_box1Bg.jpg"); }
a.prodbox#box2 { background-image: url("/mobility/graphics/index_box2Bg.jpg"); }
a.prodbox#box3 { background-image: url("/mobility/graphics/index_box3Bg.jpg"); }
a.prodbox#box4 { background-image: url("/mobility/graphics/index_box4Bg.jpg"); }*/

a.prodbox h4 {
	font-size: 12px;
	line-height: 16px;
	font-weight: bold;
	width: 120px;
	text-align:center;
	margin: 0 auto 0 auto;
	color:#666;
}

a.prodbox span {
	display: block;
	color:#666666;
	font-size:12px;
	margin:0 auto;
	text-align:center;
}

/*
..................................................
Five column box-style product intro links that

change on hover
..................................................
*/
a.prodbox_five {
	/* 5 column grid */
	display: block;
	float: left;
	/*width: 200px;*/
	width: 150px;
	height: 198px;
	background-position: 0px 0px;
	background-repeat: repeat-x;
	border: 1px solid #fff;
	margin-bottom: 16px;
	text-align: center;
}

a.prodbox_five.first {
	padding-left: 20px;
}


a.prodbox_five:hover {
	/*background-position: 200px 0px;*/
	text-decoration: none;
	border: 1px solid #76d750;
}

.prodbox_five img {
	margin-top: 10px;
}

/* add the following id only containing background sprite images unique products 

a.prodbox#box1 { background-image: url("/mobility/graphics/index_box1Bg.jpg"); }
a.prodbox#box2 { background-image: url("/mobility/graphics/index_box2Bg.jpg"); }
a.prodbox#box3 { background-image: url("/mobility/graphics/index_box3Bg.jpg"); }
a.prodbox#box4 { background-image: url("/mobility/graphics/index_box4Bg.jpg"); }*/

a.prodbox_five h4 {
	font-size: 12px;
	line-height: 16px;
	font-weight: bold;
	width: 120px;
	text-align:center;
	margin: 0 auto 0 auto;
	color:#666;
}

a.prodbox_five span {
	display: block;
	color:#666666;
	font-size:12px;
	margin:0 auto;
	text-align:center;
}


/*
..................................................
Mobility Header
..................................................
*/

/* .iphone .section_header_wrapper {
	background: url('/includes/graphics/mob_iphone.jpg');
	width: 800px; 
	height: 81px;
}

.ereader .section_header_wrapper {
	background: url('/includes/graphics/mob_ereader.jpg'); 
	width: 800px; 
	height: 81px;
}

.ipad .section_header_wrapper {
	background: url('/includes/graphics/mob_ipad.jpg');
	width: 800px; 
	height: 81px;
}

.tablet-ipad .section_header_wrapper {
	background: url('/includes/graphics/mob_ipad.jpg');
	width: 800px; 
	height: 81px;
}

.ipod .section_header_wrapper {
	background: url('/includes/graphics/mob_ipod.jpg');
	width: 800px; 
	height: 81px;
}

.laptop .section_header_wrapper {
	background: url('/includes/graphics/mob_laptop.jpg');
	width: 800px; 
	height: 81px;
}

.tablet .section_header_wrapper {
	background: url('/includes/graphics/mob_tablet.jpg');
	width: 800px; 
	height: 81px;
}

.smartphone .section_header_wrapper {
	background: url('/includes/graphics/mob_smartphone.jpg');
	width: 800px; 
	height: 81px;
}

.wireless .section_header_wrapper {
	background: url('/networking/images/wireless-routers/subsection-header.jpg');
	width: 800px; 
	height: 81px;
}

.power .section_header_wrapper {
	background: url('/includes/graphics/subsection-header-power.jpg');
	width: 800px; 
	height: 81px;
}

.incar .section_header_wrapper {
	background: url('/includes/graphics/mob_ipod.jpg');
	width: 800px; 
	height: 81px;
}

.screen-protection .section_header_wrapper {
	background: url('/includes/graphics/mob_screen-protection.jpg');
	width: 800px; 
	height: 81px;-pro
}

.kvm .section_header_wrapper {
	background: url('/includes/graphics/subsection-header-kvm.jpg');
	width: 800px; 
	height: 81px;
}

.wired .section_header_wrapper {
	background: url('/uk/includes/graphics/subsection-header-wired.jpg');
	width: 800px; 
	height: 81px;
}

.premise .section_header_wrapper {
	background: url('/uk/includes/graphics/subsection-header-premise.jpg');
	width: 800px; 
	height: 81px;
}

.surge_protector .section_header_wrapper {
	background: url('/includes/graphics/subsection-header-power.jpg');
	width: 800px; 
	height: 81px;
}

.conserve .section_header_wrapper {
	background: url('/includes/graphics/subsection-header-conserve.jpg');
	width: 800px; 
	height: 81px;
}

.keyboard .section_header_wrapper {
	background: url('/includes/graphics/mob_laptop.jpg');
	width: 800px; 
	height: 81px;
}

*/

.section_header_title {
	/* width: 780px; 
	position: relative; 
	top: 40px; 
	text-align: right; 
	padding-right: 20px; 
	font-size: 24px; 
	color: #575757;
	color: #fff; */
	display: none;
}



/*
..................................................
Divider BG
..................................................
*/

.diagonal_bg {
	/* background:url("/includes/graphics/divider2-bg.jpg") no-repeat scroll left top transparent; */
	height:20px;
	width: 800px;
}

div.divider div {
	/* background:url("/includes/graphics/divider3-bg.jpg") no-repeat scroll left top transparent; */
	border-top: solid 1px #E3E3E3;
	padding: 20px 0;
}

#gridBin div:first-child {
	background: none;
	border: 0;
	padding-top: 0;
}


/*
..................................................
Bread Crumbs from Legacy --> To be added to _global.css
..................................................
*/

div#main div.family_page_title {
	color:#333333;
	font:bold 14px/14px arial,helvetica,sans-serif;
	margin:0;
	padding-top:5px;
}

div#main div.gray {
	background-color: #f2f2f2;
	height: 35px;
	line-height: 30px;
}

div.family_page_title a.hot_crumb {
	margin-left:10px;
}

.hot_crumb {
	color:#AAAAAA;
	font-weight:bold;
	line-height:20px;
	margin:0;
}

.hot_crumb_title {
	color:#7b7b7b;
	margin-left:10px;
	font-size: 12px;
}

.hot_crumb_section_title, .hot_crumb_section_title a {
	font-weight: normal;
	font-size: 11px;
	color: #7b7b7b;
	margin-left: 10px;
}

.hot_crumb_subsection_title, .hot_crumb_subsection_title a {
	font-weight: normal;
	font-size: 11px;
	color: #7b7b7b;
	margin-left: 0;
}


/*
..................................................
Select Previous iPod Model
..................................................
*/

#ancNav { 
	font-size: 12px;
	line-height: 16px;
	position: relative;
	height: 35px;
}


#ancNav ul {
	position: absolute;
	top: 0;
	right: 20px;
	z-index: 10;
	text-indent: 20px;
	line-height: 19px;
}

#ancNav ul li.selectIpodHeader {
	width: 198px;
	padding: 7px 35px 7px 0px;
	font-weight: bold;
	border: 1px solid #e3e3e3;
	cursor: pointer;
	background: #efefef url("/includes/graphics/down.jpg") no-repeat 206px 14px;
	-moz-border-radius: 10px;
	border-radius: 10px;

}

#ancNav ul li.selectIpodHeader:hover {
	border: 1px solid #76d750;
}

#ancNav ul li.selectIpodHeader.active {
	border: 1px solid #76d750;
	background: #efefef url("/includes/graphics/up.jpg") no-repeat 206px 14px;
}

#ancNav ul li.selectIpodHeader ul {
	position: static;
	font-weight: normal;
	width: 233px;
}

#ancNav ul li.selectIpodHeader ul li a {
	display: block;
}

div.trans {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;
}

/* screen protection */

#screen-protection {
	width: 800px;
	clear: both;
	padding-bottom: 15px;
	background: url("/networking/images/dividers/one-pixel-divider.jpg") bottom;
	background-repeat: no-repeat;
}


#screen-protection h3 {
	font-size: 22px;
	font-weight: bold;
	color: #171717;
	padding: 40px 0 0 20px;
	width: 300px;
	float: left;
	clear: both;
}

#screen-protection p.description {
	font-size: 16px;
	line-height: 21px;
	padding: 10px 0 0 20px;
	width: 350px;
	float: left;
}

#screen-protection p.tagline {
	font-size: 16px;
	line-height: 21px;
	padding: 20px 20px 0 20px;
	padding-top: 11px;
}

#screen-protection ul {
	color: #6e6e6e;
	padding: 20px 25px 20px 20px;
	width: 350px;
	float: left;
}

#screen-protection li {
	margin: 15px 0 0 0;
	font-size: 14px;
	line-height: 21px;
}

#screen-protection li span.list-header {
	font-weight: bold;
	font-size: 16px;
	line-height: 16px;
	color: #171717;
}

#screen-protection .video {
	float: right;
	margin-right: 28px;
}

#screen-protection span.disclaimer {
	display: block;
    font-size: 10px;
    line-height: 12px;
	margin-top: 30px;
}

/* Tablet + iPad */

#tablet-ipad {
	width: 800px;
	clear: both;
	padding-bottom: 15px;
	background: url("/networking/images/dividers/one-pixel-divider.jpg") bottom;
	background-repeat: no-repeat;
}


#tablet-ipad  h3 {
	font-size: 22px;
	font-weight: bold;
	color: #171717;
	padding: 0 20px 0 20px;
	clear: both;
}

#tablet-ipad  p {
	font-size: 16px;
	line-height: 21px;
	padding: 10px 20px 0 20px;

}

#tablet-ipad  p.tagline {
	font-size: 16px;
	line-height: 21px;
	padding: 20px 20px 0 20px;
	padding-top: 11px;
}

#tablet-ipad span.disclaimer {
	display: block;
    font-size: 10px;
    line-height: 12px;
}

/* Buttons */

.button-stroke {
	border: 2px solid #7dc150;
	width: 100px;
	height: 22px;
	background-color: #dcf4c1;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	behavior: url(/includes/htc/PIE.htc);
}

.button-highlight {
	height: 20px;
	width: 100px;
	background-color: #dcf4c1;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	behavior: url(/includes/htc/PIE.htc);
}

.button-inner {
	height: 21px;
	position: relative;
	top: 2px;
	text-align: center; 
	width: 100px; 
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	-webkit-box-shadow: #999 3px 2px 10px;
	-moz-box-shadow: #999 3px 2px 10px;
	box-shadow: #999 3px 2px 5px;
	background: #95dc48;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#95dc48), to(#8bcc4c));
	background: -webkit-linear-gradient(#96dc48, #8bcc4c);
	background: -moz-linear-gradient(#96dc48, #8bcc4c);
	background: -ms-linear-gradient(#96dc48, #8bcc4c);
	background: -o-linear-gradient(#96dc48, #8bcc4c);
	background: linear-gradient(#96dc48, #8bcc4c);
	-pie-background: linear-gradient(#96dc48, #8bcc4c);
	behavior: url(/includes/htc/PIE.htc);
}



a.button-link {
	color: #fff;
	text-shadow:2px 0 1px #999; 
	font-size: 14px;
	line-height: 20px;
}

/* hover */

a.button-link:hover {
	text-decoration: none;
}


.button-inner:hover  {
	-webkit-box-shadow: #999 1px 2px 5px;
	-moz-box-shadow: #999 3px 2px 5px;
	box-shadow: #999 1px 2px 2px;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#76d750), to(#5ca93e));
	background: -webkit-linear-gradient(#76d750, #5ca93e);
	background: -moz-linear-gradient(#76d750, #5ca93e);
	background: -ms-linear-gradient(#76d750, #5ca93e);
	background: -o-linear-gradient(#76d750, #5ca93e);
	background: linear-gradient(#76d750, #5ca93e);
	-pie-background: linear-gradient(#76d750, #5ca93e);
	behavior: url(/includes/htc/PIE.htc);
}


/* end buttons */