/*  

IDEA - put admin controls in a deck at the bottom of the page

Theme Name: Indee

Description: WordPress theme based on Nautica-magazine.

Version: 1.0

Author: David Carter released under Creative Commons Sharealike License.

Indee is based on the Nautica-magazine theme (itself based on Nautica 5) available from http://max.limpag.com/.  This theme has been heavily hacked and customised to serve duties as a CMS rather than a blog proper.  Categories are used to place content in different areas of the site.  The code could do with a major cleanup and I'd strongly suggest pulling apart Nautica-magazine or a similar template instead as this was a fantastic learning experience for me. 

	

*/



/*********************************************************

   HTML Elements

 *********************************************************/



html,



body {

  height: 100%;

}



body {

  margin: 0;

  padding: 0;

  text-align: center;

  margin-left: auto;
 margin-right: auto;

  font-size: 80%;

  font-family:  verdana, arial, sans-serif;

  line-height: 170%;
background: url(./images/background.gif) top center no-repeat;
   background-color: yellow; 

  color: #000;

}





/* Headers */

h1, h2, h3, h4, h5, h6, hbands {

  margin: 0 0 10px 0;

  padding: 0;

}





h1 {
	
	  font-family:  verdana, arial, sans-serif;


  letter-spacing: 2px;

  height: 73px;
  
  /* background-image: url(./images/tab.png); */

  width: 100%;

  color:  #586B7A;

	font-size: 30px;
}



h2 {

  font-size: 2em;

  color: #586B7A;

  line-height: 1.2em;

}



h3 {

  text-transform: uppercase;

  font-size: 0.5em;

  color: #5D6F73;

}



h4 {

  font-size: 0.85em;

}



h5 {

  font-size: 0.8em;

}

hbands {

  font-size: 1.5em;

  color: #586B7A;

  line-height: 1.2em;

}



/* Needed to horizontally pad in a coloured container */

.horzPad h1,

.horzPad h2,

.horzPad h3,

.horzPad h4,

.horzPad h5,

.horzPad p {

  padding-left: 5px;

  padding-right: 5px;

}


/* Links */

a {

  text-decoration: none;

  color: #3B5D77;

}



a:hover {

  color: #668FA3;

}



a img {

  border: 0;

}



a img.border {  

  border: 1px solid #FC3307;

}



a:hover img.border {  

  /* Fixes IE bug - IE doesn't correctly apply the style on a:hover so need to mask it */

  border: 1px solid #668FA3 !important;

  border: 1px solid #FC3307;

}







/* Images */

img.floatRight {

  margin: 5px 0 10px 10px;

}



img.floatLeft {

  margin: 5px 10px 10px 0;

}







/* Lists */

ul li {

  list-style-image: url(./images/submenu1.png);

line-height: 1.4em;

}



ol li {

  font-weight: bold;

  color: #668FA3;

}



ol li span {

  font-weight: normal;

  color: #444;

}







/* Blockquote */

blockquote {

  margin: 0;

  padding: 0 20px;

  background: #E7F1F3;

  border-top: 1px solid #AAD3DB;

  border-bottom: 1px solid #AAD3DB;

}







/**************************************************************

   Form Elements

 **************************************************************/



form {

  padding: 0;

  margin: 0;

}



/* If you're finding the input elements get pushed down, increase the width */

label {

  width: 25%;

  vertical-align: top;

}



input,

textarea,

select {

  padding: 1px;

  font: 400 1em verdana, sans-serif;

  color: #999;

  background: #EEE;

  border: 1px solid #CCC;

}



input:focus,

input:hover,

textarea:focus,

textarea:hover,

select:focus,

select:hover {

  color: #000;

  background: #E7F1F3;

  border: 1px solid #888;

}



input.noBorder,

input:focus.noBorder,

input:hover.noBorder {

  padding: 0;

  border: 0;

}



input.button {

  padding: 2px 5px;



  font: 400 0.9em verdana, serif;

  cursor: pointer;



  color: #fff;

  background: #FC3307;

  border-width: 1px;

  border-style: solid;

  border-color: #FF7800 #691300 #691300 #FF7800;

}



input.radio {

  background: none;

  border: 0px;

}








 

/**************************************************************

   All page content except for footer

 **************************************************************/



#content {

  position: relative;
  
  top:  ;
  
  width:  100%;

  height: auto !important;

  height: 100%;

  min-height: 100%;
  

  

}




/***************************
Header
****************************/


#blotch {
position:absolute;
   background: url(./images/top2.gif) no-repeat top center;

width:770px;
height: 400px;

top: 0px;
left:0px;

  overflow:hidden;
 
z-index:1;
}

#IndeeIMG {

 
clear:  both;
	
	position: absolute;
	
	left: 25%;
	
	top: 10px;
    
    width: 427px; 
  
  height: 345px;

  background: url(./images/IndeeLogo.png) no-repeat top center;

margin-bottom: 2em;
	z-index: 2;
}

#topfloat {

	clear: both;

	position: static;


	height: 300px;

	margin: 0 auto;

margin-bottom: 5em;
	visibility: hidden;
}


/**************************************************************

Top right menu items - holds them in the top corner
 **************************************************************/



#topcorner {



	position: absolute;

	height: 300px;

	margin: 0 auto;

margin-bottom: 5em;
	z-index: 3;
	top: 0;
	right: 0;
	float: right;
}



#topcorner ul {

  margin: 3.5em 1em 0 0 !important;

  margin: 3.5em 0.5em 0 0;

  padding: 0;

  float: right;

  

}



#topcorner ul li {

  display: inline;

  list-style: none;

}



#topcorner ul li a {

  float: left;

  padding: 0 1em;



  font: 400 1.1em arial, sans-serif;

  letter-spacing: 0.1em;

  line-height: 0.8em !important;

  line-height: 1em;



  color: red;

  border-right: 1px solid #4D5760;
 

}



#topcorner ul li a.last {

  padding-right: 0;

  border-right: 0;

}



#topcorner ul li a:hover {

  color: #3B5D77;

}

/**************************************************************

HEADER IMAGE GOES HERE

 **************************************************************/







/**************************************************************

Menu Bar


 **************************************************************/



#MenuBar {

 position: absolute;
 top: 290px;
 left: 410px;
 min-width:  350px;
 
 
	z-index: 2;
	text-align: left;
	vertical-align: bottom;
}

#NewsIMG a{
 
    float:left;

    width: 65px; 

    height: 120px;

	margin: 0 auto;
	
	z-index: 3; 

    background: url(./images/News.gif) no-repeat center -1px;

}

 #NewsIMG a:hover {


    background-position: center bottom;
    
		}

#BandsIMG a {

    float:  left;

    width: 85px; 

    height: 120px;
	
	z-index: 3; 

    background: url(./images/Bands.gif) no-repeat center -1px;
	
}

 #BandsIMG a:hover {


    background-position: center bottom;
    
		}


#ListenIMG a{
 

    width: 65px; 

    height: 121px;

	margin: 0 auto;
	
	z-index: 3; 

    background: url(./images/Listen.gif) no-repeat center 0px;
	float: left;
}
 #ListenIMG a:hover {


    background-position: center -122px;
    
		}

#WatchIMG a{
 
    position: relative;
    
	display: block;

    width: 65px; 

    height: 120px;

	margin: 0 auto;
	
	z-index: 3; 

    background: url(./images/Watch.gif) no-repeat center -1px;
	float: left;
}

 #WatchIMG a:hover {


    background-position: center bottom;
    
		}

#BuyIMG a{
 
    position: relative;

    float: left;
	width: 65px;

    height: 120px;
	
	z-index: 3; 

    background: url(./images/Buy.gif) no-repeat center 0px;

}

 #BuyIMG a:hover {


    background-position: center bottom;
    
		}





/**************************************************************

   Page Content

 **************************************************************/

#pagewrapper {
text-align: center; 
margin-left: auto;
 margin-right: auto;
 width:770px;

}
#page {

  padding: 60px 20px 20px;
width:720px;
  clear: both;
  position: relative;
 

  background: #fbff96; 

  

text-align: center; 
margin-left: auto;
 margin-right: auto;



  overflow: hidden;



 
	  height: 100%;
	visibility: visible;
	
}





/**************************************************************

   Content Blocks

 **************************************************************/
 
 #categoryheading{
	height: 100px;
	overflow: hidden;
	top: 30px;

}

#singleposts {
	
	position: relative;
	clear:  both;
	top:  1em;
	left:  1em;
	float: left; 
	width: 700px; 

	background: url(./images/) no-repeat top right;
	
	padding-left: 1em;
	padding-top: 1em;
	margin-bottom: 4em;
	z-index: 0;
}


/**************************************************************

   Footer

 **************************************************************/
 
 #Vientiane{
 
 clear: both;
 position: relative;
 width: 100%;
 height: 145px;
 background: url(./images/vientiane.gif) bottom right no-repeat;
 z-index: 3;

 }

#footer {


  position: relative;

  float: left;

  width: 100%;

  height: 5em;


 

}

#footer #bg {

  position: static;

  height: 5em;
  

 width: 100%;

  background: black no-repeat top right;

}



#footer #bg ul {

  float: right;

  margin: 3em 1em 0 0 !important;

  margin: 3em 0.5em 0 0;

  padding: 0;

}



#footer #bg ul li {

  display: inline;

  list-style: none;

}



#footer #bg ul li a {

  float: left;

  padding: 0 1em;



  font: 400 1em arial, sans-serif;

  letter-spacing: 0.1em;

  line-height: 0.8em !important;

  line-height: 1em;



  color: #4D5760;

  border-right: 1px solid #4D5760;

}



#footer #bg ul li a.last {

  padding-right: 0;

  border-right: 0;

}



#footer #bg ul li a:hover {

  color: #6C0;

}



#footer #bg img {

  position: absolute;

  top: 6%;

  left: 10px;

}







/**************************************************************

   Posts

 **************************************************************/



.post {

  float: left;

  width: 100% !important;

  width: 99%;

  position: relative;

  margin-bottom: 1.5em;
	border-top: 2px dotted #d4d4d4;
}



.banner {

  float: left;

  width: 100% !important;

  width: 99%;

  position: relative;

  padding-bottom: 10px;

  border-bottom: 2px solid #ddd;

}






.post .title {

  display: block;

  padding: 0 0 5px 0;



  font-size: 1.8em;

  font-weight: bold;

  color: #b1d7f5;

}

.post .secondary_title {

  display: block;

  padding: 0 0 5px 0;



  font-size: 1em;

  font-weight: bold;

  color: #586B7A;

}



.post p {

  padding-left: 1.2em;

  padding-bottom: 1em;

  padding-right: 1.2em;

  padding-top: 0;

  font-family: serif;

  margin: 0 0 0 0;

}

.post a img {
	border: 2px solid #201a0f
}

.post a:hover img  {
	border: 2px solid #3B5D77;	
}






.post2 {

  float: left;

padding:  2em;
	text-align: center;
}

.post2 .title {

  display: block;

  padding: 0 0 5px 0;



  font-size: 1.8em;

  font-weight: bold;

  color: #b1d7f5;

}


.post2 a img {
	border: 2px solid #201a0f
}

.post2 a:hover img  {
	border: 2px solid #3B5D77;	
}





/**************************************************************
Nav Bar Formatting

 **************************************************************/

/* This styles the unordered list element to remove bullets and align the text */
 ul#nav {
   list-style-type : none;
   text-align : right;
 }

 /* This is only necessary for IE6 else the link margins will collapse on hover */
 ul#nav li {
   margin-bottom : 10px;
 }

 /* This removes the default left margin (indentation) */
 ul#nav li {
   margin-left : 0;
 }

 /*
  Now to offer some hover and focus styles. Further specification of focus/active styles
  could be added but I didn’t do it in this example. I didn’t feel it was needed
 */
 ul#nav a:hover, ul#nav a:focus, ul#nav a:active {
   background-color : #B3C6C4 ;
   color : #fff;
 }


 /*
  This style the single state of the “current_page_item” class link. Not needed for
  the “rss” class link since that target page won’t display the menu
 */
 ul#nav li.current_page_item a, ul#nav li.current_page_item a:hover,
 ul#nav li.current_page_item a:focus, ul#nav li.current_page_item a:active {
   background-color : #B3C6C4 ;
   color : #fff;
   cursor : default;
   text-align : left;
 }



/**************************************************************

   Submenu Styles

 **************************************************************/



ul.submenu1,

ul.submenu2 {

  margin: 0 0 20px 0;

  padding: 0;

}



ul.submenu1 li,

ul.submenu2 li{

  margin: 0;

  padding: 0;

  list-style: none;

  list-style-image: url(foo.gif); /* because IE is balls */

}



ul.submenu1 li a,

ul.submenu2 li a {

  display: block;

  height: auto !important;



  /* Start hide from IE Mac \*/

  height: 1%;

  /* End hide from IE Mac */



  padding: 1px 5px 1px 20px;

}



ul.submenu1 li a {

  background: url(./images/submenu1.gif) no-repeat 5px 50%;

}



ul.submenu1 a:hover {

  color: #426F85;

  background: #B3C6C4 url(./images/submenu1.gif) no-repeat 5px 50%;

}



ul.submenu2 li a {

  color: #426F85;

  background: url(./images/submenu2.gif) no-repeat 3px 50%;

}



ul.submenu2 a:hover {

  color: #426F85;

  background: #B3C6C4 url(./images/submenu2.gif) no-repeat 3px 50%;

}




/**************************************************************

   Photo captions

 **************************************************************/



.largecaptionleft {

  float: left;

  width: 500px;

  margin: 5px;

  padding: 5px;

  border: solid 1px #ddd;

  background: #E5F2FF;

  font-size:90%;

  line-height: 100%;

  font-style: italic;

  color: black;

  }



.largecaptionright {

  float: left;

  width: 500px;

  margin: 5px;

  padding: 5px;

  border: solid 1px #ddd;

  background: #E5F2FF;

  font-size:80%;

  line-height: 100%;

  font-style: italic;

  color: black;

  }



.smallcaptionleft {

  float: left;

  width: 250px;

  margin: 5px;

  padding: 5px;

  border: solid 1px #ddd;

  background: #E5F2FF;

  font-size:80%;

  line-height: 100%;

  font-style: italic;

  color: black;

  }



.smallcaptionright {

  float: right;

  margin: 5px;

  padding: 5px;

  width: 250px;

  border: solid 1px #ddd;

  background: #E5F2FF;

  font-size:80%;

  line-height: 100%;

  font-style: italic;

  color: black;

  }



/**************************************************************

   Generic Display 

 **************************************************************/





.block {

  display: block;

}



.clear {

  clear: both;

}



.marginRight {

  margin-right: 15px;

}



.paddingLeft {

  padding-left: 5px;

}



.paddingRight {

  padding-right: 5px;

}



.floatLeft {

  float: left;

}

.floatOffset {

  float: left;
  margin-left: 15px;

}



.floatRight {

  float: right;

}



.alignLeft {

  text-align: left;

}



.alignRight {

  text-align: right;

}



.alignTop {

  vertical-align: top;

}



.alignMiddle {

  vertical-align: middle;

}



.alignBottom {

  vertical-align: bottom;

}



.lightBlueBg {

  background-color: #EAF2F5;

}



.dark {

  color: #353E47;

}

/****************************

Page Layout

****************************/

#container {
 
}
#container .column {
  position: relative;
  float: left;

}
#left {
width:  395px;
float:left;
margin-right: 10px;
text-align:left;
height:100%;
}

#center {
width: 135px;
  float: left;
margin-right: 10px;
text-align:left;
height:100%;
  
} 
#right {
width: 160px;  
  text-align:left;
  float: left;  
height:100%;
}


/* two coloumn layout for bands page */
#left2 {
  width: 500px;
 text-align:left;
  margin-right: 5px;
float: left;
height:100%;
  
} 
#right2 {
  width: 160px;          
   text-align:left;
float:left;
height:100%;


}



/* two coloumn layout for bands page */
#left3 {
  width: 500px;
  margin-right: 5px;
text-align:left;
height:100%;
  
} 
#right3 {
  width: 200px;
height:100%;

}



.spacer{
 clear:both;
}