/*
+----------------------------------------------------------------------
| Copyright (c) 2019 Genome Research Ltd.
| This file is part of the Pagesmith web framework.
+----------------------------------------------------------------------
| The Pagesmith web framework is free software: you can redistribute
| it and/or modify it under the terms of the GNU Lesser General Public
| License as published by the Free Software Foundation; either version
| 3 of the License, or (at your option) any later version.
|
| This program is distributed in the hope that it will be useful, but
| WITHOUT ANY WARRANTY; without even the implied warranty of
| MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
| Lesser General Public License for more details.
|
| You should have received a copy of the GNU Lesser General Public
| License along with this program. If not, see:
|     <http://www.gnu.org/licenses/>.
+----------------------------------------------------------------------

  Styles for cookie policy footer/link and options dialog...

  First the cookie policy footer....

  #cookie-policy.full is the style for the initial informative
                      div with text and two buttons
  #cookie-policy      is the style for the subsequent small "Cookies & privacy"
                      button in the bottom right hand corner

*/
#cookie-policy        { position: fixed; bottom: 0; right: 0; width: auto; z-index: 1000000 }
#cookie-policy.full   { width: 100%; background-color: #ccc; border-top: 1px solid #999 }

/*
  #cookie-options is for the "popup" div allowing user to change cookie preferences...
  Default is 30% wide on the right hand side of the page....
  ## Some responsive design work is required to allow this to "sensibly grow"
     and then go full screen as the screen size decreases...
*/
#cookie-options       { position: fixed; bottom: 0; top: 0; right: 0; color: #000; z-index: 1000000;
                        width: 30%; background-color: #ccc; border-left: 1px solid #999;
                        text-align: left; overflow-y: auto; padding: 5px 0 2em }

#cookie-options blockquote        { text-align: center; margin: 0 }
#cookie-options tr td             { width: 20%; vertical-align: middle; text-align: center; }
#cookie-options tr td:first-child { width: 75%; vertical-align: top; text-align: left   }
#cookie-options tr.disabled td    { background-color: #eee; color: #666;
                                    text-decoration: line-through }
#cookie-options table { border-collapse: collapse; width: 95%; margin: auto }
#cookie-options td, #cookie-options th { border: 1px solid #666; padding: 4px; line-height: 1.25em; color: #000; }
#cookie-options th { background-color: #999; color: #fff; text-align: center }
#cookie-options h2 { padding-top: 1em }
#cookie-options h3 { padding-top: 1em }
#cookie-options a { color: #ffffff; font-weight: 600; }
.cookie-settings {
	cursor:pointer;
//	font-weight: bold;
//	border: 1px solid #000000;
//	border-radius: 4px;
//	padding: 0 4px;
//	background-color: #eeeeee;
}
/** finally shared button style **/
#cookie-options button,
#cookie-policy button { background-color: blue; color: white; border: 0; font-weight: bold; letter-spacing: 1px;
                        border-radius: 4px; padding:4px 8px; margin: 3px }
#cookie-options button { font-size: 1.2em; padding: 4px 1em; }
button#cookie-close   { display: block; float: right; background-color: #666; font-size: 1em }

@media print {
 div#cookie-policy { display: none }
}

@media (max-width: 1280px) {
  #cookie-options { width: 40% }
}
@media (max-width: 1024px) {
  #cookie-options { width: 50% }
}
@media (max-width: 630px) {
  #cookie-options { left: 0; width: 100%; border-left: 0 }
}
/* The following are additional CSS tweaks which would allow you to modify the
   position of the policy "footer" and the options panel */
/* #cookie-options, #cookie-policy { left: 0; right: auto }  /* Policy link and panel on left... */
/* #cookie-policy { top: 0; bottom: auto }                   /* Policy link at top of page rather than bottom! */
/* #cookie-policy.full { top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid #999 } /* Put the initial banner at the top of the page*/