@charset "utf-8";
/* =====================================================================
   i_ordering.css   (was i_order-compare.css)
   Shared styles for the ordering pages:
       /order/index.html      (Deed-Chek / Subdivide comparison)
       /order/deed-chek.html  (Deed-Chek pricing)
       /order/subdivide.html  (Subdivide pricing)
       /order/deed-chek-download.html  (single user: Add to Cart)
       /order/subdivide-su-download.html  (single user: Add to Cart)
       /order/renewals-dcw.html  (renewals: single user or network?)
       /order/renewals-sub.html  (same, for Subdivide)
       /order/renewals-dcw-single.html  (renewal: Add to Cart)
       /order/renewals-sub-single.html  (same, for Subdivide)
       /order/renewals-dcw-network.html  (network renewal: pick a size)
   Any other order page can use it too: link this file in the page's
   head, AFTER i_main.css, and wrap the content in <div class="oc-page">.
   ---------------------------------------------------------------------
   HOW THIS FILE STAYS OUT OF TROUBLE
   1. Every class name starts with "oc-" (short for Order Compare).
      Nothing else on the site uses that prefix, so these rules can't
      change any other page, and no other stylesheet targets them.
   2. There are no site-wide tag rules here (no bare "h2 { }" or
      "ul { }"). Every rule starts with an oc- class, so it only
      affects things inside an oc- block.
   3. The page links this file AFTER i_main.css. When two rules are
      equally strong, the one loaded last wins.

   READING A RULE
       selector { property: value; }
   The selector says WHAT to style; the lines inside the braces say
   HOW. ".oc-card" means "any element with class="oc-card"".
   A space between selectors means "inside": ".oc-card h2" = an h2
   that sits somewhere inside an oc-card.

   COLORS USED (so you can change them in one pass with Find/Replace)
       #003399  deep blue (same as the site's header bar)
       #0099ff  bright blue (same as the site's nav bar)
       #c3d1e8  soft blue-gray for borders
       #f7f9fd  very light card background
       #e4ecf8  slightly darker header background
       #1a7f37  green check marks
       #c62828  sale red
   ===================================================================== */


/* ---------------------------------------------------------------------
   0. BOX SIZING
   By default, CSS adds padding and borders ON TOP of a box's width,
   which makes widths hard to predict. "border-box" makes the width
   include them. This only applies inside an oc-page block.
   --------------------------------------------------------------------- */
.oc-page,
.oc-page * {
	box-sizing: border-box;
}


/* ---------------------------------------------------------------------
   1. PAGE BASICS (wrapper, title, intro text, breadcrumb)
   i_main.css sets the margins of headings and paragraphs to 0, so
   spacing is added back here, only where we want it. This replaces
   the stacks of <p>&nbsp;</p> used for spacing before.
   --------------------------------------------------------------------- */
.oc-page {
	margin-bottom: 40px;          /* space between the content and the footer */
}

.oc-page h1 {
	margin-bottom: 8px;           /* a little room under the page title */
}

.oc-intro {
	margin-bottom: 22px;          /* room between the intro text and what follows */
}

/* "Ordering > Deed-Chek" trail above the title */
.oc-breadcrumb {
	font-size: 0.9em;
	color: #777777;
	margin-bottom: 4px;
}


/* ---------------------------------------------------------------------
   2. THE SIDE-BY-SIDE CONTAINER (comparison page)
   "display: flex" lines up the element's children in a row. This is
   the same trick you used for the Ordering/Renewals links, applied to
   the two product cards.
   --------------------------------------------------------------------- */
.oc-compare {
	display: flex;                /* put the two cards side by side */
	gap: 16px;                    /* space between the cards */
	align-items: stretch;         /* make both cards the same height
	                                 (this is the default; written out
	                                 so you can see where it comes from) */
}


/* ---------------------------------------------------------------------
   3. THE CARD (a bordered box with a shaded header)
   Used for each product on the comparison page, and for the pricing
   box on the product pages.
   --------------------------------------------------------------------- */
.oc-card {
	flex: 1 1 0;                  /* only matters inside .oc-compare:
	                                 grow / shrink / starting width.
	                                 "1 1 0" = both cards start at zero
	                                 and grow equally, so they end up
	                                 exactly the same width. Outside a
	                                 flex container this line is ignored
	                                 and the card is simply full width. */
	background-color: #f7f9fd;    /* very light blue-gray */
	border: 1px solid #c3d1e8;    /* thin border: width, style, color */
	border-radius: 8px;           /* slightly rounded corners. Bigger
	                                 number = rounder. */
	overflow: hidden;             /* trims the header's darker background
	                                 so it follows the rounded corners
	                                 instead of poking out square */
}


/* ---------------------------------------------------------------------
   4. CARD HEADER (name, description, price, buttons)
   --------------------------------------------------------------------- */
.oc-card-head {
	background-color: #e4ecf8;    /* a shade darker than the card body */
	border-bottom: 1px solid #c3d1e8;
	padding: 14px 16px 16px 16px; /* inside space: top right bottom left */
}

.oc-title {
	color: #003399;               /* deep blue */
	font-size: 1.6em;             /* "em" = relative to the surrounding
	                                 text size; 1.6em = 1.6 times as big */
	font-weight: bold;
	margin-bottom: 6px;
}

/* Product description on the comparison page */
.oc-desc {
	line-height: 1.35em;          /* space between lines of text */
	min-height: 4.1em;            /* reserves room for 3 lines, so the
	                                 price and buttons line up across both
	                                 cards even if one description is a
	                                 little shorter. (Each line is 1.35em,
	                                 so 3 lines = 4.05em.) If a description
	                                 grows to 4 lines, raise this to 5.4em. */
	margin-bottom: 10px;
}

/* Ordinary paragraph inside a card header (no reserved height) */
.oc-head-text {
	line-height: 1.4em;
	margin-bottom: 8px;
}

.oc-price {
	color: #003399;
	margin-bottom: 12px;
}

.oc-price strong {
	font-size: 1.5em;             /* makes just the dollar amount bigger */
}


/* ---------------------------------------------------------------------
   5. BUTTONS (Order Now / Renewals / Upgrade ...)
   These are ordinary links styled to look like buttons.

   Why ".oc-page ul.oc-actions" and not just ".oc-actions"?
   i_main.css has a rule ".main-body ul" that adds bullets and an indent
   to every list in the content area. When two rules disagree, the more
   SPECIFIC one wins, and specificity is counted by the parts of the
   selector:
       ".main-body ul"           = 1 class + 1 tag
       ".oc-page ul.oc-actions"  = 2 classes + 1 tag   <- stronger
   So these list rules use two classes to be sure they win.
   --------------------------------------------------------------------- */
.oc-page ul.oc-actions {
	list-style: none;             /* no bullets */
	margin: 0;
	padding: 0;
	display: flex;                /* buttons side by side */
	gap: 10px;                    /* space between the buttons */
}

.oc-page ul.oc-actions li {
	margin: 0;                    /* cancels i_main.css's list-item indent */
}

/* The look shared by all buttons: white with a blue outline.
   Links have separate "states": :link (not yet visited), :visited,
   and :hover (mouse over it). Listing :link and :visited here keeps
   visited buttons from turning the browser's default purple. */
a.oc-btn,
a.oc-btn:link,
a.oc-btn:visited {
	display: inline-block;        /* lets a link have padding like a box */
	padding: 7px 16px;            /* 7px top/bottom, 16px left/right */
	border: 1px solid #003399;
	border-radius: 5px;
	background-color: #ffffff;
	color: #003399;
	font-weight: bold;
	text-decoration: none;        /* no underline */
	white-space: nowrap;          /* never split a button's text onto
	                                 two lines */
}

a.oc-btn:hover {
	background-color: #d4e1f5;    /* light blue when the mouse is over it */
}

/* The main button (Order Now / Order): solid blue with white text.
   It comes after the rules above, so where they disagree, this wins. */
a.oc-btn-primary,
a.oc-btn-primary:link,
a.oc-btn-primary:visited {
	background-color: #003399;
	color: #ffffff;
}

a.oc-btn-primary:hover {
	background-color: #1f4fb0;    /* a little lighter on hover */
	border-color: #1f4fb0;
}

/* A smaller button, for use inside tables and toolbars.
   Add it alongside the others: class="oc-btn oc-btn-small" */
a.oc-btn-small,
a.oc-btn-small:link,
a.oc-btn-small:visited {
	padding: 4px 12px;
	font-size: 0.95em;
}


/* ---------------------------------------------------------------------
   6. CARD BODY (feature lists on the comparison page)
   --------------------------------------------------------------------- */
.oc-card-body {
	padding: 14px 16px 18px 16px;
}

.oc-list-title {
	font-size: 1em;
	font-weight: bold;
	color: #333333;
	margin-bottom: 6px;
}

/* The feature list: no bullets, no indent (see section 5 for why it
   needs two classes). Each item gets a check mark added in front. */
.oc-page ul.oc-features {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oc-page ul.oc-features li {
	position: relative;           /* lets the check mark be placed
	                                 relative to this list item */
	margin: 0;
	padding: 5px 0 5px 22px;      /* the 22px on the left makes room
	                                 for the check mark */
	line-height: 1.3em;
	border-bottom: 1px dotted #d3dcea;  /* faint line between items makes
	                                       long lists easier to scan */
}

.oc-page ul.oc-features li:last-child {
	border-bottom: none;          /* no line under the last item */
}

/* "::before" inserts content in front of each item without changing
   the HTML. "\2713" is the check mark character (Unicode 2713),
   written as a code so this file works regardless of the page's
   character set. */
.oc-page ul.oc-features li::before {
	content: "\2713";
	position: absolute;           /* placed exactly, relative to the li */
	left: 3px;
	top: 5px;
	color: #1a7f37;               /* green */
	font-weight: bold;
}


/* ---------------------------------------------------------------------
   7. THE "PLUS!" BOX AND THE CALLOUT BOX
   Both are white boxes with a bright blue stripe down the left edge.
   .oc-plus    = Subdivide's extra features (comparison page)
   .oc-callout = a side note, e.g. "Need more? See Subdivide"
   A comma between selectors means "apply to each of these".
   --------------------------------------------------------------------- */
.oc-plus,
.oc-callout {
	background-color: #ffffff;
	border: 1px solid #c3d1e8;
	border-left: 4px solid #0099ff;   /* the colored stripe */
	border-radius: 6px;
}

.oc-plus {
	margin-top: 14px;
	padding: 10px 12px 6px 12px;
}

.oc-callout {
	margin-top: 18px;
	padding: 12px 14px;
	line-height: 1.4em;
}

.oc-plus-title {
	font-size: 1.1em;
	font-weight: bold;
	color: #0077cc;
	margin-bottom: 4px;
}

/* Inside the Plus box, use a blue "+" instead of the green check.
   This selector is longer (more specific) than the one in section 6,
   so it wins for these items only. */
.oc-page .oc-plus ul.oc-features li::before {
	content: "+";
	color: #0077cc;
	font-size: 1.1em;
}


/* ---------------------------------------------------------------------
   8. TOOLBAR (a slim bar, e.g. "Existing customers: Renew  Upgrade")
   --------------------------------------------------------------------- */
.oc-toolbar {
	display: flex;
	align-items: center;          /* lines up the label and buttons
	                                 vertically */
	gap: 12px;
	margin: 6px 0 18px 0;
	padding: 8px 12px;
	background-color: #f7f9fd;
	border: 1px solid #c3d1e8;
	border-radius: 8px;
}

.oc-toolbar-label {
	font-weight: bold;
	color: #333333;
}


/* ---------------------------------------------------------------------
   9. PRICE BLOCKS (product pages)
   Each group of prices sits in its own light-blue box (.oc-block).
   Inside, a table lines up the columns. Tables are still the right
   tool for TABLE-shaped information like a price list; the problems
   with tables are only when they're used for page LAYOUT.

   To make the price and button columns line up from one box to the
   next, those two columns have FIXED widths (section below), and the
   first column takes whatever space is left.
   --------------------------------------------------------------------- */
.oc-block {
	background-color: #eef3fb;    /* light blue */
	border: 1px solid #c3d1e8;
	border-radius: 8px;
	padding: 6px 16px;            /* top/bottom 6px, left/right 16px */
	margin-bottom: 16px;          /* the gap between one box and the next */
}

/* Heading area at the top of a box: a title, plus an optional small
   note under it. The line under the heading is on this wrapper, so it
   sits below the note when there is one. */
.oc-block-head {
	padding: 8px 0 8px 0;
	border-bottom: 1px solid #c3d1e8;
}

/* Title, e.g. "Network Versions" */
.oc-block-title {
	color: #003399;
	font-size: 1.15em;
	font-weight: bold;
}

/* Small grey note under the title, e.g. the Mac note */
.oc-block-sub {
	font-size: 0.9em;
	color: #777777;
	margin-top: 3px;
	line-height: 1.4em;
}

.oc-prices {
	width: 100%;
	border-collapse: collapse;    /* merges the borders of neighboring
	                                 cells into single lines */
}

.oc-prices td {
	padding: 10px 0;
	border-bottom: 1px solid #d5deec;   /* thin line between rows */
	vertical-align: middle;
}

/* No line under the last row of a box.
   "tr:last-child td" = the cells in the last row. */
.oc-prices tr:last-child td {
	border-bottom: none;
}

/* Price column: fixed width, right-aligned, bold blue */
.oc-prices .oc-num {
	width: 90px;
	text-align: right;
	font-weight: bold;
	color: #003399;
	white-space: nowrap;          /* never wrap a price */
}

/* Button column: fixed width, right-aligned */
.oc-prices .oc-buy {
	width: 110px;
	text-align: right;
	white-space: nowrap;
}

/* The single-user row: a slightly larger price, since it's the main
   product. Add class="oc-featured" to a table to use it. */
.oc-prices.oc-featured .oc-num {
	font-size: 1.3em;
}
.oc-prices.oc-featured td {
	font-size: 1.05em;
}
/* NOTE: ".oc-prices.oc-featured" (no space) means ONE element that has
   BOTH classes. With a space it would mean "an oc-featured inside an
   oc-prices", which is a different thing. */



/* ---------------------------------------------------------------------
   10. SALES (for holiday specials; nothing uses these until you do)
   .oc-sale        = a banner across the top of the page
   .oc-sale-price  = a red sale price, e.g. next to a regular price
   To use: uncomment the banner in the page, and/or wrap a sale price
   like this:  <span class="oc-sale-price">Sale $199</span>
   --------------------------------------------------------------------- */
.oc-sale {
	margin: 0 0 18px 0;
	padding: 10px 14px;
	background-color: #fff4e5;    /* soft orange */
	border: 1px solid #f0b46a;
	border-radius: 8px;
	color: #a14a00;
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
}

.oc-sale-price {
	color: #c62828;               /* sale red */
	font-weight: bold;
	white-space: nowrap;
}


/* ---------------------------------------------------------------------
   11. SUBSCRIPTION SUMMARY AND POP-UP ("More about subscriptions")
   The pop-up uses the <dialog> element, which browsers show as a box
   floating over the page with the page dimmed behind it. The page
   opens it with one line of JavaScript (showModal) and the Close
   button closes it with none (a <form method="dialog"> does that).
   --------------------------------------------------------------------- */
.oc-summary {
	line-height: 1.45em;
	margin-bottom: 16px;
}

/* The pop-up box itself */
.oc-dialog {
	max-width: 480px;             /* never wider than this */
	padding: 0;                   /* the inside spacing is on .oc-dialog-body
	                                 instead, so clicking the dimmed
	                                 background (not the box) closes it */
	border: 1px solid #c3d1e8;
	border-radius: 8px;
	color: #555555;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
}

/* "::backdrop" is the dimmed layer behind the pop-up */
.oc-dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.35);   /* black at 35% strength */
}

.oc-dialog-body {
	padding: 18px 20px 16px 20px;
}

.oc-dialog-title {
	color: #003399;
	font-size: 1.3em;
	font-weight: bold;
	margin: 0 0 10px 0;
}

.oc-dialog-body p {
	line-height: 1.45em;
	margin: 0 0 10px 0;
}

/* Room between the check-mark list and the paragraph after it */
.oc-dialog-body ul.oc-features {
	margin-bottom: 10px;
}

/* The Close button. Section 5 styles LINKS that look like buttons;
   this is a real <button>, so it needs its own rule. */
.oc-dialog button.oc-btn {
	display: inline-block;
	margin-top: 6px;
	padding: 7px 18px;
	border: 1px solid #003399;
	border-radius: 5px;
	background-color: #003399;
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	cursor: pointer;              /* shows the hand pointer, like a link */
}

.oc-dialog button.oc-btn:hover {
	background-color: #1f4fb0;
	border-color: #1f4fb0;
}

/* ---------------------------------------------------------------------
   12. FOOTNOTE (small grey note at the bottom, e.g. the "*" note about
       floating network licenses)
   --------------------------------------------------------------------- */
.oc-footnote {
	font-size: 0.9em;
	color: #777777;
	line-height: 1.4em;
	margin-top: 14px;
}


/* ---------------------------------------------------------------------
   13. ADD-TO-CART PAGES (warning box, quantity box, Add to Cart button)
   --------------------------------------------------------------------- */

/* A warning box: same shape as the callout in section 7, but with a
   red stripe and a faint pink background. Not used on any page right
   now (the Mac note moved inside the price block, below); kept for
   when a page needs a louder warning. Usage:
     <div class="oc-warning"><p class="oc-warning-title">...</p> ... </div> */
.oc-warning {
	background-color: #fff6f5;
	border: 1px solid #f1c9c4;
	border-left: 4px solid #c62828;   /* the red stripe */
	border-radius: 6px;
	padding: 12px 14px;
	margin-bottom: 16px;
	line-height: 1.4em;
}

.oc-warning-title {
	color: #c62828;
	font-weight: bold;
}

/* The bulleted list inside the warning. Two classes plus a tag, so it
   beats i_main.css's ".main-body ul" and ".main-body li" (section 5
   explains why). */
.oc-page .oc-warning ul {
	list-style: disc;
	margin: 6px 0 8px 0;
	padding-left: 20px;           /* room for the bullets */
}

.oc-page .oc-warning li {
	margin: 3px 0;
}

/* The Add to Cart form: a little extra space above the order box.
   This uses PADDING, not margin, on purpose. When two margins touch
   (the paragraph's bottom margin and a margin here), browsers use only
   the larger one instead of adding them; padding always adds. */
.oc-cart-form {
	padding-top: 24px;
}

/* More room above and below the order row on Add to Cart pages.
   (The price lists on the other pages keep the 10px from section 9.) */
/* Only top and bottom are set here. The shorthand "padding: 18px 0"
   would also reset the right padding that spaces the quantity box
   from the button. */
.oc-cart-form .oc-prices td {
	padding-top: 38px;
	padding-bottom: 38px;
}

/* Mac requirements INSIDE the order box, under the price row
   (deed-chek-download.html). The faint line on top matches the lines
   between rows in the price tables; delete the border-top line if you
   want whitespace only. */
.oc-mac {
	margin-top: 6px;
	padding: 14px 0 10px 0;       /* top, right, bottom, left */
	border-top: 1px solid #d5deec;
}
.oc-mac-title {
	color: #c62828;               /* same red as sale prices. On this light
	                                 blue it is still easy to read (contrast
	                                 5:1; pure #FF0000 would be 3.6:1 and
	                                 look like it vibrates). */
	font-weight: bold;
}

.oc-page .oc-mac ul {
	list-style: disc;
	margin: 4px 0 2px 0;
	padding-left: 20px;           /* room for the bullets */
	font-size: 0.9em;             /* a little smaller than the price row */
	line-height: 1.4em;
}

.oc-page .oc-mac li {
	margin: 2px 0;
}

/* Quantity column in the price table: label and box side by side */
.oc-prices .oc-qty {
	width: 140px;
	text-align: right;
	white-space: nowrap;
	padding-right: 14px;          /* a little room before the button */
}

/* The quantity box itself */
.oc-page input.oc-qty-box {
	width: 3.2em;
	margin-left: 6px;
	padding: 4px 6px;
	border: 1px solid #9fb3d6;
	border-radius: 4px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	text-align: center;
}

/* The Add to Cart button. It's a real form button (<input type="submit">),
   not a link, so it needs its own rule, like the Close button in
   section 11. It gets the solid blue "primary" look. */
.oc-page input.oc-btn {
	padding: 6px 14px;
	border: 1px solid #003399;
	border-radius: 5px;
	background-color: #003399;
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	cursor: pointer;              /* shows the hand pointer, like a link */
}

.oc-page input.oc-btn:hover {
	background-color: #1f4fb0;
	border-color: #1f4fb0;
}

/* "< Back to ..." link under the price box */
.oc-back {
	margin-top: 18px;
}


/* ---------------------------------------------------------------------
   14. RENEWALS PAGE (choose Single User or Network Version)
   This page is meant to be airy, so the spacing here is generous on
   purpose. To tighten or loosen it, change the margin-top values.
   --------------------------------------------------------------------- */

/* "What Deed-Chek version do you have?  How to tell" */
.oc-question {
	margin-top: 50px;             /* space under the page title */
}

/* The two rows of button + explanation */
.oc-choices {
	margin: 24px 0 0 70px;        /* top, right, bottom, left.
	                                 The 70px indents the buttons, like the
	                                 empty first column did on the old page. */
	border-collapse: collapse;
}

.oc-choices td {
	padding: 14px 0;              /* space above and below each row */
	vertical-align: middle;
	line-height: 1.4em;
}

/* The button column: fixed width, with a gap before the text */
.oc-choices td.oc-choice-btn {
	width: 155px;                 /* the button images are 155px wide */
	padding-right: 24px;
}

.oc-choices img {
	display: block;               /* removes the small gap browsers leave
	                                 under images that sit on a text line */
}

/* "If you do not already own Deed-Chek..." */
.oc-after-choices {
	margin-top: 60px;
}

/* Numbered steps inside a pop-up (e.g. "How to tell").
   i_main.css removes all list indents, so the numbers need room put
   back, or they hang outside the box. */
.oc-dialog-body ol {
	margin: 0 0 10px 0;
	padding-left: 22px;
}

.oc-dialog-body ol li {
	margin: 4px 0;                /* beats i_main.css's ".main-body li" indent */
	line-height: 1.4em;
}


/* ---------------------------------------------------------------------
   15. RENEWAL ORDER PAGES (renewals-dcw-single.html and similar)
   These also use the Add to Cart styles in section 13.
   --------------------------------------------------------------------- */

/* The small grey "each" after a price */
.oc-each {
	font-size: 0.75em;
	font-weight: normal;
	color: #777777;
	margin-left: 3px;
}

/* A gap before the quantity column, so a longer price like "$225 each"
   doesn't run into the quantity label. */
.oc-prices .oc-qty {
	padding-left: 24px;
}

/* Notes under the order box, indented like the old page */
.oc-note {
	margin: 34px 90px 0 70px;     /* top, right, bottom, left */
	line-height: 1.45em;
}

.oc-note p {
	margin-bottom: 18px;          /* space between the note paragraphs */
}


/* ---------------------------------------------------------------------
   16. NETWORK RENEWAL PAGE (renewals-dcw-network.html)
   Kept close to the old page: red instructions, a list of network
   sizes with an arrow picture beside it, no blue order box.
   --------------------------------------------------------------------- */

/* Red text, e.g. "Citrix" and "VMware" */
.oc-red {
	color: #c62828;
}

/* "If you don't know your network configuration...." and its steps */
.oc-page .oc-instruct {
	color: #c62828;
	line-height: 1.4em;
}

.oc-page ol.oc-instruct {
	margin: 4px 0 0 0;
	padding-left: 18px;           /* room for the numbers */
}

.oc-page ol.oc-instruct li {
	margin: 2px 0;                /* beats i_main.css's ".main-body li" indent */
}

/* The size list (left) and the arrow picture (right) */
.oc-net-pick {
	margin: 28px 0 0 40px;        /* top, right, bottom, left */
	border-collapse: collapse;
}

.oc-net-pick td {
	padding: 0;
	vertical-align: middle;       /* centers the arrow beside the list */
}

.oc-net-pick td.oc-net-arrow {
	padding-left: 60px;
}

.oc-net-title {
	line-height: 1.4em;
}

/* The radio buttons. Each one is wrapped in a <label>, so clicking the
   words selects the button too. */
.oc-net-options {
	margin: 14px 0 16px 0;
}

.oc-net-options label {
	display: block;               /* one per line (replaces the <br>s) */
	padding: 3px 0;
	cursor: pointer;
}

.oc-net-options input {
	margin: 0 6px 0 4px;
	vertical-align: -1px;         /* nudges the button in line with the text */
}

/* "If you are using Citrix or VMware..." */
.oc-net-contact {
	margin-top: 40px;
	line-height: 1.4em;
}

.oc-net-back {
	margin-top: 36px;
}