@charset "UTF-8";
/* CSS Document */

table, td { font-family: "Lucida Grande", Verdana, Arial, sans-serif; font-size: 11px; line-height: 16px; }

h2 { font-size: 14px; color: #666; }

div.miniHeader .miniHeaderMenu { padding: 0 0 0 20px; float: left; clear: none; overflow: hidden; width: 745px; height: 45px; background-image: url(images/minipage-header-Bg.gif); }

div.miniHeader .miniHeaderMenu .overview { float: left; clear: none; overflow: hidden; width: 104px; height: 45px; background-image: url(images/header-overview-hover.gif); }

div.miniHeader .miniHeaderMenu a .overview { background-image: url(images/header-overview-normal.gif); }

div.miniHeader .miniHeaderMenu a:hover .overview { background-image: url(images/header-overview-hover.gif);  }

div.miniHeader .miniHeaderMenu .features { float: left; clear: none; overflow: hidden; width: 193px; height: 45px; background-image: url(images/header-features-hover.gif); }

div.miniHeader .miniHeaderMenu a .features { background-image: url(images/header-features-normal.gif); }

div.miniHeader .miniHeaderMenu a:hover .features { background-image: url(images/header-features-hover.gif); }

div.miniHeader .miniHeaderMenu .design { float: left; clear: none; overflow: hidden; width: 102px; height: 45px; background-image: url(images/header-design-hover.gif); }

div.miniHeader .miniHeaderMenu a .design { background-image: url(images/header-design-normal.gif); }

div.miniHeader .miniHeaderMenu a:hover .design { background-image: url(images/header-design-hover.gif); }

div.miniHeader .miniHeaderMenu .sharing {float: left; clear: none; overflow: hidden; width: 103px; height: 45px; background-image: url(images/header-sharing-hover.gif); }

div.miniHeader .miniHeaderMenu a .sharing { background-image: url(images/header-sharing-normal.gif);  }

div.miniHeader .miniHeaderMenu a:hover .sharing { background-image: url(images/header-sharing-hover.gif); }

div.miniHeader .miniHeaderMenu .specs { float: left; clear: none; overflow: hidden; width: 126px; height: 45px; background-image: url(images/header-specs-hover.gif); }

div.miniHeader .miniHeaderMenu a .specs { background-image: url(images/header-specs-normal.gif); }

div.miniHeader .miniHeaderMenu a:hover .specs { background-image: url(images/header-specs-hover.gif); }

div.miniHeader .miniHeaderMenu .order { float: left; clear: none; overflow: hidden; width: 105px; height: 45px; background-image: url(images/header-order-hover.gif); }

div.miniHeader .miniHeaderMenu a .order { background-image: url(images/header-order-normal.gif); }

div.miniHeader .miniHeaderMenu a:hover .order { background-image: url(images/header-order-hover.gif); }

div.miniHeader .miniHeaderTop { float: left; clear: none; overflow: hidden; width: 765px; height: 187px; background-image: url(images/home-header-top.jpg); }

div.miniHeader .miniHeaderTopInside { float: left; clear: none; overflow: hidden; width: 765px; height: 195px; background-image: url(images/home-header-top-inside.jpg); }

div.miniHeader .miniHeaderBottom { float: left; clear: none; width: 765px; height: 210px; background-image: url(images/home-header-bottom-maclife.jpg); background-position: top; background-repeat: no-repeat; }

div.miniHeader .miniHeaderTopOrder { float: left; clear: none; overflow: hidden; width: 765px; height: 187px; background-image: url(images/home-header-top2.jpg); }

div.miniHeader .miniHeaderBottomOrder { float: left; clear: none; width: 765px; height: 200px; background-image: url(images/home-header-bottom2.jpg); background-position: top; background-repeat: no-repeat; }

div.miniHeader .miniHeaderBottomOrder div.headerContent { clear:none; float:right; font-size:12px; font-weight:normal; line-height:18px; margin: 25px 55px 0 0; overflow:hidden; width:320px; color: #888; }


div.miniHeader .miniHeaderBottom div.headerContent { float: left; clear: none; overflow: hidden; padding: 38px 0px 0px 340px; width: 260px; }

div.miniHeader .miniHeaderBottom div.headerContent .paragraph { float: left; clear: none; overflow: hidden; padding: 7px 0; }

div.miniHeader .miniHeaderBottom div. headerContent .orderButton { float: left; clear: none; overflow: hidden; }

div.miniContentIntro { float: left; clear: none; overflow: hidden; width: 765px; padding: 0 0 5px; margin: 0px 0px 10px 0px; height: 315px; }

div.miniContentIntro .introTab { float: right; clear: none; overflow: hidden; padding: 0px 12px 0px 0px; }

div.miniContentIntro .introIcon { float: left; clear: none; overflow: hidden; padding: 20px 10px 0; width: 90px; }

div.miniContentIntro .introIconWide { float: left; clear: none; overflow: hidden; padding: 20px 10px 0; width: 125px; }

div.miniContentIntro .introIconExtraWide { float: left; clear: none; overflow: hidden; padding: 20px 10px 0; width: 205px; }

div.miniContentIntro .introCopy { padding: 20px 0 0; }

div.featuresIntro .introCopy { padding: 1px 0 0; }

div.featuresIntro .introCopy .headline { padding: 40px 45px 0 0; float: right; }

div.specsIntro { float: left; clear: none; overflow: hidden; width: 765px; padding: 0 0 5px; margin: 0px 0px 10px 0px; height: 325px; }

div.specsIntro .introTab { float: right; clear: none; overflow: hidden; padding: 0px 12px 0px 0px; }

div.specsIntro .introCopy { padding: 1px 0 0; }

div.specsIntro .introCopy .headline { padding: 15px 0 0 27px; float: right; }

div.specsIntro .introCopy p { clear:none; float:right; margin: 15px 18px 0 0; overflow:hidden; width: 404px; font-size: 12px; line-height: 18px; font-weight: normal; color: #AAA; }

div.specsIntro .introCopy .introHeader { clear:none; float:left; overflow:hidden; padding:0 0 10px; }

div.specsIntro .introCopy .headline { padding: 15px 0 0 27px; float: left; }

div.miniContentIntro .introCopy p { clear:none; float:right; margin: 15px 18px 0 0; overflow:hidden; width:320px; font-size: 12px; line-height: 18px; font-weight: normal; }

div.miniContentIntro .introCopy .introHeader { clear:none; float:left; overflow:hidden; padding:0 0 10px; }

div.miniContentIntro .introCopy .headline { padding: 20px 0px 0px 27px; float: left; }

div.miniContentIntro .introCopy .largeBox {  }

div.miniContentIntro .boxOne .copy { float: left; clear: none; width: 45%;}

div.miniContentIntro .boxThree .copy { float: left; clear: none; width: 42%;}

div.miniContentIntro .boxTwo .copy { float: right; clear: none; width: 45%;}

div.miniContentIntro .largeBox .screens { float: left; clear: both; width: 60%; }


div.miniContentDesign { float: left; clear: none; overflow: hidden; width: 765px; padding: 0 0 5px; margin: 0px 0px 10px 0px; height: auto; }

div.miniContentDesign .screenshots { float: left; clear: none; overflow: hidden; margin: 30px 0px 0px 0px; width: 500px; }

div.miniContentDesign .screenshots img { float: left; clear: none; overflow: hidden; padding: 0 10px 0 0; }

div.miniContentDesign .introTab { float: right; clear: none; overflow: hidden; padding: 0px 12px 0px 0px; }

div.miniContentDesign .introCopy p { clear:none; float:right; margin: 15px 18px 0 0; overflow:hidden; width:320px; font-size: 12px; line-height: 18px; font-weight: normal; }

div.miniContentDesign .introCopy .introHeader { clear:none; float:left; overflow:hidden; padding: 15px 0px 15px 3px; }

div.miniContentDesign .boxTwo .introHeader { clear:none; float:right; overflow:hidden; padding: 50px 25px 20px 0; }

div.miniContentDesign .boxThree .introHeader { clear:both; float:left; overflow:hidden; padding: 0px 9px 20px 15px; }

div.miniContentDesign .introCopy .headline { padding: 30px 0px 0px 27px; float: left; }

div.miniContentDesign .introCopy .largeBox {  }

div.miniContentDesign .boxOne .copy { color: #888; clear:none; float:left; margin: 0 18px 0 3px; overflow:hidden; width: 440px; font-size: 12px; line-height: 18px; font-weight: normal; }

div.miniContentDesign .boxThree .copy { float: left; clear: both; width: 42%; padding: 0px 0px 0px 15px; }

div.miniContentDesign .boxTwo .copy { float: right; clear: both; width: 45%; padding: 0 30px 0 0; }

div.miniContentDesign .largeBox .screens { float: left; clear: both; width: 60%; }

div.miniContentDesign .largeBox .screens .smallScreenshot { width: 123px; height: 88px; background-image: url(images/sm-screenshot-bg.jpg); background-repeat: no-repeat; float: left; clear: none; margin: 0px 10px 0px 0px; }
 
div.miniContentDesign .boxOne { clear: none; background-image: url(images/design-med-mini-bg.jpg); background-position: right top; background-repeat: no-repeat; height: 470px; padding: 10px 0px 0px 10px; margin: 0px 0px 20px 0px; }

div.miniContentDesign .boxTwo { clear: none; background-image: url(images/design-mini-on-laptop.jpg); background-position: left bottom; background-repeat: no-repeat; height: 460px; padding: 0px 0 0 10px; }

div.miniContentDesign .boxThree { clear: none; background-image: url(images/mini-with-tinbox-front.jpg); background-position: right center; background-repeat: no-repeat; height: 400px; padding: 10px 0px 0px 10px; }

div.miniContentDesign .boxOne .screenshotPopups { float: left; clear: both; overflow: hidden; padding: 20px 0 0; }

div.miniContentDesign .boxTwo .screenshotPopups { float: right; clear: both; overflow: hidden; padding: 20px 10px 0px 0px; }

div.miniContentIntro .largeBox .screens .smallScreenshot { width: 123px; height: 88px; background-image: url(images/sm-screenshot-bg.jpg); background-repeat: no-repeat; float: left; clear: none; margin: 0px 10px 0px 0px; }
 
div.miniContentIntro .boxOne { clear: none; background-image: url(images/design-large-mini-bg.jpg); background-position: right bottom; background-repeat: no-repeat; height: 450px; padding: 10px 0px 0px 10px; }

div.miniContentIntro .boxTwo { clear: none; background-image: url(images/design-mini-on-laptop.jpg); background-position: left bottom; background-repeat: no-repeat; height: 450px; padding: 10px 0px 0px 10px; }

div.miniContentIntro .boxThree { clear: none; background-image: url(images/mini-hand-scanner1.jpg); background-position: right bottom; background-repeat: no-repeat; height: 450px; padding: 10px 0px 0px 10px; }

div.miniMiddleContent { float: left; clear: none; overflow: hidden; width: 725px; padding: 10px 20px; margin: 10px 0px; background-color: #e3f7fa; }

div.miniMiddleContent .miniContentHeader { border-bottom: 1px solid #CCCCCC; padding: 0px 0px 5px 0px; margin: 0px 0px 5px 0px; }

div.miniMiddleContent .miniContentPoints { float: left; clear: none; overflow: hidden; width: 218px; padding: 0 22px 0 0; color: #666; }

div.miniMiddleContent .miniContentPoints p img { padding: 0px 8px 0px 0px; }

div.miniFooter { float: left; clear: none; overflow: hidden; color: #ccc; width: 765px; height: 93px; background-image: url(images/footerBg.gif); margin-top: 15px; }

div.miniFooter a { color: #ccc; text-decoration: none; }

div.miniFooter a:hover { text-decoration: underline; }

div.miniFooter .footerCopy { float: left; clear: none; overflow: hidden; padding: 15px 0 0 344px; }

div.miniFooter .footerMenu { float: left; clear: none; overflow: hidden; padding: 15px 0 0 165px; }

div#comicContentWrapper { width: 754px; }

div#comicContentWrapper h2 {
	font-size: 18px;
	color: #666;
	margin: 5px 0px 5px 0px;
	line-height: 20px;
}

div#comicTopMenu {
	float: left;
	clear: none;
	overflow: hidden;
	width: 760px;
	height: 40px;
	margin-bottom: 10px;
}

.subMenuItem { float: left; clear: none; overflow: hidden; }

div#comicTopMenu .overview {
	width: 144px;
	height: 40px;
	background-image: url(images/overview.gif);
}

div#comicTopMenu a:hover .overview {
	background-image: url(images/overview-rollover.gif);
}

div#comicTopMenu .features {
	width: 154px;
	height: 40px;
	background-image: url(images/features.gif);
}

div#comicTopMenu a:hover .features {
	background-image: url(images/features-rollover.gif);
}

div#comicTopMenu .specs {
	width: 139px;
	height: 40px;
	background-image: url(images/specs.gif);
}

div#comicTopMenu a:hover .specs {
	background-image: url(images/specs-rollover.gif);
}

div#comicTopMenu .extras {
	width: 138px;
	height: 40px;
	background-image: url(images/extras.gif);
}

div#comicTopMenu a:hover .extras {
	background-image: url(images/extras-rollover.gif);
}

div#comicTopMenu .buynow {
	width: 177px;
	height: 40px;
	background-image: url(images/buynow.gif);
}

div#comicTopMenu a:hover .buynow {
	background-image: url(images/buynow-rollover.gif);
}

div#comicHeaderLarge { float: left; clear: none; overflow: hidden; width: 754px; height: 320px;margin: 0px 0px 10px 0px; }

div#comicBody {  }

div#comicBody .leftColumn { float: left; clear: none; overflow: hidden; width: 320px; margin: 0px 12px 0px 0px; }

div#comicBody .leftColumn .organizeHeader { margin: 0px 0px 10px 0px; }

div#comicBody .leftColumn .homeStepOne { background-image: url(images/1-findcomics.png);
}

div#comicBody .leftColumn a:hover .homeStepOne { background-image: url(images/1-rollover.png);
}

div#comicBody .leftColumn .homeStepTwo { background-image: url(images/2-bagboard.png);
}

div#comicBody .leftColumn a:hover .homeStepTwo { background-image: url(images/2-rollover.png);
}

div#comicBody .leftColumn .homeStepThree { background-image: url(images/3-publishonline.png);
}

div#comicBody .leftColumn a:hover .homeStepThree { background-image: url(images/3-rollover.png);
}

div#comicBody .leftColumn .homeStepsBox {
	width: 320px;
	height: 158px;
	margin: 0px 0px 15px 0px;
}

div#comicBody .rightColumn { float: left; clear: none; overflow: hidden; width: 410px; padding: 5px; border: 1px solid #CCC; }

.overviewFeaturesBox { float: left; clear: none; width: 100%; border-bottom: 1px solid #CCC; padding: 0px 0px 10px 0px; margin: 0px 0px 10px 0px; }

.lastFeaturesBox { border: 0px none; margin: 0px; padding: 0px; }

.overviewFeaturesBox .thumbnail {
	float: left;
	clear: none;
	padding-top: 5px;
}

.overviewFeaturesBox .description {
	float: left;
	clear: none;
	width: 320px;
	padding-left: 12px;
}

.overviewFeaturesBox .description p {  }

div#screenshotFooter {
	float: left;
	clear: both;
	width: 742px;
	height: 190px;
	padding: 5px;
	border: 1px solid #CCC;
	margin: 10px 0px 0px 0px;
}

div#screenshotFooter h2 {
	padding: 0px 0px 0px 10px;
}

.screenshot {
	float: left;
	clear: none;
	overflow: hidden;
	padding-right: 30px;
	padding-left: 15px;
	padding-top: 15px;}

div#screenshotFooter .screenshot a img { border: 0px none; }

div.comicMediumHeader { float: left; clear: left; overflow: hidden; margin: 0px 0px 10px 0px; }

div.comicSquareLayout {  }

div.comicSquareLayout .widebox { float: left; clear: left; overflow: hidden; text-align: center; }

div.comicSquareLayout .leftColumn { float: left; clear: none; width: 100%; margin: 0px 10px 0px 0px; width: 100%; }

div.comicSquareLayout .leftColumn .featureWrapper { float: left; clear: none; margin: 0px 0px 10px 0px; }

div.comicSquareLayout .leftColumn .featureWrapper .featuresImage { float: left; clear: none; width: 277px; height: 236px; }

div.comicSquareLayout .leftColumn .featureWrapper .leftImage { margin: 0px 10px 0px 0px; }

div.comicSquareLayout .leftColumn .featureWrapper .rightImage { margin: 0px 0px 0px 10px; }

div.comicSquareLayout .leftColumn .featuresListBlock { float: left; clear: none; overflow: hidden; margin: 0px 0px 10px 0px; padding: 0px 0px 10px 0px; width: 50%; }

div.comicSquareLayout .leftColumn .featuresListBlock .featuresTextImageRight { float: right; clear: none; overflow: hidden; }

div.comicSquareLayout .leftColumn .featuresListBlock .featuresCopyLeft { float: left; clear: none; overflow: hidden; width: 355px; }

div.comicSquareLayout .leftColumn .featuresIcon { float: left; clear: none; overflow: hidden; width: 68px; padding: 10px 0px 0px 5px; }

div.comicSquareLayout .leftColumn .featuresText { float: left; clear: none; overflow: hidden; width: 82%; padding: 0px 0px 0px 20px; }

div.comicSquareLayout .leftColumn .featuresText p { margin-bottom: 10px; }

div.comicSquareLayout .leftColumn .featuresText img { padding: 0px 10px 0px 0px; }

div.comicSquareLayout .leftColumn .featuresText h2 { color: #208BB2; }

div.comicSquareLayout .leftColumn .featuresText .featuresTextImage { padding: 10px 0px 10px 0px; }

div.comicSquareLayout .leftColumn .featuresText .featuresTextSubMenu { padding: 0 0 15px 10px; }

div.comicSquareLayout .leftColumn .featuresText .featuresTextSubMenu .subMenuIcons { width: 58px; padding: 0 15px 20px 0; float: left; clear:none; }

div.comicSquareLayout .leftColumn .featuresText .featuresTextSubMenu .subMenuText { float: left; clear: none; overflow: hidden; padding: 0px 0px 15px 0px; width: 365px; }

div.comicSquareLayout .leftColumn .featuresText .featuresTextSubMenu .subMenuText .featuredReadMore { padding: 5px 0px 0px 0px; width: 100%  }

div.comicSquareLayout .leftColumn .featureWrapper .featuresCopy { float: left; clear: none; overflow:hidden; width: 460px; min-height: 228px; padding: 0px 8px 8px 8px; }

div.comicSquareLayout .leftColumn .featureWrapper .featuresCopy h2 { font-size: 18px; color: #208bb2; margin: 0px; padding: 0.83em 0; line-height: 22px; }

div.comicSquareLayout .leftColumn .featureWrapper .featuresCopy p { margin: 0px; padding: 1em 0; }

div.comicSquareLayout .leftColumn .leftInfoColumn { float: left; clear: none; width: 250px; margin: 0px 10px 0px 0px; padding: 0px 0px 0px 10px; }

div.comicSquareLayout .leftColumn .leftInfoColumn .specsList ul { padding: 0px 0px 0px 0px; }

div.comicSquareLayout .leftColumn .leftInfoColumn .specsList ul li { background-color:#DBEFF6;
color:#333333;
font-size:12px;
font-weight:bold;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0 0 10px;
padding:8px; }

div.comicSquareLayout .leftColumn .leftInfoColumn .specsList ul li ul { margin: 10px 0px 0px 0px; }

div.comicSquareLayout .leftColumn .leftInfoColumn .specsList ul li ul li { background-color:#FFFFFF; color:#888888; font-weight:normal; width:218px; font-size: 11px; }

div.comicSquareLayout .leftColumn .featuresBlock { border: 1px solid #CCC; margin: 0px 0px 10px 0px; }

div.comicSquareLayout .leftColumn .featuresBlock p { padding: 5px; margin: 5px; }

div.comicSquareLayout .middleColumn { float: left; clear: none; width: 480px; border: 1px solid #CCC; padding: 5px; }

div.comicSquareLayout .middleColumn h2 { margin: 0px 0px 5px 0px; font-size: 14px; color: #666; padding: 5px 5px; }

div.comicSquareLayout .middleColumn h3 { color: #666; padding: 0px 0px 0px 5px; }

div.comicSquareLayout .middleColumn ul { padding: 0px 0px 5px 5px; }

div.comicSquareLayout .middleColumn ul li { list-style: none; margin: 0px; padding: 0 0 5px 10px; background-image: url(images/blue-bullet.gif); background-repeat: no-repeat; background-position: left top; }

div.comicSquareLayout .middleColumn ul li.altRow { }

.specsHeaders { padding: 5px 10px 10px 5px; margin: 0px 0px 10px 0px; border-bottom: 1px dotted #CCCCCC; }

div.comicSquareLayout .middleColumn .specsHeaders h2 { width: 280px; font-size: 16px; padding: 0px; margin: 0px; background-color: #FFF; }

div.comicSquareLayout .rightColumn {
	float: left;
	clear: none;
	width: 180px;
}

.rightColumn {
	float: left;
	clear: none;
	overflow: hidden;
	width:180px;
}

.rightColumn .sidebar { border: 1px solid #ccc; background-color: #FFF; padding: 0px; }

.rightColumn .sidebar a { color: #333; text-decoration: none; }

.rightColumn .sidebar h2 { color: #666; background-color: #EEE; font-size: 12px; padding: 5px; margin: 0px 0px 10px 0px; }

.rightColumn .sidebar .sidebarProduct { padding: 0px 5px 5px 5px; border-bottom: 1px solid #CCC; text-align: center; margin: 0px 0px 10px 0px; }

.rightColumn .sidebar .sidebarProduct img { padding: 2px; border: 1px solid #CCC; }

.rightColumn .sidebar .sidebarProduct h3 { font-size: 12px; margin: 3px; }

.rightColumn .sidebar .sidebarProduct h3 a:hover { text-decoration: underline; }

.rightColumn .sidebar ul { list-style: none; margin: 0px 0px 10px 10px; padding: 0px; }

.rightColumn .sidebar ul li { list-style: none; margin: 0px; padding: 0px; }

.rightColumn .sidebar ul li a:hover { text-decoration: underline; }

.rightColumn .sidebar .sidebarProduct span { color: #666; }

div.buyNowFooter { float: left; clear: none; overflow: hidden; }

div.comicHeaderContent { float: left; clear: none; overflow: hidden; margin: 0px 0px 10px 0px; }

div.comicHeaderContent .headerIntro {
	padding: 6px 0 0 295px;
}

div.specsOS { float: left; clear: none; overflow: hidden; padding: 0px 0px 20px 0px; }

div.specsOS img { float: left; clear: none; overflow: hidden; width: 44px; padding: 0 12px 0 5px; }

div.specsOS .specs { float: left; clear: none; overflow: hidden; width: 165px; padding: 6px 0 0; }

.featuresIntro {
	padding: 33px 0 0 315px;
	color: #888;
	font-size: 18px;
	font-weight: bold;
	line-height: 20px;
	width: 440px;
}

.featuresHeaderContent { background-image: url(images/featureContent.jpg); background-repeat: no-repeat; width: 754px; height: 145px; }

.extrasHeaderContent { background-image: url(images/extrasInfoBoxBg.jpg); background-repeat: no-repeat; width: 754px; height: 145px; }

.featuredReadMore { float: left; clear: none; overflow: hidden; width: 83%; padding: 0px 0px 0px 15px; }

div.CollapsiblePanelTab { font-size: 10px; color: #f45600; font-weight: bold; }

div.CollapsiblePanelTab div.readmore {
	margin: 0px 0px 4px 0px;
	width: 68px;
	float: left;
	clear: none;
}

div.CollapsiblePanelContent { padding: 8px; border: 1px solid #CCC; margin: 8px 0px 0px 0px; float: left; clear: none; overflow: hidden; }

td.itemPreview img { padding: 2px; }

.header h3 { margin: 0px 0px 5px 0px; font-size: 14px; color: #666; }

.largeGray { font-size: 20px; color: #999; font-weight: bold; }

.blueHighlight { background-color:#dbeff6; }

.medBlueHighlight { background-color: #caebf6; }

.screenshotPopups { float: left; clear: none; overflow: hidden; padding: 0px 0px 15px 18px; }

.screenshotPopups .image { float: left; clear: none; overflow: hidden; padding: 0px 5px 0px 0px; }

p.indented { padding: 0px 0px 0px 10px; }

.miniFooterHome { float: left; clear: none; overflow: hidden; }