@import url('960.css');
@import url('reset.css');
@import url('text.css');
.header
{
    float:left;
    width:940px;
}
body { overflow: hidden; }
.logo
{
    background:url(../images/logo.jpg) no-repeat left top;
    display:block;
    float:left;
    width:135px;
    height:30px;
}
.float-left
{
    float:left;
}
.border-bottom
{
	border-bottom-width: 2px;
	border-bottom-style: dotted;
	border-bottom-color: #232323;
}
.border-top
{
    border-top:2px dotted #232323; /* This class is added to every tag to insert a border at the top */
}
.border-bottom-dashed
{
    border-bottom:2px dotted #232323; /* This class is added to every tag to insert a dashed border at the bottom */
}
.black-box /* Black background of every box*/
{
    background-color:#464646;
    padding:20px;
    float:left;
}
.vertical-separator-bottom
{
    padding-bottom:25px; /* Adds a 25px space at the bottom of the object */
}
.vertical-separator-top
{
    padding-top:25px; /* Adds a 25px space at the top of the object */
}
.vertical-separator-top-margin
{
    margin-top:25px;
}
.vertical-separator-bottom-margin
{
    margin-bottom:25px;
}
.black-box p
{
    color:#fff;
}
.header a
{
    float:left;
    padding:0 5px 0 0;
}
.header span
{
    float:left;
    display:block;
    line-height:30px;
    font-style:italic;
    font-size:18px;
    color:#222;
}
ul.menu, ul.menu-work
{
    float:right;
    list-style:none;
    padding:0;
    margin:0;
    line-height:45px;
}
ul.menu li, ul.menu-work li
{
    float:left;
    margin:0 0 0 10px;
    padding:0;
    line-height:36px;
}
ul.menu-work li.first-list-item
{
    margin:0;
}
ul.menu li a, ul.menu-work li a
{
    float:left;
    font-size:18px;
    padding:0px 15px;
}
/* Style for the menu links in the state inactive, hovered and selected/current */
ul.menu li a:hover, ul.menu-work li a:hover, ul.menu li a.selected, ul.menu-work li a.selected
{
    background:#000000;
    color:#fff;   
}
/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default  {font-weight: normal; color: #000000; outline: none; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #000000; text-decoration: none; outline: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus {font-weight: normal; color: #ffffff; outline: none;  }
.ui-state-hover a, .ui-state-hover a:hover { color: #ffffff; text-decoration: none; outline: none; }
.ui-state-active, .ui-widget-content .ui-state-active { font-weight: normal; color: #ffffff; outline: none; background-color:#000; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #ffffff; outline: none; text-decoration: none; }

ul.menu-work
{
    float:left;
}
ul.menu li.top
{
    float:left;
}

ul.menu li.top a
{
    font-style:italic;
    font-size:12px;
}
a
{
    text-decoration:none;
    color:#000;
}
h1
{
    font-size:30px;
    color:#fff;
    line-height:38px;
    padding:0;
    margin:0;
}
h2
{
    height:24px;
    line-height:32px;
    color:#fff;
    padding:0;
    margin:0 0 20px 0;
    clear:both;
    display:block;
    width:100%;
}
.presentation-style
{
    float:left;
    display:block;
    width:940px;
}
.presentation-style .black-box
{
    width:940px;
    padding:0;
    float:left;
    display:block;
    height:102px;
}
.presentation-style .present
{
    float:left;
    display:block;
    padding:20px;
}
.presentation-style .present p
{
    margin:0;
    padding:0;
    float:left;
    color:#fff;
}

.presentation-style .presentation
{
    background:#000 url(../images/presentation-right-image.jpg) no-repeat top right;
    float:right;    
    display:block;
    width:90px;
    height:102px;
}

a.read-more
{
    color:#fff;
    float:left;
    font-weight:bold;
    margin:0 0px 0 10px;
}
a.read-more:hover
{
    text-decoration:underline;
}
.small-presentation-style
{
    float:left;
    display:block;
    height:278px;
}
.small-presentation-style, .small-presentation
{
    float:left;
}
.small-presentation p
{
    margin:10px 0;
}
.small-presentation-style div.grid_8
{
    margin:0;
    float:right;
}
.small-presentation-style .small-presentation.black-box
{
     float:left;
    height:238px;
    width:260px;
}
.small-presentation-style, .small-presentation.grid_4
{
    margin-left:0;
    margin-right:0;
    float:left;
    width:260px;
}
span.featured-work
{
    color:#797979;
    font-size:30px;
    display:block;
    font-weight:bold;
}
.start-presentation
{
    float:left;
    width:100%;
}
/* the box that has the entire portofolio content */
.portofolio
{
    float:left;
    width:100%;
    display:block;
    clear:both;
}
/* a single line from the portofolio of a specific category */
.portofolio-line
{
    margin:0 0 25px 0;
    float:left;
    width:940px;
    display:block;
    clear:both;
}
.portofolio-line a
{
    border:1px solid #000;
    float:left;
    margin:0 20px 0px 0;
    width:298px;
    display:block;
    
}
.portofolio-line a img
{
    float:left;
    display:block;
    width:auto;
}
/* We reset the padding-right from the default class .portofolio-line a so that the last picture is at the right
   border of the line*/
.portofolio-line a.last-right
{
    float:left;
    margin-right:0;
    clear:right;
}
/* Don't change this!!! This class is used by javascript so that we can have on each div with this class the maximum
    admitted by every resolution. This way the pages look like individual ones.
*/
.section
{
    clear:both;
    float:left;
}
.about-section
{
    float:left;
    width:100%;
}
.about-section .float-left
{
    width:100%;
}
.about-section h2
{
    color:#000;
}
/* clear class - resets the floats applied to a html tag */
.clear
{
    clear:both;
    height:0;
    line-height:0;
}
.about-section .profile-info
{
    float:left;
    display:block;
    clear:both;
    width:940px;
}
.profile-info .photo-profile ul li
{
    margin:0 0 10px 15px;
}
.profile-info .photo-profile ul li a:hover
{
    text-decoration:underline;
}
.profile-info .photo-profile
{
    float:left;
    padding:25px 0 0 0;
    margin:0 20px 0 0;
    width:300px;
}
/* We reset the margin-right from the default class .profile-info .photo-profile so that the last column is at the right
   border of the line*/
.profile-info .photo-profile-last-column
{
    margin:0;
}
.footer
{
    float:left;
    color:#fff;
  
}
.footer div.black-box
{
    color:#fff;
    margin:0;
    padding:0;
    height:60px;
}
.footer p
{
    padding:20px;
    margin:0;
}
input[type="button"], input[type="submit"]
{
    cursor:pointer;
}
input
{
    border:none;
	
}
.form-contact
{
    float:left;
}
.form-contact label
{
    float:left;
    margin:0 10px 0 0;
}
.form-contact input
{
    width:282px;
    height:20px;
    padding:8px;
    margin:5px 0 5px 0;
    font-family:inherit;
    border:1px solid #000;
    font-size:14px;
    clear:both;
	color:#000;
}
.form-contact textarea
{
    width:282px;
    margin:5px 0 5px 0;
    border:1px solid #000;
    padding:8px;
    font-family:inherit;
    font-size:14px;
    clear:both;
	color:#000;
}
.form-contact input.send
{
    width:auto;
    background:#000;
    padding:0 15px;
    line-height:36px;
    height:36px;
    font-family:inherit;
    color:#fff;
    margin:5px 0 0 0;
}
ul.social-list
{
    float:left;
    width:46%;
    padding:0 10px 0 0;
}
ul.social-list li a:hover
{
    text-decoration:underline;
}
.available-freelance
{
    float:left;
    clear:both;
    width:100%;
}
.available-freelance span
{
    font-size:60px;
    background:#000;
    color:#fff;
    text-align:center;
    float:left;
    display:block;
    width:100%;
}
/* Don't change the name of this class !!! It is used by javascript so that the Project name appears over the pictures
    from the portofolio when the mouse is over it.
*/
.overlay
{
	height:80px;
	background:#000;
	        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        filter: alpha(opacity=50);
        opacity: 0.7;
	float:left;
	display:block;
	color:#fff;
	font-size:18px;
	clear:both;
	width:298px;
	text-align:center;
	overflow:hidden;
	position:relative;
	margin-top:-80px;
	line-height:1.2em;
	padding:0;
}
.overlay span
{
    font-size:12px;
    font-style:italic;
    line-height:1.2em;
}
p.error
{
    margin:0;
    color:#ff0000;
    font-family:inherit;
    float:left;
}
#hide {
display: none;
}