/* dot prefix means class */
/* hash prefix means id */

body {
	background-color: black;
}

/* top line of all pages */
#pagebanner {
	background-color: pink;
	border-style: outset;
	border-width: 5px;
	border-left-width: 10px;
	border-right-width: 10px;
	border-color: black;
}

/* rules for if the top line is a modelname */
.modelname {
	text-align: center;
	font-size: 20pt;
	font-style: italic;
	font-weight: bold;
	font-family: sans;
	color: navy;
}

/* rules for if it isn't - ie it's a page title */
.staticheader {
	font-size: 18pt;
	font-style: italic;
	font-weight: bold;
	font-family: sans;
	color: navy;
}

/* the navigation bar of all pages */
#navigation {
 	background-color: black;
	border: 10px solid;
	border-color: black;
	text-align: center;
}

.navtext {
	background-color: ivory;
	border-style: inset;
	border-width: 5px;
	border-left-width: 10px;
	border-right-width: 10px;
	border-color: brown;
}

.navtext a:visited {
	text-decoration: none;
	color: black;
}

.navtext a:link {
	text-decoration: none;
	color: black;
}

/* settings for girlie.php: the model page */
/* first section is the modelinfo section */
#modelinfo {
	background-color: black;
	border-width: 5px;
	border-style: solid;
	border-color: navy;
}

/* first column of the modelinfo section */
#modelcol1 {
	display: table-cell;
	top: 0;
	left: 0;
	width: 20%;
	vertical-align: top;
}

/* it's only contents */
#headshot {
        background-color: brown;
        border-style: outset;
        border-width: 5px;
        border-left-width: 10px;
        border-right-width: 10px;
        border-color: teal;
	text-align: center;
}

/* second column of the modelinfo section */
#modelcol2 {
	display: table-cell;
	width: 48%;
	vertical-align: top;
	text-align: center;
	background-color: black;
}

/* third column of the modelinfo section */
#modelcol3 {
	display: table-cell;
	width: 12%;
	top: 0;
	right: 0;
	vertical-align: top;
}

/* the third column holds just the model attributes box */
#modelattributes {
	background-color: brown;
        border-style: outset;
        border-width: 5px;
        border-left-width: 10px;
        border-right-width: 10px;
        border-color: teal;
        text-align: center;
}

/* each cell in the model attribute box */
.modattribcell {
        display: block;
}

/* the title of each cell */
.modattribtext {
        display: inline;
        color: aqua;
        font-size: 15pt;
        font-weight: bold;
        font-family: arial, helvetica, helv, sans;
}

/* the attribute icon for the cell */
.modattribicon {
        display: block;
}

/* the caption (describes the value) for the cell */
.modattribcaption {
        color: yellow;
        font-size: 10.5pt;
        font-family: arial, helvetica, helv, sans;
}

/* back to the second column now, the most complex part */
/* the model biography frame */
#modelbioframe {
        display: block;
	text-align: center;
}

/* model biography box */
.modelbio {
        background-color: brown;
        border-style: outset;
        border-width: 5px;
        border-left-width: 10px;
        border-right-width: 10px;
	margin: 20px;
	text-align: center;
}

/* the title of the biography (ie About Jane Doe) */
.modelbiotitle {
        color: yellow;
        font-size: 14pt;
        font-family: arial, helvetica, helv, sans;
}

/* the body of the biography text */
.modelbiotext {
        color: black;
	font-style: italic;
	font-size: 12pt;
        background-color: ivory;
        border-style: inset;
        border-width: 2px;
        border-left-width: 5px;
        border-right-width: 5px;
	padding: 5px;
	text-align: justify;
}

/* model specific icons - outer box */
#modelspec {
	text-align: center;
}

/* the layout block for model specific icons */
#modelspecblock {
	display: inline;
	text-align: center;
}

/* the container to hold them all in a postitionable grouping */
#modelspeccontainer {
	display: table-cell;
        background-color: brown;
        border-style: outset;
        border-width: 5px;
        border-left-width: 10px;
        border-right-width: 10px;
        border-color: teal;
	padding: 5px;
}

/* the flag for the model's home country */
.modelcountryflag {
	display: table-cell;
	vertical-align: middle;
	padding: 3px;
}

/* the model's attributes */
.mattributeicons {
	display: table-cell;
	vertical-align: middle;
	padding: 3px;
}

/* the model's ratings */
.modelrating {
	display: table-cell;
	vertical-align: middle;
	padding: 3px;
}

/* the model's flags box */
.modelflags {
	display: table-cell;
	vertical-align: middle;
	padding: 3px;
}

/* the text for the model's flag (ie favourite) */
.modelflagtext {
        color: aqua;
        font-size: 12pt;
        font-weight: bold;
        font-family: arial, helvetica, helv, sans;
}

/* the overall container for the set display */
#setinfo {
	border-style: solid;
	border-color: ivory;
	border-width: 5px;
}

/* column 1 of the set display - where the featured set goes */
#setcol1 {
	display: table-cell;
	text-align: left;
	width: 30%;
}

/* column 2 of the set display - where all the sets go */
#setcol2 {
	display: table-cell;
	width: 70%;
	vertical-align: top;
	text-align: right;
}

/* the box around the featured set */
#featuredset {
        background-color: brown;
        border-style: outset;
        border-width: 5px;
        border-left-width: 10px;
        border-right-width: 10px;
        border-color: teal;
        text-align: center;
}

/* the font for it's title */
.bigsettitle {
        color: yellow;
        font-size: 10.5pt;
        font-family: arial, helvetica, helv, sans;
}

/* the tile properties for the image set icon to go in */
.imagebigtile {
        background-color: ivory;
        border-style: outset;
        border-width: 5px;
        border-left-width: 10px;
        border-right-width: 10px;
        border-color: pink;
}

/* the tile properties for the movie set icon to go in */
.moviebigtile {
        background-color: ivory;
        border-style: outset;
        border-width: 5px;
        border-left-width: 10px;
        border-right-width: 10px;
        border-color: yellow;
}

/* where all the smaller icons go */
#seticonarea {
	width: 100%;
	text-align: center;
}

#seticonblock {
	vertical-align: top;
	text-align: center;
	left-margin: 2%;
	right-margin: 2%;
	padding: 2%;
}

#setnewrow {
	width: 100%;
}

#modiconrow {
	width: 100%;
}

/* general rules on displaying links */

a:link {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}

/* rules for small image set icon tiles */
div.imagesettile {
	width:120px;
	height:120px;
	background:#f8f8f8;
	border-style: outset;
	border-width: 5px;
	border-color: pink;
	text-align:center;
	display:table-cell;
	vertical-align:middle;
}

div.imagesettile img {
	margin:0 auto;
	border:1px solid #aaa;
	padding: 2px;
}

div.imagetexttile {
	width:120px;
	height:150px;
	background:#f8f8f8;
	border-style: outset;
	border-width: 5px;
	border-color: pink;
	text-align:center;
	display:table-cell;
	vertical-align:middle;
}

div.imagetexttile img {
	margin:0 auto;
	border:1px solid #aaa;
	padding: 2px;
}

/* rules for normal image set icon tiles */

div.normimagetile {
	width:240px;
	height:240px;
	background:#f8f8f8;
	border-style: outset;
	border-width: 5px;
	border-color: pink;
	text-align: center;
	display:table-cell;
	vertical-align:middle;
}

div.normimagetile img {
	margin:0 auto;
	border:1px solid #aaa;
	padding: 2px;
}

/* rules for small movie set icon tiles */
div.moviesettile {
	width:120px;
	height:120px;
	background:#f8f8f8;
	border-style: outset;
	border-width: 5px;
	border-color: yellow;
	text-align:center;
	display:table-cell;
	vertical-align:middle;
}

div.moviesettile img {
	margin:0 auto;
	border:1px solid #aaa;
	padding: 2px;
}

div.movietexttile {
	width:120px;
	height:150px;
	background:#f8f8f8;
	border-style: outset;
	border-width: 5px;
	border-color: yellow;
	text-align:center;
	display:table-cell;
	vertical-align:middle;
}

div.movietexttile img {
	margin:0 auto;
	border:1px solid #aaa;
	padding: 2px;
}

/* rules for normal movie set icon tiles */

div.normmovietile {
	width:240px;
	height:240px;
	background:#f8f8f8;
	border-style: outset;
	border-width: 5px;
	border-color: yellow;
	text-align: center;
	display:table-cell;
	vertical-align:middle;
}

div.normmovietile img {
	margin:0 auto;
	border:1px solid #aaa;
	padding: 2px;
}

/* NB: not sorted out yet */
/* model index page settings */

/* how to present the model list */

.modellist {
	display: inline;
	text-align: center;
	margin: 5px;
	background-color: green;
}

.modeliconrow {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

/* how to present each model's headshot */

.modeltile {
	display:table-cell;
        height: 190;
        width: 130;
        background-color: aqua;
        border-style: outset;
        border-width: 5px;
        border-left-width: 10px;
        border-right-width: 10px;
        border-color: pink;
	text-align:center;
	vertical-align:middle;
}

/* the way to format the text of the model's name */
.iconmodelname {
        color: yellow;
        background-color: black;
        font-size: 9.5pt;
        font-family: arial, helvetica, helv, sans;
}

/* the new items section of the main page */
#newstuff {
        display: block;
        position: relative;
        top: 0;
        left: 0;
        text-align: center;
        border-style: inset;
        border-width: 5px;
        border-left-width: 10px;
        border-right-width: 10px;
        border-color: red;
        width: 40em;
}

/* latest sets section */
#latestsets {
        display: block;
        border-style: outset;
        border-width: 5px;
        border-color: red;
        font-size: 0.9em;
}

/* latest movies section */
#latestmovies {
        display: block;
        border-style: outset;
        border-width: 5px;
        border-color: red;
        font-size: 0.9em;
}

/* latest models section */
#newestmodels {
        border-style: outset;
        border-width: 5px;
        border-color: green;
        font-size: 0.9em;
}

/* icon container block */
.iconblock {
	display: inline;
        text-align: center;
}

/* section title text colours/fonts */
.sectiontitle {
        background-color: brown;
	color: ivory;
        text-align: center;
        font-size: 12pt;
        font-family: arial, helvetica, helv, sans;
}


/* front page basic layout */

#maincanvas {
        background-color: black;
        border-width: 5px;
        border-style: solid;
        border-color: navy;
	background-image: url(images/pinkmet-guardians-180.png);
	background-repeat: no-repeat;
	background-position: bottom right;
}

#maincol1 {
	display: table-cell;
	width: 48%;
	vertical-align: top;
}

#maincol2 { 
	display: table-cell;
	width: 48%;
	vertical-align: top;
}

/* front page site introduction */

#siteintro {
	margin: 5px;
        font-size: 9pt;
        font-family: arial, helvetica, helv, sans;
	color: ivory;
        border-style: solid;
        border-width: 2px;
}

/* title layout rules */
#introtitle {
        display: block;
        text-align: center;
        font-size: 1.2em;
        color: navy;
        background-color: aqua;
}

/* site intro text */
#introtext {
        text-align: justify;
        padding: 10px;
}

/* explore the site box */

#explore {
	display: block;
	margin: 5px;
        font-size: 12pt;
        border-style: solid;
        border-width: 2px;
	border-color: ivory;
}

#exploretitle {
        display: block;
        text-align: center;
        font-size: 1.2em;
        color: navy;
        background-color: aqua;
}

#exploreimagetitle {
        display: block;
        text-align: center;
        color: green;
        background-color: ivory;
	margin: 5px;
}

#exploremovietitle {
        display: block;
        text-align: center;
        color: green;
        background-color: ivory;
	margin: 5px;
}

#exploreimages {
	display: block;
	text-align: center;
	font-size: 0.9em;
        background-color: ivory;
        border-style: outset;
        border-width: 2px;
        border-left-width: 10px;
        border-right-width: 10px;
        border-color: pink;
	margin: 10px;
        color: brown;
        font-family: arial, helvetica, helv, sans;
}

#exploremovies {
	display: block;
	text-align: center;
	font-size: 0.9em;
        border-style: outset;
        border-width: 5px;
        border-left-width: 10px;
        border-right-width: 10px;
        border-color: yellow;
	margin: 10px;
        color: brown;
        font-family: arial, helvetica, helv, sans;
}

.explorelink {
	display: block;
        color: silver;
        background-color: brown;
        border-style: inset;
        border-width: 5px;
        border-left-width: 10px;
        border-right-width: 10px;
        border-color: brown;
	margin: 10px;
}

.explorelink a:visited {
        text-decoration: none;
        color: ivory;
}

.explorelink a:link {
        text-decoration: none;
        color: ivory;
}

/* for model directory */

#directory {
        display: block;
        border-style: outset;
        border-width: 5px;
        border-color: red;
        font-size: 0.9em;
	text-align: center;
}

.samplesource {
	font-size: 0.6em;
        color: navy;
}
	
.samplesource a:visited {
        text-decoration: none;
        color: black;
}

.samplesource a:link {
        text-decoration: none;
        color: black;
}

/* latest additions page layout */

#fullnew {
        display: block;
        position: relative;
	top: 0;
	left: 5%;
        text-align: center;
        border-style: inset;
        border-width: 5px;
        border-left-width: 10px;
        border-right-width: 10px;
        border-color: red;
        width: 90%;
}

.setnewrow {
	display: inline;
        text-align: center;
}

/* photo and video set page layout */

#setpagecol1 {
	display: table-cell;
	top: 0;
	left: 0;
	width: 25%;
	padding: 5px;
	vertical-align: top;
}

#setpagecol2 {
	display: table-cell;
	width: 50%;
	vertical-align: top;
	text-align: center;
	padding: 5px;
}

#setpagecol3 {
	display: table-cell;
	top: 0;
	right: 0;
	width: 25%;
	padding: 5px;
	vertical-align: top;
}


/* how to layout a large icon */
#setbigicon {
        text-align: center;
	width: 260;
        border-style: inset;
        border-width: 5px;
	background-color: brown;
}

/* main set attributes */
.mainsetattr {
        display: block;
	text-align: center;
	width: 240;
        border-style: outset;
        border-width: 5px;
        border-color: green;
        font-size: 0.9em;
        background-color: grey;
}

/* set description attributes */
#setabout {
        display: block;
	width: 99%;
	top: 0;
	right: 0;
        border-style: outset;
        border-width: 5px;
        border-color: green;
        font-size: 0.9em;
        background-color: brown;
}

#settitle {
	text-align: center;
	width: 99%; 
	border-style: outset;
	border-width: 5px;
	border-color: green;
	font-size: 10.5pt;
	font-style: italic;
	font-weight: bold;
	font-family: serif;
	color: yellow;
	background-color: brown;
}

#setmaintitle {
	text-align: center;
	/* width: 99%; */
	border-style: outset;
	border-width: 5px;
	border-color: green;
	font-size: 12.5pt;
	font-style: italic;
	font-weight: bold;
	font-family: serif;
	color: yellow;
	background-color: brown;
}

#setattrtile {
	text-align: center;
	border-style: outset;
	border-width: 5px;
	border-color: cyan;
        color: cyan;
        font-size: 12.5pt;
        font-family: arial, helvetica, helv, sans;
}

#setdescbox { 
	display: block;
	position: relative;
	top: 0;
	left: 20%;
	text-align: center;
}

#setdesc {
	width: 60%;
	text-align: center;
	border-style: outset;
	border-width: 10px;
	border-color: cyan;
	font-size: 12pt;
	font-family: serif;
}

#setdesctext {
	color: ivory;
	font-size: 12pt;
        font-style: italic;
        font-weight: bold;
        font-family: serif;
}
	
.officialtitle {
	color: pink;
	background-color: brown;
	font-size: 12.5pt;
	font-family: sans;
	font-weight: bold;
}

#imagechoices {
	width:30%;
	text-align: center;
	border-style: inset;
	border-width: 10px;
	border-color: grey;
	background-color: white;
}

/* for gallery indexes */

#galcol1 {
	display: table-cell;
	width: 30%;
	vertical-align: top;
}

#galcol2 {
	display: table-cell;
	width: 60%;
	vertical-align: top;
}

#galnavcontainer {
	width: 85%;
        border-style: outset;
        border-width: 2px;
        border-left-width: 10px;
        border-right-width: 10px;
        border-color: red;
}

#galexamplecontainer {
        display: block;
        position: relative;
        top: 0;
        left: 0;
        text-align: center;
        border-style: outset;
        border-width: 5px;
        border-left-width: 10px;
        border-right-width: 10px;
        border-color: red;
        width: 40em;
}

#gallerylist {
        display: block;
        font-size: 0.9em;
	margin: 10px;
}

.samplesrow {
	margin: 10px;
}

.samplestitletext {
	background-color: brown;
	color: ivory;
	padding: 3px;
	border-style: inset;
	border-width: 3px;
	border-left-width: 10px;
	border-right-width: 10px;
	border-color: red;
}


.samplestitletext a:visited {
        text-decoration: none;
        color: ivory;
}

.samplestitletext a:link {
        text-decoration: none;
        color: ivory;
}

/* individual gallery display (gallery.php) */

#gallerycanvas {
        display: block;
        position: relative;
        top: 0;
        left: 5%;
        text-align: center;
        border-style: inset;
        border-width: 5px;
        border-left-width: 10px;
        border-right-width: 10px;
        border-color: red;
        width: 90%;
}

#gallerytitle {
        background-color: brown;
	color: ivory;
        text-align: center;
        font-size: 12pt;
        font-family: arial, helvetica, helv, sans;
}

#galleryicons {
        display: block;
        border-style: outset;
        border-width: 5px;
        border-color: red;
        font-size: 0.9em;
        /* background-color: black; */
}

/* overall gallery index (movies.php) */

#galindexcol1 {
	display: table-cell;
	width: 30%;
	vertical-align: top;
}

#galindexcol2 {
	display: table-cell;
	width: 60%;
	vertical-align: top;
}

#indexcol1container {
	border-style: solid;
	border-color: ivory;
	border-width: 3px;
}

#indexcol2container {
        display: block;
        position: relative;
        top: 0;
        left: 0;
        text-align: center;
        border-style: outset;
        border-width: 5px;
        border-left-width: 10px;
        border-right-width: 10px;
        border-color: red;
        width: 40em;
}

/* search screen */

#searchformbox {
	color: ivory;
	padding: 20px;
	text-align: center;
        font-size: 12pt;
        font-family: arial, helvetica, helv, sans;
	border-style: outset;
	border-width: 5px;
	border-color: red;
}

#searchmedia {
	padding: 10px;
	border-style: solid;
	border-width: 3px;
	border-color: aqua;
}

#modelsearchbox {
	padding: 10px;
	border-style: solid;
	border-width: 3px;
	border-color: blue;
}

#setsearchbox {
	padding: 10px;
	border-style: solid;
	border-width: 3px;
	border-color: navy;
}

.searchelement {
	padding: 10px;
}

.searchtitletext {
	border-style: solid;
	border-width: 2px;
	border-color: white;
	padding: 5px;
	color: ivory;
        background-color: brown;
	font-family: sans;
	font-weight: bold;
	font-size: 12pt;
}

#searchresults {
        display: block;
        position: relative;
	top: 0;
	left: 5%;
        text-align: center;
        border-style: inset;
        border-width: 5px;
        border-left-width: 10px;
        border-right-width: 10px;
        border-color: red;
        width: 90%;
}

#searchresulthead {
	padding: 20px;
	background-color: ivory;
}

#searchendnotify {
	padding: 5px;
        background-color: brown;
	border-style: inset;
	border-width: 5px;
	border-color: red;
        color: ivory;
        text-align: center;
        font-size: 12pt;
        font-family: arial, helvetica, helv, sans;
}

#searchresultfoot {
	padding: 20px;
}

#searchresulttitle {
	padding: 5px;
        background-color: brown;
	border-style: inset;
	border-width: 5px;
	border-color: red;
        color: ivory;
        text-align: center;
        font-size: 12pt;
        font-family: arial, helvetica, helv, sans;
}