/*------------------------------------------------------------------
[Master Stylesheet]

Project:    Open Source Journal
Version:    1.1
Changes:    21/11/09 [ Set up of CSS ]
        23/11/09 [ Form styles ]
        24/11/09 [ Styles for sponsor page ]
        26/11/09 [ Changes to navigation etc ]
        30/11/09 [ Tweaks to spacing between heading/text ]
        05/12/09 [ Tweaks to spacing/padding across whole site; increased heading sizes ] pr
Author:     Andrew Yee (andrew@citruscube.com)
                Pallay Raunu
Primary use:  Web site
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Color codes]

Background:   #ffffff
Content:    #000000
Header h1:    #27527E
Header h2:    #27527E
Header h3:    #27527E
Header h4:    #27527E
Header h5:    #27527E
Footer:     #999

a (standard): #27527E
navigation:   #FFFFFF

-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Typography]

Body copy:      12px Arial, Verdana, Helvetica, sans-serif
Header (h1):    22px
Header (h2):    18px
Header (h3):    16px
Header (h4):    12px
Header (h5):    12px

-------------------------------------------------------------------*/
* {
    margin: 0;
    padding: 0;
}

html {
  height: 100%;
}

body {
  font: 12px Arial, Verdana, Helvetica, sans-serif;
  color : #000000;
  background: #ffffff;
  margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
  padding: 0;
  text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
  /*height: 100%;*/
}

/* Structure */

#container {
  width: 960px;
  margin: 0 auto; /* center on the page */
  padding: 0 15px 0 15px;
  text-align:left;
  background: url(../media/bg-shadow2.jpg) top center repeat-y;
  line-height: 1.4;
}

#header {
  height:105px;
  background-color:#FFFFFF;
  padding: 15px;
  width: 900px;
}

#header-left {
  width: 627px; /*width: 677px;*/
  background-color:#FFFFFF;
  float:left;
  text-align:center;


}


div.header-left-strapline {
    min-height: 20em;
    display: table-cell;
    vertical-align: middle;
  height:107px;
  width: 627px;
  }


#header-right {
  width: 273px; /*width: 223px;*/
  background-color:#FFFFFF;
  float:left;
}



#navigation {
  margin: 5px 0 5px 0;
  height:29px;
  background:url(../media/menu.gif) repeat-x;
  padding:0 10px 0 10px;
}

#main {

  /*width:910px;*/
  /*padding:0 10px 0 10px;*/
  margin:0 10px 0 10px;
}

/* Columns used on main */
/* The navigation link .navigation-link  has a width set to 227px so needs to be the same as the columns*/

#col1{
  width: 217px;
  float:left;
  padding-right:10px;
}

#col2{
  width: 217px;
  float:left;
  padding-right:10px;
}

#col12{
  width: 444px;
  float:left;
  padding-right:10px;
}

#col3{
  width: 217px;
  float:left;
  padding-right:10px;
}

#col123{
  width: 671px;
  float:left;
  padding-right:10px;
}

#col4{
  width: 203px;
  float:left;
  padding-right:10px;
  padding-left:10px;
}




#footer{
  background: url(../media/bg-footer.jpg) top center no-repeat;
  width:1000px;
  text-align:center;
  margin:0  auto;
  height:50px;
  padding-top:20px;
}

#footer p {
  color:#999;
  text-align:center;
}

.clear {
  /* this is needed to make sure the footer always appears below the three columns */
  clear: both;
}

/* Text */

h1 {
  font-size: 22px;
  font-weight:normal;
  color:#27527E;
}

h2 {
  font-size: 18px;
  font-weight:bold;
  color:#27527E;
  margin: 20px 0 20px 0;
}

h2 a{
  display: block;
}

h3 {
  font-size: 16px;
  font-weight:normal;
  color:#27527E;
  margin: 15px 0 3px 0;
}

h3 a{
  font-size: 16px;
  font-weight:normal;
  color:#27527E;
  margin: 15px 0 3px 0;
}

h4 {
  font-size: 12px;
  font-weight:bold;
  color:#27527E;
  margin: 5px 0 5px 0;
}

h5 {
  font-size: 12px;
  font-weight:bold;
  color:#27527E;
  margin: 5px 0 5px 0;
}

p{
  margin-top: 5px;
  margin-bottom: 0px;
}

a {
  color :#27527E;
  font-weight: normal;
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
}

.smalltext{
  font-size:10px;
}

/* Lists */

ul{
  margin-top:10px;
}

ul li{

  margin-left:20px;
  list-style-type:disc;
  margin-bottom:6px;

}

ol li{

  margin-left:23px;
  list-style-type:decimal;
  margin-bottom:10px;
}

/* Navigation */

.navigation-link {
  padding: 5px 0 0 0;
  /*width: 87px;*/
  float:left;
}

.navigation-link a{
  font-size:14px;
  margin-right:25px;
  color:#FFFFFF;
}

/* Example box */

#example{
  /*width: 420px;
  padding:10px;
  background-color:#CCCCCC;
  margin:0 0 10px 0;*/

  background-color:#DDDDDD;
  padding:10px;
  width:420px;
  display:table;
}

/* form */
/* form elements */
form label {
  display: block;
  float: left;
  width: 180px;


}

form input.inputText {
  width: 200px;
  padding: 1px 3px;
  margin: 0 0 0 0;
  background-color: #CCCCCC;
  border: 0px;

}

form textarea.inputText {
  width: 200px;
  height:100px;
  padding: 1px 3px;
  margin: 0 0 0 0;
  background-color: #CCCCCC;
  border: 0px;

}

/* Error - required fields (Form) */

.error{
  color:#FF0000;
}

/* Sponsor page */

.sponsor-box{
  background-color:#DDDDDD;
  padding:10px;
  width:870px;
  display:table;
}

.sponsor-text{
  padding:0px;
  width:660px;
}


.sponsor-logo{
  margin: 0 0 10px 10px;
}

/* Journal */
a.journal-box {
  display:block;
  width:130px;
  height:184px;
  overflow:hidden;
  color:#FFF;
  padding:0;
  margin:0;
/*  text-decoration:none;*/
  border:1px solid grey;
}
a.journal-box:hover
{
/*  text-decoration:none; */
}
a.journal-box:hover img { /* sprite hoverover effect */
  margin-left:-130px;
}
a.journal-box:hover {zoom:1;} /* ie haslayout*/

/*  background-color:#DDDDDD;
  background-image:url(../media/journal.jpg) top left no-repeat;
    width:130;
    height:184;
  padding:10px;
  width:420px;
  display:block;
  overflow:hidden;
}
*/

ul#submitted_articles {
}

ul#submitted_articles li {
    list-style:none;
    margin:0;
    padding:2px 0 ;
}

div.highlight {
    margin:2px 0;
    padding:5px;
    background-color:#27527E;
    color: white;
    }
div.highlight h3 {
    color: #fff;
    text-align:center;
    margin:0;
}
div.highlight a {
  color:#fff;
  font-size: 1.1;
}

/* Submitted article page */

.author{
  color:#666666;
  font-size:11px;
}

.author_details{
  color:#27527E;
  font-size:11px;
}

.author_details a{
  color:#27527E;
  font-size:11px;
  text-decoration:underline;
}

.ref{
  color:#27527E;
}

.ref_small{
  color:#27527E;
  font-size:10px;
}

.code{
  font-family:"Courier New", Courier, monospace;
}

/* Contact Form (facebox) Styling */
#contactform #error ul{
  padding-left:0px;
  line-height:20px;
}
#contactform #error span{
  color:green;
  padding:5px 0 5px 0;
  position:absolute;
  top:60px;
  right:10px;
  width:150px;
}
#contactform #error ul li{
  color:#BF0B0B;
  font-weight:normal;
}
h2#contacth2{
  font-size:18px;
  color:#000;
  margin:0 0 10px 0;
  font-weight:normal;
  padding-bottom:10px;
  border-bottom:1px dotted #ccc;
}
#contactform fieldset{
  border:none;
}
#contactform #formleft{
  float:left;
}
#contactform #error{
  float:right;
}
#contactform .button{
  background:#ededed;
  color:#666;
  border:1px solid #ccc;
  padding:5px 20px 5px 20px;
  outline:none;
}
#contactform{
color:#666;
}
.clear{clear:both;}

#slider ul, #slider li {
  margin:0;
  padding:0;
  list-style:none;
}
#slider {
  margin-left:60px;
}
#slider, #slider li {
  height:385px;
  width:510px;
  overflow:hidden;
}
#prev_button, #next_button {
  margin:0;
  padding:0;
  display:block;
  overflow:hidden;
  text-indent:-8000px;
  width:30px;
  height:77px;
  position:relative;
  top:-270px;
  left:30px;
}
#next_button {
  top: -347px;
  left:570px;
}
#prev_button a, #next_button a {
  display:block;
  width:30px;
  height:77px;
  background:url(../media/images/btn_prev.gif) no-repeat 0 0;
  z-index;
}
#next_button a {
  background:url(../media/images/btn_next.gif) no-repeat 0 0;
}