/*
	* Stylesheet for common webbrowsers
	* ***********************************
*/

/*
	General definitions
	Header
	Page
		Left Column
		Right Column
			Content styles
	Footer
	
	Other templates
		Form Designer
*/

/* clears all the margins and paddings for elements, expect for tables */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,  caption { margin: 0;padding:0;}

/* clearfix */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

a { outline: none;}

body {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	background:#ffe8e2 url(/pics/vierasvara/body.gif) repeat-x;
	}
		#wrapper { position: relative; top: 29px; width: 972px; padding: 10px; padding-bottom:0; background: #fff url(/pics/vierasvara/wrapper.jpg) no-repeat; margin: 0 auto;}
			#header { position: relative; width: 100%; height: 171px;}
				#logo { position: absolute;text-indent:-999999px; width: 138px; height: 97px; background: url(/pics/vierasvara/logo-myllynparas.gif) no-repeat; left: 28px; top: 24px;}
				#logo-vierasvara { position: absolute; left: 232px; top: 24px;width: 441px; height: 110px;}
					#logo-vierasvara a { display: block; text-indent:-999999px; width: 441px; height: 110px; background: url(/pics/vierasvara/logo-vierasvara.png) no-repeat;}
				#logo-uutta_pakastealtaasta { position: absolute;text-indent:-999999px; width: 262px; height: 122px; background: url(/pics/vierasvara/logo-uutta_pakastealtaasta.png) no-repeat; right:20px;top:20px;}
			
			#page { position: relative; clear:both; width: 100%;min-height: 500px;}
				.frontpage { height: 460px;}
				.subpage { }
				#leftCol { float: left; width: 304px;}
					#nav { position: relative; top: 56px;width:249px;margin-left: 26px;/* padding-bottom: 90px;*/ padding-bottom: 56px;}
						#nav ul { list-style-type: none; }
							#nav ul li { display: block; width: 100%;  margin-bottom: 4px; }
								#nav ul li a { display: block; height: 41px; background: url(/pics/vierasvara/li-nav.png) no-repeat;line-height:1em;color:#fff; text-decoration: none; font-size: 16px; font-weight: bold; width: 183px; padding-left:47px;padding-right: 17px; padding-top: 13px; }
								/* if link name is long, align it diffently than shorter navi titles */
								#nav li#mtv3_salatut_elamat_-_ohjelmayhteistyo a,
								#nav li#iskelmafestivaali-kilpailu a { padding-top:4px;padding-bottom: 9px;}
								
								#nav a#selected { background: url(/pics/vierasvara/li-nav-selected.png) no-repeat;}
				#rightCol { float:left; width: 668px;}
					#swfObject {
						position: absolute;
						width: 400px;
						height: 300px;
						/* border: 1px solid red; */
						left: 400px;
						top: 0px;
					}
					
					#contentHeader { position: relative; width: 588px; height: 101px; background:url(/pics/vierasvara/contentHeader.gif) left bottom no-repeat; padding: 0px 40px 10px 20px;}
						#contentHeader h1 { font-size: 24px; font-weight: normal; color: #92278f; border-bottom: 1px dashed #fab8a9; padding-bottom: 0.3em;  padding-top: 64px; }
					#content { position: relative; width: 588px; background: url(/pics/vierasvara/content.png) repeat-y; padding: 10px 40px 50px 20px; min-height: 350px;}
						/* headings */
						#content h3 { font-size: 16px; font-weight: normal; color:#92278f; margin-bottom:0.2em;}
						#content h4 {  font-size: 14px; font-weight: bold; color:#92278f; margin-bottom:0.2em;}
						/* paragraphs */
						#content p { line-height: 1.5em; margin-bottom: 0.5em;}
						/* links */
						#content a { color: #ed1b2e;}
						/* lists */
						#content ul, #content ol { margin-left: 2em;}
							#content li { margin:0.5em 0;}
						/* images */
						#content img.tasattu_vasemmalle { float: left; margin-right:1em;}
						#content img.tasattu_oikealle { float: right; margin-left: 1em;}
						/* other CE styles */
						#content span strong { background: yellow; font-weight: bold;}
						#content blockquote { margin-left: 20px;}
						
			#footer { clear:both;position: relative; width: 972px; height: 28px; background:#fff url(/pics/vierasvara/footer.gif) left bottom no-repeat; padding:0 10px; padding-bottom: .5em; margin:0 auto; }
				#footerContent { width: 100%; border-top: 1px solid #dedede; padding-top: 0.5em;}
					#footerContent p { font-size: 11px; color: #b2a6b2;float:left;width: 50%;}
						#footerContent p#copyright {}
						#footerContent p#shortCuts { text-align: right;}
							#footerContent p#shortCuts a { color: #b2a6b2; text-decoration: none;}

/*				
	* Other templates
	******************
*/

/*
 * Competition
 * /pagetemplates/story.vm
 * ***********************************
 */
	#storyDescription { width: 378px; margin-right: 10px; float: left;}
		#storyDescription h2#takePart { position: relative; width: 291px; height: 116px; margin:0 auto; margin-top: 2em;}
			#content #storyDescription h2#takePart a { display: block; text-indent: -999999px;width: 291px; height: 116px; background: url(/pics/vierasvara/button-competition.gif) left top no-repeat; }
				#content #storyDescription h2#takePart a:hover {  background: url(/pics/vierasvara/button-competition.gif) left bottom no-repeat;}
		#content #storyDescription p.storyHelpText { text-align: center;}
	#storyListing { width: 189px; float: left; padding-left: 10px; border-left: 1px dashed #ddd;}
		#content #storyListing h3 { margin-top: 0;}
		#content .storyLinks ul { list-style-type: none; margin-left: 0;}
			#content .storyLinks li { font-size: 11px; color:#000; margin-bottom: 0.5em; border-bottom: 1px solid #fbe1da;padding-bottom: 0.5em;}
			#content .storyLinks li a { font-size: 14px; font-weight: bold; text-decoration: none;}
				#content .storyLinks li a:hover { text-decoration:underline;}
/*
 * Competition - Add a story
 * /pagetemplates/vierasvara/story_form.vm
 * ***********************************
 */				
	#storyForm { margin-bottom: 2em;}
		#storyForm input.storyTextField, #storyForm input.storyTextFieldShort { border: 1px solid #fbcfc3; padding:5px; }
			#storyForm input.storyTextField { width: 270px;}
			#storyForm input.storyTextFieldShort { width: 165px;}
		#storyForm textarea { width: 280px; height: 300px;border: 1px solid #fbcfc3;}

/*
 * Competition - Single story
 * /pagetemplates/vierasvara/single_story.vm
 * ***********************************
 */	
 	#content .singleStory h2 { font-size: 20px; font-weight: normal; color:#92278f; margin:0.2em 0;}
	#content .storyDate { font-size: 11px; color:#63595c;}
	
div.storySendError {
	background: #ce1c01;
	border: 1px dashed #ccc;
	padding: 0.5em;
	color:#fff;
	font-weight: bold;
}

	/* 
	 	* Form Desginer
	 	* pagetemplates/campaign-formdesignerform.vm
		* ********************************************
	*/
	#fd { position: relative; padding-bottom: 50px; }
		#fd fieldset { border: none; margin-bottom: 1em;}
		#fd fieldset legend {}
		#fd fieldset input { margin-bottom: 1em;}
	
