/*-----------------------------------------------------------------------------------------------*/
/*                   BAHUR78 VER.03 - GRAPHIC AND WEB DESIGNER                                   */
/*                   AUTHOR: DARIUSZ "BAHUR78" MARTYN                                            */
/*                   EMAIL: bahur78@googlemail.com                                               */
/*-----------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------------------*/
/*                                  CSS RESET THANKS TO ERIC MEYER                               */
/*                   http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/                */
/*-----------------------------------------------------------------------------------------------*/
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,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {outline: 0;}
body {line-height: 1;color: black;background: white;}
ol, ul {list-style: none;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {text-align: left;font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after {content: '"';}
blockquote, q {quotes: '"' '"';}

/*-----------------------------------------------------------------------------------------------*/
/*                                          GENERAL STYLES                                       */
/*-----------------------------------------------------------------------------------------------*/

*{margin:0; padding:0; outline:none;}/* set all elements to have 0 margin and padding */
body{background:#dcc4a2 url(../images/bg_body.jpg) left top repeat scroll; font-family: Helvetica, Arial, sans-serif; line-height:1.5em; font-size:0.7em !important; color:#1d1a16; border:0 solid rgba(255, 255, 255, 0.2);}
body #loader {width:16px; height:16px; background:url(../images/loader.gif) center center no-repeat; position:absolute; left:50%; top:230px; margin:0 0 0 -8px;}

/****************************** HTML DIV'S STRUCTURE ********************************/

/************************************************************************************/
/********************************** page ********************************************/
/************************************************************************************/


#page{width:100%; height:auto; float:left; margin:0 auto; padding:0; background:url(../images/bg_page.png) top center repeat-x;}
#page #toTop {width:50px; height:50px; background:url(../images/top_btn.png) no-repeat; position:fixed; bottom:0; right:10px; cursor:pointer; text-indent:-1000em;}

/************************************************************************************/
/********************************** header ******************************************/
/************************************************************************************/


#header{width:100%; height:250px; margin:0; padding:0; }
#header #innerheader{width:1000px; height:250px; margin:0 auto; padding:0; position:relative;}

#header #innerheader h1{font-size:1.2em; color:#1d1a16 display:block; text-indent:-1000em; position:absolute; top:50px; left:35px; z-index:1;}
#header #innerheader h1 a{width: 565px; height:160px; display:block; overflow:hidden; text-indent:-1000em; background: url(../images/logo_h1.png) no-repeat; color:#bda782; outline:none;}
#header #innerheader h1 a:hover{background: url(../images/logo_h1.png) no-repeat; background-position: 0 -160px; outline:none;}

#header #innerheader h2{width:1000px; height:100px; display:block; overflow:hidden; font-size:1.2em; color:#1d1a16; text-indent:-1000em; position:absolute; bottom:20px; right:0; background: url(../images/) no-repeat;}

#header #innerheader #usersonline{position:absolute; top:185px; left:170px; border-bottom:0px dashed #1d1a16; padding:0 0 10px 40px; margin:0; text-transform:uppercase; font-size:0.9em; text-shadow:0 1px 1px rgba(224, 206, 180, 1); background:url(../images/bg_online.png) 0 0 no-repeat; width:120px; line-height:60px;}
#header #innerheader #version{position:absolute; top:30px; left:500px; z-index:2; visibility:hidden;}

#header #innerheader ul{display:block; list-style:none; position:absolute; top:25px; right:35px; background:url(../images/follow.png) left center no-repeat; padding:2px 0 2px 200px;}
#header #innerheader ul li{list-style:none; float:left;}
#header #innerheader ul li a{width:36px; height:36px;}
#header #innerheader ul li a span{display:none;}
#header #innerheader ul li a img{display:block; outline:none; border:0; opacity:1; height:36px; width:36px;}
#header #innerheader ul li a:hover img{opacity:1; position:relative; z-index:1;}
#header #innerheader ul li a:hover span{position:absolute; top:-10px;  z-index:2; font-size:0.7em; display:block; color:#493e2c; text-transform:uppercase; text-align:center; -moz-border-radius:15px; -webkit-border-radius:15px; margin:0 0 0 -7px; padding:2px 0px; line-height:1.1em; width:50px;}


/************************************************************************************/
/********************************** navigation **************************************/
/************************************************************************************/


#navigation{width:100%; height:140px; margin:0 0 20px 0; padding:0; background:url(../images/) center center no-repeat;}
#navigation #innernavigation{width:1000px; height:140px; margin:0 auto; padding:0; position:relative;}

#navigation #innernavigation #main_navigation{width:1000px; height:140px; margin:0; padding:0; position:absolute; top:0; left:0;}
#navigation #innernavigation #main_navigation ul{display: block; width:1000px; height:140px; margin:0; padding:0;}
#navigation #innernavigation #main_navigation ul li{display: inline; list-style-type:none; vertical-align:middle; padding:0; margin:0; width:250px; height:140px; float:left;}
#navigation #innernavigation #main_navigation ul li a{width:250px; height:140px; text-indent:-1000em; display:block; overflow:hidden; color:#bda782; outline:none;}
#navigation #innernavigation #main_navigation img{margin: 0; border: 0;}

/********************** main_navigation buttons (link) ******************************/

#navigation #innernavigation #main_navigation_about{background: url(../images/navigation.png) 0 0 no-repeat; outline:none;}
#navigation #innernavigation #main_navigation_work{background: url(../images/navigation.png) -250px 0 no-repeat; outline:none;}
#navigation #innernavigation #main_navigation_contact{background: url(../images/navigation.png) -500px 0 no-repeat; outline:none;}
#navigation #innernavigation #main_navigation_blog{background: url(../images/navigation.png) -750px 0 no-repeat; outline:none;}

/************************ main_navigation buttons (hover) ***************************/

#navigation #innernavigation #main_navigation_about:hover{background: url(../images/navigation.png) 0 -140px no-repeat; outline:none;}
#navigation #innernavigation #main_navigation_work:hover{background: url(../images/navigation.png) -250px -140px no-repeat; outline:none;}
#navigation #innernavigation #main_navigation_contact:hover{background: url(../images/navigation.png) -500px -140px no-repeat; outline:none;}
#navigation #innernavigation #main_navigation_blog:hover{background: url(../images/navigation.png) -750px -140px no-repeat; outline:none;}

/********************** main_navigation buttons (current) ******************************/

#navigation #innernavigation #main_navigation_aboutcurrent{background: url(../images/navigation.png) 0 -280px no-repeat; outline:none; cursor:default;}
#navigation #innernavigation #main_navigation_workcurrent{background: url(../images/navigation.png) -250px -280px no-repeat; outline:none; cursor:default;}
#navigation #innernavigation #main_navigation_contactcurrent{background: url(../images/navigation.png) -500px -280px no-repeat; outline:none; cursor:default;}
#navigation #innernavigation #main_navigation_blogcurrent{background: url(../images/navigation.png) -750px -280px no-repeat; outline:none; cursor:default;}

/************************************************************************************/
/************************************* content **************************************/
/************************************************************************************/


#content{width:100%; height:auto; float:left; margin:0; padding:0;}
#content .spacer, #break{background: url(../images/rule.png) center center no-repeat; width:100%; height:100px; display:block; overflow:hidden; text-indent:-1000em; padding:0; margin:0 auto; clear:both; float:left;}

#content #innercontent{width:1000px; height:auto; margin:0 auto; padding:0;}

#content #innercontent #hello{text-transform:uppercase; font-size:1.2em; color:#1d1a16; display:block; text-indent:-1000em; margin:0; padding:0; background:url(../images/hello2.png) center center no-repeat; width:1000px; height:100px;}

#content #innercontent #primary{width:720px; height:auto; float:left; margin:0; padding:0 15px; position:relative; text-shadow:0 1px 1px rgba(224, 206, 180, 1);}
#content #innercontent #primary p{padding:0; margin:0; font-size:1.1em}
#content #innercontent #primary h3{text-transform:uppercase; font-size:1.2em; color:#1d1a16; display:block; text-indent:-1000em; margin:-40px 0 0 0; padding:0;}

#content #innercontent #primary #myprofile{ background:url(../images/my_profile.png) center center no-repeat; width:720px; height:100px;}
#content #innercontent #primary #myservice{ background:url(../images/my_service.png) center center no-repeat; width:720px; height:100px;} 
#content #innercontent #primary #myawards{ background:url(../images/my_awards.png) center center no-repeat; width:720px; height:100px;}
#content #innercontent #primary #mygraphics{ background:url(../images/my_graphics.png) center center no-repeat; width:720px; height:100px;}
#content #innercontent #primary #mywebsites{ background:url(../images/my_websites.png) center center no-repeat; width:720px; height:100px;}
#content #innercontent #primary #mycontact{ background:url(../images/my_contact.png) center center no-repeat; width:720px; height:100px;}

#content #innercontent #primary #available{position:absolute; top:30px; right:60px; height:210px; widows:180px; display:block;}
#content #innercontent #primary #available h4{text-transform:uppercase; font-size:1.2em; color:#1d1a16; display:block; text-indent:-1000em; margin:0; padding:0; width:180px; height:210px; display:block;}
#content #innercontent #primary #available h4 a{background:url(../images/available.png) 0 0 no-repeat; width:180px; height:210px; display:block;}
#content #innercontent #primary #available h4 a:hover{background:url(../images/available.png) -180px 0 no-repeat; width:180px; height:210px;}

#content #innercontent #primary ul#awards{display:block; list-style:none;}
#content #innercontent #primary ul#awards li{list-style:none; width:130px; float:left; margin:0 17px 10px 0; padding:20px 0; background:url(../images/bg_awards.png) center 
center no-repeat; text-align:center;}


#content #innercontent #secondary{width:250px; height:auto; min-height:100px; float:left; margin:0; padding:0; text-align:left; position:relative; text-shadow:0 1px 1px rgba(224, 206, 180, 1); background:url(../images/divider.png) top right repeat-y;}
#content #innercontent #secondary p{padding:0; margin:0 0 20px 0; font-size:1.2em;}
#content #innercontent #secondary h3{width:250px; height:48px; display:block; font-size:1.1em; text-align:center; text-transform:uppercase; padding:22px 0 0 0; background:url(../images/bg_secondary_h3.png) center center no-repeat; }
#content #innercontent #secondary .secondaryinner{padding:0 15px; height:auto;}

#content #innercontent #secondary ul#socialnetwork{dispaly:block; width:220px; float:left; overflow:hidden; list-style:none; position:relative; margin:15px 0 0 0;}
#content #innercontent #secondary ul#socialnetwork li{display:block; list-style-type:none; vertical-align:middle; padding:0; margin:0; width:220px; height:50px;}
#content #innercontent #secondary ul#socialnetwork li a{width:220px; height:50px; text-indent:-1000em; display:block; overflow:hidden; outline:none; border:0;}
#content #innercontent #secondary ul#socialnetwork li a:hover{text-decoration:none; border:0;}

#content #innercontent #secondary #socialnetwork #twitter{ background:url(../images/socialnetwork.png) 0 0 no-repeat; width:220px; height:50;}
#content #innercontent #secondary #socialnetwork #twitter:hover{ background:url(../images/socialnetwork.png) -220px 0 no-repeat; width:220px; height:50;}
#content #innercontent #secondary #socialnetwork #facebook{ background:url(../images/socialnetwork.png) 0 -50px no-repeat; width:220px; height:50;}
#content #innercontent #secondary #socialnetwork #facebook:hover{ background:url(../images/socialnetwork.png) -220px -50px no-repeat; width:220px; height:50;}
#content #innercontent #secondary #socialnetwork #flicker{ background:url(../images/socialnetwork.png) 0 -100px no-repeat; width:220px; height:50;}
#content #innercontent #secondary #socialnetwork #flicker:hover{ background:url(../images/socialnetwork.png) -220px -100px no-repeat; width:220px; height:50;}
#content #innercontent #secondary #socialnetwork #lastfm{ background:url(../images/socialnetwork.png) 0 -150px no-repeat; width:220px; height:50;}
#content #innercontent #secondary #socialnetwork #lastfm:hover{ background:url(../images/socialnetwork.png) -220px -150px no-repeat; width:220px; height:50;}


#content #innercontent #secondary #tababout{background: url(../images/tab_about.png) top center no-repeat; width:250px; height:350px; display:block; overflow:hidden; text-indent:-1000em; padding:0; margin:0 auto;}


/************************************************************************************/
/************************************* footer ***************************************/
/************************************************************************************/


#footer{clear:both; float:left; margin:0; width:100%; height:auto; background: url(../images/bg_footer_2.png) bottom center repeat-x; padding:0; text-shadow:0 1px 1px rgba(224, 206, 180, 1);}

#footer #credit{width:970px; height:auto; padding:15px 0; margin:0 auto; text-align:left;}

#footer #credit ul#footernav {list-style:none; float:left; font-size:1em; border-right:1px solid #2d1600; margin:0 0 20px 15px;}
#footer #credit ul#footernav li{overflow:hidden;  /*--Important - Masking out the hover state by default--*/ float:left; height:10px; border-left:1px solid #2d1600;}
#footer #credit ul#footernav a, ul#footernav span { /*--The <a> and <span> share the same properties since the <span>  will be a duplicate of the <a> tag--*/ padding:0px 10px; float: left; text-decoration: none; color:#2d1600; text-decoration:none; font-weight:bold; outline:none; background: url(a_bg.gif) repeat-x; text-transform: uppercase; clear: both; width: 100%; height: 10px; line-height: 10px; /*--Vertical alignment of text--*/}
#footer #credit ul#footernav a{ /*--This is basically the hover state of navigation--*/color:#004050; background-position: left bottom;}
#footer #credit ul#footernav span{ /*--Default state of navigation--*/background-position: left top;}

#footer #innerfooter{width:1000px; height:420px; background:url(../images/) center center no-repeat; margin:0 auto; padding:0; position:relative;}


#footer #innerfooter #flickr {position:absolute; top:100px; right:10px; font-family: Helvetica, Arial, sans-serif; font-size:1em; width:315px; height:auto; padding:0; margin:0;}
#footer #innerfooter #flickr a img {float:left; margin:5px 5px 0 0; padding:5px; background:#c8ae88; width:90px; height:90px; -moz-border-radius:5px; -webkit-border-radius:5px; border:0px solid #947e55;}
#footer #innerfooter #flickr a:hover img{background:#947e55;}

#footer #innerfooter h2{width:1000px; height:100px; display:block; overflow:hidden; font-size:1.2em; color:#1d1a16; text-indent:-1000em; position:absolute; top:0; left:0; background: url(../images/logo_h2.png) no-repeat; z-index:100;}
#footer #innerfooter h3{font-size:1.1em; font-weight:bold; color:#1d1a16; padding:0; margin:0;}
#footer #innerfooter #tweet{position:absolute; top:60px; left:280px; z-index:1000; display:block;}


/******************************* COMMON SETTINGS ************************************/


.left{text-align:left;} 
.center{text-align:center;} 
.right{text-align:right;}

.floatleft{float:left;} 
.floatright{float:right;} 
.clear{clear:both;}

.bold{font-weight:bold;}
.uppercase{text-transform:uppercase;}
.largefont{font-size:1.4em; font-weight:bold; line-height:1.4em;}
.smallfont{font-size:1em; text-transform:none; font-weight:normal;}
.alert{font-weight:bold; text-transform:uppercase; color:#740000;}
.text{border:1px solid #947e55; background: url(../images/bg_text.png) center center repeat; -moz-border-radius:5px; -webkit-border-radius:5px; padding:5px 10px;}


.frame{float:left; width:auto; height:auto; margin:0 30px 0 0; text-align:center; color:#1d1a16;}
.frame img{display:block; padding:0;}

.frameleft{float:left; width:auto; height:auto; margin:30px 30px 0 0; text-align:left; color:#1d1a16;}
.frameright{float:left; width:auto; height:auto; margin:30px 0 0 30px ; text-align:left; color:#1d1a16;}
.frameleft img, .frameright img{display:block; padding:0 0 15px 0;}

.framelarge{float:left; width:auto; height:auto; margin:30px 0 0 0; text-align:left; color:#1d1a16;}
.framelarge img{display:block; padding:0 0 15px 0;}

a, a:link, a:visited{color:#2d1600; text-decoration:none; font-weight:bold; outline:none;}
a:hover, a:active {color:#004050; font-weight:bold; outline:none;}

img{border:0;}

p{padding:0; margin:0;}

ul{display:block; margin:0; padding:0;}
li{list-style:none; padding:0; font-size:1em; display:block;}

ul.dot{display:block; margin:0; padding:0; float:left; width:100%;}
li.dot{list-style: none; padding:4px 0 4px 30px; margin:1px 0 1px 10px; font-size:1.1em; font-weight:bold; display:block; text-transform:uppercase; background:rgba(77, 59, 31, 0.0) url(../images/bullet_star.png) -10px 0 no-repeat; -moz-border-radius:7px; -webkit-border-radius:7px;}

ul.dotside{display:block; margin:0; padding:0; float:left; width:100%;}
li.dotside{list-style: none; padding:4px 0 4px 30px; margin:1px 0; font-size:1.1em; font-weight:bold; display:block; text-transform:uppercase; background:rgba(77, 59, 31, 0.0) url(../images/bullet_star.png) -10px 0 no-repeat; -moz-border-radius:7px; -webkit-border-radius:7px;}

ul.img{display:block; margin:0 5px; padding:5px 10px; width:690px; border:1px solid #947e55; background: url(../images/bg_text.png) center center repeat; -moz-border-radius:5px; -webkit-border-radius:5px;}
li.img{list-style:none; padding:2px 0; margin:0; font-size:1em; line-height:1em;}

#toTop{display:none; text-decoration:none; position:fixed; bottom:0px; right:100px; overflow:hidden; width:50px; height:50px; border:none; text-indent:-999px; background:url(../images/.png) no-repeat left top;}
#toTopHover{background:url(../images/.png) no-repeat left -50px; width:50px; height:50px; display:block; overflow:hidden; float:left; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0);}
#toTop:active, #toTop:focus{outline:none;}