common.css de Ink.Watercolor

Cascading style sheets for InkWatercolor.com, a free art gallery.

/*////////////////////////////////////////////////////////////////////////////
// FILE    : common.css
// AUTHOR  : http://www.asolver.com
// PURPOSE : Cascading style sheets for InkWatercolor.com, a free art gallery.
////////////////////////////////////////////////////////////////////////////*/

body
{
  margin:              6px 0px 48px 0px;
  padding:             0px;
  font-family:         Arial, Helvetiva, sans-serif;
  font-size:           120%;
  font-weight:         normal;
  color:               #202020;
  background-color:    #505050;
  text-align:          center;
}
@media (max-width:  500px) { body { font-size: 100%; } }
@media (min-width:  500px)
   and (max-width:  800px) { body { font-size:  70%; } }
@media (min-width:  800px)
   and (max-width: 1500px) { body { font-size: 100%; } }
@media (min-width: 1500px) { body { font-size: 140%; } }


/*////////////////////////////////////////////////////////////////////////////
// General attributes
////////////////////////////////////////////////////////////////////////////*/

img
{
  margin:              0px;
  padding:             0px;
  border:              none;
}


td
{
  vertical-align:      middle;
}

h4
{
  margin:              0px;
  padding:             6px;
  font-size:           1.0em;
  font-weight:         normal;
  text-align:          center;
}

a
{
  text-decoration:     none;
  color:               #ffa000; /* orange */
}


a:hover
{
  text-decoration:     underline;
  color:               #e0e0e0;
}



/*////////////////////////////////////////////////////////////////////////////
// Structural divisions: rotBox = lnkDiv + cntDiv = [mnuDiv+pubDiv] +  cntDiv
// The pictures max with is 800 pixels -> 1600px stop grow
////////////////////////////////////////////////////////////////////////////*/

div.rotDiv
{
  margin:              0px;
  padding:             0px;
  width:               80%;
  text-align:          left;
  background-color:    #ffffff;
}
@media (max-width: 1000px) { div.rotDiv { width: 100%; } }
@media (min-width: 1000px)
   and (max-width: 2000px) { div.rotDiv { width: 80%; } }
@media (min-width: 2000px) { div.rotDiv { width: 1600px; } }


div.lnkDiv /* link division =  mnuDiv + pubDiv */
{
  margin:              0px;
  padding:             0px;
  width:               50%;
  background-color:    #202020;
}
@media (max-width:  500px) { div.lnkDiv { width: 100%; } } /* Vertical */


div.cntDiv /* pi1Cnt | pi4Cnt | txtCnt = 1 pic | 4 pics | text contents */ 
{
  margin:              0px;
  padding:             0px;
  width:               50%;
  float:               right;
}
@media (max-width:  500px) { div.cntDiv { width: 100%; } } /* Vertical */


/*////////////////////////////////////////////////////////////////////////////
// Navigation menus, left, mnuDiv: 
////////////////////////////////////////////////////////////////////////////*/

div.mnuDiv
{
  width:               50%;
  margin:              0px 0px 0px 0px;
  padding:             6px 0px 0px 0px;
  font-size:           0.9em;
  color:               #e0e0e0;
  float:               right;
}


div.mnuDiv h1 /* Usual titles */
{
  margin:              0px;
  padding:             6px 2px 6px 2px;
  font-size:           1.3em;
  font-weight:         normal;
  text-align:          center;
  color:               #e0e0e0;
}


div.mnuDiv h2 /* Domain name, a big titles */
{
  margin:              0px;
  padding:             0px 2px 6px 2px;
  font-size:           1.5em;
  font-weight:         normal;
  text-align:          center;
  color:               #e0e0e0;
}


div.mnuDiv h3 /* Gallery name, little title */
{
  margin:              0px;
  padding:             6px 2px 6px 2px;
  font-size:           1.2em;
  font-weight:         normal;
  text-align:          center;
  color:               #e0e0e0;
}


div.mnuDiv p
{
  margin:              0px;
  padding:             6px 2px 6px 2px;
  font-weight:         normal;
  text-align:          left;
  color:               #e0e0e0;
}


div.mnuDiv br
{
  margin:              0px;
  padding:             6px 2px 6px 2px;
  font-weight:         normal;
  text-align:          left;
  color:               #e0e0e0;
}


div.mnuDiv table
{
  margin:              0px;
  padding:             6px 2px 6px 2px;
  text-align:          center;
}


div.mnuDiv td.navAMn
{
  margin:              0px;
  padding:             0px;
  width:               20%; /* 5 years per line */
}



div.mnuDiv i
{
  font-size:           2pt;
  font-weight:         normal;
  text-align:          left;
  color:               #e0e0e0;
}

div.mnuDiv b
{
  font-weight:         normal;
  color:               #e0e0e0;
}

div.mnuDiv ul
{
  margin:              0px;
  padding:             6px 2px 6px 2px;
  list-style:          none;
  color:               #e0e0e0;
  text-align:          center;
}

div.mnuDiv li
{
  margin:              0px;
  padding:             0px;
}


div.mnuDiv a
{
  text-decoration:     none;
  color:               #ffa000; /* orange */
}


div.mnuDiv a:hover
{
  text-decoration:     underline;
  color:               #e0e0e0;
}

.navOMn a
{
  text-decoration:     none;
  color:               #e0e0e0;
}

.navOMn a:hover
{
  text-decoration:     underline;
  color:               #e0e0e0;
}


/*////////////////////////////////////////////////////////////////////////////
// Publicity in the middle, pubDiv
////////////////////////////////////////////////////////////////////////////*/

div.pubDiv
{
  width:               50%;
  line-height:         0%;
}


div.pubDiv img
{
  width:               100%;
}


/*////////////////////////////////////////////////////////////////////////////
// Contents, right: pi1Cnt | pi4Cnt | txtCnt = 1 pic | 4 pics | text contents
////////////////////////////////////////////////////////////////////////////*/

div.pi1Cnt
{
  width:               100%;
  height:              100%;
  line-height:         0%;
}


div.pi1Cnt img
{
  width:               100%;
}


div.pi4Cnt
{
  width:               100%;
  height:              100%;
  line-height:         0%;
}


div.pi4Cnt img
{
  width:               50%;
}


/*////////////////////////////////////////////////////////////////////////////
// Contents information and textual
////////////////////////////////////////////////////////////////////////////*/

div.txtCnt
{
  width:               100%;
  height:              100%;
  color:               #202020;
  line-height:         120%;
  text-align:          left;
}


div.txtCnt img
{
  margin:              6px 0px 6px 0px;
}


div.txtCnt img.floatRight
{
  margin:              0px 0px 6px 6px;
  float:               right;
  width:               50%;
}


div.txtCnt h1
{
  margin:              0px;
  padding:             6px;
  font-weight:         normal;
  font-size:           1.4em;
  color:               #ffffff;
  background-color:    #404040;
}


div.txtCnt h2
{
  margin:              0px;
  padding:             6px;
  font-weight:         normal;
  font-size:           1.0em;
  color:               #404040;
  background-color:    #c0c0c0;
}


div.txtCnt p
{
  margin:              0px;
  padding:             6px;
  font-size:           1.0em;
}


div.txtCnt br
{
  font-size:           1.0em;
}


div.txtCnt pre
{
  margin:              0px;
  padding:             6px;
}


div.txtCnt code
{
  margin:              0px;
  padding:             0px;
  font-family:         Courier new, Courier, sans-serif;
  font-size:           0.8em;
  color:               #00a000;
}


div.txtCnt a
{
  text-decoration:     underline;
  color:               #0000e0;
}

div.txtCnt a:hover
{
  color:               #ffa000;
}


div.txtCnt ul
{
  margin:              0px 0px 0px 12px;
  padding:             6px;
  list-style:          disc;
  list-style:          outside;
}


div.txtCnt li
{
  margin:              0px;
  padding:             3px;
}


/*////////////////////////////////////////////////////////////////////////////
// Forms
////////////////////////////////////////////////////////////////////////////*/


div.txtCnt input
{
  margin:              0px 4px 0px 0px;
  padding:             0px;
  font-size:           1.0em;
  width:               80%;       /* 330px de 400px en el original  */
}


div.txtCnt input.text
{
  border:              1px inset; /*  solid groove ridge inset outset #e0e0e0; */
  color:               #202020;
  background-color:    #ffffff;
}


div.txtCnt input.autofill
{
  background-color:    #e0e0e0;
}


div.txtCnt input.button
{
  margin:              0px 4px 4px 0px;
  padding:             4px;
  width:               50%;
}


div.txtCnt select
{
  margin:              0px 4px 0px 0px;
  padding:             0px;
  font-size:           1.0em;
  border:              1px inset; /*  solid groove ridge inset outset #e0e0e0; */
  color:               #202020;
  background-color:    #ffffff;
  width:               80%;       /* 332px de 400px en el original  */
}


div.txtCnt textarea
{
  margin:              0px 4px 6px 0px;
  padding:             0px;
  font-size:           1.2em;
  border:              1px inset; /*  solid groove ridge inset outset #e0e0e0; */
  color:               #202020;
  background-color:    #ffffff;
  width:               80%;       /* 330px de 400px en el original  */
  height:              3.6em;     /* room for 4 lines */
}

div.txtCnt textarea.autofill
{
  background-color:    #e0e0e0;
}


/*////////////////////////////////////////////////////////////////////////////
// Internal elements
////////////////////////////////////////////////////////////////////////////*/

#BoCTrcDiv /* Bank of Canada Traze Division, only used for test mode */
{
  margin:              0px;
  padding:             0px;
  font-size:           0.0em;
  color:               #ffffff;
  border:              0px solid #e0e0e0;
  float:               left;
}