/* General form definition */



fieldset, legend {

    border: solid 1px #ccc;

}



fieldset {

/*    text-align: left;

    background: #fefefe; */

}



legend {

/*    background: #444; 

    color: white; */

    padding: 2px 5px; 

}



label {

    position: relative;

    float: left;

    width: 100px;

    font-family: Arial,Helvetica,sans-serif;

    font-size: 110%;

}





fieldset input, fieldset select, fieldset option  {

    border-width : 1px;

    border-color : #444;

    background: #eeeeee;

    font-size: 90%;

}



.formfield {

    margin-top: 0.5em;

}





/* Main button, default action, like submit */

.button-1 {

    background: #444;

    font-size: 110%;

    color: white;

}



/* Secondary button, non-default action */

.button-2 {

    border-width : 1px;

    border-color : #444;

    background: #eeeeee;

    font-size: 90%;

}



.button-1, .button-2 {

    margin: 0.5em;

}



/* Specific to each form */



#admindirectory {

    /* Box in the top left corner

    position: absolute;

    top: 5px;

    left: 5px;

    */

/*    margin: 0.5em 0; */

    margin: 0.7em;

    clear: left;

}



#rotatebox {

    float: right;

}



#adminpicture {

/*    margin: 0.5em 0; */

    margin: 0.7em;

    width: 600px;

    margin: auto;

    margin-top: 0.7em;

    margin-bottom: 0.7em;

}



/* Admin Menu */



#adminmenu {

    display: absolute;

    top: 0px;

    margin: 0.8em 0 0 0.8em;

}



#adminmenu a {

    color: #666666;

}



#adminmenu ul {

    margin: 0 0 0 0.2em;

    padding: 0;

}



#adminmenu li {

   list-style: none;

}





/* Used on the settings (cnfig editor) page */

/* Have a look to http://www.simplebits.com/notebook/2003/10/19/styling_nested_lists.html */



#adminconfig input, #adminconfig select {

    float: right;

    border-width : 1px;

    border-color : #444;

    font-size: 90%;

}



#configmenu {

    float: left;

    width: 10em;

    font-size: 120%;

    background: #ddd;

    color: #666666;

    border: 1px solid #aaa;

}



#configmenu a {

    color: #666666;

}



#configmenu a:hover {

    color: white;

}



#configmenu ul {

 /*

  margin-top: 0.2em;

  margin-left: -2.2em;

  */

    margin: 0.2em 0 0.2em 0.7em;

    padding: 0;

}





#configmenu li {

   list-style: none;

}



/* Main category */

#configmenu .category {

    font-weight: bold;

    margin-top: 0.5em;

    padding: 0 0 0.2em 0.2em;

    border-bottom: solid 1px #aaa;

}



/* Sub-categories */

#configmenu ul li {

    font-size: 95%;

}



#selected {

    /*padding: 0.05em 0.3em 0.05em 0.1em; */

    font-weight: bold;

    color: black;

}



#advancedbox {

    border-top: solid 1px #aaa;

    padding-top: 0.5em;

    padding-left: 0.2em;

    font-size: 78%;

    color: #444;

}



#advancedbox input {

    float: none;

}





/* Directives */

#configdirectives {

    float: left;

    margin-left: 1em;

}



.directive {

    border: 1px solid #aaa;

    clear: left;

    margin-top: 10px;

    padding: 15px 30px;

    width: 400px;

}



.description, .example {

    padding-top: 15px;

    margin-top: 5px;

    font-size: 90%;

    clear: left;



}



.description {

    color: #000;

}



.example {

    color: #000;

}



.readonly {

    color: red;

    font-size: 85%;

    margin-bottom: 5px;

}



































/* 

   phpGraphy' stylesheet, please customise it as much as you want !

   and if you got a very nice theme that you want to share, then submit it,

   perhaps it'll be in the next release



   To change the default size font, modify the font-size element for both body and td,

   everything else is relative to them.

*/





/**

 *

 *General declaration (Mainly about font and colors) 

 *

**/



body {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-weight: normal;

	color: #2698A3;

	list-style-position: outside;

	list-style-type: disc;

}



td { 

  font-size:12px;

  font-family : Verdana,Arial,Geneva,sans-serif;

}





a { text-decoration: none }



a:hover {

	color:            #000000;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-weight: bold;

	text-decoration: underline;

	font-style: normal;

	font-variant: normal;

}



a:active {

	color: #666666;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-weight: bold;

	font-style: italic;

}



a:visited {

	color:            #666666;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-weight: bold;

	font-style: normal;

	text-decoration: none;

}



a:link {

	color:            #666666;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-weight: bold;

	font-style: normal;

	text-decoration: none;

}



a.menu:hover { text-decoration: none }



a.lbmenu:hover { text-decoration: none }



a.lbmenu { text-decoration: none }



small, .small {

  font-size: 75%;

  font-family : Verdana,Arial,Geneva,sans-serif;

  }



.small:link {

  font-size: 75%;

  font-family : Verdana,Arial,Geneva,sans-serif;

  color: #000000;

  }



.small:visited {

  font-size: 75%;

  font-family : Verdana,Arial,Geneva,sans-serif;

  color: #000000;

  }



.medium {

    font-size: 88%

	}



.big { font-size: 150%; }



.txt { 

  font-family : Courier New,sans-serif;

  }



.notes {

    margin: 0.3em 0;

    font-size: 75%;

    color: #55f;

}



.errormsg {

  font-family : Verdana,Arial,Geneva,sans-serif;

  font-size: 90%;

  color: red;

  }



.successmsg {

  font-family : Verdana,Arial,Geneva,sans-serif;

  font-size: 90%;

  font-weight: bold;

  color: blue;

  }





/**

 *

 *  Position and behavior between the differents elements

 *

 *  Here is the main page layout

 *    banner (phpGraphy logo)

 *    dirbar (Current path (left) and Links (right))

 *    welcome (.welcome file)

 *    dirlist (List of directories)

 *    dircontent (List of files/thumbs) or displaypicture (Lowres/Highres picture)

 *    pagenav (Page Naviguation, Prev/Next and page number )

 *    footer

**/



/* Global container */

#main {

/*  margin: 0 10%; */

  }



/* Default phpGraphy banner */

#banner {

  display: block;

  border: none;

  margin-bottom: 3px;

  }



/* Directory information bar (current directory) - not used anymore, now using dirbarleft/right */

#dirbar {

  width: 100%;

  border: none;

}



/* .welcome (Only displayed on the first page when in thumbs mode) */

#welcome {

    clear: left;

/*    color: #883333; */

    padding: 5px;

}



/* display the directory content (directories) */

#dirlist {

  float: left;

  clear: left;

}



/* display the directory content (files/thumbs) */

#dircontent {

  clear: left;

  width: 100%;

  margin: 15px 0 0 15px;

}



/* Page naviguation (Previous/Next, Page number) */

 #pagenav {

  float: left;

  clear: left;

  width: 100%;

  text-align: center;

  margin: 10px;

}





#footer {

  clear: left;

  width: 100%;

  text-align: center;

}



#dirbarleft {

  float: left;

  text-align: left;

  width: 75%;

  }



#dirbarright {

  float: right;

  width: 25%;

  text-align: right;

  }





/* picture title (displayed when browsing lowres/highres pictures) */

.title {

  font-family : Verdana,Arial,Geneva,sans-serif;

  text-decoration: underline;

  }



/* Lowres/Highres picture display area */

#displaypicture {

  text-align: center;

  }



#picnav {

  margin: 0.2em;

  }



#picrating span  {

  display: block;

  margin: 0.2em;

  }



#currentrating {

  clear: left;

  }



#metadataicon {

  margin-left: 5px;

  }



/* Admin form to change picture's associated data */

.rotatebutton {

  background-color : transparent;

  border: 1px solid;

  color : #2698A3;

}



/* exif metadata text */

.exifmetadata { 

  color: #646464;

  text-align: center;

  }



/* iptc metadata text */

.iptcmetadata {

  color: #a0a0a0;

  text-align: center;

  }



/* currently only used for the metadata table (hidden by default) */

.metadatatable { 

  background-color: #2698A3;

  border: 1px solid;

  border-spacing: 0px;

  margin-left:auto;

  margin-right:auto;

  margin-top: 8px;

  }

.rowbgcolor1 { background-color: #f5beb4; }

.rowbgcolor2 { background-color: #ffe5e0; }



#commentstitle {

  float: left;

  text-decoration: underline;

  margin-bottom: 10px;

}



#addcomment {

  float: right;

}



.commentfrom {

    display: block;

    clear: left;

    width: 100%;

    margin-top: 12px;

}



.usercomment {

    display: block;

    clear: left;

    width: 100%;

}





/* thumbnails properties */

.thumbnail {

   border: 1px solid #000000;

}

.picthumbnail, .picinfo {

    float: left;

}

.picinfo a, .picinfo span {

    display: block;

    padding: .5em 1em 0 1em;

}

.picinfo span {

    font-size: 75%;

    padding-left: 2em;

}







/* directory thumbnail */



/* Folder Frame related (draw a nice frame around folder (thx to Jeff for the initial CSS code) */



.fftop         { background: url(images/border-top.gif) repeat-x; }

.fftop div     { background: url(images/corner-top-left.gif) no-repeat top left; }

.fftop div div { background: url(images/corner-top-right.gif) no-repeat top right; }



.ffbottom         { background: url(images/border-bottom.gif) repeat-x; }

.ffbottom div     { background: url(images/corner-bottom-left.gif) no-repeat top left; }

.ffbottom div div { background: url(images/corner-bottom-right.gif) no-repeat top right; }



.ffcontentwrap { background: url(images/border-left.gif) repeat-y; }

.ffcontent     { background: url(images/border-right.gif) repeat-y right; }



/* Hack to handle the gap below the border with FireFox (when XHTML doctype is enabled )  */

.ffcontent a { background-color: #ececec; }



.fftop div, .fftop, .ffbottom div, .ffbottom {

	/* width: 140px; <=  Not used to be relative - it's added within the code as style argument */

	height: 20px;

	font-size: 1px;

}



.ffcontent {

    text-align: center;

    /* width: 140px; <=  Not used to be relative - it's added within the code as style argument */

}



/* One div per directory, contains a dirframe and a dirtitle */

.direntry {

    float: left;

    margin: 0 15px 0 0;

    clear: left;

    

}



/*  Resides inside direntry, contains dirthumbnail and all the ff* (framefolder) entries) */

.dirframe {

    float: left;

}



/* Resides inside a dirframe */

.dirthumbnail {

    border: 1px solid #aaaaaa;

}





/* Used when $directory_display_mode = 'icon' */

.diricon {

    float: left;

    clear: left;

    border: none;

    vertical-align: middle;

    margin: 1px 1px 1px -10px;

}



/* Used when $directory_display_mode = 'picture' */

.dirtitlepicture {

    float: left;

    margin: 15px 0 10px 10px;

    font-weight: bold;

    font-size: 120%;

}



.dirinfo {

    font-size: 80%;

    font-weight: normal;

    margin-top: 5px;

    margin-bottom: 5px;

    color: #aaaaaa;

}



/* Used when $directory_display_mode = 'icon' */

.dirtitleicon {

    float: left;

    margin: 5px 0 5px 5px;

}



/* Used when $directory_display_mode = 'name' */

.dirtitlename {

    margin-left: -15px;

}







/* icons properties */

.icon { border: none }



/* lowres/highres picture properties */

.picture { 

  border: 1px solid #000000;

  }



.popup {

  position: fixed;

  left: 10px;

  top: 10px;

  }



#loginform table {

    margin: 5% auto;

    border: 1px solid #AAAAAA;

    padding: 50px;

}



/* login page */



#loginbox {

    position: relative;

    width: 300px;

    margin: 5% auto;

    border: 1px solid #AAAAAA;

    padding: 50px;

}



.margintop {

    margin-top: 5px;

}



.floatlabel {

    width: 4em;

    float: left;

    text-align: right;

    margin: 0 1em 10px 0;

    clear: both

}



#userscomments {



}



/* USER MANAGEMENT */



/* USER MANAGEMENT LIST */

table.um { border-collapse: collapse; border: 2px solid #999; margin: .5em auto; }

table.um th { font-weight: bold; color: #333; padding: .5em; background-color: #eee; }

table.um td { border: 1px solid #ddd; padding: .5em; text-align: center; }

table.um caption { padding: .5em; font-weight: bold; background-color: #eee; border: 2px solid #999; margin: 0 auto; }



/* USER MANAGEMENT EDIT USER INFO */

#user_management { width: 30em; margin: 1em auto; }

#bottomForm { text-align: right; font-weight:bold; }

#bodyForm { background-color: #eee; }

#bodyForm legend { font-weight: bold; }

#bodyForm fieldset label { float: left; width: 40%; text-align: right;  padding: 0 .5em 0 0; line-height: 1.8; }

#bodyForm .legend { font-style: italic; color: #666; }