/* 
    Document   : hub.css
    Created on : Jan 11, 2011, 3:58:46 PM
    Author     : dave
    Description: additional styles for the extras column
*/

body
{
    font-family: Arial, sans-serif;
}


/** New headings from the site.css from Matt&Mario */
h1{font-size: xx-large; font-weight:normal;}
h2{background: transparent; font-size: x-large; border: 0;  font-weight:normal;}
h3{background: transparent; font-size: large; font-weight:normal; }

.gallerySection
{
}

.clear
{
    clear:both;
}

div.mainCard, div.extraCard
{
    clear:left;
}

.extraCard
{
/*
    -moz-border-radius: 7px;
    border-radius: 7px;
    behavior: url(/hub/css/PIE.htc);
 */
    padding: 12px;
    background-color: #171717;
    color: #dedede;
/*    color: #fdfdfd;*/
    margin-bottom: 1em;
}

.hub .extraCard
{
    padding: 0;
}

.extraCard a, #contentRight.tightFit .extraCard a
{
    color: #FFBD50;
    text-decoration: none;
}

.extraCard a:hover, #contentRight.tightFit .extraCard a:hover
{
    color: #FF8512;
    text-decoration: none;
}

.extraCard h2 a
{
    font-weight: inherit;
}

.extraCard h2 a:hover
{
    font-weight: inherit;
}

a:hover img
{
    opacity:0.5;
}

/*.extraCard h1 {
        color:#FFF;
}
.extraCard h2 {
        color:#FFF;
}
.extraCard p {
	color:#AAA;
}*/

.extraCardTight
{
    margin: 0 0 2em 0;
    padding: 0 0 0 0;
}

.extraCard .optional
{
    visibility: hidden;  margin: 0px; padding: 0px; height: 0px;
}

.mainCard .optional
{
    margin: 1em;
}

.mainCard
{
    font-family: Arial, sans-serif;
    line-height: 1.2;
    margin-bottom: 1em;
    vertical-align: top;
}

.mainCard p
{
/*    font-size: 10pt;*/
    line-height: 1.2;
}

.mainCard ul, .extraCard ul
{
    list-style-type: square;
    margin-top: 0;
    -webkit-padding-start: 0;
    margin-left: 0;
    padding-left: 2em;
    padding-top: 0.5em;
}

.mainCard li, .extraCard li
{
    padding-left: 0em;
    margin-bottom: 0.5em;
    margin-left: 0em;
}

.hub ul, .hub li
{
    margin: 0em;
    padding: 0em;
    list-style-type: none;
}

.hub .para-text ol li
{
    list-style-type:decimal;
    margin-left:40px;
}
.hub .para-text ol li ol li
{
    list-style-type:lower-alpha;
}

.hub .para-text ul li
{
    list-style-type:disc;
    margin-left:11px;
}

extraCard .inner
{
    padding: 5px;
    color:#FFF;
}

.marginBottom5 {
	margin-bottom: 5px;
}


/*.hub .mainCard p
{
    font-size: 14px;
}*/

.hub .extraCard p
{
    margin: 0.5em 0.3em;
}
.hub .extraCard h1, .hub .extraCard h2, .hub .extraCard h3
{
    margin: 0.5em 0.3em;
}

/*.mainCard h1, .mainCard h2, .mainCard h3, .mainCard p*/
h1, h2, h3, p
{
    margin: 0.5em 0.0em;
}

h1.head
{
    margin-top: 0;
}

/**
 * Custom paragraph style
 */

.cliphouseVideo
{
    width: 100%;
}

.cliphouseVideo .screenshotLarge
{
    float: left;
    margin-right: 1em;
}

.cliphouseVideo .sidebar
{
    margin-left: 390px;
}

.cliphouseVideo .info
{
    font-weight: bold;
}

.cliphouseVideo .title
{
    font-weight: bold;
}

.cliphouseVideo .title a
{
    color: #fff;
}

.cliphouseVideo .title a:hover
{
    color: #E5A700;
}

.cliphouseVideo .description
{
    margin: 1em 0;
}

.cliphouseVideo .label
{
    font-weight: bold;
    color:#888;
}

/* Screenshots (from old msdb) */
.screenshot {
	margin: 2px;
	padding: 1px;
	border: 1px solid #CCC;
	display: block;
	background-color: #CCC;
}
.screenshot img {
	height: 67px;
	width: 120px;
}

.screenshot a {
	text-decoration: none;
}

.screenshotSmall {
	margin: 2px;
	padding: 1px 1px 0 1px;
	border: 1px solid #CCC;
	background-color: #CCC;
	display: block;
}
.screenshotSmall img{
	height: 50px;
	width: 90px;
}

.screenshotLarge {
	margin: 2px;
	padding: 1px 1px 0 1px;
	border: 1px solid #CCC;
	background-color: #CCC;
	display: block;
}
.screenshotLarge img{
	height: 216px;
	width: 364px;
}

.videoBox {
	width: 320px;
        height: 314px;
	margin: 6px;
	padding: 4px 4px 4px 4px;
	border: 0 solid #000;
	background-color: #CCC;
        color: #000;
        display:inline;
        float: left;
}

.videoBox div
{
	width: 320px;
        display: block;
}

.videoBox video, .videoBox img {
        width: 320px;
        height: 180px;
	margin: 0;
	padding: 0 0 0 0;
	border: 0 solid #000;
}

.videoBox .description { 
    height: 94px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.videoBox .info{ width: 100%; }

.videoBox .duration { float: right; text-align: right; }

.videoBox .title
{
    font-weight: bold;
}

.videoBox a{ font-weight: bold; color: #333; }

.cliphouseVideo .caption-bottom 
{  
    background: #000; color: #fff; padding: 10px;  margin: 0;  position: absolute; display:block; z-index: 10;  opacity: .8;  filter: alpha(opacity=80); font-size:100%; font-family:sans-serif; font-weight: bold; 
    left: 0; bottom: 0px; height: 30px; width: 344px;
    overflow: hidden;
}

body .ipad { background-color: #eee; }

/**
 * Article Styles
 */

.BigList ol
{
    font-family: sans-serif;
    font-size: 18pt;
    list-style-type: decimal;
    margin-top: 0;
    -webkit-padding-start: 0;
    margin-left: 0;
    padding-left: 2em;
    padding-top: 0.5em;
}

.BigList ol p
{
  font-size: 12pt;
  margin-bottom: 8pt;
  /* Probably need to reset font-family here */
}


/* ==========
forms.css
JI Oct 2010

New styles and layouts for submission forms:
- Registration/login
========== */

/* ===== Registration and login ===== */
.form_wrapper
{

  background-color: #2f2f2f;
/*  padding: 3px;*/
}

#new_user_wrapper
{
}

#old_user_wrapper
{
  /*width: 440px;
  float: right; */
}

/*.form_wrapper a
{
  color: #f80;
  text-decoration: none;
}*/

.form_wrapper p
{
  padding: 1px;
  margin: 0;
  margin-top: 1px;
}

.form_wrapper p.checkbox, .form_wrapper p.input
{
  background-color:#171717;
}

.form_wrapper legend,
#CDBoxDetails legend
{
  font-size: large; font-weight:normal;
/*  margin-left: 10px;*/
}

.form_wrapper p label
{
  float: left;
  font-size: 16px;
  text-align: left;
  padding-left: 10px;
/*  width: 135px;*/
  padding-top: 5px;
}

.form_wrapper form
{
  padding: 0.5em 0em 1em;
  margin: 5px 40px;
/*  background-color: #171717;
  border-radius: 7px;
  -moz-border-radius: 7px;*/
}

.form_wrapper fieldset
{
/*  border: solid 2px #989898;
  margin: 2px;*/
  padding-top: 15px;
}

#CDBoxDetails fieldset
{
    border: solid 2px #222;
    margin: 2px;
    padding: 10px;
    margin-bottom: 10px;
}

.form_wrapper p.facebook_link
{
  margin-bottom: 5px;
  font-size: 12px;
  text-align: center;
}

.form_wrapper p.facebook_link a
{
  background-image: url(../images/icon_facebook.png);
  background-repeat: no-repeat;
  height: 20px;
  padding-left: 15px;
  display: block;
  padding-top: 2px;
  margin-left: 10px;
}

.form_wrapper p.submit
{
  float: right;
}

/*.form_wrapper fieldset p.submit
{
  margin-bottom: 2px;
  margin-right: 3px;
  border: none;
}*/

/*.form_wrapper #new_user_wrapper p.submit
{  margin-right: 5px;  }*/

/* This will fix alignment for Firefox users on Macs, but will break it for everyone else.
.form_wrapper #old_user_wrapper p.submit
{  margin-right: -25px;  } */

.form_wrapper p.submit input
{  color: #FFBD50;}
.form_wrapper p.submit input:hover
{  color: #FF8512;}

.form_wrapper p.submit input
{
  border: none;
  background: transparent;
/*  background-repeat: no-repeat;
  width: 121px;
  height: 33px;
  line-height: 0;*/
}

/*.form_wrapper p.submit input:hover
{
  background-position: 0px -33px;
}*/

/*.form_wrapper p.submit input:active
{
  background-position: 0px -66px;
}*/

.tooltip
{
  background-color: #111;
  border: 3px solid #fff;
  padding: 10px 15px;
  width: 150px;
  display: none;
  color: #fff;
  text-align: left;
  font-size: 12px;
  font-family: sans-serif;
}

ul.form_errors, ul.form_result
{
    background-color: #fdfdfd;
    margin: 3px 0px;
    padding:10px;
}

ul.form_errors
{
    color: red;
}
ul.form_result
{
    color: #171717;
}

ul.form_errors li, ul.form_result li
{
    margin: 0px 10px;
}

#CDBoxDetails #submitDeliveryDetails
{
    border: none;
    background: url('../images/buttons/submit_delivery_details.png') no-repeat;
    background-position: 0px 0px;
    padding: 2px 8px;
    width: 160px;
    height: 25px;
}

#addressDetailButtonWhite
{
    border: none;
    background: url('../images/buttons/add_delivery_details.png') no-repeat;
    background-position: 0px 0px;
    width: 160px;
    height: 25px;
    display: block;
}
#addressDetailButtonWhite span
{  visibility: hidden;  }

#CDBoxDetails #submitDeliveryDetails:hover,
#addressDetailButtonWhite:hover
{
    background-position: 0px -25px;
}

#CDBoxDetails #submitDeliveryDetails:active,
#addressDetailButtonWhite:active
{
    background-position: 0px -50px;
}

.form_wrapper fieldset p.input
{
/*  background-image: url(../images/input_back.png);
  background-repeat: no-repeat;
  background-position: 160px 0px; */
  height: 30px;
}

.form_wrapper fieldset p.required
{   /* background-image: url(../images/input_required_back.png);*/   }

.form_wrapper fieldset p.input input
{
  /* background-color: transparent; */
  border: none;
  margin: 1px;
  height: 23px;
  float: right;
  margin-right: 9px;
  margin-top: 2px;
  width: 315px;
  font-size: 18px;
  color: #333;
}

.form_wrapper p.checkbox
{
  height: 10px;
  margin-left: 15px;
}

.form_wrapper fieldset p.checkbox
{
  margin-left: 0px;
}

.form_wrapper p.checkbox label
{
/*  font-size: 11px;*/
  display: block;
  width: 550px;
  padding-left: 0px;
}

.form_wrapper p.checkbox input
{
  float: right;
  margin-right: 210px;
  margin-top: -10px;
  
}

.form_wrapper fieldset p.checkbox input
{
  margin-right: 0px;
}

.form_wrapper fieldset p.checkbox
{
  padding: 10px;
}
.form_wrapper fieldset p.checkbox input
{
  margin-top: -2px;
}
.form_wrapper fieldset p.checkbox label
{
  margin-top: -10px;
}

.form_wrapper fieldset p.radio
{
    background-color: #171717;
    height: 30px;
}
.form_wrapper fieldset p.radio input
{
    margin:7px 10px 7px 10px;
    float:right;
}


#recaptcha
{
  display: block;

/*  width: 312px;*/
  height: 124px;
  margin-bottom: 1px;
  margin-top: 1px;
  padding: 5px 5px 10px 292px;
  background-color: #171717;
}

/* ==========
subscription_servlet.css
JI Dec 2010

Styles and layouts specifically for the submission servlet (usageBundleContent)
========== */

#test
{
  width: 627px;
  background-color: red;
}

form#add_membership
{
  width: 627px;
}

div.panel
{
  display: block;
  width: 615px;
  padding: 5px;
}

div.panel h2
{
/*  color: #111;*/
}

div.panel ol
{
  font-family: sans-serif;
  font-size: 2em;
}

div.panel ol p
{
  font-size: 10pt;
  margin-bottom: 8pt;
  line-height: 1.2;
  /* Probably need to reset font-family here */
}

div#how_does_it_work
{
/*  background-color: #ddd; */
}

#how_does_it_work ol
{
    padding: 1em 2em;
}

div.theme_block
{
  width: 196px;
  height: 225px;
  display: block;
  float: left;
  background-color: #eee;
  border: 1px solid #777;
  padding: 2px;
  margin: 2px; /* Probably needs to be 1px for IE */
}

div.theme_block img
{
  width: 195px;
/*  margin-bottom: 20px; */ /* This should be margin-top on input elements really, but that will break the styling. */
}

div.theme_block p
{
  font-size: 9pt;
  width: 135px;
  float: left;
  margin-left: 35px;
/*  margin-top: -15px; */ /* This should be margin-top on input elements really, but that will break the styling. */
}

div.theme_block#complete
{
  margin-right: 350px; /* Only needs to be enough to knock the next block down a row */
  margin-bottom: 15px;
}

#choose_your_bundle
{
/*  background-color: #c6c6c6; */
/*  padding: 0px;
  margin-left: 2px; */
  width: 623px;
/*  margin-top: -20px; */
}

#choose_your_bundle h2
{
/*  padding: 5px; */
  margin-left: 0px;
}

#choose_your_bundle h3
{
    margin-top: 15px;
}

#choose_trial_bundle_button
{   background-image: url( /hub/images/ChooseTrialBundle_Button_209px.png );
    width:209px; height:33px;
    display: block;
}
#choose_trial_bundle_button span
{
    visibility: hidden;
}

#how_much
{
  width: 613px;
/*  background-color: #ababab; */
}

#how_much ul
{
  padding-left: 30px;
}

#how_much li
{
  list-style: none;
 /* height: 50px;
  padding-top: 5px;*/
}

/* #how_much li p
{
  padding-top: 15px;
} */

#total_and_checkout
{
/*  margin-top: -60px; */
  float: right;
}

#total_and_checkout h2
{
  text-align: right;
  padding-right: 10px;
}

#total_and_checkout .submit
{
  border: none;
  background: url('/MSDB/images/buttons/add_to_checkout.png') no-repeat;
  background-position: 0px 0px;
  padding: 0px 8px;
  width: 160px;
  height: 24px;
  display: block;
}

#total_and_checkout .submit span
{
  display: none;
}

#total_and_checkout .submit:hover
{  background-position: 0px -25px;  }

#total_and_checkout .submit:active
{  background-position: 0px -50px;  }

a.addMembershipButton
{
  border: none;
  background: url('/MSDB/images/buttons/add_to_checkout.png') no-repeat;
  background-position: 0px 0px;
  padding: 0px 8px;
  width: 160px;
  height: 24px;
  display: block;
}

.addMembershipButton span
{
  display: none;
}

.billingBox
{
    margin-top: 1em; margin-bottom: 1em;
    margin-left: 4em;
    border: thin solid black;
    padding: 1em;
    width: 500px;

    background-color: #171717;
}

#registerButton { background-image: url(/hub/images/RegisterForDownload_Button.png) no-repeat; width:209px; height:66px;} #registerButton:hover {   background-position: 0px -33px; }  #registerButton:active {   background-position: 0px -66px; } #registerButton span { visibility: hidden }

.helpButton { background-image: url(/hub/images/Help_Animated.png) no-repeat; width:38px; height:38px; }

.helpButton:hover { background-position: 0 -38px; }

.helpButton:active { background-position: 0 -76px; }

.claimBonusButton { background-image: url(/hub/images/Claim_Bonus_Pack.png) no-repeat; width:38px; height:38px; }

.claimBonusButton:hover { background-position: 0 -38px; }

.claimBonusButton:active { background-position: 0 -76px; }

#old-body
{
    clear: both;
    overflow: hidden;
    height: auto !important;
    height: 100%;
}

#old-body #img-sml
{
    float:right;
}

#old-body h1, #old-body h2, #old-body h3
{
/*    color: white; */
}

.column-wide-left {
/*    background-color: white;*/
/*    color: black;*/
/*    padding-top: 1em; */
    padding-bottom: 1em;
/*    padding-left: 2em; */
    padding-right: 2em;
    /*
    -moz-border-radius: 7px;
    border-radius: 7px;
    behavior: url(../css/PIE.htc);
    */
}
.column-narrow-right {
    float: right;
    width: 250px;

}

blockquote
{
    margin: 1em;
}

hr
{
    display: block;
    margin: 0.5em auto;
    border-style: inset;
    border-width: 1px;
}

#old-body-1col
{
    clear: both;
    overflow: hidden;
    height: auto !important;
    height: 100%;
    background-color: white;
    color: black;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 2em;
    padding-right: 2em;
    /*
    -moz-border-radius: 7px;
    border-radius: 7px;
    behavior: url(../css/PIE.htc);
    */
}

/*
* Tender support side button widget
*/
#tender_toggle_button
{
  display: block;
  z-index: 1000;
  width: 45px;
  height: 150px;
  margin-right: 0px;
  margin-top: 100px;
  float: right;
  right: 0px;
  position: fixed;
  background-image: url('http://s3.moviestorm.co.uk.s3.amazonaws.com/site_gfx/tender_toggle.png');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
#tender_toggle_button:hover
{
  background-image: url('http://s3.moviestorm.co.uk.s3.amazonaws.com/site_gfx/tender_toggle.png');
  background-repeat: no-repeat;
  background-position: -45px 0px;
}

.accordionHeader
{
    text-align: center;
}

.accordionHeader a
{
    font-size: 110%;
    color: #FF8512;
}

.accordionHeader a:hover { color: #E5A700;}

.para-text
{
    padding: 1em;
}

.tightFit>.para-text
{
    padding:0em;
}

.para-text ul, ul.bullets, ul.links
{
    margin-top: 0;
    -webkit-padding-start: 0;
    margin-left: 0;
    padding-left: 2em;
    padding-top: 0em;
}

.para-text ul>li, .bullets li
{
    margin: 0.5em 0;
    list-style-type: disc;
}

/*.para-text a
{
    color: #e28d00;
}

.para-text a:hover
{
    color: #ff8512;
}*/

ul.links li
{
    margin: 0.5em 0;
    text-indent: -1em;
    list-style-type: none;
}

.hub ul.links li a
{
    background: transparent url(../images/bg-li.jpg) no-repeat 0 3px; padding:0 0 0 14px; margin-left: 0;
}

ul.links li a:hover
{
    background-position:0 -27px;
}

/* Default margins for images in plain paras */

.para-text img[align="right"]
{
    margin: 0 0 1em 1em;
}

.para-text img[align="left"]
{
    margin: 0 1em 1em 0;
}

div#download_button_banner
{
/*    margin-left: 160px;*/
}

.currentPlan {
	font-size:14pt;
	font-weight: bold;
/*	color:#FF9933;*/
        width: 100%;
}


#footer a
{
    color: #ffbd50;
}
#footer a:hover
{
    color: #ff8512;
}

#footer
{
    border-top: 1px solid #313132;
}

ul#rightmost
{
    text-align: center;
}

div.gsearch
{
    height: 30px;
    width: 225px;
    position: relative;
    top: -8px;
}

.gsc-control-cse
{
    padding: 0 !important;
}

input.gsc-search-button-v2
{
    padding: 6px 10px !important;
    position: relative;
    top: 1px;
}

img.iconHeader
{
    margin-right:100px;
    text-align:left;
}

div.message
{
    background-color: #fdfdfd;
    color: #171717;
    padding-top:3px;
    padding-bottom:3px;
}
div.message p
{
    margin-left:10px;
    margin-right:10px;
    margin-top:0px;
    margin-bottom:0px;
}
div.message p.error
{
    color: red;
}