﻿/*
/**		Copyright 2005-2011 Mike Cygalski. Website Design by Mike Cygalski.
/**		filename: style.css
/**		for www.cygalski.net
/**
*/

/* main */

html {  background-color: #ffffff; background-image: url(../images/bg_design_london_green.gif); background-repeat: repeat-x; background-position: 20px 0px; }
html { margin: 0; padding: 0px; height: 100%; font-size:12px; }
html * { margin: 0 0 0 0; padding: 0 0 0 0; font-size:1em; line-height:1em; border:none; outline:none; }

body * { border: none; outline: none; }

body { width: 100%; margin: 0px auto !important; margin-left: 5%; margin-right: 5%; padding: 0px; height: 100%;  font-family: verdana, arial, helvetica, sans-serif; font-size: 1em; line-height: 1.333333em; }


/* common font elements */

p  { color: #444444; font-size: 1em; line-height:1.333em; margin-bottom:1.5em; text-align: justify; }
ul { line-height:1em; margin-bottom: 2em; }
li { line-height:1.333em; }
#maincolumn li { line-height:1.5em; list-style-type: disc; list-style-position: outside; margin-left:1.5em; }
cite { line-height:1.333em; }

a  { font-size: 1em; background-color: transparent; color: #255A94; text-decoration: none; }
a:hover { text-decoration: underline; }

blockquote { line-height: 1.333em; padding: 0 1em 0 1em; }

blockquote:before { font-size:3em; line-height:0.0625em; position:relative; top:0.45em; margin-right:0.125em; font-family: Georgia, serif; font-family: Georgia !important; content: "\201C"; opacity:0.25; }
blockquote:after { font-size:3em; line-height:0.0625em; position:relative; top:0.45em; margin-left:0.125em; font-family: Georgia, serif; font-family: Georgia !important; content: "\201D"; opacity:0.25; }

cite { margin: 0.96em 0 2.5em 0.5em; font-size: 1em; display: block; opacity:0.925; }
cite:before { content: "- "; }
cite:after {  }


br { font-size: 1em; line-height: 1.333em; }

h1, h2, h3, h4 { font-family: arial, helvetica, sans-serif; margin-top:0; font-weight:bold; clear:both; }

h1 { font-size: 3em; margin-bottom:0.5em; }
h2 { font-size: 2em; margin-bottom:0.75em; }
h3 { font-size: 1.5em; margin-bottom:0.75em; }
h4 { font-size: 1em; margin-bottom:0.75em; }
#navcolumn h2 { font-size: 1.25em; color: #444444; }

li { list-style: none; }


.clearboth { clear: both }
.clearbreak { clear: both }

/* logo, star, webcrumbs, header and menu */

	 #scrollup { clear: left; cursor: pointer; color:#000000;
	   position: relative; top:-0.5em;
	   overflow: hidden;
	   border: none;
	   height: 115px;
	   width: 220px;
	 }
	 .headline { text-align: left; word-spacing:-1px;
	   position: absolute;
	   top: 115px; left: 2px;
	padding-left: 0px; margin-left: 4px;
	   height: 100px;
	   width:216px;
	 }


/* webcrumbs */

#webcrumbs { width: 1010px; margin: 0px auto; }
#webcrumbs * { padding: 0px; margin: 0px; }
#webcrumbs_inner { width: 1010px; text-align: left; margin: 0px auto; padding-left: 25px; }
#webcrumbs { background-image: url(../images/bg_light_subtle.gif); background-repeat: no-repeat; background-position: center;  border-bottom: 0px dashed #E66000; background-color: #000F09; height: 25px; }
#webcrumbs_inner p { text-align: left; color: #007912; font-size: 10px; line-height: 24px; }

#topheading * { padding: 0px; margin: 0px; }
#topheading { float: left; margin-left: 25px !important; margin-left: 12px; }
#topheading br { font-size: 0px; line-height: 0px; padding: 0px; margin: 0px; }
#topheading h1 { text-align: right; color: #B3E187; line-height: 42px; font-size: 45px; font-family: impact, "arial black", arial; font-weight: normal; }
#topheading h2 { font-size: 9px; clear: left; text-align: right; text-indent: 0.25em; color: #B3E187; font-weight: normal; margin-top:3px; }

h1 a.designwebsitehomepage { text-align: right; color: #B3E187; line-height: 42px; font-size: 45px; font-family: impact, "arial black", arial; font-weight: normal; }
h2 a.designwebsitehomepage { font-size: 9px; clear: left; text-align: right; text-indent: 0.25em; color: #B3E187; font-weight: normal; letter-spacing: normal; margin-top:3px; }

.designwebsitehomepage { border: 0px; }
a.designwebsitehomepage { text-decoration: none; background-color: transparent; }
a.designwebsitehomepage:hover { text-decoration: none; background-color: transparent; color: #B3E187;   }
.designwebsitehomepage img { border: 0px; margin-top:-3px; }


/* header */

#header {}
#innerheader { margin: 0px auto; width: 1010px; height: 80px; }

#web_design_star { margin-top: -25px; float: right; position: relative; z-index: 2; margin-right: 3px; }
#hand_crafted { text-align: left; position: relative; top: 67px; padding: 0px; margin-left: 22px; border: 0px solid white; text-decoration: none;  }

/* topmenu */

#topmenucontainer * { padding: 0px; margin: 0px; } 
#topmenucontainer { width: 1010px; margin: 0px auto; height: 28px; }
#topmenu * { padding: 0px; margin: 0px; }
#topmenu { text-align: left; width: 416px; margin: 0px auto !important; margin-left: 300px; padding: 0px; font-family: myriad, helvetica, arial, sans-serif; }
#topmenu ul { list-style-type: none }
#topmenu li { padding: 0px 1px 0px 0px; float: left; }
#topmenu a { background: url(../images/tab_corner_design_hidden.gif) top left no-repeat; color: #0A7F3D; display: block; font-size: 13px; line-height: 25px; margin: 0px; text-transform: uppercase; font-weight: bold; text-align: center; text-decoration: none; height: 28px; width: 81px; text-shadow: #FFFFFF 1px 1px 0px; outline: none; }
#topmenu a:hover { background: url(../images/tab_corner_design_hover.gif); color: #FFFFFF; text-decoration: none; text-shadow: none; }
#topmenu a:active { text-decoration: none; }
#topmenu #current a { background: url(../images/tab_corner_design.gif); color: #0A5228; text-decoration: none; }


/* containers */

#container { margin: 0px auto !important; width: 1030px; min-height: 100%; background-image: url(../images/web_page_shadows.gif); background-repeat: repeat-y; background-color: transparent; }

#innercontainer { margin: 0px auto; width: auto; min-height: 100%; background-color: transparent; }

#moreinnercontainer { margin: 0px auto; width: auto; background-color: transparent ; min-height: 100%; }



/* navcolumn, maincolumn and thirdcolumn - general layout  */

#navcolumn  { float: left; position: relative; width: 240px; margin: 35px 30px 30px 10px; height: auto; background-color: transparent; }

#maincolumn    { float: left; position: relative; margin: 30px 0px 30px 0px; width: 400px; height: auto; min-height: 1125px; padding-right: 24px; border-right: 1px dotted #888888; padding-left: 24px; border-left: 1px dotted #888888; }

#thirdcolumn { background-color: transparent; float: left; width: 230px; margin: 30px 0 30px 30px; height: auto; }


/* navcolumn, maincolumn and thirdcolumn - details; also see values in general layout up above */

/* navcolumn details */

#navcolumn { text-align: right; background-color: transparent; }
#navcolumn * { text-align: right; }
#navcolumn ul { width: 240px; }
#navcolumn li { list-style-type: none; list-style-position: inside;  }
#navcolumn li a { }

/* the four icons */

#easy_contact_logo { float: right; margin-bottom:0.25em; }

/* left hoverlink menu */

.linkheading { }
.linkheading a {  text-decoration: none; }
.linkheading a:hover { border-bottom: 1px dotted #255A94; }
.linkheading li { line-height:1.5em;  }

.studio_news div { clear:left; width: 225px; padding:0.25em !important; margin: 0px; text-align:left; }
.studio_news div { background-color: #ffffff; border-bottom: 1px solid #dddddd; padding:2px 2px 1px 2px; }
.studio_news div.news_top_item { background-color: #ffffff; border-top: 1px solid #dddddd; border-bottom:1px solid #dddddd; padding:1px 2px 2px 2px; }
.studio_news img { border: 0px; position: relative; top: 0px; float:right; }
.studio_news em { color: #5F99D7; font-size: 0.9em; line-height:1.5em; }
.studio_news a {  color: #444; text-decoration: none; border: none; }
/*.studio_news div:hover { background-color: #eeeeee; border-color: #eeeeee; }
.studio_news div.news_everyother:hover { background-color: #eeeeee; border-color:#eeeeee; }*/
#news_lastitem { border-bottom:none; }

/* maincolumn details */

#maincolumn { }

#maincolumn h2:first-child { margin-bottom:0.125em; }
#maincolumn h3:first-child { margin-bottom:0.125em; }

#maincolumn .development_price_tag { font-style: italic; padding: 0px; padding-right: 100px; height: 34px; background-image: url(../images/website_design_price_tag_yl.gif); background-repeat: no-repeat; background-position: top left;  color: white ; font-weight: bold; line-height: 30px; text-indent: 15px; margin: 0 0 0.25em 0 }

#maincolumn .featureimage { margin-bottom:1em; }
#maincolumn .featureimage img { border: 1px solid #eee; margin-bottom:1em; }
#maincolumn .featureimage a { border: 1px solid #ffffff; float:left}
#maincolumn .featureimage a:hover { border: 1px solid #255A94; }

#maincolumn .designerme { float: left; padding: 1em 1em 0.25em 0.0625em; }
#maincolumn .designerme img { border: none; }
#maincolumn .designerme a { border: none; text-decoration: none; outline: none; }
#maincolumn .designerme a:hover { }

#maincolumn .top_ten { font-size: 100% ; line-height: 100%;
background: url(../images/nice_design_check_gray.gif) no-repeat;
font-style: italic; text-align: justify; padding: 0px 20px 0px 22px; }

/* contact and request forms */

#maincolumn form fieldset { width: 390px; border: 0px; }
#maincolumn form fieldset * {  font-family: arial, sans-serif; font-size: 12px; color: #666666 }
#maincolumn form fieldset h3 { font-size: 13pt !important; color: #666; border-bottom: 1px dotted; padding: 0.5em 0 0.5em 0; margin: 0 0 1em 0 }

#maincolumn form fieldset dd { padding: 2px 0px 2px 0px; }
#maincolumn form fieldset dt { padding: 2px 0px 2px 0px; }
#maincolumn form dt { float: left; }
#maincolumn form dd { text-align: right; }

#maincolumn form .required { font-weight: bold; }

#maincolumn form input { border: 1px solid #ddd; background-color: #eee; }

#maincolumn form .checkboxes_left  { clear: both; width: 190px; float: left; background-color: #eee; line-height: 1.75em }
#maincolumn form .checkboxes_left input { clear: left; float: left; border: 0px; background-color: transparent; }
#maincolumn form dd .checkboxes_left { text-align: left; }

#maincolumn form .checkboxes_right { width: 190px; float: right; background-color: #eee; line-height: 1.75em }
#maincolumn form .checkboxes_right input { clear: left; float: left; border: 0px; background-color: transparent; }
dd .checkboxes_right { text-align: left; }

#maincolumn form textarea { width: 390px; border: 1px solid #ccc; background-color: #eee }
#maincolumn form select { width: 250px; border: 1px solid #ccc; background-color: #eee }
#maincolumn form option { border: 0px; background-color: white; }

#maincolumn .famous_designers { margin-top: 1em; background: url(../images/famous_quote.gif) no-repeat; text-align: justify; font-style: italic; padding: 0px 24px 0px 24px; }
#maincolumn .famous_names { padding: 0px 0px 10px 15px; }


/* thumbnail overview details */

#thirdcolumn * { text-indent: 0px; list-style-type: none; margin: 0px; padding: 0px; }
#thirdcolumn { } /* see values up above in general layout */
#thirdcolumn h2 { font-size: 16px; line-height: 24px; width: 200px; text-align: left; float: left; margin: 0 0 0.5em 0; color: #444444; }
#thirdcolumn ul { margin: 1em 0 3em 0; }
#thirdcolumn li { float: left ; margin: 2px 10px 6px 0px; }
#thirdcolumn li img { border: 1px solid white }
#thirdcolumn li a { background: #fff url(../images/dot.gif) repeat top left;  display: block; padding: 5px; border: 1px solid #ffffff; display: block; float: left; }
#thirdcolumn li a:hover  { border: 1px solid white;  background-color: #ddd;  }

#homes #thirdcolumn #homes_link, #spilledink #thirdcolumn #spilledink_link, #lande #thirdcolumn #lande_link, #shiki #thirdcolumn #shiki_link, #flatout #thirdcolumn #flatout_link, #mcgroup #thirdcolumn #mcgroup_link, #digibee #thirdcolumn #digibee_link, #digibeedesign #thirdcolumn #digibeedesign_link { border: 1px solid white; background-image: url(../images/bg_design_gradient_gray2.gif) }

#lande #thirdcolumn #lande_link:hover, #shiki #thirdcolumn #shiki_link:hover, #flatout #thirdcolumn #flatout_link:hover, #mcgroup #thirdcolumn #mcgroup_link:hover, #digibee #thirdcolumn #digibee_link:hover, #digibeedesign #thirdcolumn #digibeedesign_link:hover { border: 1px solid white; background-image: url(../images/bg_design_gradient_gray2.gif) }

/* footer */

#footer {  padding: 10px 0px 10px 0px; background-color: #cccccc;}
#footer a { background-color: transparent; }
#footer * { }

#footerinner { background-repeat: no-repeat; background-position: 10px 5px; text-align: left; width: 1010px; margin: 0px auto; padding: 10px 0px 10px 0px; position: relative; left: 20px !important; left: 20px;}
#footerinner * { color: #aaa; padding: 0px; margin: 0px; text-indent: 0px; font-size: 11px; }
#footerinner a { color: #888; font-size: 100%; }
#footerinner p { position: relative; left: 0px; }
#footerinner #standards { position: relative; left: 0px; color: #eeeeee; font-size: 100%; padding: 0.5em 0 0.5em 0; font-weight: bold;}

/*
/**
/**
*/

/* Easy Slider */

	#slide-content { clear:left; margin-bottom:1em; height:580px; }

	#slider li a { margin: 0 1em 1em 0; }

	#slider { margin-top:0.5em; clear:left; }

	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:225px;
		height:540px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		display:block;
		width:10em;
		height:3em;
		position:relative;
		left:0;
		top:0px;
		z-index:1000;
		}	
	#nextBtn, #slider1next {}
														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a {}	

	#nextBtn a, #slider1next a {}	
		
	/* numeric controls */	

	ol#controls{
		margin: 1em 20px 0 0;
		padding:0;
		height:18px;	
		}
	ol#controls li{
		margin:0 0 0 10px; 
		padding:0;
		float:left;
		list-style:none;
		height:20px;
		line-height:20px;
		}
	ol#controls li a{
		float:left;
		height:18px;
		line-height:18px;
		background:#eeeeee;
		color:#555;
		padding:0 5px;
		text-decoration:none;
		}
	ol#controls li.current a{
		background:#000000;
		color:#fff;
		}
	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}




