/* CSS Document */
/* LAYOUT */
/* ------------------------------- */
/* above the content */

html, body {
/* establish page height and background color, position */
	height: 100%;
	background-color: #003d77; /* of the two background colors, this is the darkest - to flood the page before the image loads */
	margin: 0; padding: 0;
	background-image: url(http://marketingland.com/images/mland-bg.gif);
	//NOT USED background-image: url(http://searchengineland.com/images/20/bkg_page.gif); /* striped background image, 4px image */
	background-repeat: repeat;
}

#adUnitBanner img {
/* leaderboard banner ad zone - 728x90px and add the margin top and bottom */
	margin: 12px auto 12px auto; padding: 0;
}

#adUnitColHdr {
/* leaderboard banner ad zone - 728x90px and add the margin top and bottom */
	float: right; margin: 12px 5px; padding: 0; width: 728px;
}

#adUnitColFtr {
/* leaderboard banner ad zone - 728x90px and add the margin top and bottom */
	margin: 5px auto 5px auto; padding: 0; text-align: center; width: 728px;	
}


#pageWrapper {
/* put in the background vertical graphic that contains the shadow on both sides */
/* allow height to flex more than 100 percent */
	width: 1064px;
	min-height: 100%;
	height: auto; /* for FF/Moz/Safari */
	_height: 100%; /* for IE */
	background: url(http://searchengineland.com/images/20/bg_content3.png) 0 0 repeat-y; /* this graphic carries the shadow and the content background color */
	margin: 0px auto;
	position: relative;
}

#pageContent {
/* restrict content size
   generally speaking, this is the white window */
	width: 1024px;
	min-height: 100%;
	height: auto; /* for FF/Moz/Safari */
	_height: 100%; /* for IE */
	margin: 0px auto;
	background-color: #FFFFFF;
	border-top: 3px solid #003d77;
}

/* ------------------------------- */
/* masthead/utility area */

#utilityWrapper {
/* includes the the logo and the search box - fits into the pageContent div */
	width: 1024px;
	margin: 0px; 
	height: 120px; 
	background-color: #FFFFFF;
	background-image: url(http://searchengineland.com/images/20/bkg_utility3.gif);
	background-repeat: repeat-x;
}

#logo {
/* padding, not margin inside the zone */
	width: 275px;
	height: 98px;
	float: left;
	padding: 19px 0 0 10px; 	
}

#searchBox {
/* float right as needed; adjust the right margin to move */
	width: 350px;
	height: 30px;
	//float: right;
	padding: 0;
	margin: 0px 0px 10px 0px; 
	//background-image: url(http://searchengineland.com/images/20/bkg_searchBox2.gif);
	//background-repeat: no-repeat;
	//background-position: right;	
}

#searchBoxPipe {
/* set the color of the pipe and give it space - use with a <span> tag */
	margin: 0 10px;
	color: #c0c0c0;
}

#searchInside {
	 margin: 0px 10px;
}

/* ------------------------------- */
/* main and secondary top-level navigations */

#mainNavigationWrapper {
	/* main navigation */
	width: 1024px;
	height: 29px;
	margin: auto auto;
	padding-top: 10px;
	background-color: #003d77;
	text-align: center;
}

#mainNavigationWrapper ul {height: 39px; list-style: none; display: inline; overflow: hidden;}
#mainNavigationWrapper li {list-style: none; display: inline;}
#mainNavigationWrapper a { color: #ffffff; font-size: 16px; font-weight: bold; margin: 0px 7px 0px 0px;}
#mainNavigationWrapper a:hover { color: #ccc; }
#mainNavigationWrapper a:visited { text-decoration: none; }
#mainNavigationWrapper ul li a:visited { text-decoration: none; }


#subNavigationWrapper {
	/* sub navigation - the light blue zone below the main navigation */
	width: 1024px;
	height: 29px;
	margin: auto auto;
	padding-top: 10px; 
	background-color: #d2e3b1;
	text-align: center;
}

#subNavigationWrapper ul {height: 39px; list-style: none; display: inline; overflow: hidden;}
#subNavigationWrapper li {list-style: none; display: inline;}
#subNavigationWrapper a { color: #003d77; font-size: 14px; font-weight: bold; margin: 0px 7px 0px 0px;}
#subNavigationWrapper a:hover { color: #fff; }
#subavigationWrapper a:visited { text-decoration: none; }
#subNavigationWrapper ul li a:visited { text-decoration: none; }

#subNavPipe {
/* set the color of the pipe in the subnav and give it space - use with a <span> tag */
	margin: 0px;
	padding: 0px 5px;
	color: #003d77;
}

#newSubNavigationWrapper {
	/* sub navigation - the light blue zone below the main navigation */
	width: 1024px;
	height: 29px;
	margin: auto auto;
	padding-top: 10px; 
	background-color: #efefef;
	background-repeat: repeat;
	text-align: center;
}

#newSubNavigationWrapper ul {height: 39px; list-style: none; display: inline; overflow: hidden;}
#newSubNavigationWrapper li {list-style: none; display: inline;}
#newSubNavigationWrapper a { color: #003d77; font-size: 14px; font-weight: bold; margin: 0px 7px 0px 0px;}
#newSubNavigationWrapper a:hover { color: #999; }
#newSubavigationWrapper a:visited { text-decoration: none; }
#newSubNavigationWrapper ul li a:visited { text-decoration: none; }

/* ------------------------------- */
/* content */

#mainContentWrapper {
	/* this is the main content shell -- margin 18px left and right
	column divs go inside of here */
	width: 988px;
	margin: 16px 18px;
	/* background-image: url(http://searchengineland.com/images/20/bkg3.gif);
	background-repeat: repeat-y; */
}

#mainContentWrapperHome {
	/* this is the main content shell HOME PAGE -- margin 18px left and right
	column divs go inside of here */
	width: 988px;
	margin: 16px 18px; 
	background-image: url(http://searchengineland.com/images/20/bkg2.gif);
	background-repeat: repeat-y;
}

#leftCol {
	/* push out the right col by 7px to center the vertical rule between columns
	use padding to make the <hr />s work right */
	width: 621px;
	margin: 0; padding: 0 7px 0 0; 
	background-color: #FFFFFF;
	float: left;
}

#rightCol {
	/* push out the vertical border
	column width is designed for 336px-wide ad, but add 1px each side for the shadow on the blue headline graphics */
	width: 348px;
	margin: 0; padding: 0 0 0 7px; 
	float: left;
	border-left: 1px solid #e5e5e5;
}

#leftLeftCol {
	/* push out the right col by 7px to center the vertical rule between columns
	use padding to make the <hr />s work right
	column width is designed for 336px-wide ad, but add 1px each side for the shadow on the white/green headline graphics */
	width: 378px;
	margin: 0; padding: 0 7px 0 0; 
	float: left;
	border-right: 1px solid #e5e5e5; /* border is here because this column should be longer than the center one */
}

#leftCenterCol {
	/* push out the vertical border */
	width: 224px;
	margin: 0; padding: 0 0 0 7px;
	float: left;	
}

/* leftCenterCol ul/li */
#leftCenterCol ul {
   list-style-type: circle;
   padding-left: 14px;
   margin-top: 0;
   margin-left: 10px;
   line-height: 14px;
}

#leftCenterCol ul li {
   list-style-image: none;
   //background-image: url(http://searchengineland.com/images/20/gr_bullet2.gif);
   //background-repeat: no-repeat;
   line-height: 17px;
   padding: 0 10px 10px 2px;  
}
#leftCenterCol ul li a:link {
	color: #444;
	line-height: 14px;
	text-decoration: none;
}
#leftCenterCol ul li a:visited {
	color: #555;
	line-height: 14px;
	text-decoration: none;	
}
#leftCenterCol ul li a:hover, 
#leftCenterCol ul li a:visited:hover {
	color: #671319;
	line-height: 14px;
	text-decoration: underline;
}
#leftCenterCol ul li a:active {
	color: #6e6e6e;
	line-height: 14px;
	text-decoration: none;
}
	#leftBulletColLeft {
	/* push out the vertical border */
	width: 274px;
	margin: 0; padding: 0 7px 0 0;
	float: left;
	
}
#leftBulletColRight {
	/* push out the vertical border */
	width: 274px;
	margin: 0; padding: 0 0 0 7px;
	float: left;
	border-left: 1px solid #e5e5e5;
}

/* leftBulletCol(s) ul/li */
#leftBulletColLeft ul,
#leftBulletColRight ul {
   list-style-type: none;
   padding-left: 14px;
   margin: 0;
   margin: 0;
   line-height: 14px;
  }
#leftBulletColLeft ul li,
#leftBulletColRight ul li {
   list-style-image: none;
   background-image: url(http://searchengineland.com/images/20/gr_bullet2.gif);
   background-repeat: no-repeat;
   line-height: 14px;
   padding: 0 10px 4px 10px;  
}

#leftBulletColLeft ul li a:link,
#leftBulletColRight ul li a:link {
	color: #6e6e6e;
	line-height: 14px;
	text-decoration: none;
}
#leftBulletColLeft ul li a:visited,
#leftBulletColRight ul li a:visited {
	color: #6e6e6e;
	line-height: 14px;
	text-decoration: none;	
}
#leftBulletColLeft ul li a:hover, 
#leftBulletColLeft ul li a:visited:hover,
#leftBulletColRight ul li a:hover, 
#leftBulletColRight ul li a:visited:hover {
	color: #671319;
	line-height: 14px;
	text-decoration: none;
}
#leftBulletColLeft ul li a:active,
#leftBulletColRight ul li a:active {
	color: #6e6e6e;
	line-height: 14px;
	text-decoration: none;
}

#leftBulletColLeft p,
#leftBulletColRight p {
	margin: 0 0 0 16px;
}

#adUnitLargeRectangle {
/* 336x280px and add the margin top and bottom */
	margin: 5px auto 12px auto; padding: 0;
	text-align: center;
	width: 300px;
}

#adUnitColContent, #adUnitLgPrem {
	width: 100%; margin: 5px auto 5px auto; padding: 0; text-align: center;
	}


#socialSide1 { margin: 10px 0px; }

#sidebarTextAds { text-align: left; margin-left: 10px; }

/* headers */

#header {
	/* ONE LINE GREEN HEADER
	each of the header graphics are cut tight, and need some cushion at the bottom */
	background-image:url(http://searchengineland.com/images/30/header-bg.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	margin: 0 0 12px 0;
	height: 30px; /* needs to be the FULL height */
	overflow: hidden; /* &%$#!@ IE 6 */
	background-color: #FFFFFF;
}

#header2 {
	/* TWO LINE GREEN HEADER
	each of the header graphics are cut tight, and need some cushion at the bottom - the only change is the height */
	background-image:url(http://searchengineland.com/images/20/h_right2.gif); 
	background-repeat: no-repeat; 
	background-position: right bottom;
	margin: 0 0 12px 0;
	height: 44px;
	overflow: hidden; /* IE 6 */
}

#header3 {
	/* ONE LINE GREEN HEADER alt - this may be obsolete with the revisions from Michelle 10/22 -LR
	inside pages require this butts with the lower gray bkg (like the blue ones) */
	background-image:url(http://searchengineland.com/images/30/h_right.gif); 
	background-repeat: no-repeat; 
	background-position: right bottom;
	margin: 0;
	height: 30px; /* needs to be the FULL height */
	overflow: hidden; /* &%$#!@ IE 6 */
}


#shareButtons { width: 100%; margin: 0px auto 5px auto; }
.sharebtns { float: left; margin-right: 5px; }
.sharetm {float: left; margin-right: -5px; }

#goog { margin:0px 0px 0px 10px; }
#faceLike { width: 100%; margin: 0px 0px 8px 0px; }
#followOptions { width: 95%; margin-bottom: 10px; margin-left: 0px; }


#authorBio {
	/* each of the header graphics have a 2px shadow both sides
	put stories in this tag to compensate and line up the edges to the inside of those shadows */
	padding: 0 2px;
	background-color: #FFFFFF;
}

#storyArt {
	/* this is the container that holds story art - may need to be customized */
	float:left; 
	padding: 0px 12px 8px 0;
}

#ad_container {padding-top: 10px;}

#ad_container_sidebar {padding-top: 0px;}

div.ad {
	height: 125px;
	width: 125px;
	margin: 0 0 10px 28px;
	float: left;
	border: none;
}
div.ad img {border: none;}

/* right column */


#rightColSCVideoImage {
/* click this to see the video */
	float:left; 
	margin: 4px 12px 12px 0;
}

#rightColRSSIcon {
/* click this to get the RSS feed */
	float:left; 
	padding: 0px 12px 0 0;
}

#rightColHeaderCenter {
/* right column section boxes */
	 background-image:url(http://searchengineland.com/images/20/bkg_rightMainCenter4.gif); 
	 background-repeat:repeat-y; 
	 padding: 0 16px;
	 width: 348px;
}

/* rightColumn ul/li -- id so the div can be labeled with an ID, saving the text classes when needed (e.g. ".blueHeader") */
#rightColGrayBackground {
	 margin: 0 1px; 
	 padding: 8px 16px 16px 16px; 
	// background-image:url(http://searchengineland.com/images/20/bkg_right.gif); 
	// background-repeat:repeat-x;
}


#socialBlock { width: 100%; }
#socialBlockShare { float: left; 
	width:47%; 
	margin: auto 10px; 
	border-right: 1px solid #ccc; 
	padding-right: 5px; 
}
#socialBlockFollow { float:right; 
	width: 48%; 
}

#rightColGrayBackground ul {
   list-style-type: none;
   padding-left: 0px; /* add to extend right */
   margin: 0;
   line-height: 18px;
 }
 
/* plain arrow bullet */
#rightColGrayBackground ul li {
   list-style-image: none;
   line-height: 18px;
   background-image: url(http://searchengineland.com/images/20/gr_bullet3.gif);
   background-repeat: no-repeat;
   padding: 0 10px 4px 10px;
}

#rightColGrayBackground ul li a:link {
	color: #003d77;
	line-height: 18px;
	text-decoration: none;
}
#rightColGrayBackground ul li a:visited {
	color: #6e6e6e;
	line-height: 18px;
	text-decoration: none;	
}
#rightColGrayBackground ul li a:hover, 
#rightColGrayBackground ul li a:visited:hover {
	color: #000;
	line-height: 18px;
	text-decoration: none;
}
#rightColGrayBackground ul li a:active {
	color: #6e6e6e;
	line-height: 18px;
	text-decoration: none;
}
#rightColGrayBackground p {
   margin: 0 0 4px 0; padding: 0;
   line-height: 18px;
}



#tdmSideList {
	 margin: 0 1px; 
	 padding: 8px 16px 16px 16px;
	 font-size: 14px;
}

#tdmSideList ul {
   list-style-type: none;
   padding-left: 0px;
   margin: 0;
}
 
#tdmSideList ul li {
   list-style-image: none;
   line-height: 1.3em;
   background-image: url(http://searchengineland.com/images/20/gr_bullet4.gif);
   background-repeat: no-repeat;
   padding: 0px 10px 0px 18px;
   font-size: 14px;
}

#tdmSideList ul li a:link {
	color: #003d77;
	line-height: 1.3em;
	font-size: 14px;
	text-decoration: none;
}
#tdmSideList ul li a:visited {
	color: #555;
	line-height: 1.3em;
	text-decoration: none;	
}
#tdmSideList ul li a:hover, 
#tdmSideList ul li a:visited:hover {
	color: #671319;
	line-height: 1.3em;
	text-decoration: underline;
}
#tdmSideList ul li a:active {
	color: #671319;
	line-height: 1.3em;
	text-decoration: underline;
}
#tdmSideList p {
   margin: 0 0 4px 0; padding: 0;
   line-height: 1.3em;
}

#tdmSideList a:link {
	color: #003d77;
	line-height: 1.3em;
	text-decoration: none;
}
#tdmSideList a:visited {
	color: #555;
	line-height: 1.3em;
	text-decoration: none;	
}
#tdmSideList a:hover, #tdmSideList a:visited:hover {
	color: #6e6e6e;
	line-height: 1.3em;
	text-decoration: none;
}
#tdmSideList a:active {
	color: #671319;
	line-height: 1.3em;
	text-decoration: none;
}

#tdmSideSMN { margin-top: 25px; }

/* rightColumn Bio background for the story detail page -- change the line height */

#rightColGrayBackground3 {
	 margin: 0 1px; 
	 padding: 16px; 
	 background-image:url(http://searchengineland.com/images/20/bkg_right.gif); 
	 background-repeat:repeat-x;
}
#rightColGrayBackground3 ul {
   list-style-type: none;
   padding-left: 0px; /* add to extend right */
   margin: 0;
   line-height: 15px;
 }
 
/* plain arrow bullet */
#rightColGrayBackground3 ul li {
   list-style-image: none;
   line-height: 15px;
   background-image: url(http://searchengineland.com/images/20/gr_bullet3.gif);
   background-repeat: no-repeat;
   padding: 0 10px 4px 10px;
}

#rightColGrayBackground3 ul li a:link {
	color: #6e6e6e;
	line-height: 15px;
	text-decoration: none;
}
#rightColGrayBackground3 ul li a:visited {
	color: #6e6e6e;
	line-height: 15px;
	text-decoration: none;	
}
#rightColGrayBackground3 ul li a:hover, 
#rightColGrayBackground3 ul li a:visited:hover {
	color: #671319;
	line-height: 15px;
	text-decoration: none;
}
#rightColGrayBackground3 ul li a:active {
	color: #6e6e6e;
	line-height: 15px;
	text-decoration: none;
}
#rightColGrayBackground3 p {
   margin: 0 0 4px 0; padding: 0;
   line-height: 15px;
}

/* left column */

/* left comment form gray background -- this one is longer
   based on rightColGrayBackground */
#commentFormGrayBackground {
	 margin: 0 1px; 
	 padding: 8px 16px 16px 16px; 
	 //background-image:url(http://searchengineland.com/images/20/bkg_comment.gif); 
	 //background-repeat:repeat-x;
}
#commentFormGrayBackground p {
   margin: 0 0 4px 0; padding: 0;
   line-height: 18px;
}

#leftColHeaderCenter {
/* left column blue section box - middle background */
	background-image: url(http://searchengineland.com/images/20/bkg_leftMainCenter3_wide.gif); 
	background-repeat: repeat-y; 
	padding: 0 16px;
}

#comments {
/* under the header */
	margin-top: 16px;
}

#columnistAvatarSmall {
	 float: left; 
	 padding: 4px 12px 0 0;
}

/* ------------------------------- */
/* footer */

#footerspacer {
/* the shadow graphic separating content from footer */
	width: 984px;
	margin: 0px auto; 
	height: 20px; 
	background-color: #FFFFFF;
	background-image: url(http://searchengineland.com/images/20/bkg_footerSpacer.gif); 
	background-repeat: repeat-x;
}

#footerWrapper {
	/* make it float at the bottom */ /* commented out */
	width: 984px;
	height: 130px;
	background-color: #FFFFFF;
	color: #6E6E6E; /* move to styles */
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;	/*bottom: 0px;
	position: absolute;*/
}

#footerPipe {
/* set the color of the pipe and give it space - use with a <span> tag */
	margin: 0 10px;
	color: #333333;
}

#feedButtons {
	/* set the color of the pipe and give it space - use with a <span> tag */
	margin-top:10px;
	text-align: center;
}

#copyrightWrapper {
	margin: 0px 0px 10px 0px;
	text-align: right;
}

#subscribeform .email {width: 162px; height: 36px; background: url(http://searchengineland.com/images/20/bg_newsLft.png) 0 0 no-repeat; border: 0; padding: -10px 5px 5px 10px; float: left; margin-bottom: 3px; }
#subscribeform .button {float: right; margin-bottom: 3px;}

#slideContainer { width: 620px; height: 224px !important; margin: auto auto; }

#newsSlide { width: 510px; margin-left: 10px; }

#contentAd { width: 620px; margin-top: 5px; margin-bottom: 15px; }

#sideMemberAd { text-align: center; margin: 0px auto 10px auto; }

#commentPost { margin-top: 10px; }


/* SLIDER STYLES */

#slideContainer {
	width:580px;
	padding:10px;
	margin:0 auto 0 10px;
	position:relative;
	z-index:0;
}

#slideExample {
	width:600px;
	height:350px;
	position:relative;
}


#slideFrame {
	position:absolute;
	z-index:0;
	width:739px;
	height:341px;
	top:-3px;
	left:-70px;
}

/*
	Slideshow
*/

#slides {
	position:absolute;
	top:15px;
	left:14px;
	z-index:100;
}

/*
	Slides container
	Important:
	Set the width of your slides container
	Set to display none, prevents content flash
*/

.slides_container {
	width:570px;
	overflow:hidden;
	position:relative;
	display:none;
}

/*
	Each slide
	Important:
	Set the width of your slides
	If height not specified height will be set by the slide content
	Set to display block
*/

.slides_container div.slide {
	width:570px;
	height:270px;
	display:block;
}


/*
	Next/prev buttons
*/

#slides .next,#slides .prev {
	position:absolute;
	top:0px;
	left:510px;
	width:30px;
	height:30px;
	display:block;
	z-index:101;
	opacity:0.8;
}

#slides .next {
	left:542px;
}

/*
	Pagination
*/

.pagination {
	margin:25px auto 0;
	width:200px;
}

.pagination li {
	float:left;
	margin:0 1px;
	list-style:none;
}

.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url(http://searchengineland.com/images/30/pagination.png);
	background-position:0 0;
	float:left;
	overflow:hidden;
}

.pagination li.current a {
	background-position:0 -12px;
}

/*
	Caption
*/

.slideCaption {
	z-index:500;
	position:absolute;
	bottom:-35px;
	left:0;
	height:50px;
	padding:5px 20px 0 20px;
	background:#000;
	background:rgba(0,0,0,.5);
	width:540px;
	font-size:1.3em;
	line-height:1.33;
	color:#fff;
	border-top:1px solid #000;
	text-shadow:none;
}

.slideCaption p a { color: #fff; font-size: .85em;
	line-height:1.33;
	color:#fff;
}

/* END SLIDER STYLES */