/** 
  *
  * Author: Pieris Christou
  * Styling for pchristou.com
  *
  **/

/******** Basic or 'Master' Rules ********/

/* Have the content be right at the top */
html, body {
border:0 none;
margin:0;
padding:0;
font-family:Helvetica,Arial,Tahoma,sans-serif;
word-spacing: 1pt; letter-spacing: 1px;
/*background:url("../images/bg.png") repeat-x scroll left top #112d4c;*/
background-color:#000000;
}

/* wrapper */
.wrapper {
margin: 0 auto;
width: 910px;
}

#bg {

}

p {
padding-top:10px;
color:#D9D9D9;
}
/******** End Basic or 'Master' Rules ********/


/******** Header detail ********/

/* Red border - header */
#header {
height:50px;
/*border-bottom:2px solid #ffba00;*/
background-color:#000000;
position:fixed;
right:0;
top:0;
width:100%;
z-index:1;
}


/* Brown border - logo */
#logo {
margin-left:200px;
margin-top:2px;
float:left;
background-image: url("../images/urblogo.png");
background-repeat: no-repeat;
width:220px;
height:110px;
}

/******** End Header ********/







/******** Navigation and links ********/

/* Purple border - navbar */
#navbar {
margin-right:239px;
margin-top:30px;
float:right;

}

/* All list items contained within the nav bar */
#navbar li a
{
text-decoration:none;
border-right:1px solid black;
padding-right:30px;
padding-left:30px;
color:#D9D9D9;
}

/* All links shall be blue */
a {
    color:#2a7edd;
}

/* Upon hovering, underline */
#navbar li a:hover
{
color:#000000;
}

/* Get rid of bullets for lists */
ul, li {
/*list-style: none;
display: inline;*/
color:white;
}

/******** End Navigation and links ********/
#avail {
margin-left:100px;
margin-top:100px;
}

img {
border-style:none;
}

.work_image {
display:block;
margin:10px 0;
padding:5px;
width:200px;
background:url("../images/image_bg.png") repeat scroll 0 0 #00263C;
}

.gallery_image {
display:none;
margin:10px 0;
padding:5px;
width:200px;
}

.blue {
    color:#55C1F3;
    text-decoration:underline;
}

.it {
font-style:italic;
}

/* Design for image link */
.image_links {
padding-top:6px;
padding-left:20px;
padding-bottom:6px;
padding-right:38px;
background:url("../images/side_arrow.png") no-repeat scroll 100% center;
float:right;
color:#D9D9D9;
}

.side_arrow {
width:20px;
height:20px;
}
/******** Layout spacing specific *********/
#intro {
height:100px;
font-size:36px;
margin-left:200px;
padding:20px;
padding-top:300px;
background:url("../images/intro_text.png") no-repeat scroll -62px bottom transparent;
z-index:5;
}

#welcome {
display: block;
padding-left:290px;
padding-top:20px;
color:#0066ff;
font-size:24px;
}

/******** End Layout spacing specific wrapper ********/
#top_anchor {
height:10px;
width:10px;
}

/******** Work spacing ********/
#sandpit, #office_dating, #de_tactical {
margin-top:10px;
border-top:2px dotted #D9D9D9;
width:800px;
}

#ems {
}

.work_spacing {
width:800px;
margin-top:240px;
border-top:2px dotted #D9D9D9;
}

.last_spacing {
margin-top:150px;
}

/******** End work spacing ********/

/******** Content & wrappers ********/
.content {
}

.content_excl_intro {
margin-top:400px;
height:1200px;
/*background:url("../images/bg_content.png") repeat-x scroll left top white;*/
}

#links_list {

}

.links {
margin-top:120px;
/*background:url("../images/nav.png") no-repeat scroll -100px bottom;*/
height:68px;
z-index:4;
}

.links li {
display:inline;
margin:0;
padding:0;
}

.links li a {
color:#D9D9D9;
}

.links li:first-child {
padding-left:0px;
}

.links li:last-child {
padding-left:30px;
border-left:2px dotted #D9D9D9;
}

.workLink {
margin-left:25px;
margin-right:25px;
border-left:2px dotted #D9D9D9;
}

.contactLink {
margin-left:-30px;
}

#intro li a {
text-decoration:none;
font-size:20px;
margin-left:42px;
margin-top:20px;
}

.content_bottom {
height:1px;
}

#contact {
/*padding:20px;
margin:100px;
*/
}

#work {
/*padding:20px;*/
}

#aboutWrapper {
float:left;
height:470px;
position:relative;
width:428px;
}

#contactWrapper {
float:right;
height:470px;
position:relative;
width:428px;
}

#aboutWrapper, #contactWrapper {
background:url("../images/bg_content.png") no-repeat scroll 20px 60px transparent;
margin-top:40px;
}


#system_development {
padding-left:20px;
width:900px;
}

#about_text, #contact_form {
margin-top:35px;
}

#web_design {
margin-left:330px;
width:900px;
}

#other_work {
margin-left:630px;
width:900px;
}

#about_text p, #contact_container {
margin-left:50px;
margin-right:20px;
}

#about_text p:last-child {

}

#submit_message {
margin-left:320px;    
}

.transition_about {
/*margin-top:500px;
width:910px;
height:500px;
*/
}

/******** End Content & wrappers ********/


/******** Headings ********/

h1 {
font-size:24px;
color:#D9D9D9; /*blue font */
}

h2 {
margin-top:10px;
font-size:22px;
color:#55C1F3; /*blue font */
}

h3 {
margin-top:30px;
margin-bottom:10px;
font-size:16px;
color:#55C1F3; /* blue font */
}

.headings {
width:100%;
height:80px;
background:url("../images/about_heading.png") no-repeat scroll 6px 5px transparent;
margin-left:40px;
border-bottom:2px dotted #D9D9D9;
border-top:2px dotted #D9D9D9;
}

.headings h1 {
float:left;
padding-left:50px;

}

#workheading {
margin-left:-25px;
margin-top:30px;
}

#aboutheading {
margin-left:-25px;
margin-top:30px;
}

#contactheading {
margin-left:-43px;
margin-top:30px;
}

/*
.headings a {
padding-top:6px;
right:230px;
}
/* For the link which takes the user back to the top of the page */
span.top {
margin-top:20px;
float:right;
}

.headings a {
font-size:10px;
text-decoration:none;
}

.thanksNote {
    float:right;
    margin-top:20px;
}

label.error {
    margin-top:-25px;
    margin-left:10px;
    color:#c12534;
}


/******** End Headings ********/

/******** CONTACT FORM ********/
#contact_container .required {
color:white;
}

#contact_container .requiredStar {
color:#c12534;
}

input[type=text] {
display:block;
margin-bottom:5px;
border:2px dotted #D9D9D9;
width:360px;
background-color:transparent;
}

textarea {
display:block;
border:2px dotted #D9D9D9;
width:360px;
background-color:transparent;
}

#msg {
padding-left:30px;
font-size:30px;
}

.left {
float:left;
height:100px;
position:relative;
width:570px;
}

.right {
float:right;
height:100px;
position:relative;
width:210px;
padding-left:20px;
}

.tabbed_content img {
width:200px;
height:100px;
}

#msg_confirm {
color:#c12534;
}

.ital {
font-style:italic;
}

#contact_container p {
margin-left:20px;
}

#contact_container label {
/*line-height:1.5em;*/
}

/******** Footer ********/

/* Green border - footer */
#footer {
border-top:2px dotted white;
z-index:1;
bottom:0;
margin-top:510px;
width:428px;
margin-left:520px;
}

/* Green border - footer */
#footer p {
font-size:10px;
padding-right:10px;
text-align:right;
}

/******** End Footer ********/