/*******************************************************
 *
 *  iStoreYoursGuest
 *
 *  CSS file for the iStoreYoursGuest project.
 */

/*******************************************************
 *
 *  iStoreYours - Body
 *
 *  This is for the background image.
 *
 *  Note: To make this work with both the normal page and the MVC pages 
 *  I decided to use the same directory structure for the 'images' 
 *  directory, but it HAS to be in two different places for this to work, 
 *  one is off the 'public' dir (for the MVC pages), and the other is off 
 *  the 'css' dir (for the normal pages).
 */
  body {
    background-image: url( images/Lock1.jpg );
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    color: black;
    /* Note: I put 'height: 100%' in the 'html', but it was ONLY when I */
    /* put it in BOTH the 'html' AND in the 'body' did it force the     */
    /* footer to the bottom of the screen.                              */
    height: 100%;
  }

/*******************************************************
 *
 *  Full_Container - Everything in the 'body' is in this.
 *
 */
  #full_container {
    min-height: 100%;
    position: relative;
/*  background: #ff0; */
  }

/*******************************************************
 *
 *  iStoreYours - html
 *
 */
  html {
    /*  Note:  This is how you change all the FONT size in Bootstrap.   */
    font-size: 12px;
    /* Note: I put 'height: 100%' in the 'body', but it was ONLY when I */
    /* put it in BOTH the 'html' AND in the 'body' did it force the     */
    /* footer to the bottom of the screen.                              */
    height: 100%;
  }
  #body_top .float_rt1 {
    float: right; 
    width: 50%; 
    text-align: right; 
/*  background-color: lightblue; */
  }
  #body_top .float_lt1 {
    float: left; 
    width: 50%; 
/*  background-color: lightgreen; */
  }

/*******************************************************
 *
 *  iStoreYours - Big Jumbotron type header.
 *
 */
  #body_top {
    position: relative; /* This MUST be 'relative' if '#flash-msg' is going to be 'absolute' for this to work */
    background-color: white;
    padding: 2em;
    border-radius: 10px;
  }

  #body_top #flash-msg {
    position: absolute; /* Note:  'body_top MUST be 'relative' for this to work */
    z-index: 10;
    width: 40%;
    margin: 0 30% 0 30%;
    text-align: center;
    border: 1px #555 solid;
    bottom: 0;
/*  background-color: pink; */
  }

/*******************************************************
 *
 *  Body Middle
 *
 */
  #body_middle {
    margin: 2em; /* This is the default for the small screen */
    /* This is the height from the bottom of the screen to the bottom of the 'body_middle'. */
    /* Note:  This must be high enough to not cover the 'footer' if this was '0em' or (like) '2em' */
    /* then some of 'body_middle' would be covered by the 'footer', so make it high enough. */
    padding-bottom: 10em; 
  }
  #lock_timer {
    padding-top: 2em;	
    background-color: white;
    text-align: center;
    height: 18em;
  }
  /* This is the smallest size it is adjusted below */
  .cir_size {
    display: block; 
    margin:  0 auto; 
    width:   33px;
    height:  33px;
    border-radius: 50%;
  }
  /* I am using this to change the text between big and small */
  .cir_text_big {
    display: none; 
    text-align: center; 
    margin-top: 35%;
  }
  .cir_text_small {
    display: block; 
    text-align: center; 
    margin-top: 15%;
  }
/*******************************************************
 *
 *  iStoreYours - Table Section.
 *
 */
  #body_row2 {
    background-color: white;
  }

  /********************************************************/
  /* Header data                                          */
  /********************************************************/
  #body_row2 .itemT1 {
    border-bottom: 1px #555 solid;
    float: left;
    width: 35%;
    padding-left: 15px;
    height: 100%;
  /*background-color: yellow;*/
  }
  #body_row2 .itemT2 {
    border-bottom: 1px #555 solid;
    float: left;
    width: 30%;
    height: 100%;
  /*background-color: lightgreen;*/
  }
  #body_row2 .itemT3 {
    border-bottom: 1px #555 solid;
    float: right;
    width: 35%;
    height: 100%;
  /*background-color: yellow;*/
  }

  /********************************************************/
  /* Rows for data                                        */
  /********************************************************/
  #body_row2 .item0 {
    float: left;
    width: 3%;
    margin-left: -10px;
    white-space: nowrap;
  /*background-color: lightblue;*/
  }
  #body_row2 .item1 {
    float: left;
    width: 32%;
    height: 100%;
  /*background-color: pink;*/
  }
  #body_row2 .item2 {
    float: left;
    width: 30%;
    height: 100%;
  /*background-color: lightblue;*/
  }
  #body_row2 .item3 {
    float: left;
    width: 35%;
    height: 100%;
    padding-left: 10px;
  /*background-color: pink;*/
  }
  .ColBkGnd {
  background-color: lightgray;
  }  

/*******************************************************
 *
 *  iStoreYours - Table Section.
 *
 */
  .row_item1 {
  }
  .row_item2 {
  }
  .row_item3 {
  }
  .clear {
    clear: both;
  }  
  #body_row2 .ritem1 {
  /*background-color: lightblue;*/
    float:  left;
    width:  11%;
    height: auto;
  }
  #body_row2 .ritem2 {
  /*background-color: lightgreen;*/
    float:  left;
    width:  39%;
    height: auto;
  }
  #body_row2 .ritem3 {
  /*background-color: yellow;*/
    float:  left;
    width:  11%;
    height: auto;
  }
  #body_row2 .ritem4 {
  /*background-color: orange;*/
    float:  right;
    width:  39%;
    height: auto;
  }
  #body_row2 .gcbwebs {
    float: left;
    margin-top: 6px;
    margin-right: 1px; 
  }
  #body_row2 .gcbuser {
    float: left;
    margin-top: 6px;
    margin-right: 1px; 
  }
  #body_row2 .gcbhint {
    float: right;
    margin-top: 6px;
    margin-left: 1px;
  }
  #body_buttons {
    background-color: white;
    height: 70px;
    padding-top: 20px;
    width: 100%;
  }
  #body_buttons .btn1 {
  /*background-color: lightgreen;*/
    width: 10%;
    float: left;
  }
  #body_buttons #add_new_link {
    border-radius: 3px;
    border: 1px #555 solid;
    background-color: #428BFF;
    color: white;
    margin-left: 10px;
  }
  #body_buttons .btn2 {
  /*background-color: orange;*/
    width: 34%;
    float: left;
  }
  #body_buttons #cboxuser {
    margin-top: 5px;
    margin-left: 40%;
    width: 10%;
  }
  #body_buttons .btn3 {
  /*background-color: lightgreen;*/
    width: 25%;
    float: left;
  }
  #body_buttons #cboxhint {
    margin-top: 5px;
    margin-left: 40%;
    width: 10%;
  }
  #body_buttons .btn4 {
  /*background-color: orange;*/
    width: 15%;
    float: left;
  }
  #body_buttons #update_del {
    border-radius: 3px;
    border: 1px #555 solid;
    background-color: #428BCA;
    color: white;
    float: right;
  }
  #body_buttons .btn5 {
  /*background-color: lightgreen;*/
    width: 16%;
    float: right;
  }
  #body_buttons #update_sort {
    border-radius: 3px;
    border: 1px #555 solid;
    background-color: #428BCA;
    color: white;
    float: right;
    margin-right: 10px;
  }

/*******************************************************
 *
 *  iStoreYours - Tooltip for User Name and Password Hint
 *
 */
  .myTTip
    {
    position: relative;
    display: inline-block;
  }
  .myTTip .myTTipText
    {
    visibility: hidden;
    width: 80%;
    background-color: #428BCA;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
  }
  .myTTip:hover .myTTipText {
    visibility: visible;
  }

/*******************************************************
 *
 *  This 'media' setting is new in CSS3.  What it does is
 *  watch the 'min-width' of the screen and it the width is
 *  greater than 768 pixels then it does what is in the 'media'
 *  block, else it does the default, which is above.
 *
 *  Note:  Anything that is in here (@media) must be defined above (not below).
 *         - All the above is the default for the smaller window, the below is for the bigger window.
 */
@media screen and (min-width: 576px) 
{
  html {
    /*  Note:  This is how you change all the FONT size in Bootstrap.   */
    font-size: 14px;
    /* Note: I put 'height: 100%' in the 'body', but it was ONLY when I */
    /* put it in BOTH the 'html' AND in the 'body' did it force the     */
    /* footer to the bottom of the screen.                              */
    height: 100%;
  }
  #body_top .float_rt1 {
    width: 50%; 
    text-align: right; 
  }
  #body_top .float_lt1 {
    width: 50%; 
    text-align: right; 
  }
  #body_top #flash-msg {
    width: 50%;
    margin: 0 25% 0 25%;
  }
  #body_middle {
    margin: 2em 7em 2em 7em;
  }
  #body_buttons .btn1 {
    width: 10%;
  }
  #body_buttons #add_new_link {
    margin-left: 15px;
  }
  #body_buttons .btn2 {
    width: 34%;
  }
  #body_buttons #cboxuser {
    margin-top: 7px;
    margin-left: 60%;
  }
  #body_buttons .btn3 {
    width: 25%;
  }
  #body_buttons #cboxhint {
    margin-top: 7px;
    margin-left: 55%;
  }
  #body_buttons .btn4 {
    width: 15%;
  }
  #body_buttons .btn5 {
    width: 16%;
  }
  #body_buttons #update_sort {
    margin-right: 15px;
  }
  #body_row2 .gcbwebs {
    margin-right: 5px; 
  }
  #body_row2 .gcbuser {
    margin-right: 5px; 
  }
  #body_row2 .gcbhint {
    margin-left: 5px; 
  }
  .cir_size {
    display: block; 
    margin:  0 auto; 
    width:   66px;
    height:  66px;
    border-radius: 50%;
  }
  /* I am using this to change the text between big and small */
  .cir_text_big {
    display: block; 
    margin-top: 30%;
  }
  .cir_text_small {
    display: none; 
  }
}
@media screen and (min-width: 992px) 
{
  html {
    /*  Note:  This is how you change all the FONT size in Bootstrap.   */
    font-size: 16px;
    /* Note: I put 'height: 100%' in the 'body', but it was ONLY when I */
    /* put it in BOTH the 'html' AND in the 'body' did it force the     */
    /* footer to the bottom of the screen.                              */
    height: 100%;
  }
  #body_top #flash-msg {
    width: 60%;
    margin: 0 20% 0 20%;
  }
  #body_row2 .itemT1 {
    padding-left: 35px;
  }
  #body_buttons #cboxuser {
    margin-top: 10px;
    margin-left: 68%;
  }
  #body_buttons #cboxhint {
    margin-top: 10px;
    margin-left: 68%;
  }
  #body_row2 .gcbwebs {
    margin-right: 10px; 
  }
  #body_row2 .gcbuser {
    margin-right: 10px; 
  }
  #body_row2 .gcbhint {
    margin-left: 10px; 
  /*margin-right: 5px; -- This is how far off the right border we move the checkbox */
  }
  .cir_size {
    display: block; 
    margin:  0 auto; 
    width:   100px;
    height:  100px;
    border-radius: 50%;
  }
  .cir_text_big {
    margin-top: 35%;
  }
}

/*******************************************************
 *
 *  iStoreYours - General Notes area.
 *              - Middle Text Color and Background Color.
 */
  #body_middle #notes {
    background-color: #eee;
    border-radius: 10px;
    color: black;
    padding: 1em;
    margin-bottom: 1em;
  }
  #body_middle .private_color {
    color: #891010;
  }
  #body_middle .public_color {
    color: #396039;
  }
  #body_middle .private_bk {
    background-color: #F4A4A4;
    width: 100%;
  }
  #body_middle .public_bk {
    background-color: #AFCFAF;
    width: 100%;
  }

/*******************************************************
 *
 *  Footer
 *
 */
  #footer {
    position: absolute;
    margin: 0 auto;
    bottom: 0px;
    width: 98%; /* I am not using 100% because that always seemed to add a 'scroll bar' at the bottom. */
    height: 80px; /* height of the footer */
/*  background: #666; */
  }
  #footer #footer_copyright  {
    background-color: white;
    border-radius: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0px 40px 0px 40px;
    text-align: center;
  }

/*******************************************************
 *
 *  Body Middle - Log In
 *
 */
  #mid_lin {
    background-color: white;
    padding: 40px;
  }

/*******************************************************
 *
 *  Body Middle - Log Out
 *
 */
  #mid_lout {
    text-align: center;
    background-color: white;
    padding: 40px 40px 130px 40px;
  }

  #mid_notice {
    text-align: center;
    background-color: white;
    padding: 40px 40px 80px 40px;
  }

/*******************************************************
 *
 *  Body Middle - Sign Up
 *
 */
  #mid_new {
    background-color: white;
    padding: 40px;
  }

/*******************************************************
 *
 *  Body Middle - Sign Up
 *
 */
  #mid_show {
    background-color: white;
    padding: 40px;
  }

/*******************************************************
 *
 *  Body Middle - Configure
 *
 */
  #mid_config {
    background-color: white;
    padding: 40px;
  }

/*******************************************************
 *
 *  Body Middle - Edit Profile
 *
 */
  #mid_edit {
    background-color: white;
    padding: 40px;
  }

/*******************************************************
 *
 *  Body Middle - Edit Profile
 *
 */
  #mid_forgot {
    background-color: white;
    padding: 40px;
  }

/*******************************************************
 *
 *  Body Middle - Edit Profile
 *
 */
  #mid_reset {
    background-color: white;
    padding: 40px;
  }