/**
* Standard Layout for Clevis.cz
* 
* @project clevis
* @author Jan Sládek (jan.sladek@clevis.cz)
* @copyright Copyright (c) 2009-2010 Clevis s.r.o.
* @lastmodified 07/03/2010
*
* @tested Mac: Ch5, FF3.6, O10, O10.5, Saf4, Cam2
* @tested Win: IE8, IE7, IE6, FF3.5, Ch5
* @tested iPhone (#fix: weird :target behaviour)
*
* @fontdef FF DIN Web Pro (via Typekit), Helvetica, Arial, sans-serif
* 
* @colordef #666; grey (texts)
* @colordef #888; light gray (links underline borders)
* @colordef #fff; white (background)
* @colordef #fbfca1; light yellow (:target + selection)
* @colordef #009933; green (headlines)
*
* @media All
*
*/
@import url(reset.css);
@import url(basic.css);
@import url(print.css) print;

/**
* @section layout
* @media screen, projection
*
* @note Structure
*
* Links 
* Headings
* Common settings
* Layout
* page Proč
* page Co děláme
* page Kdo jsme
* 
*/
@media screen, projection {

html { height: 100%; overflow-y: scroll; }
body { background: #fff url("../gfx/background.jpg") 0 0 repeat-x; color: #666; font-family: "ff-din-web-pro-1","ff-din-web-pro-2",helvetica,arial,sans-serif; }

/**
* @subsection Links
*
*/
a { border-bottom-color: #888; color: #666; }
a:hover,a:active,a:focus { border-bottom-color: transparent; }

/**
* @subsection Headings
*
*/
h1,h2,h3,h4,h5,h6 { position: relative; font-weight: normal; font-style: normal; line-height: 1.3; }
h1,h2 { line-height: 1.4; text-transform: uppercase; color: #009933; }
h1,h2,h3,h4 { margin-top: 18px; }
h3,h4,h5,h6 { line-height: 1.3; }
h1 { font-size: 18px; top: 2px; margin-bottom: 22px; }
h2 { font-size: 13px; top: 5px; margin-bottom: 25px; }
h3 { font-size: 13px; top: 5px; color: #000; margin-bottom: 16px; }
h4 { font-size: 13px; top: 5px; }
h5,h6 { font-size: 13px; top: 5px; }

/**
* @subsection Common settings
* 
* .line-break - used to break text to more lines because of graphic design
* selection - must be each on separate line
*
*/
.line-break { display: block; }
.clear { display: block; width: 100%; height: 1px; line-height: 1px; clear: both; }

::selection { background: #fbfca1; }
::-moz-selection { background: #fbfca1; }

/**
* @subsection Layout
* 
* centering page | #page
* Clevis logo | #logo
* navigation | nav
*		- each page has it's id, switching active nav link with that
* main header with image | header
* 		- two shadows, one is image as background of header, second ad div .shadow
* all content excluding navigation | #content
* default small columns settings
* 
*/

#page { margin: 0 auto; width: 760px; padding-bottom: 80px; }

#logo { float: right; margin: 64px 25px 50px 0; width: 77px; height: 29px; border: none; }

nav { float: left; margin: 80px 0 50px 0; }
	nav ul { margin: 0 0 0 15px; top: 0; }
		nav li { float: left; background: transparent url("../gfx/navigation.png") 100% 3px no-repeat; padding: 0 25px 0 15px; }
		nav li.nav-kdo-jsme { background: none; }
			#proc .nav-proc a,#kdo-jsme .nav-kdo-jsme a,#co-delame .nav-co-delame a { color: #009933; }
			#proc .nav-proc a:hover,#proc .nav-proc a:active,#proc .nav-proc a:focus,
			#kdo-jsme .nav-kdo-jsme a:hover,#kdo-jsme .nav-kdo-jsme a:active,#kdo-jsme .nav-kdo-jsme a:focus, #co-delame .nav-co-delame a:hover,#co-delame .nav-co-delame a:active,#co-delame .nav-co-delame a:focus { border-bottom-color: #009933; }
			nav .nav-co-delame a { min-width: 65px; } /* @bugfix Webkit rendered this element with Typekit active as with width:0; */
		nav a { text-transform: uppercase; color: #666; border-bottom-color: transparent; float: left; }
		nav a:hover,nav a:active,nav a:focus { border-bottom-color: #888; }

#content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

#content header { position: relative; clear: both; background: transparent url(../gfx/shadow.png) no-repeat; padding: 15px; width: 730px; margin-bottom: 53px; }
	#content header .introduction { width: 730px; height: 280px; background: #fff; position: relative; z-index: 2; }
		#content header p { font-size: 15px; padding-left: 53px; color: #666; margin-bottom: 22px; width: 450px; }
		#content header h1 { padding: 85px 0 0 53px; }
	#content header .shadow { position: absolute; background: #b3b3b3; z-index: 1; width: 730px; height: 280px; top: 16px; left: 16px; border-bottom: 1px solid #dadada; border-right: 1px solid #dadada; }
	
#content article { margin: 0 15px; }

#co-delame article,.reference section,#kdo-jsme article { width: 220px; float: left; margin: 0 0 0 20px; }

/**
* @subsection page Proč
*
* main header image | .introduction 
* big introduction text | article p
* footnotes | footer ul
* 	- :target is called after clicking on a number in the text
*
*/
#proc #content header .introduction { background: #fff url("../gfx/proc.jpg") 474px 33px no-repeat; }
#proc article p { font-size: 15px; padding-left: 53px; margin-bottom: 22px; width: 450px; }

#proc article footer ul { font-size: 10px; color: #666; margin-top: 83px; padding-left: 53px; }
	#proc article footer li span { padding: 2px 3px; }
	#studie:target span,#vypocet:target span { background: #fbfca1; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; }
	
/**
* @subsection page Co děláme
* 
* main header image | .introduction 
* title + explanation lists (uvidíme se, přednášíme a píšeme) | dt, dd
* columns | article
* reference | .reference
* 		- used new html5 elements figure + figcaption
*
*/
#co-delame #content header .introduction { background: #fff url("../gfx/co-delame.jpg") 449px 10px no-repeat; }

#co-delame dt { font-weight: normal; margin-top: 0.5em; }
#co-delame dd { font-size: 10px; line-height: 17px; }

#co-delame header+article { margin-left: 35px; }

#co-delame .reference { clear: both; margin: 60px 20px 0 16px; width: 730px; }
	#co-delame .reference h2 { margin-left: 20px; }
	#co-delame .reference section { margin-bottom: 30px; }
		#co-delame .reference section p { margin-top: 10px; }
	#co-delame .reference h3 a { border-bottom-color: transparent; color: #000; }
		#co-delame .reference h3 a:hover,#co-delame .reference h3 a:focus,#co-delame .reference h3 a:active { border-bottom-color: #888; }
	#co-delame .reference figure { margin-top: 16px; }
		#co-delame .reference figure a { border-bottom: none; }
			#co-delame .reference figure a span { width: 220px; height: 147px; display: block; overflow: hidden; }
		#co-delame .reference figcaption { font-size: 13px; line-height: 1.3; margin-top: 10px; }
		
/**
* @subsection page Kdo jsme
*
* main header image | .introduction 
* text věříme, že... | .verime
* contact details | .contact
*
*/
#kdo-jsme #content header .introduction { background: #fff url("../gfx/kdo-jsme.jpg") 489px 92px no-repeat; }

#kdo-jsme .verime { width: 730px; margin: 0 16px 45px 35px; }
	#kdo-jsme .verime li { font-size: 15px; margin-bottom: 20px; }
	#kdo-jsme .verime+article { margin-left: 35px; }

#kdo-jsme article p { margin-bottom: 16px; }
#kdo-jsme ul.contact { margin: 16px 0 40px 0; }

}