/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	HTML TAGS
    These are just basic HTML tags that have been re-written to
    better suite the theme of the software.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
body {
	font-family: Calibri;
	font-size: 13px;
	text-align: center;
}

body.admin {
    background-color: #E6F5FF;
    background-image: url(Images/Admin-Background.gif);
    background-position: top left;
    background-repeat: no-repeat;
}

h1 {
	font-weight: bolder;
	color: #007DCD;
	text-align: center;
}

h2 {
	font-weight: bolder;
	color: #007DCD;
    text-align: left;
    border-bottom: 1px #C0C0C0 solid;
    padding-left: 10px;
    padding-top: 0px
}

h3 {
	font-weight: bolder;
	color: #007DCD;
    font-size: 14px;
    text-align: left;
    margin-bottom: -1px;
}

p {
    font-size: 13px;
    text-align: justify;
    padding-left: 10px;
    padding-right: 10px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	CONFIRM / ERROR TAGS
    These are for the confirmation and error messages that appear
    throughout the software.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
p.error {
    text-align: center;
    background-color: #FFD2D2;
    color: #8C0000;
    padding: 5px 5px 5px 5px;
    font-weight: bold;
    border: 1px solid #8C0000;
    width: 860px;
}

p.confirm {
    text-align: center;
    background-color: #D2FFD2;
    color: #008C00;
    padding: 5px 5px 5px 5px;
    font-weight: bold;
    border: 1px solid #008C00;
    width: 860px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	WEB LINK TAGS
    These are just he standard hyperlink tags coloured differently.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
a {
	color: #007DCD;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	LARGE HYPERLINK TAGS
    These are for when a regular sized hyperlink just won't cut
    it such as are used in the "Rotate Left" buttons.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
a.largehyperlink {
	font-size: 14px;
    font-weight: bolder;
}
        
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	MAIN MENU LINK TAGS
    These are for the main links that appear just under the top
    image.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
a.mainmenu {
	font-weight: bolder;
    font-size: 15px;
	color: #F4F4F4;
}

a.mainmenu:hover {
    text-decoration: underline;
}

a.mainmenuselected {
	font-weight: bolder;
    font-size: 15px;
	color: #007DCD;
	text-decoration: underline;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	ADMIN MAIN MENU LINK TAGS
    These are for the main links that appear on the Admin page.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
a.adminmenu {
    font-size: 15px;
	color: #808080;
	text-decoration: underline;
}

a.adminmenu:hover {
	color: #007DCD;
}

a.adminmenuselected {
	font-weight: bolder;
    font-size: 15px;
	color: #007DCD;
	text-decoration: underline;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	GALLERY LIST TAGS
    These are for the hyperlinks for each folder link in the
    gallery on the main.php page.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
a.gallery {
	color: #000000;
    font-size: 14px;
	text-decoration: none;
}

a.gallery:hover {
	color: #006699;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	ADDRESS BAR TAGS
    These are for the breadcrumb trail hyperlinks that appear
    in the Address Bar.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
a.breadcrumb {
	color: #4759B5;
	text-decoration: none;
    font-weight: bolder;
    font-size: 18px;
}

a.breadcrumb:hover {
	text-decoration: under
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	MULTIPLE PAGE TAGS
    These are for the "Next >" and "< Prev" pages hyperlinks that
    appear on the main.php page when there are too many thumbnails
    to display.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

a.pagelinks {
	color: #007DCD;
	text-decoration: none;
    border: 1px solid #D2DADD;
    padding: 4px 8px 4px 8px;
    font-weight: bold;
}

a.pagelinks:hover {
	color: #D2DADD;
    border: 1px solid #007DCD;
    background-color: #007DCD;
}

a.pagelinkscurrent {
	color: #000000;
	text-decoration: none;
    padding: 4px 8px 4px 8px;
    font-weight: bold;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	FOOTER LINK TAGS
    These are for the hyperlinks in the footer section.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

a.footer {
	font-weight: bolder;
	color: #F4F4F4;
}

a.footer:hover {
	text-decoration: underline;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	MAIN PAGE FORMATTING TAGS
    These tags are responsable for the general format of the page
    including the shadowing effects on the sides. They are quite
    touchy so it is advised to just leave them alon.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
table.mainpage {
    text-align: center;
    width: 800px;
}

table.mainpage td.leftside {
    background-image: url(Images/Main-LeftSideShadow.jpg);
    background-repeat: repeat-y;
    background-position: left;
    width: 37px;
}

table.mainpage td.middleside {
    background-color: #FFFFFF;
    width: 726px;
    text-align: left;
}

table.mainpage td.rightside {
    background-image: url(Images/Main-RightSideShadow.jpg);
    background-repeat: repeat-y;
    background-position: right;
    width: 37px;
}

table.mainpage td.mainmenu {
    background-image: url(Images/Main-Header-Background.jpg);
    background-repeat: repeat-x;
    text-align: center;
    width: 726px;
    height: 25px;
}

table.footer {
    text-align: center;
    background-image: url(Images/Main-Footer.jpg);
    background-repeat: no-repeat;
    height: 100px;
    width: 800px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	GALLERY TABLE TAGS
    These are for the main table tags that are used to hold the
    folder listings and individual thumbnails on the main.php page.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
table {
    font-family: Calibri;
    font-size: 13px;
}

table.gallery {
    font-size: 15px;
	background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	MAIN TABLE TAGS
    These are for the folder listings that alternate in colour
    as they are listed on the main.php page.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
td.data1 {
    background-color: #F4FCFF;
    color: #000000;
    text-align: left;
}

td.data2 {
    background-color: #DFF4FF;
    color: #000000;
    text-align: left;
}

table.addressbar {
    border-bottom: solid 1px #141414;
    background-color: #F4FCFF;
    width: 100%;
}

table.loadingwindow {
    text-align: center;
    background-image: url(Images/Loading.gif);
    background-repeat: no-repeat;
    background-position: center;
    height: 250px;
    width: 100%;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	BORDERED TABLE TAGS
    These are for the Gallery Info page's information tables.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
table.border {
    border: 1px;
    border: 1px solid #CCCCCC;
}

table.innerborder {
    border: solid 1px #CCCCCC;
}

table.innerborder td.left {
    border-bottom: solid 1px #CCCCCC;
    background-color: #EBEBEB;
    text-align: left;
    padding: 10px 10px 10px 10px;
    font-weight: bolder;
}

table.innerborder td.right {
    border-bottom: solid 1px #CCCCCC;
    border-left: solid 1px #CCCCCC;
    background-color: #F5F5F5;
    padding: 10px 10px 10px 10px;
    text-align: left;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	IMAGE TAGS
    These are for any general image as well as for the actual
    thumbnail images that are displayed on the main.php page.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

img {
	border: 0px;
}

img.thumbnail {
    padding: 4px;
    background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
}

img.thumbnail:hover {
	border: 1px solid #007DCD;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	JAVASCRIPT POPUP ERROR MESSAGE TAGS
    These are for the javascript popup messages that you can see
    whenever you enter in a wrong input value into something like
    the "New Folder" field.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#msg {
    display: none;
    position: absolute;
    z-index: 200;
    background: url(Images/msg_arrow.gif) left center no-repeat;
    padding-left: 7px
}

#msgcontent {
    display: block;
    background: #F3E6E6;
    border: 2px solid #924949;
    border-left: none;
    padding: 5px;
    min-width: 150px;
    max-width: 250px
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*
	LOCATION / LINK / INFO POPUP TAGS
    These are for each and every pop up box that appears throughout
    the software such as "Rename Folder" etc.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#GB_window_newfolder {
    top: 10px;
    left: 0px;
    position: absolute;
    background: #F4FCFF;
    border: 4px solid #5BACE1;
    overflow: auto;
    width: 400px;
    z-index: 150;
}

#GB_window_newfolder img {
    position: absolute;
    top: 30px;
    right: 15px;
}

#GB_window_rename {
    top: 10px;
    left: 0px;
    position: absolute;
    background: #F4FCFF;
    border: 4px solid #5BACE1;
    overflow: auto;
    width: 400px;
    z-index: 150;
}

#GB_window_rename img {
    position: absolute;
    top: 30px;
    right: 15px;
}

#GB_window_info {
    top: 10px;
    left: 0px;
    position: absolute;
    background: #F4FCFF;
    border: 4px solid #5BACE1;
    overflow: auto;
    width: 360px;
    z-index: 150;
}

#GB_window_info img {
    position: absolute;
    top: 30px;
    right: 15px;
}

#GB_window_link {
    top: 10px;
    left: 0px;
    position: absolute;
    background: #F4FCFF;
    border: 4px solid #5BACE1;
    overflow: auto;
    width: 400px;
    z-index: 150;
}

#GB_window_link img {
    position: absolute;
    top: 30px;
    right: 15px;
}

#GB_window_location {
    top: 10px;
    left: 0px;
    position: absolute;
    background: #F4FCFF;
    border: 4px solid #5BACE1;
    overflow: auto;
    width: 600px;
    z-index: 150;
}

#GB_window_changeadminpass {
    top: 10px;
    left: 0px;
    position: absolute;
    background: #F4FCFF;
    border: 4px solid #5BACE1;
    overflow: auto;
    width: 600px;
    z-index: 150;
}

#GB_window_changegallerypass {
    top: 10px;
    left: 0px;
    position: absolute;
    background: #F4FCFF;
    border: 4px solid #5BACE1;
    overflow: auto;
    width: 600px;
    z-index: 150;
}

#GB_window_changedisplaysizes {
    top: 10px;
    left: 0px;
    position: absolute;
    background: #F4FCFF;
    border: 4px solid #5BACE1;
    overflow: auto;
    width: 300px;
    z-index: 150;
}

#GB_caption {
    font-size: 16px;
    background: #5BACE1;
    padding: 2px 0 2px 5px;
    font-weight: bolder;
    text-align: left;
}