/lib/templates/ccms/base.css

/* *****************************************************
Copyright (C) 2008 - 2010 by Xander Groesbeek (CompactCMS.nl)
Revision:   CompactCMS - v 1.4.2

This file is part of CompactCMS.

CompactCMS is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

CompactCMS 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 General Public License for more details.

A reference to the original author of CompactCMS and its copyright
should be clearly visible at all times for the user of the back-
end. You are not allowed to remove all references to the original
author, communicating the product to be your own.

You should have received a copy of the GNU General Public License
along with CompactCMS. If not, see <http://www.gnu.org/licenses/>.

> Contact me for any inquiries.
> E: Xander@CompactCMS.nl
> W: http://community.CompactCMS.nl/forum
****************************************************** */

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

   FF3, for some unfathomable reason, doesn't import the CSS files
   @import-ed in the middle of the file. This issue is highly dependent
   on unidentified context, but one thing's for sure: the current state
   of the installer code triggers the issue for me (while it has been
   resported by others a few times before, but never was reproducible
   for me.

   The current move, shifting the @import statements to the top of this
   CSS file, circumvents the issue, but since I cannot the cause,
   this certainly is no fix, just a hack. Start your prayer wheels...

   (What seems to 'help' produce this issue is having a completely
	shot config.inc.php or at least a non-working Combiner)

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

@import url(src/reset.css);

@import url(src/typography.css);

@import url(src/grid.css);

@import url(src/forms.css);

@import url(plugins/buttons/screen.css);

@import url(plugins/fancy-type/screen.css);

















/* *****************************************************
Copyright (C) 2008 - 2011 by Xander Groesbeek (CompactCMS.nl)
Revision:   CompactCMS - v 1.4.2

This file is part of CompactCMS.

CompactCMS is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

CompactCMS 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 General Public License for more details.

A reference to the original author of CompactCMS and its copyright
should be clearly visible at all times for the user of the back-
end. You are not allowed to remove all references to the original
author, communicating the product to be your own.

You should have received a copy of the GNU General Public License
along with CompactCMS. If not, see <http://www.gnu.org/licenses/>.

> Contact me for any inquiries.
> E: Xander@CompactCMS.nl
> W: http://community.CompactCMS.nl/forum
****************************************************** */

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

   reset.css
   * Resets default browser CSS.

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

/*
@import url(src/reset.css);
*/




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

   typography.css
   * Sets up some sensible default typography.

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

/*
@import url(src/typography.css);
*/

body
{
  /* font-size: 75%; */
  font-size:0.825em;
  /* font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; */
  font-family:'Palatino Linotype',Palatino, Baskerville, 'Book Antiqua', Georgia,serif;
  line-height:1.5; /* was: 1.6em in CCMS before */
}


a:focus,
a:hover     { color: #09f; } /* was: #000 for CCMS */
a           { color: #06c; text-decoration: underline; } /* color was: #009 for CCMS */

abbr,
acronym
{
	cursor: help;
}

table
{
	margin-bottom: 0.1em;
}




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

   grid.css
   * Sets up an easy-to-use grid of 24 columns.

   By default, the grid is 950px wide, with 24 columns
   spanning 30px, and a 10px margin between columns.

   If you need fewer or more columns, namespaces or semantic
   element names, use the compressor script (lib/compress.rb)

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


/*
@import url(src/grid.css);
*/

/*
EXTRA:

- define containers for each 'width' (column count); we don't have 'a container' but we use various
  widths on the site: allow for that.

- introduce a 25th column (+40px --> 990px)
*/

/* A container should group all your columns. */
.container-1, .container-2, .container-3, .container-4, .container-5, .container-6,
.container-7, .container-8, .container-9, .container-10, .container-11, .container-12,
.container-13, .container-14, .container-15, .container-16, .container-17, .container-18,
.container-19, .container-20, .container-21, .container-22, .container-23, .container-24,
.container-25
{
  margin: 0 auto;      /* center the container: left & right margin: auto */
}
.container-1 {width: 30px;}
.container-2 {width: 70px;}
.container-3 {width: 110px;}
.container-4 {width: 150px;}
.container-5 {width: 190px;}
.container-6 {width: 230px;}
.container-7 {width: 270px;}
.container-8 {width: 310px;}
.container-9 {width: 350px;}
.container-10 {width: 390px;}
.container-11 {width: 430px;}
.container-12 {width: 470px;}
.container-13 {width: 510px;}
.container-14 {width: 550px;}
.container-15 {width: 590px;}
.container-16 {width: 630px;}
.container-17 {width: 670px;}
.container-18 {width: 710px;}
.container-19 {width: 750px;}
.container-20 {width: 790px;}
.container-21 {width: 830px;}
.container-22 {width: 870px;}
.container-23 {width: 910px;}
.container-24 {width: 950px;}
.container-25 {width: 990px;}

/* Columns
-------------------------------------------------------------- */

.span-25
{
  float: left;
  margin-right: 10px;
}

/* Use these classes to set the width of a column. */
.span-1-1 {width:40px;}
.span-2-1 {width: 85px;}
.span-25 {width: 990px; } /* was: margin: 0 for CCMS */

/* Use these classes to set the width of an input. */
input.span-25, textarea.span-25
{
  border-left-width: 1px;
  border-right-width: 1px;
  padding-left: 5px;
  padding-right: 5px;
}

input.span-25, textarea.span-25 { width: 968px; }

/* Add these to a column to append empty cols. */

.append-24 { padding-right: 960px;}

/* Add these to a column to prepend empty cols. */

.prepend-24 { padding-left: 960px;}


/* Use these classes on an element to push it into the
next column, or to pull it into the previous column.  */


.pull-25 { margin-left: -1000px; }

.pull-25
{
	float: left;
	position:relative;
}


.push-25 { margin: 0 -1000px 1.5em 1000px; }

.push-25
{
	float: left;
	position:relative;
}


/* Misc classes and elements
-------------------------------------------------------------- */


/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.container-1:after, .container-2:after, .container-3:after, .container-4:after, .container-5:after,
.container-6:after, .container-7:after, .container-8:after, .container-9:after, .container-10:after,
.container-11:after, .container-12:after, .container-13:after, .container-14:after, .container-15:after,
.container-16:after, .container-17:after, .container-18:after, .container-19:after, .container-20:after,
.container-21:after, .container-22:after, .container-23:after, .container-24:after, .container-25:after
{
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow:hidden;
}
.container-1, .container-2, .container-3, .container-4, .container-5, .container-6, .container-7,
.container-8, .container-9, .container-10, .container-11, .container-12, .container-13, .container-14,
.container-15, .container-16, .container-17, .container-18, .container-19, .container-20, .container-21,
.container-22, .container-23, .container-24, .container-25
{
	display: block;
}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear-left { clear:left; }
.clear-right { clear:right; }

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


.block
{
	border:3px solid #B3E813;
	padding: 10px;
}

.page-break
{
	page-break-before:always;
}
/*
::selection{background:#c3effd;color:#000;}
::-moz-selection{background:#c3effd;color:#000;}
*/





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

   forms.css
   * Sets up some default styling for forms
   * Gives you classes to enhance your forms

   Usage:
   * For text fields, use class .title or .text
   * For inline forms, use .inline (even when using columns)

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

/*
@import url(src/forms.css);
*/

#contact label
{
	font-weight:bold;
	float:left;
	width:90px;
	text-align: right;
	margin-right:5px;
	padding-top:7px;
}

/* Form fields
-------------------------------------------------------------- */

/*
  Attribute selectors are used to differentiate the different types
  of input elements, but to support old browsers, you will have to
  add classes for each one. ".title" simply creates a large text
  field, this is purely for looks.
 */
input[type="text"], input[type="password"]
{
	margin:0.2em 0;
}
input.text, input.title, textarea
{
	margin:0.2em 0;
}
/*
The new default from blueprint CSS is more sensible

textarea
{
	height: 150px;
}
*/
input.text,
input.title   { padding: 3px; }
textarea      { padding: 3px; }

select.text
{
	/* width: 210px;   -- use the span-x classes! */
	padding: 3px;
}
select.title
{
	/* width: 300px;   -- use the span-x classes! */
	padding: 3px;
}
select.text, select.title
{
  background-color:#fff;
  border:1px solid #bbb;
}

/*
  This is to be used on forms where a variety of elements are
  placed side-by-side. Use the p tag to denote a line.
 */
form.inline { line-height:3; }
form.inline p { margin-bottom:0; }


/* Success, info, notice and error/alert boxes
-------------------------------------------------------------- */

.fault
{
	color:#8a1f11;
}









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

   buttons.css
   * Gives you some great CSS-only buttons.

   Created by Kevin Hale [particletree.com]
   * particletree.com/features/rediscovering-the-button-element

   See Readme.txt in this folder for instructions.

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

/*
@import url(plugins/buttons/screen.css);
*/

label,select,.pointer
{
	cursor:pointer;
}

/* 
validation

Classes added by mootools::FormValidator classes:

... and make sure CSS precedence rules allow these through anyhow:

add 
  input.text, input.title, textarea, input, select
*/
input.text.validation-failed, input.title.validation-failed, textarea.validation-failed, input.validation-failed, select.validation-failed 
{
	background: #FBE3E4;
	color: #8a1f11;
	border-color: #FBC2C4;
}
input.text.validation-passed, input.title.validation-passed, textarea.validation-passed, input.validation-passed, select.validation-passed 
{
	background: #E6EFC2;
	color: #264409;
	border-color: #C6D880;
}
.validation-advice 
{
	font-style: italic;
	color: #CC0000;
	font-size: 0.825em;
	/* margin-left: 150px;  -- not needed for the contact sample form anymore; also screws up the admin forms elsewhere --> removed */
	/* padding-left: 17px; */
}






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

   fancy-type.css
   * Lots of pretty advanced classes for manipulating text.

   See the Readme file in this folder for additional instructions.

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

/*
@import url(plugins/fancy-type/screen.css);
*/




.redbox
{
	border: 1px solid red;
}