@CHARSET "UTF-8";

html, body
{
        width: 100%;
        height: 100%;
        overflow: hidden;
}

body
{
	position: relative;
	margin: 0px;
	padding: 0px;

	font-family: Verdana,Geneva,'DejaVu Sans',sans-serif; /* This font family is used for everything except text in the header section */
	font-size: 13px; /* This font size is used for all non-heading text and for the motto (i.e. #header-description in the header) */
	color: #FFFFFF; /* This font colour is used for all non-heading text and for inactive headings */
	background-color: #E0E0E0;
}

h1
{
	font-size: 14px;
	margin-top: 6px;
	color: #FF9900;
}

h2
{
	font-size: 12px;
	margin-top: 24px;
	text-decoration: underline;
}

h2.screen
{
	margin-bottom: 18px;
}

h3
{
	font-size: 11px;
	margin-top: 0px;
	font-style: italic;
}

a
{
	color: #FF9900;
	text-decoration: none;
	
}

/* ---------- Classes ---------- */


.underline
{
        text-decoration:underline;
}

.outerBox
{
	/* Empty for now */
}

.innerBox
{
	background-image: url('images/grey_texture.png');
}

.twoColumnList
{
	float: left;
	width: auto;
	/* margin: 0 0 1em 0; */
}

.twoColumnList li
{
	float: left;
	width: 49%;
}

.listitemTitle
{
	/* font-weight: bold; */
	color: #FF9900;
}

.listitemDescription
{
	font-style: italic;
}

/* ---------- IDs ---------- */

#wrapper /* Wrapper for content area of the page */
{
	margin: 0px auto 0px auto;
	width: 900px;
}


#wrapper #inner /* The content area of the page */
{
	position: absolute;
	width: 900px;
	height: 100%;

	background-image: url('images/black_texture.jpg');
	/* border-radius: 15px; */
}

#wrapper #inner #header 
{
	position: relative;
	width: 898px;
	height: 158px;
        border:1px solid #000000;
	margin: 0px;
	padding: 0px;
    
	font-family: Arial,'DejaVu Sans','Liberation Sans',Freesans,sans-serif;
    font-size: 18px;
    color: #FFFFFF;

	 background: #000000; /*  Old browsers */
        
        background-image: url('images/1024px-122_-_Toronto_-_Septembre_2009-blackwhite_filter.jpg');
        background-size: 900px 160px;
	
	
    background-position: left bottom;
	background-repeat: no-repeat;
    /* border-radius: 15px; */ 
}

#header-left
{
	/* background-image: url("images/me_new.jpg");  solo_image1-scaled-bw.png */
        
        /* background: url("images/me_new.jpg");
        background-size: 140px 140px;
        background-repeat: no-repeat; */
        
	width: 159px;
	height: 159px;
        /* border-right:1px solid #FF0000; */
	float: left;
}

#portfolio-main-image
{
        width: 110px;
        height: 110px;
        display:block;
        margin: 29px auto 0px auto;
        border: 5px solid #FFFFFF;
        position:relative;
        -webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
        box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}

#tape
{
        display:none;
        z-index:1;
        height:20px;
        width:100px;
        background: rgba(255,255,255,0.5);
        position:absolute;
        top:21px;
        left:29px;
        -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
        -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

#header-center
{
	float: left;
	height: 160px;
	width: 591px;
        
        
        
}

#header-right
{
    float: left;
    height: 160px;
    width: 130px;
    text-align: center;
    /* background-color: #505050; #E0E0E0; */
    /* background-image: url('images/grey_texture.png'); */
}

#dev-lang-logos-wrapper
{
        position: absolute;
        bottom: 1px;
        margin-left:auto;
        margin-right:auto;
        width:130px;
}

.dev-logo-title
{
    color: #FFFFFF;
    text-shadow:1px 1px #000000;
}

#php-logo-wrapper
{
        width:128px;
        height:57px;
        position:relative;
        background-color:#6082BB;
        /* background-color:#D0D0D0;  #FCFCFD; */
        color:#FFFFFF; /* #6082BB; */
        clear:both;
        margin-top:3px;
        border:1px solid #000000;
        
        
        
        
}

#php-logo-inner-wrapper
{
        width:128px;
        height:36px;
        background-color:#6082BB; /* #D0D0D0; */
        position:relative;
}

#php-logo
{
        width:80px;
        height:39px;
        position:absolute;
        bottom:0px;
        left:25px;
        
        
}

#net-logo-wrapper
{
    background-color:#D0D0D0;
    overflow:hidden;
    padding-top:3px;
    padding-bottom:3px;
    border:1px solid #000000;
    
    
    
}

#net-logo
{
        width: 100px;
}

#wrapper #inner #header #header-maintitle
{
	/* Empty for now */
}

#wrapper #inner #header #header-maintitle #header-title 
{
	position: absolute;
    	margin: 50px 0px 0px 0px;
	width: 760px; /* 880 */
    
	color: #FFFFFF; /* #00CCFF; */
	font-size: 30px;
	font-weight: bold;
    	letter-spacing: 8px;
    	text-align: left; /* center */
        text-shadow:2px 2px #000000;
}

#wrapper #inner #header #header-maintitle #header-title .header-title-firstletter 
{
    
    	color: #00CCFF;
    	font-size: 38px;
    
}

#wrapper #inner #header #header-maintitle #header-subtitle 
{
	position: absolute;
    	margin: 100px 0px 0px 0px;
	width: 428px; /* 760 */
    	font-weight:bold;
	font-size: 22px;
    	color: #FFFFFF; /* #D0D0D0; */
    	text-align: left; /* center */
        text-shadow:2px 2px #000000;
        
        
        
}


#wrapper #inner #header #header-maintitle #header-description 
{
    	position: absolute;
    	margin: 135px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
	width: 594px; /* 760 */
        font-weight:bold;
	text-align: left; /* center */
    	font-family: 'Trebuchet MS',sans-serif;
    	font-size: 13px;
    	
    	color: #000000; /* #00CCFF; */
        background-color:#FFD700;
        opacity:0.8;
        border:1px solid #000000;
        
}

#wrapper #inner #tab_container /* Container for the entire tab area */
{
	position: relative;
	margin: 25px 0px 0px 39px;
	width: 835px; /* 550px */
	height: calc(100% - 495px); /* 415px; */
        float: left;
}

#wrapper #inner #tab_container ul.tab_header
{
	margin: 5px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	display: inline-block;
	height: 22px;
}

#wrapper #inner #tab_container ul.tab_header li
{
	display: inline;
	margin: 0px 15px 0px 0px;
}

#wrapper #inner #tab_container ul.tab_header li a
{
	padding: 5px 5px 5px 5px;
	background: #FFFFFF;
}
 
#wrapper #inner #tab_container ul.tab_header li a:hover
{
	color: #FF9900;
}

#wrapper #inner #tab_container ul.tab_header a.tab, 
#wrapper #inner #tab_container ul.tab_header a.active
{
	font-size: 14px;
	text-decoration: none;
	background-color: #000000;
}


#wrapper #inner #tab_container ul.tab_header a.tab
{
	color: #FFFFFF;
}
 
#wrapper #inner #tab_container ul.tab_header a.active
{
	color: #FF9900;
}

#wrapper #inner #tab_container #tab_content
{
        /* height:75%; */
        
        -webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
        box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
        
}
 
#wrapper #inner #tab_container #tab_content .content
{
 	padding: 0px 10px 0px 0px;
 	margin: 0px 0px 0px 0px;
	height: 100%; /* 355px */
 	width: 783px; /* 90%; 530px; */
	
	background-image: url('images/grey_texture.png');
	overflow: auto;
}

#wrapper #inner #tab_container #tab_content .content #bookList li
{
	font-style: italic;
}

#wrapper #inner #tab_container #tab_content .content div#refficient-logo
{
        float:right;
        width:143px;
        height:93px;
        background-color:#FFFFFF;
        border:1px solid #000000;
        margin-left:10px;
}

#wrapper #inner #tab_container #tab_content .content div#refficient-logo img
{
        width:138px;
        margin-top:30px;
        margin-left:1px;
}

#wrapper #inner #tab_container #tab_content .content div#refficient-home-page
{
        margin-left:12px;
        margin-top:7px;
        float:left;
        width:301px;
        height:218px;
        text-align:center;
}

#wrapper #inner #tab_container #tab_content .content div#refficient-home-page div
{
        
        border:1px solid #000000;
        overflow:hidden;
        width:301px;
        height:196px;
        background-color:#FFFFFF;
        
        
}

#wrapper #inner #tab_container #tab_content .content div#refficient-home-page div img
{
        width:100%;
}

#wrapper #inner #tab_container #tab_content .content table#refficient-achievements tr
{
        vertical-align:top;
}

#wrapper #inner #tab_container #tab_content .content table#refficient-achievements td.checkmark-column
{
        width:34px;
        text-align:center;
}

#wrapper #inner #tab_container #tab_content .content img#evereone-logo
{
        float:right;
}

#wrapper #inner #tab_container #tab_content .content img#woas-logo
{
	width: 143px; 
	height: 93px;
	float: right;
	margin: 0px 0px 0px 10px;
        border:1px solid #000000;
}

#wrapper #inner #tab_container #tab_content .content div#intro-photo-holder
{
        position:relative;
        float:right;
        width:298px;
        height:243px;
        text-align:center;
        background-color:#282828;
        border:1px solid #282828;
        border-radius:5px;
        margin-right:54px;
        margin-top:75px;
}

#wrapper #inner #tab_container #tab_content .content div#intro-photo-holder div
{
        width:298px;
        height:222px;
        overflow:hidden;
        margin-left:auto;
        margin-right:auto;
        border-radius:5px 5px 0px 0px;
}


#wrapper #inner #tab_container #tab_content .content img#intro-photo
{
	height: 100%;
}


/*
#wrapper #inner #tab_container #tab_content .content div#intro-photo-caption
{
        position:absolute;
        width:300px;
        height:50px;
        bottom:0px;
        left:0px;
        color:#FFFFFF;
        background-color:#0000FF;
	text-align:right;
        font-weight:bold;
        opacity:0.7;
}
*/

#wrapper #inner #tab_container #tab_content .content img.pf-item-desc-photo
{
	width: 143px; 
	height: 93px;
	float: left;
	margin: 0px 0px 12px 12px;
	border: 1px solid #000000;
}

#wrapper #inner #tab_container #tab_content .content hr
{
	margin: 30px 0px 30px 0px;
}

#wrapper #inner #tab_container #tab_content .content ol li
{
	margin-bottom: 24px;
}

#wrapper #inner #tab_container #tab_content .content ul li
{
	margin-bottom: 6px;
}
 

#content_2 /* The second tab's content is not shown by default (only when clicked) */
{ 
	display:none; 
}

/* ---------- Portfolio-specific selectors start here ---------- */

.fakelink
{
	cursor: pointer; /* make the text clickable */
	text-decoration: none;
	font-weight: bold;
	color: #FF9900;
	display: block;
	clear: left;
}

.hide_pf-item-desc
{
	display: none;
}

.portfolio-item-description
{
	
}

.hide
{
        display: none;
}

.show_pf-item-desc
{
	display: block;
}


/* ---------- Portfolio-specific selectors end here ---------- */

#wrapper #inner #tab_container #tab_content
{
	padding: 22px 26px 4px 26px; /* The padding here is needed to pad ".content" enough (in order to overcome rounded corner overlapping) */
	height: 100%; /* 359px; */
	width: 769px; /* 90%; 540px; */
	margin: 0px 0px 0px 0px;
	border: 2px solid #000000;
}

#wrapper #inner #sidebar
{
	position: absolute;
	/* margin: 4px 0px 0px 1px; */
	width: 217px; /* 333px; */
	height: 218px; /* 407px; */
	background-color: transparent;
        left: 3px;
        top: 3px;
}

iframe.twitter-timeline
{
        height: 218px !important;
}


#wrapper #inner #footer
{
	position: absolute;
        bottom: 0px;
	width: 900px;
	height: 225px;
	color: #FFFFFF;
	/* text-align: center; */
        background-color:#000000;
}

#wrapper #inner #footer #footer-middle-banner-heading
{
        position:absolute;
        left:50%;
        width:140px;
        height:22px;
        background-color:#000000;
        margin:16px 0px 0px -70px;
        text-align:center;
        z-index:100;
        color:#989898;
}


#wrapper #inner #footer #footer-middle-banner-container
{
        position:absolute;
        top:22px;
        left:50%;
        width:420px;
        height:181px;
        margin:0px 0px 0px -210px;
        background-color:#000000; /* #C0C0C0; #FF9900; */
        border:1px solid #484848;
}

#wrapper #inner #footer #footer-middle-banner-container #footer-middle-banner-container-top-text
{
        position:absolute;
        width:250px;
        top:0px;
        left:50%;
        margin:0px 0px 0px -125px;
        
}

#wrapper #inner #footer #footer-middle-banner-container #footer-middle-banner-container-bottom-text
{
        position:absolute;
        width:364px;
        height:55px;
        bottom:0px;
        left:50%;
        margin:0px 0px 0px -182px;
}

#wrapper #inner #footer #footer-middle-banner
{
        position:absolute;
        width:364px;
        height:126px;
        background-color:#FFD700;
        margin:0px auto 0px -182px;
        top:26px;
        left:50%;
        /*
        margin:auto auto auto auto;
        left:0px;
        right:0px;
        top:0px;
        bottom:0px;
        */
}

#wrapper #inner #footer #footer-middle-banner-inner-left
{
        position:relative;
        width:189px;
        height:100%;
        /* border-right:1px solid #FF9900; */
        float:left;
        background-color:#606060;
}

#wrapper #inner #footer #footer-middle-banner-inner-right
{
        position:relative;
        width:161px;
        height:126px;
        /* border-right:1px solid #FF9900; */
        float:right;
        background-color:#333333; /* #606060; */
        
        /* background-image: url('images/grey_texture.png'); */
	/* overflow: auto; */
        
        
        padding:0px 7px 0px 7px;
        font-size:12px;
}

#wrapper #inner #footer #footer-middle-banner-inner-right span
{
        display:inline-block;
        position:absolute;
        width:150px;
        height:76px;
        top:7px;
        left:0px;
        right:0px;
        bottom:0px;
        margin:auto auto auto auto;
}

#wrapper #inner #footer #footer-art
{
        /* width:204px; */
        height:216px;
        width:213px;
        /* border:5px solid #FF9900; */
        /* margin:3px 3px 3px 3px; */
        position:absolute;
        right:3px;
        top:3px;
        background-color:#333333;
        border:1px solid #444444;
        /* border-radius:4px; */
}

#wrapper #inner #footer #footer-art2
{
        /* border-radius:5px; */
        /* border:5px solid #FF9900; */
        margin:auto auto auto auto;
        position:absolute;
        height:100%;
        left:0px;
        top:0px;
        right:0px;
        bottom:0px;
        
}

#wrapper #inner #footer #footer-art #footer-art-inner
{
    width:190px;
    height:214px;
    margin:0px auto 0px auto;
}

#wrapper #inner #footer #footer-art #footer-art-inner h1
{
    text-align:center;
}

#wrapper #inner #footer #footer-art #footer-art-inner #contact-holder
{
    width:100%;
    height:190px;
    margin:0px 35px 35px 0px;
}

#wrapper #inner #footer #footer-art #footer-art-inner #contact-holder div
{
    position:relative;
    float:left;
        
}


#wrapper #inner #footer #footer-art #footer-art-inner #contact-holder div#contactMailBox a div:hover
{
    background-color:#C0C0C0;
    border:1px solid #C0C0C0;
    color:#000000;
}

#wrapper #inner #footer #footer-art #footer-art-inner #contact-holder div#contactLinkedInBox a div:hover
{
    background-color:#2891C5;
    border:1px solid #2891C5;
}

#wrapper #inner #footer #footer-art #footer-art-inner #contact-holder div#contactTwitterBox a div:hover
{
    background-color:#33CCFF;
    border:1px solid #33CCFF;
}

#wrapper #inner #footer #footer-art #footer-art-inner #contact-holder div#contactFacebookBox a div:hover
{
    background-color:#3B5B99;
    border:1px solid #3B5B99;
}







#wrapper #inner #footer #footer-art #footer-art-inner #contact-holder div a
{
    color:#FFFFFF;
    /* font-size:14px; */
    
}

#wrapper #inner #footer #footer-art #footer-art-inner #contact-holder div a:hover
{
    color: #FFFFFF; /* #FF9900; */
}

#wrapper #inner #footer #footer-art #footer-art-inner #contact-holder div a div
{
    text-align:center;
    height:87px;
    width:90px;
    border:1px solid #FFFFFF;
    border-radius:3px;
    background-color:#000000;
    margin:0px 1px 0px 1px;
}

#wrapper #inner #footer #footer-art #footer-art-inner #contact-holder div a div i
{
    font-size:27px;
    margin-top:18px;
}

#wrapper #inner #footer #footer-contactinfo-description
{
	position: absolute;
	margin: 0px auto 0px -100px;
	/* padding: 0px 200px 0px 200px; */
	height: 20px;
        text-align: center;
        width: 200px;
        left: 50%;
        bottom: 58px;
}

#wrapper #inner #footer #footer-contactinfo
{
	position: absolute;
	margin: 0px 0px 0px -88px;
	height: 200px;
	width: 176px;
        left: 50%;
        bottom: 4px;
}

#wrapper #inner #footer #footer-contactinfo a
{
	text-decoration:none;
}

#wrapper #inner #footer #footer-contactinfo a img
{
	
	
}

#wrapper #inner #footer #footer-contactinfo .contactimg
{
	vertical-align: bottom;
	border-style: none;
	width: 25px;
	height: 25px;
	display: block;
	float: left;
}

#wrapper #inner #footer #footer-contactinfo #logo-email
{
	
}

#wrapper #inner #footer #footer-contactinfo #logo-email:hover
{
	margin-top: 2px;
}

#wrapper #inner #footer #footer-contactinfo #logo-linkedin
{
	/* margin: 0px 10px 0px 24px; */
	border-radius: 5px;
}

#wrapper #inner #footer #footer-contactinfo #logo-linkedin:hover
{
	margin-top: 2px;
}


#wrapper #inner #footer #footer-contactinfo #logo-twitter
{
	/* margin: 0px 20px 0px 10px; */
	
}

#wrapper #inner #footer #footer-contactinfo #logo-twitter:hover
{
	margin-top: 2px;
	
}

#wrapper #inner #footer #footer-contactinfo #logo-facebook
{
	
	border-radius: 5px;
}

#wrapper #inner #footer #footer-contactinfo #logo-facebook:hover
{
	margin-top: 2px;
	
}

#wrapper #inner #footer-b
{
        display:none;
	position: absolute;
        bottom: 10px;
	width: 400px;
	height: 16px;
	color: #C0C0C0;
	text-align: center;
        background-color: #000000; /* #181818; */
        font-size: 11px;
        font-weight: bold;
        margin-left:250px;
}

iframe
{
        display: block;
}

.clearBoth
{
        clear: both;
}

.small
{
        font-size: 12px;
}

.xsmall
{
        font-size: 11px;
}

.strong
{
        font-weight: bold;
}


.skills-table tr:nth-child(odd)
{
        background-color:#282828;
}

.skills-table tr:nth-child(even)
{
        background-color:#383838;
}

.skills-table th
{
        text-align:center;
        color:#993333;
}

.skills-table td
{
        border:1px solid #000000;
        text-align:center;
}

#skills-table-stengths
{
        width:100%;
}

#skills-table-stengths td:first-child
{
        text-align:right;
        font-weight:bold;
        background-color:#993333;
        color:#000000;
}

#skills-table-some-experience, #skills-table-learning
{
        position:relative;
        width:50%;
        float:left;
}