/*******************************************************
**
**  Project:  YourLinkList                  Author:  LNPhillips
**  File:     style.css                     Date:    02/17/17
**
**  Purpose:
**    This is the main *.css file for the Your Link List project.
**
**
**  Copyright (c) - LNP Software - 2017  All rights reserved.
**  4456 E. Desert View Dr.  Phoenix, AZ 85044
**
*/

/***
**
**  Here are the colors I have chosen for this site.
**  The main blue color is #0768AD.
**  From 'paletton.com' I have the following table of colors:
**
**  Very Light Blue:    #B0CEE2
**       Light Blue:    #3A89C0
**             Blue:    #0768AD
**       Dark  Blue:    #044472
**  Very Dark  Blue:    #001C2F
**
**  For future projects I will use SCSS.
**
***/
body {
  /* 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.                              */
  /* Also, it only worked when I added in 'min-height'                */
  min-height: 100%;
  padding-bottom: 8em;
  position: relative;

/* Add your font-family here...                                       */
/* I tested these and they work, but I'm staying with the default     */
/* bootstrap fonts.                                                   */
/*font-family: Arial, Helvetica, sans-serif !important;               */
/*font-family: "Times New Roman", Times, serif !important;            */
}
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%;
}

/*******************************************************
 *
 *  Base Title_Row (across the top)
 *
 */
#base_title_row {
  position: relative; /* This MUST be 'relative' if '#flash-msg' is going to be 'absolute' for this to work */
  background-color: #0769AD;  /* background color for the title across the top  */
  color: white;               /* Text color for the title across the top        */
}
#base_title_row .col-md-2:first-child { 
  /* Center Text on left side */
  text-align: center;
}
#base_title_row .col-md-2:last-child {
 /* Center Text on the right side */
  text-align: center;
}

/* These are all the links in the 'title_row'            */
/* Note:  'visited' and 'link' can ONLY differ by color. */
#base_title_row a:link {
  color: white;
  background-color: transparent;
  text-decoration: none;
}
#base_title_row a:visited {
  color: white;
  background-color: transparent;
  text-decoration: none;
}
#base_title_row a:hover {
  color: #B0CEE2;                   /* This is a light color */
  background-color: transparent;
  text-decoration: underline;
}
#base_title_row a:active {
  color: #B0CEE2                    /* This is a light color */
  background-color: transparent;
  text-decoration: underline;
}

/*******************************************************
 *
 *  Title logo
 *
 */

#title_logo svg {
/*position: absolute;*/
/*background-color: gray;*/
/*border: 1px solid black; */
  display: none;
  float: left;
  /* Move off the left edge */
  margin-left: 20px;
  /* Note: I set padding instead of 'margin-top' because if the bottom does not */
  /* go down and touch the bottom text then the bottom text slides over and is  */
  /* no longer centered like the top text (so there is some unseen padding      */
  /* below to help in the layout).                                              */
  padding: 20px 0px;
/*  left: 10%; */
/*  top: 15%; */
  width: 8%;
  height: 8%;
}
#title_logo .h1_title
{
  font-size: 175%;
}
#title_logo .h2_title
{
  font-size: 150%;
}
#title_logo h1, #title_logo h2, #title_logo  h3 
{
  text-align: center;
  margin:  10px 0px 0px 0px; 
  padding: 0px;
}
#title_logo .h2_title
{
  /* This is only for when on a 'sub' screen and  the width is
     very small and you only have the left side and the right 
     side (but no middle) then the 'subtitle' (h3) does not 
     match the data on the left side or the right side, so just
     pull the 'subtitle'. */
  display: none;
}
#title_logo #flash-msg 
{
  position: absolute;  /* Note:  'base_title_row' MUST be 'relative' for this to work */
  text-align: center;
  width: 100%;
  bottom: 0;
  margin-bottom: 0;
}
@media screen and (min-width: 576px) {
  #title_logo svg {
    display: inline;
  }
  #title_logo .h1_title
   {
    font-size: 200%;
  }
  #title_logo .h2_title
   {
    font-size: 175%;
  }
  #title_logo .h2_title
   {
    display: block;
    margin: -15px 0px 0px 0px; 
  }
}
@media screen and (min-width: 768px) {
  #title_logo svg {
    /* Shorten the lower padding because all of it now covers the bottom text. (see above) */
    padding: 10px 0px;
  }
  #title_logo .h1_title
   {
    font-size: 250%;
  }
  #title_logo .h2_title
   {
    font-size: 200%;
  }
}

/*******************************************************
 *
 *  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.
 *
 */
#test_links { /* 'Test' button on 'Add' page */
  display: none;  /* There is not 'test area' (right side) when the screen is small */
}
#add_body .drop_show
{ /* I don't think you can 'drag-and-drop' with a mobile phone, so do not display when the screen is small. */
  display: none;
}
@media screen and (min-width: 768px) 
{
  #base_title_row .col-md-2:first-child
  {
    border-right: 1px solid white;
  }
  #base_title_row .col-md-2:last-child
  {
    border-left: 1px solid white;
  }
   #add_body .drop_show
   {
    display: inline;
  }
   #test_links {
    display: inline;
  }
}

/*******************************************************
 *
 *  Body of the Web Page.
 *
 *  This is the full body section (below the Title area).
 */
#base_sortContainer
{
  border-top: 1px solid #001C2F;  /* Dark line across the top */
}
#base_sortContainer .col-md-2:first-child
{
  border-right: 1px solid #001C2F;  /* Dark vertical lines */
  text-align: center;
}
#base_sortContainer .col-md-2:last-child
{
  border-left: 1px solid #001C2F;  /* Dark vertical lines */
  text-align: center;
}

/* These are all the links in the middle section          */
/* Note:  'visited' and 'link' can ONLY differ by color.  */
#base_sortContainer a:link 
{
  color: #001C2F;                 /* Dark text color */
  background-color: transparent;
  text-decoration: none;
}
#base_sortContainer a:visited 
{
  color: #001C2F;
  background-color: transparent;
  text-decoration: none;
}
#base_sortContainer a:hover 
{
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
#base_sortContainer a:active 
{
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
#base_sortContainer .prow
{
  text-align: center;
}
#base_sortContainer p.prow
{
  line-height: 96%;
  /* padding-top is used to put just a bit of breathing room at the top of each set of text/link rows. */
  padding-top: 5px;
}
#base_sortContainer  h3
{
  text-align: center;
}
#base_sortContainer  h4
{
/* padding-top is used to put just a bit of breathing room at the top of each Block Title. */
  padding-top: 5px;
  text-align: center;
}

/*******************************************************
 *
 *  Add Body
 *
 */
#add_body
{
  padding: 5px;
}
/*******************************************************
 *
 *  Base left_side
 *
 */
#left_side {  
  /* This MUST match the javascript in 'left_side.js'     */
  /* Also, the 'hover' value of 'red' is in left_side.js' */
  color: #001C2F;
}
/*******************************************************
 *
 *  Add Middle
 *
 */
 #add_list {
  background-color: #B0CEE2;  /* Color under the 'add' area. */
 }

/*******************************************************
 *
 *  Base right_side
 *
 */
#right_side h5 {
  color: #001C2F;
}
/*******************************************************
 *
 *  Title google
 *
 */
/***
#title_google 
{
  max-width: 650px;
  margin: 0 auto;
  text-align: center;
}
#title_google img
{
  float: left;
}
#title_google input
{
  background-color: #D6D6D6;
}
#title_google td
{
  vertical-align: middle;
}
***/
/* Horizontal Line under Header.. */
#hr_header
{
  border: 0px;
  height: 1px;
  padding: 1px 0px;
  background-color: #888888;      /* ??? Not sure what this is...  */
}

.sortIntRow .row
{
/*background-color: lightpink;  */
border-bottom: 1px solid #001C2F;       /***      ***/
}

/*******************************************************
 *
 *  Sign_Up and Login Section
 *
 */
#sign_up, #login, #forgot, #signup_success, #reset_password, 
#token_expire, #reset_success, #profile_show, #profile_edit, #logout, #activation
{
  padding: 35px;
}

/*******************************************************
 *
 *  Sign_Up and Login Section
 *
 */
#flash-msg, #signup_success, #token_expire, #reset_success, #logout, #activation
{
  text-align: center;
}

/*******************************************************
 *
 *  Home Sortable
 *
 */
#home_sortable, #subp_sortable 
{
  list-style-type: none;
  margin:  0; 
  padding: 0; 
  width: 100%; 
  white-space: nowrap; 
/*background-color: lightpink; */
}
#home_sortable li, #subp_sortable li 
{ 
  margin: 0; 
  padding: 10px 15px 5px 15px; 
  float: left; 
  border: 0; 
  border-bottom: 1px solid #001C2F;
  text-align: center;
}

/*******************************************************
 *
 *  Item Sortable
 *
 */
#item_sortable  .item_title
{
  background-color: #DDDDDD;
  font-weight: bold;
}

#item_sortable  .item_na
{
  background-color: #DBA69D;
}

#item_sortable
{
}
#item_sortable table, #item_sortable th
{
  border-spacing: 5px;
  border: 1px solid darkblue;
  border-collapse: collapse;
}
#item_sortable td
{
  border-spacing: 5px;
  border: 1px solid darkblue;
  border-collapse: collapse;
}
#item_sortable table
{
  background-color: #B0CEE2;
  width: 100%;
  margin: auto;
  table-layout: fixed;
}
/* Note: This is to fix an issue in the 'add/test-file' stuff (that thankfully is not really 
 * used very much).  But, because some of the 'url's are so long it caused the whole middle 
 * table to expand over into the right side.  I guess tables can do that at times (they expand 
 * if needed), maybe that can be ok but not for what I was doing.  So, by using the 
 * 'table-layout: fixed' above and by setting the 'width' percentages below I was able to set 
 * the table width and have it not change.  But, if you notice some of the 'cells' spill over to
 * other cells (but thankfully not very many).  Tables are a bit different.
*/
#item_sortable .item_id    {  width: 5%;   }
#item_sortable .item_name{  width: 10%;   }
#item_sortable .item_type{  width: 60%;   }
#item_sortable .item_link{  width: 25%;   }

#item_sortable th, #item_sortable td
{
  padding: 2px 5px 2px 5px;
  text-align: center;
}
#item_sortable h3
{
  padding: 2px 0px 2px 15px;
  text-align: center;
}

/*******************************************************
 *
 *  Item Right
 *
 */
#item_right table, #item_right th, #item_right td
{
  text-align: left;
  padding-left: 5px;
  border-bottom: 1px solid black;
  border-collapse: collapse;
}

/*******************************************************
 *
 *  Item Left
 *
 */
#item_left #highlight
{
  font-weight: bold;
}
 
#item_left table, #item_left th, #item_left td
{
  text-align: center;
  border-collapse: collapse;
}

/*******************************************************
 *
 *  Footer
 *
 */
 
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

#footer_copyright {
  height: 6em;
  padding: 5px;
  text-align: center;
  color: white;
  background-color: #0768AD;
}
/* Note:  'visited' and 'link' can ONLY differ by color. */
#footer_copyright a:link {
  color: white;
  background-color: transparent;
  text-decoration: none;
}
#footer_copyright a:visited {
  color: white;
  background-color: transparent;
  text-decoration: none;
}
#footer_copyright a:hover {
  color: #B0CEE2;
  background-color: transparent;
  text-decoration: underline;
}
#footer_copyright a:active {
  color: #B0CEE2;
  background-color: transparent;
  text-decoration: underline;
}