body {
    background: #000 url(/img/bg.jpg) top center no-repeat ;
    color: #eee;
    
    font-family: "georgia", "times", sans serif;
    font-size: 12px;
    
    line-height: 20px;
    
    padding:0;
    margin:0;
}

a {
    /* color: #20d5ff; */
    color: #fff;
    text-decoration: none;
}

    a:hover {
        text-decoration: none;
    }
    
    a img {
        border: 0;
    }


form {
	padding:0;
	margin:0;
}



#page {
    width: 850px;
    margin: 0 auto;
    
    padding: 65px 0 0 0;
    
}

.clr {
    clear: both;
}

    .clr hr {
        display: none;
    }

h1#logo{
    
    padding:0;
    margin: 0;
    
    float: left;
    
    font-family: "georgia", "times", sans serif;
    
    font-weight: bold;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size:10px;
    line-height: 10px;
    
    
}

    h1#logo a {
        color: #fff;
        text-decoration: none;
    }

    h1#logo a span {
        /*
	    color: #696969;
	*/
	color: #7A868D;
	/* #4a565d; */
	/* #5b6970; */
        font-weight: normal;
    }



#menu{
    float: right;
    
    list-style: none;
    
    margin: 0;
    padding: 0 0 68px 0px;
}

    #menu li {
        float: left;
        padding: 0 20px 0 0;
        
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size:10px;
        line-height: 10px;
    }

    #menu li a{
	/*
        color: #4a565d;
	*/
	color: #7A868D;
        text-decoration: none;
    }

    #menu li.active a {
        color: #fff;
        
    }
    
    #menu li a span.and {
        font-family: "palatino linotype", "georgia", "times", serif;
        font-style: italic;
        
        display: inline;
        width: auto;
    }
    
        #menu li.active span.and {
            color: #fff;
        }


#title {
    padding: 0 0 54px 0;
    margin:0;
    
    height: 186px;
    
    background: url(/img/title.png) no-repeat top left;
}

	.title_logotypes {
		padding: 0 0 12px 0 !important;
		background: url(/img/title_logotypes.png) no-repeat top left !important;
	}

	.title_webdesign {
		padding: 0 0 12px 0 !important;
		background: url(/img/title_webdesign.png) no-repeat top left !important;
	}

	.title_icons_and_interfaces {
		padding: 0 0 12px 0 !important;
		background: url(/img/title_icons_and_interfaces.png) no-repeat top left !important;
	}

	.title_back {
		padding: 0 0 12px 0 !important;
		background: url(/img/title_back.png) no-repeat top left !important;
	}

	.title_contacts {
		padding: 0 0 12px 0 !important;
		background: url(/img/title_contacts.png) no-repeat top left !important;
	}


    #title p {
        display: none;
    }



#showcase {
    list-style: none;
    
    margin: 0;
    padding: 0 0 69px 0px;
}

    #showcase li {
        float: left;
        margin: 0;
        
        width: 225px;
        
        text-align: center;
    }

    #showcase li.first {
        padding: 0 88px 0 0;
    }

    #showcase li.center {
        padding: 0 87px 0 0;
    }

    #showcase li.last {
        padding: 0;
    }

    
        #showcase li h2 {
            padding: 18px 0 9px 0;
            margin: 0;
            
            font-size: 14px;
            letter-spacing: 0.1em;
            font-weight:normal;
            line-height: 22px;
            text-transform: uppercase;
            
            color: #fff;
            
        }
        
            #showcase li h2 i {
                display: block;
                
                font-size:9px;
                letter-spacing:0;
                line-height:9px;
                
                color: #8fa0a9;
                text-transform: lowercase;
            }
    
        #showcase li .vertical_line {
            padding: 0;
            margin: 0;
            height: 73px;
            background: url(/img/vl-home.gif) repeat-y top center;
        }
        
        #showcase li .more {
            display: block;
            
            padding: 14px 0 0;
            
            font-size: 9px;
            font-style: italic;
            letter-spacing: 0;
            line-height: 17px;
            
            color: #fff;
        }
    
    
    #showcase li a span.and {
        font-family: "palatino linotype", "georgia", "times", serif;
        font-style: italic;
        
        display: inline;
        width: auto;
    }
    
        #showcase li.active span.and {
            color: #000;
        }
    


#content {

}

	#content .col {
		float: left;
		width: 193px;

		text-align: center;

		padding: 0 19px 0 0;
		margin:0;
	}

		#content .col .item {
			padding: 0 0 19px 0;
			clear: both;
		}

			#content .col .item a {
				display: block;
				padding:0 0 11px;

				background: #fff;
			}

			#content .col .item span {
				display: block;
				padding: 4px 5px 0 5px;

				font-size: 10px;
				line-height: 13px;
				letter-spacing: 0.1em;
				text-transform: uppercase;


				color: #656d77;
			}

			#content .col .item i {
				display: block;
				padding: 3px 0 0 0;

				font-size: 9px;
				line-height: 10px;
				text-transform: lowercase;

				color: #8fa0a9;
			}


	#content .text {
		background: #fff;
		color: #000;

		padding: 10px 28px 28px 28px;

		text-align: center;
	}

		#content h2 {
			padding: 18px 0 9px 0;
            margin: 0;
            
            font-size: 14px;
            letter-spacing: 0.1em;
            font-weight:normal;
            line-height: 22px;
            text-transform: uppercase;
		}
		
		#content a {
			color: #8fa0a9;
			text-decoration: none;
		}

		#content p {
			padding: 8px 0;
			margin: 0;

			font-size:9px;
			font-style: italic;
			letter-spacing:0;
			line-height:17px;

			color: #8fa0a9;
		}

			#content .text .images p {
			
			}

		#content .text .images .description {
			padding: 0px 0 16px 0;
			margin: 0;
			font-size:9px;
			font-style: italic;
			letter-spacing:0;
			line-height:17px;

			color: #000;
		}

		#content h2 i {
                display: block;
                
                font-size:9px;
                letter-spacing:0;
                line-height:9px;
                
                color: #8fa0a9;
                text-transform: lowercase;
        }

		#content .images {
			padding: 15px 0 15px 0;
		}

		#content .vertical_line {
		    padding: 0;
			margin: 0;
			height: 36px;
			background: url(../img/vl-work.gif) repeat-y top center;
		}



	#content .first {
		float: left;

		width: 405px;
		padding: 0 19px 0 0;
		margin: 0;

		text-align: center;

	}

		#content h2 {
			color: #000;
		}

		#content .bgr {
			background: #fff;
			padding: 0 19px 19px 19px;
		}

	#content .about,
	#content .social{
		float: left;
		padding: 0;

		width: 193px;
		text-align: center;

	}

		#content .about {
			padding: 0 19px 0 0;
		}

		#content .first p {
			color: #aaa;
		}

		#content .about p,
		#content .social p {
				color: #444;
		}

			#content .social p {
				padding: 0 0 2px 0 !important;
			}

		#content .first input.textinput,
		#content .first textarea.textinput{
			width: 300px;
			border: solid 1px #ccc;
			padding: 4px;

			text-align: center;
			font-size: 122x;

			font-family: "georgia", "times", serif;
		}

		#content .first textarea.textinput {
			font-size: 11px;
			height: 110px
		}

		#content .first input.send {
			padding: 8px 0 0 0;
		}

		#content .first p {
			padding: 8px 0 2px 0 !important;
		}


		
		#content h3 {
			color:#697C86;

			font-size:9px;
			font-style:normal;
			font-weight: bold;
			letter-spacing:0.1em;
 			text-transform:uppercase;

			padding: 8px 0 0 0;
			margin: 0;
		}

			#content h3 a {
				color: #fff !important;
				background-color:#697C86;
				padding: 2px 4px;
			}


/*
	#content .nav {
			padding: 8px 0 0 42px;
			width: 720px;
				            
			clear: both;
			list-style: none;

			font-size:9px;
			letter-spacing:0;
			line-height:9px;

	}
															        
	#content .nav li {
			float: left;
            width: 240px;
            padding: 0;

			font-style: italic;

			text-align: left;
    }
*/


	#content .nav {
            padding: 18px 0 0 0;
			margin: 0 auto;

            list-style: none;

            font-size:9px;
            letter-spacing:0;
            line-height:9px;

    }

    #content .nav span {
            padding: 0 26px;

            font-style: italic;
    }


	#content .nav span.separator {
		color: #ccc;
	}
							
	#content .nav span.back a {
			color: #697c86 !important;

			font-size: 9px;

			text-transform: uppercase;
			font-style: normal;
			letter-spacing: 0.1em;
	}

    #content .nav span.next {
		
    }


#footer {
    padding:88px 0 26px;
    
    font-size:9px;
    font-style:italic;
    line-height:18px;
    text-align:center;
    
    color: #484f57;
}

    #footer a {
        color: #484f57;
        text-decoration: underline;
    }



#c {
    padding:14px 0 41px 0;
    text-align:center;
}

    #c img {
        background: url(/img/sattu_logo.png) no-repeat top left;
    }