/* 
NOTE:    This CSS has been designed to be as easy to understand as possible.
         Wev add many seperate classes on the main guestbook page to make it as customizable as possible (other pages use general classes) 
         Iv also added comments above each class to try and explain its use,

WARNING: If you dont know css you can seriously mess up the look of your guestbook if you edit this page.
         Very good/easy to understand tutorials can be found at http://w3schools.com
*/



/*----->>GLOBAL CLASSES<<-----*/






/*body*/

body
{
margin:3px auto;
max-width:480px;
padding:1px;
text-align:center;
line-height:100%;
color:#000000;
background-color:#ffffff;
font-size:small;
font-style:normal;
}




/*-------->>IMAGE CLASSES<<--------*/

/*all images not listed below*/

img
{
border:0px;
vertical-align:middle;
margin-bottom:1px
}





/*youtube preview images*/

.ytimg
{
vertical-align:middle;
border:1px solid #19946b;
padding:2px;
margin:1px
}





/*----->>START OF DIV CLASSES<<-----*/






/*logo*/

.logo
{
color:#19946b;
padding:5px;
margin-bottom:2px;
text-align:center;
}







/*main title*/

.header
{
text-align:center;
color:#000000;
background-color:#27e1a3;
font-weight:bold;
margin-bottom:2px;
border:1px solid #000000;

-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border-radius: 0.3em;

padding:5px;
background-image:url('/style/images/header.gif') ;
background-repeat: repeat-x;
background-position: top
}








/*subtitle*/

.subheader
{
color:#000000;
background-color:#27e1a3;
font-weight:bold;
margin-bottom:2px;
border:1px solid #000000;

-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border-radius: 0.3em;

padding:5px
}









/*action result msg*/

.result
{
border-bottom:1px dotted #000000;

margin-bottom:2px;
text-align:left;
padding:3px;
color:red
}







/*around next and back links on pages with lists of 2 or more pages*/

.nextback
{
background-color:#27e1a3;
border:1px solid #000000;

-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border-radius: 0.3em;

padding:5px;
margin-bottom:2px;
text-align:center
}





/*around jump page option on pages with lists of 3 or more pages (under the nextback class)*/

.jumppage
{
text-align:center;
margin-bottom:2px;
color:#000000;
padding:3px
}





/*footer*/

.footer
{
text-align:center;
color:#000000;
background-color:#acffd9;
font-weight:bold;
margin-bottom:2px;
border:1px solid #000000;

-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border-radius: 0.3em;

padding:5px;
background-image:url('images/foot3.gif')

}






/*anywhere there might be info (top of bbcode, youtube descriptions etc)*/

.info
{
background-color:#d9ffd9;
border:1px solid #000;

-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border-radius: 0.3em;

margin-bottom:2px;
text-align:left;
padding:5px 3px 5px 3px;
color:#000000
}






/*menus lists*/

ul.menu
{
list-style-type:none;
background-color:#d9ffd9;
border:1px solid #000;

-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border-radius: 0.3em;

padding:3px;
margin:0px 0px 2px 0px;
}

/*1 and 2 for alternate colors etc*/
li.menu1
{
background-color:#d9ffd9;
text-align:left;
padding:1px 5px 1px 1px;
color:#000000
}

li.menu2
{
background-color:#d9ffd9;
text-align:left;
padding:1px 5px 1px 1px;
color:#000000
}






/*Around Content lists*/

.listwrapper
{
margin-bottom:2px
}




/*Content lists (smileys, bbcodes, youtube videos etc)*/
/*list1 and lists2 are same, split for optional alternate colours*/

.lists1
{
border-bottom:1px dotted #000;
text-align:left;
padding:3px;
color:#000000
}






.lists2
{
border-bottom:1px dotted #000;
text-align:left;
padding:3px;
color:#000000
}









/*Any content displayed on its own (like lists and listswrapper but single)*/

.display
{
border-bottom:1px dotted #000;
text-align:left;
padding:3px;
color:#000000;
margin-bottom:2px;
text-align:center
}








/*Around forms class (below) if more than 1 form field*/

.formwrapper
{
}


/*Around forms (sign guestbook, search youtube etc)*/

.forms
{

-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border-radius: 0.3em;

background-color:#d9ffd9;
margin-bottom:2px;
text-align:left;
padding:3px;
color:#000000
}






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



#tabbar, 
#tabbar2
{
position:relative; 
height:28px; 

box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;

/*border-bottom:1px solid #000;*/ 
border-bottom:none;
margin:0px 1px 0px 1px; 
}

#tabbar a, #tabbar a.left,
#tabbar2 a, #tabbar2 a.left
{
background:#27e1a3; 
border:1px solid  #000; 
font-weight:bold;
color:#000; 
margin-top:2px; 

display:block; 
height:22px; 
text-align:center; 

-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border-radius: 0.3em;

/*width:31%;*/ 
padding:0px 6px 0px 6px; 

line-height:23px; 
text-decoration:none; 
float:left;
overflow:hidden;   
}

#tabbar a,
#tabbar2 a
{
margin-left:2px; 
}

#tabbar a.left,
#tabbar2 a.left
{
margin-left:6px; 
}

#tabbar a:hover, #tabbar a.left:hover,
#tabbar2 a:hover, #tabbar2 a.left:hover
{
background:#d9ffd9;
}

#tabbar a.selected, #tabbar a.leftselected,
#tabbar2 a.selected, #tabbar2 a.leftselected
{
background:#d9ffd9; 
border-bottom:1px solid #d9ffd9;
font-weight:bold; 
color:#000; 
margin-bottom:0px;
margin-top:2px;

display:block;
height:28px; 
text-align:center; 

box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box; 

-moz-border-radius-topleft: 0.3em;
-moz-border-radius-topright: 0.3em;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
-webkit-border-top-left-radius: 0.3em;
-webkit-border-top-right-radius: 0.3em;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
border-top-left-radius: 0.3em;
border-top-right-radius: 0.3em;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;

/*width:31%;*/
padding:0px 6px 0px 6px; 
line-height:23px; 
text-decoration:none; 
float:left;
overflow:hidden;   
} 

#tabbar a.selected,
#tabbar2 a.selected
{
margin-left:2px
}

#tabbar a.leftselected,
#tabbar2 a.leftselected
{
margin-left:6px
}

.tabmenu, .tabmenu2 
{
margin:0px 1px 5px 1px; 

box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box; 

-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border-radius: 0.3em;

padding:5px 3px 5px 3px; 
border:1px solid #000; 
/*border-top:none;*/ 
background:#d9ffd9; 
text-align:left; 
/*overflow-x:hidden;*/

}

a.widelinks
{
width:99%;
-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border-radius: 0.3em;

text-decoration:none;
display:inline-block;
height:20px;
line-height:20px;
margin:0px;
padding-left:1%
}

.tabmenu a.widelinks:hover, .tabmenu2 a.widelinks:hover
{
background-color:#27e1a3;
text-decoration:none;
color:#d9ffd9;
}


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




/*----->>START OF LINK CLASSES<<-----*/








/*all links not stated below*/

a:link, a:visited, a:active
{
color:#136606;
text-decoration:none;
font-weight:bold;
}

a:hover
{
text-decoration:underline;
}





/*sign guestbook link (inside 'linkbar_top' class and 'linkbar_bottom' class)*/

/*
a.button:link, a.button:visited
{
background-color:#d9ffd9;
border:1px solid #000000;

-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border-radius: 0.3em;

color:#19946b;
text-decoration:none;
font-weight:bold;
padding-top:1px;
padding-bottom:1px;
padding-left:3px;
padding-right:3px
}

a.button:active, a.button:hover
{
background-color:#eeffd9;
color : #136606
}
*/



a.button:link, a.button:visited
{
margin:2px;
padding:1px;
background-color:#27e1a3;
border:1px solid #000000;

-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border-radius: 0.3em;

text-decoration:none;

font-weight:bold;
color:#000
}


a.button:active, a.button:hover
{
background-color:#acffd9;
color:#000
}


/*next and back links (on pages with lists of 2 or more pages)*/

a.nb:link, a.nb:visited
{
margin:3px;
background-color:#acffd9;
border:1px solid #000000;

-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border-radius: 0.3em;

color:#000;
text-decoration:none;
font-weight:bold;
padding:1px
}

a.nb:active, a.nb:hover
{
margin:3px;
background-color:#fff
}













/*------>>TEXT SPAN CLASSES<<-----*/




/*Emphasized Text (best left bold, but only in our opinion)*/

.emphtext
{
font-weight:bold;
}



/*Dates*/

.date
{
color:#333;
}






/*----->>FORMS INPUT BOXES SELECT BOXES ETC<<-----*/





form
{
margin-bottom:0px;
display:inline
}





/*INPUT BOXES*/

input.text,input[type=text]
{
margin:2px;
border:1px solid #000000;

-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border-radius: 0.3em;

background-color:#ffffff;
color:#000000
}





/*PASSWORD BOXES*/

input.password,input[type=password]{
margin:2px;
border:1px solid #000000;

-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border-radius: 0.3em;

background-color:#ffffff;
color:#000000
}





/*UPLOAD BOXES*/

input.file,input[type=file]
{
margin:2px;
border:1px solid #000000;

-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border-radius: 0.3em;

background-color:#ffffff;
color:#000000
}





/*TEXT-AREA BOXES*/

textarea
{
margin:2px;
border:1px solid #000000;

-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border-radius: 0.3em;

background-color:#ffffff;
color:#000000
}





/*SELECT BOXES*/

select
{
margin:2px;
border:1px solid #000000;

-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border-radius: 0.3em;

background-color:#ffffff;
color:#000000
}





/*SUBMIT BUTTONS*/

input.submit,input[type=submit]
{
margin:2px;
padding:1px;
background-color:#27e1a3;
border:1px solid #000000;

-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
border-radius: 0.3em;

font-style:inherit;
font-weight:bold;
color:#000
}


input.submit:hover,input[type=submit]:hover,input.submit:focus,input[type=submit]:focus
{
background-color:#acffd9;
color:#000
}