/*------------------------------------------------------------------
[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;*/
}
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;
}