/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* Filename: style.css
* Website: 
* Author: Jakub Chodorowicz http://www.jakub.chodorowicz.pl/

== STRUCTURE: ==============================
* Page width: 948 px
* Number of columns: ---
============================================

== COLORS: =================================
* dark grey: #646464
* dark grey bg: #0b0b0b
* light gray text: #d5d5d5
* semi gray text: #737373
* blue: #0467e1
* * blue:hover: #034ca7
============================================

* background:transparent url(../images/blank.gif) no-repeat scroll left top;
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* links & typography 
----------------------*/


a, span {text-decoration:none; font-size:12px;}
body {font-family: Helvetica, Arial, sans-serif; background:#0B0B0B;}

.content {color:#d5d5d5;}
	.content h2 {color:#d5d5d5; font-size:18px; padding:4px 0 6px 0px;}
	.content h3 {color:#d5d5d5; font-size:14px; padding:10px 0px;}
	.content small {font-size:10px; padding-bottom:10px; color:#737373; display:block;}
		.content small a {font-size:10px;  color:#737373;}
		
		a[href$='.zip']{
			background:url(../images/Box_download.png) center left no-repeat;
			margin:5px 0px;
			display:block;
			padding:10px 5px 10px 34px;
			border:none !important;
		}
	.content p, .content li {color:#737373; font-size:12px; padding-bottom:10px; }
		.content p {line-height:18px;}

.list a {color:#0467e1; border-bottom:1px dashed #0467e1;}
.content a, #footer a {color:#737373; border-bottom:1px dashed #737373;}

	.list a:hover, #footer a:hover, .content a:hover {color:#fff; background-color:#034ca7; border-bottom:1px dashed #034ca7;}

#info li {color:#646464; font-size:12px; letter-spacing:1px;}
#menu a {font-size:12px; color:#fff;}

.beta-box, .list h2, .beta-box2 h2  {font-size:12px; text-transform:uppercase; color:#d5d5d5;}
.list li {color:#d5d5d5; font-size:12px;}
.list li span {color:#737373}

#footer span {color:#737373;}



/* layout 
-----------------------*/
#body {}
#wrapper {
	background:url(../images/middle_bg.jpg) repeat;
	padding-bottom:20px;
	min-height:100% !important;
	position:relative;
}

#container, #middle, #footer-inner {margin:0px auto; width:960px;}

#top-wrapper {
  background:transparent url(../images/top_bg.jpg) repeat-x scroll left top;
  height:170px;
}
#container {height:170px;}
  #top {height:170px; position:relative; width:100%;}
    #top-light {
      background-image:url(../images/top_light.png);
      position:absolute; left:-40px; top:0;
      width:388px; height:170px;
    }
    #top h1 {position:absolute; top:53px;}
      #top h1 a {
        display:block;
				position:absolute;
        text-indent:-9999px;
        background-image:url(../images/logo-all.png);
        width:382px; height:37px;
      }
			#top h1 span {
				display:block;
				position:absolute;
				background-image:url(../images/logo-all.png);
				background-position: -382px 0;
				width:382px; height:37px;
			}
        #top h1 a:hover {
        }
				
		ul#info {position:absolute; left:92px; top:100px;}
			ul#info li {
				background: url(../images/dot.png) no-repeat 0px 3px;
				padding:0px 0px 7px 15px;
				
			}
			
    ul#menu {position:absolute; right:0; bottom:-3px;}
			ul#menu  li {float:left;}
        ul#menu a {
					z-index:10;
          float:left;
					display:block;
					position: relative;
					height:18px;
					text-transform:uppercase;
        }
#middle-wrapper {
	background:url(../images/middle_top_bg.jpg) repeat-x;
	padding:25px 0px 100px 0px;
}
#middle {min-height:400px; }
	.row {width:960px; margin-top:10px; overflow:hidden;}
		.col-alpha {width:660px; float:left; display:inline;}
			.featured-main, .portfolio-item-main {background-color:#0a0a0a; }
			
			.content {
				width:520px;
				padding:10px 120px 20px 20px;
				min-height:200px;
				background:#0b0b0b url(../images/box_decorative.jpg) no-repeat right bottom;
			}
				div.item {
					padding-bottom:20px;
				}
			    span.more {
					float:right;
                    display:block;
                    text-align:right;
                }
				.content ul {
					margin-left:25px;
				}
					.content ul li{
						padding-left:10px;
						list-style:circle;
					}
		
			.portfolio-item {
				position:relative;
				width:660px; height:330px;
			}
				.technolgies {} /* ELEMENTS */
				.portfolio-item-main {
					position:absolute; top:30px;
					width:inherit; height:300px;
				}
			
			.secondary-row {margin-top:20px; position:relative; height:260px;}
				.secondary-featured {
					width:310px; height:260px;
					background-color:#0a0a0a;
				}
				.secondary-left {position:absolute; left:0; top:0;}
				.secondary-right {position:absolute; left:350px; top:0;}
				
					.secondary-featured img {
						margin:5px;
					}
					
					.secondary-details {
						height:45px;
						position:relative;
						background-color:#0a0a0a;
					}
						.secondary-details ul {padding-left:10px;}
						.secondary-details a.read-more {
							position:absolute; right:5px; bottom:5px;
							background:url(../images/button.jpg) no-repeat;
							width:65px; height:16px;
							border:none;
							color:#d5d5d5;
							font-size:11px;
						}
						.secondary-details a.read-more:hover {
							background-image:url(../images/button-active.jpg);
							border:none; text-decoration:none;
						}
						
							.secondary-details a.read-more span {
								background:url(../images/button.jpg) no-repeat right 0px;
								margin:0px 0px 0px 7px;
								padding:1px 5px 0px 0px;
								display:block; height:16px;
								
							}
								a.read-more span.hover {background:url(../images/button-active.jpg) no-repeat right 0px;}
					.secondary-details ul li {
						padding:5px 0px;
					}
					.secondary-details span {} /* COMMON */
					
			
		.col-beta {
			width:265px;
			padding:0px 0px 0px 35px;
			float:right;
		}
			.details-outer {
				margin-top:30px;
				background-image:url(../images/box_left.png);
				background-repeat:no-repeat;
				background-position:8px 0px;
			}
				.details {
					width:234px; height:300px;
					margin-left:31px;
					background:#0b0b0b url(../images/box_decorative.jpg) no-repeat right bottom;
				}
					.details-inner {padding-left:10px;}
					
						.details h2 {} /* COMMON */
						
						.details li {
							padding:5px 0px;
							
						}
						.details li span.text {line-height:18px; color:#D5D5D5;}
						.details span {} /* COMMON */
													  
		.beta-box {
			margin:20px 0px 0px 31px;
			padding:0px 10px 30px 10px;
			width:214px; min-height:250px; /* TODO */
			background:#0b0b0b url(../images/box_decorative.jpg) no-repeat right bottom;
		}
		
		.beta-box2 {
			width:214px; min-height:250px; /* TODO */
			padding:10px;
			margin:0px 0px 0px 31px;
			padding-bottom:30px;
			background:#0b0b0b url(../images/box_decorative.jpg) no-repeat right bottom;
		}
		
		
	#footer {
		background:#0b0b0b url(../images/bottom_top_bg.jpg) repeat-x;
		height:40px;
		padding:35px 0px 10px 0px;
		position:absolute; bottom:0;
		width:100%;
	}

		#footer .footer-alpha {float:left; position:relative;}
		#footer .footer-theta {float:right;}
		
		#footer .footer-alpha, #footer .footer-theta {
			width:300px; height:45px;
			margin:0px 20px 0px 0px;
			
		}
		
		
		div.footer-alpha ul {float:left; margin-left:50px;}
			div.footer-alpha li {padding-bottom:4px;}
		div.footer-alpha span {position:absolute; top:0; left:0;}
			
		div.footer-theta ul {float:left;}
			#footer-inner span {float:left; padding:4px 5px 0px 0px;}
			#footer-inner ul {}
				#footer li {padding-right:10px;float:left;}
		#footer h2 {}
		#footer ul {}
		


/* common
-----------------------*/
.details h2, .beta-box h2, .beta-box2 h2 {
	background:url(../images/dashed_line.png) repeat-x left bottom;
	padding:10px 10px 10px 0px;
	margin:0px 10px 10px 0px;
}
.details span, .secondary-details span {
	padding-right:5px;
}

/* elements
-----------------------*/

	/* technologies icons */
	.technologies-outer {position:absolute; top:0px; right:0; width:300px; height:30px;}
	.technologies {
		padding:7px 5px 5px 0px;
		position:absolute; top:0px; right:0;
		height:30px;
		background-color:#0b0b0b;
	}
		.technologies li {float:left; display:block; padding-left:5px;}
			.technologies span {width:20px; height:20px; display:block; background-repeat:no-repeat; cursor:help;}
			.zoomoutmenu a.panel {cursor: url(../images/magnify.cur), pointer;}
			.zoomoutmenu img {}
			

			.technologies li.icon-ps span {background-image:url(../images/icon_ps.png);}
			.technologies li.icon-wp span {background-image:url(../images/icon_wp.png);}
			.technologies li.icon-js span {background-image:url(../images/icon_js.png);}
			.technologies li.icon-css span {background-image:url(../images/icon_css.png);}
			.technologies li.icon-modx span {background-image:url(../images/icon_modx.png);}

	/* lavalamp */
	.lavaLamp li {
		margin:0px 0px 0px 35px;
	}
	
	li.backLava {
		padding:0px 0px 0px 0px;
		margin-left:-25px;
		z-index:1;
		position: absolute;
		width:12px;
		height:8px;
		background: url(../images/dot.png) no-repeat 13px 3px;
	}

	/* featured zoom efect */
	.zoomoutmenu {
		margin:5px  auto 0px auto;
		position: relative;
		height: 290px;
		width: 650px;
		overflow:hidden;
	}
	
	.panels {
		height: 290px;
		width: 650px;
		overflow: hidden;
	}
	
	.tabs {
		padding: 0;
		position: absolute;
		bottom: 0;
		z-index: 1;
		width:650px;
		background: url(../images/overlay.png) repeat;
			text-align:center;
		height:20px;
		padding-top:10px;
	}
	
	.tabs li {
		display: inline;
		padding:1px 7px;
		margin:10px;
	}
	
	.tabs li a {
		padding:10px;
		text-decoration: none;
		color: #d5d5d5;
		font-size:14px;
	}
	
	.tabs li a:hover, .tabs li a.hover {
		color: #0467e1;
	}
	
	.panel {
		background: #ccc;
		height: 290px;
		width:650px;
		position: relative;
		display:block;
	}
	
	#one {background-color:blue;}
	#two {background-color:yellow;}
	
	/* qtip */
	.qtip {padding-bottom:10px;}
	

/* Nivo Slider
-----------------------*/
	
/* misc 
-----------------------*/
.left {float:left;}
.right {float:right;}
.clear {clear:both;}
.center-block{margin:0px auto;}