/*-----------------------------------------------------------------------------
Mobile CME Outcomes iPhone/iPod touch Style Sheet

$Date: 2009-08-05T16:14:47.741338Z $
$Revision: 1525 $
$Author: RoyF $
$HeadURL: /local/VistaSurveys/trunk/Vista/Pages/iMD/css/iphone.css $
website:   www.picmecardio.com

-----------------------------------------------------------------------------*/

/*@media only screen and (max-device-width: 480px) {*/
  body.mobile
  {
    margin: 0;
    overflow-x: hidden;
    -webkit-user-select: none;
    padding: 0;
    -webkit-text-size-adjust: none;
    text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0;
    color: #000000;
    background: #FFFFFF;
  }
  
  body.mobile
  {
    min-height: 372px;
  }
  body.mobile[orient="landscape"]
  {
    min-height: 268px;
  }
  
  #doc3
  {
    min-width: 320px;
    margin: auto;
  }

  /*  Display vertical columns instead of side-by-side columns */
  .yui-t4 #yui-main
  {
    margin-right: 0;
  }
  .yui-t6 #yui-main
  {
    margin-right: 0;
    float: none;
  }

  .yui-t4 .yui-b, .yui-t6 .yui-b
  {
    clear: both;
    float: none;
    width: 100%;/**/
  }
  .yui-t4 #yui-main .yui-b
  {
    margin-right: 0;
  }
  .yui-t6 #yui-main .yui-b
  {
    margin-right: 0;
  }

  .yui-t1 .yui-b
  {
    clear: both;
    float: none;
    width: 100%;
  }
  .yui-t1 #yui-main, .yui-t2 #yui-main, .yui-t3 #yui-main
  {
    margin-left: 0;
    float: none;
  }
  .yui-t1 #yui-main .yui-b
  {
    margin-left: 0;
  }


  /* Background for main block */
  #yui-main .formcontent
  {
  /*
    background: #c8c8c8 url(imgs/pinstripes.png);
    */
    padding: 0 0 10px 0;
  }
  
  /* Padding for form elements */
  .userform
  {
    padding: 10px;
  }
  
/************************************************************************************/
  /* iPhone form/page Header */
  div#hd > div.toolbar
  {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-bottom: 1px solid #2d3642;
    border-top: 1px solid #6d84a2;
    padding: 10px;
    height: 45px;
    background:transparent url(imgs/titlebar.png) repeat-x scroll 0 0;
    padding: 10px;  
  }
  
  /* Form/Page Title */
  div#hd > div.toolbar > h1.pageTitle
  {
    position: relative;
    width: 50%;
    left: 25%;
    font-size: 153.9%; /*20px*/
    font-weight: bold;
    color: white;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
    text-transform: none;
  }
  
  /* Form/Page toolbar button */
  div#hd > div.toolbar > .button
  {
    position: absolute;
    overflow: hidden;
    top: 8px;
    left: 0;
    margin: 0;
    border-width: 0 5px;
    padding: 0 3px;
    width: auto;
    height: 30px;
    line-height: 30px;
    font-family: inherit;
    font-size: 93%; /*12px*/
    font-weight: bold;
    color: white;
    text-shadow: rgba(0, 0, 0,0.6) 0px -1px 0;
    text-overflow: ellipsis;
    text-decoration: none;
    white-space: nowrap;
    background: none;
    -webkit-border-image: url(imgs/toolButton.png) 0 5 0 5;
  }
  
  div#hd > div.toolbar > .backButton
  {
    left: 6px;
    right: auto;
    padding: 0;
    max-width: 55px;
    border-width: 0 8px 0 14px;
    -webkit-border-image: url(imgs/backButton.png) 0 8 0 14;
  }
  
  div#hd > div.toolbar > .leftButton
  {
    left: 6px;
  }
  
  a.button
  {
    position: relative;
    margin: 0;
    border-bottom: 1px solid #D9D9D9;
    padding: 8px 0 8px 10px;
    font-size: 153.9%; /*20px*/
    font-weight: bold;

    display: block;
    margin: -8px 0 -8px -10px;
    padding: 8px 32px 8px 10px;
    text-decoration: none;
    color: inherit;
    background: url(imgs/listArrow.png) no-repeat right center;
  }
  
  /* Edge-to-edge navigation lists */
  ul.navList > li
  {
    position: relative;
    margin: 0;
    border-bottom: 1px solid #D9D9D9;
    padding: 8px 0 8px 10px;
    font-size: 153.9%; /*20px*/
    font-weight: bold;
    color: black;
    list-style: none;
  }
  
  ul.navList > li > a
  {
    display: block;
    margin: -8px 0 -8px -10px;
    padding: 8px 32px 8px 10px;
    text-decoration: none;
    color: inherit;
    background: url(imgs/listArrow.png) no-repeat right center;
  }

  ul.navList > li.group
  {
    position: relative;
    top: -1px;
    margin-bottom: -2px;
    border-top: 1px solid #7d7d7d;
    border-bottom: 1px solid #999999;
    padding: 1px 10px;
    background: url(imgs/listGroup.png) repeat-x;
    font-size: 131%; /*17px;*/
    font-weight: bold;
    text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
    color: #FFFFFF;
  }

  /* Hide web only nav list groups */
  ul.navList > li.group.web, h1.web, h2.web, h1.QTContent
  {
    display: none;
  }
  
  ul.navList > li.group:first-child
  {
    top: 0;
    border-top: none;
  }

  .sender, .subject, p.subject, .summary
  {
    font-size: 77%; /* 10px */
    font-weight: normal;
  }
  
  a p.subject, a p.item
  {
    font-size: 77%; /* 10px */
    font-weight: normal;
    margin: 0 0 0 1em;
  }
  
  .item
  {
    font-size: 100%; /*13px;*/
    font-weight: normal;
  }
  
  /* For now we have no podcast icons */
  img.icon
  {
    display: none;
  }
  
/************************************************************************************/

  /* fieldset legends */
  .userform legend.title, .userform div.title
  {
    display: none;
  }
  
  .userform > fieldset
  {
    border-style: solid none none none;
    border-width: 1px 0 0 0;
    border-color: #D9D9D9;
  }
  
  .userform > fieldset.noborder {
    clear: both;
    border-style: none none none none;
    border-width: 1px 0 0 0;
/*    
    border-color: #000;
    padding: 0 10px 0 0;
    margin: 5px 0px 10px;
*/    
  }

  .userform > fieldset > legend
  {
    display: block;
    margin: 0;
    padding: 0 0 5px 0;
  }
 
  .userform > fieldset > legend > span
  {
    -webkit-border-radius: 10px;
    position: relative;
    top: -1px;
    margin-bottom: -2px;
    border-top: 1px solid #7d7d7d;
    border-bottom: 1px solid #999999;
    padding: 1px 10px;
    background: url(imgs/listGroup.png) repeat-x;
    /*font-size: 108%; /* 14px */
    font-size: 123.1%; /*16px;*/
    font-weight: bold;
    font-variant: small-caps;
    font-style: normal;
    text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
    color: #FFFFFF;
    width: 100%;
  }
 
  .userform > fieldset > fieldset > legend
  {
    display: block;
    margin: 0;
    padding: 0 0 5px 0;
  }
  
  .userform > fieldset > fieldset > legend > span
  {
    -webkit-border-radius: 10px;
    position: relative;
    top: -1px;
    margin-bottom: -2px;
    border-top: 1px solid #7d7d7d;
    border-bottom: 1px solid #999999;
    padding: 1px 10px;
    background: url(imgs/listGroup.png) repeat-x;
/*    
    font-size: 77%; /* 10px */
    font-size: 93%; /* 12px */
    font-weight: bold;
    font-variant: small-caps;
    font-style: normal;
    text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
    color: #FFFFFF;
  }
  
  /* Add some separation between questions */
  .userform fieldset div
  {
    margin: 0 0 7px 0;
  }
  
  /* User form error summary */
  .userform div.validationsummary
  {
    margin: 0;
    padding: 5px;
    background: red;
    -webkit-border-radius: 10px;
    border: 1px solid #999;
    color: white;
    font-variant: small-caps;
    font-weight: bold;
  }
  
  /* iPhone form/page Header */
  .userform > div.title
  {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-bottom: 1px solid #2d3642;
    border-top: 1px solid #6d84a2;
    padding: 10px;
    height: 44px;
    
    background:transparent url(imgs/titlebar.png) repeat-x scroll 0 0;
    width: auto; 
    padding: 0;  
  }
  
  /* Form/Page Title */
  .userform > div.title > h3
  {
    position: relative;
    width: 50%;
    left: 25%;
    font-size: 153.9%; /*20px*/
    font-weight: bold;
    color: white;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
  }
  
  /* Form help block */
  .userform > div.help
  {
    position: relative;
    padding: 0 5px;
    background: white;
    -webkit-border-radius: 10px;
    border: 1px solid #999;
/*    
*/    
    font-size: 123.1%; /*16px;*/
    margin-bottom: 1em;
  }

  .userform .required {
    font-weight: bold;
  }

  .userform small
  {
    display: block;
    font-size: 77%; /* 10px */
    font-weight: normal;
  }

  .footer
  {
    display: block;
    font-size: 77%; /* 10px */
    font-weight: normal;
    padding: 0 10px;
  }
  
  .userform label
  {
    /*font-size: 108%; /*14px;*/
    font-size: 123.1%; /*16px;*/
    /*
    font-size: 17px;
    font-weight: bold;
    left: 9px;
    padding: 1px 0 3px 8px;
    position: relative;
    right: 20px;
    */
    text-shadow: 0 1px 0 #FFFFFF;
    display: block;
  }
  
  /* Single line input and select */
  .userform fieldset input, .userform fieldset select
  {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100%;
    font-size: 123.1%; /*16px;*/
    font-weight: normal;
  }
  
  .userform fieldset div.datetime input, .userform fieldset div.datetime select
  {
    width: auto;
  }
  
  /* Text area input */
  .userform textarea
  {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100%;
    font-size: 123.1%; /*16px;*/
    font-weight: normal;
    display: block;
  }
  
  .userform input[type="radio"], .userform input[type="checkbox"]
  {
    width: auto;
    margin: 0 0 0 1em;
  }
  
  .userform .mobile input[type="checkbox"]
  {
    margin: 0 0 0 1em;
    -webkit-border-radius: 15px;
    width: 30px;
    height: 30px;
  }
  
  .userform .HorizontalFlowRight input[type="radio"] + label, .userform .HorizontalFlowRight input[type="checkbox"] + label
  {
    font-weight: normal;
    display: inline;
    margin: 0 10px 0 5px;
  }
 
 /*-----------------------------------------------------------------------------
  Styles for radiobutton and checkbox lists in tables
  -----------------------------------------------------------------------------*/
  .userform /*table*/.HorizontalTableRight
  {
    border: 0 none;
    border-collapse: collapse;
    font-weight: normal;
    width: auto;
    display: block;
    margin: 0 0 0.5em 0;
  }

  .userform /*table*/.HorizontalTableRight input, .userform /*table*/.HorizontalTableRight label
  {
    display: inline;
    float: none;
    width: auto;
  }

  .userform /*table*/.HorizontalTableRight label
  {
    display: inline;
    float: none;
    width: auto;
    margin: 0 0 0 0.25em;
  }

/***********************************************
  .userform SPAN.HorizontalFlowLeft {
    margin: 0px 0px 0px 5px;
  }

  .userform SPAN.HorizontalFlowRight {
    margin: 0px 5px 0px 0px;
  }

  .userform SPAN.HorizontalFlowLeft LABEL, .userform SPAN.HorizontalFlowRight LABEL {
    FONT-WEIGHT: normal;
    DISPLAY: inline;
    FLOAT: none;
    width: auto;
  }

  .userform SPAN.HorizontalFlowLeft INPUT, .userform SPAN.HorizontalFlowRight INPUT {
    FONT-WEIGHT: normal;
    DISPLAY: inline;
    FLOAT: none;
  }

  .userform SPAN.VerticalFlowLeft, .userform SPAN.VerticalFlowRight {
    FONT-WEIGHT: normal;
    DISPLAY: block;
    FLOAT: left;
    width: auto;
    padding: 0 0 0.75em 0;
  }

  .userform SPAN.VerticalFlowLeft LABEL, .userform SPAN.VerticalFlowRight LABEL {
    FONT-WEIGHT: normal;
    DISPLAY: inline;
    FLOAT: none;
    width: auto;
  }

  .userform SPAN.VerticalFlowLeft INPUT, .userform SPAN.VerticalFlowRight INPUT {
    FONT-WEIGHT: normal;
    DISPLAY: inline;
    FLOAT: none;
    width: auto;
  }

***************************************/
  
  .userform fieldset span.dateWidget
  {
    display: block;
  }
   
  .userform fieldset .dateWidget span, .userform fieldset .dateWidget span label, .userform fieldset .dateWidget span select
  {
    float: left;
    width: auto;
  }

  .userform fieldset.clear
  {
    clear: both;
  }
            
  /* Hide administrative data */
  .userform fieldset.AdminData, .userform fieldset.hide, .privateRegister
  {
    display: none;
  }
  
  /* Styling submit controls */
  .formcontent fieldset.submit
  {
    border: 0 none;
    padding-left: 10px;
  }
  
  
  /* Buttons */
  .borderImageBtn
  {
    margin: 0;
    height: 30px;
    width:110px;
    text-align: center;
    font: bold 12px/30px Helvetica, sans-serif;
    text-decoration: none;
    display: block;
  }
  
  .blueButton
  {
    border-left: 12px;
    border-right: 12px;
    color: white;
    text-shadow: #000 0px 1px 1px;
    -webkit-border-image:url("imgs/blueButton.png") 0 14 0 14;
  }
  
  .whiteButton
  {
    border-left: 12px;
    border-right: 12px;
    color: black;
    text-shadow: #fff 0px 1px 1px;
    -webkit-border-image:url("imgs/whiteButton.png") 0 14 0 14;
  }
  
  .blackButton
  {
    border-left: 12px;
    border-right: 12px;
    color: white;
    text-shadow: #000 0px 1px 1px;
    -webkit-border-image:url("imgs/grayButton.png") 0 14 0 14;
  }
  
  .blackLeftButton
  {
    border-left: 12px;
    border-right: 5px;
    color: white;
    text-shadow: #000 0px 1px 1px;
    -webkit-border-image: url("imgs/left.png") 0 5 0 12;
  }
  
  .blackRightButton
  {
    border-left: 5px;
    border-right: 12px;
    color: white;
    text-shadow: #000 0px 1px 1px;
    -webkit-border-image: url("imgs/right.png") 0 12 0 5;
  }
  
  .glossyButton
  {
    height: 24px;
    width: 43px;
    border: 0px;
    font: bold 18px/24px Helvetica, sans-serif;
    background-color: green;
    background-image: url("imgs/glossy.png");
    background-repeat: no-repeat;
    text-decoration: none;
    color: white;
    display: block;
    padding: 6px;
    text-align: center;
    text-shadow: #000 -2px -2px 1px;
    vertical-align: bottom;
    white-space: nowrap;
    -webkit-border-radius: 9px;
  }
  
  h1.title
  {
    display: none;
  }
  
  dl.faq dt, div.qa h2
  {
    font-size: 131%; /*17px;*/
    /*font-size: 123.1%; /*16px;*/
    margin: 0;
    background: url(imgs/listGroup.png) repeat-x;
    padding: 0 0 0 8px;
    color: white;
    text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
  }

  dl.faq dd, div.qa p
  {
    /*font-size: 100%; /*13px;*/
    font-size: 123.1%; /*16px;*/
    margin: 0;
    padding: 0.25em 0 1em 2.25em;
  }

  dl.faq dd ul li
  {
    margin: 0 0 0.5em 0;
  }
  
  input.theButton
  {
    font-size: 153.9%; /*20px*/
    font-weight: bold;
    padding: 0 10px;
    margin: 0 5px 5px 0;
  }
  
/*}*/