/*style sheet for grahamclinton.com */

body
{
background-color:#23415A;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:1em;
}

img
{
border-style:none;
}

#outercontainer
{
width:80%;
margin: auto;
background-color: transparent;
border: 0em solid #000000;
}

#innercontainer
{
margin: auto;
background-color: transparent;
border: 0em solid #FFFFFF;
}

#header
{
padding: .5em;
background-color: transparent;
border: 0em solid #FFFFFF;
margin-bottom:0.5em;
text-align: left;
}

#left
{
background-color:transparent;
float:left;
width:15%;
margin: 5em 1em 0 0;
}

#right
{
background-color:transparent;
float:right;
width:15%;
margin-top:2em;
margin-bottom:1em;
padding:1em;
font-size:70%;
text-align:left;
}

#map
{
margin:auto;
border:none;
}

#map a:link
{
border:none;
background-color:transparent;
}

#map a:visited
{
border:none;
background-color:transparent;
}

#map a:hover
{
border:none;
background-color:transparent;
}

#map a:active
{
border:none;
background-color:transparent;
}

#middle
{
min-height:50em;
background-color:transparent;
margin-top:5em;
margin-left:20%;
margin-right:20%;
border-right:0.5em ridge #FFFFFF;
padding:3em 3em 0 0;
font-size: 0.8em;
}

#middle h1
{
font-size: 1.3em;
font-weight: normal;
text-align: left;
}


#middle h2
{
font-size:1.1em;
font-weight:normal;
text-align:centre;
}

#middle a:link
{
text-decoration:none;
color:#B5CDE1;
}

#middle a:visited
{
text-decoration:none;
color:#B5CDE1;
}

#middle a:hover
{
text-decoration:underline;
color:#B5CDE1;
}

#middle a:active
{
text-decoration:none;
color:#B5CDE1;
}


#leftimg
{
float:left;
margin: 0 1em 0.5em 0;
}



.boxright
{
float:right;
border:0.2em dashed #FF7A49;
width:20em;
min-height:5em;
padding:0.5em;
margin:0.2em 0 0.2em 1em;
font-size:90%;
}

.boxright h1
{
color:#FF7A49;
font-size:100%;
text-align:center ! important;
}

.boxright a:link
{
text-decoration:none;
color:#B5CDE1;
}

.boxright a:visited
{
text-decoration:none;
color:#B5CDE1;
}

.boxright a:hover
{
text-decoration:underline;
color:#B5CDE1;
}

.boxright a:active
{
text-decoration:none;
color:#B5CDE1;
}

.boxleft
{
float:left;
border:0.2em dashed #FF7A49;
width:20em;
min-height:5em;
padding:0.5em;
margin:0.2em 1em 0.2em 0;
font-size:90%;
}

.boxleft h1
{
color:#FF7A49;
font-size:100%;
text-align:center ! important;
}

.boxleft a:link
{
text-decoration:none;
color:#B5CDE1;
}

.boxleft a:visited
{
text-decoration:none;
color:#B5CDE1;
}

.boxleft a:hover
{
text-decoration:underline;
color:#B5CDE1;
}

.boxleft a:active
{
text-decoration:none;
color:#B5CDE1;
}





#midin
{
float:left;
width:170px;
margin:1em;
min-height:170px;
background:url(s.png);
text-align:center;
}

#midin h1
{
text-align:center;
color:#000000;
font-weight:bold;
font-size:135%;
}

.heading
{
text-align:center;
color:#000000;
font-weight:bold;
font-size:135%;
}




.thinkoid
{
display:inline;
position: relative;
min-height:2em;
}

.tickler img
{
background-color:transparent;
text-decoration:none;
border-style:none !important;
}

.tickler:hover{
background-color:transparent;
text-decoration:none;
}

.tickler:hover img
{
border-style:none;
}

.tickler span{ /*CSS for enlarged image*/
position: absolute;
background-color: #FFFFFF;
padding: 1em;
left: -1000px;
border: 0.5em outset #4B0082;
border-radius:15px;
-moz-border-radius:15px;
box-shadow: 10px 10px 5px #C0C0C0;
-webkit-box-shadow:10px 10px 5px #C0C0C0;
-moz-box-shadow:10px 10px 5px #C0C0C0;

/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#C0C0C0')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#C0C0C0');





visibility: hidden;
color: #000000;
text-decoration: none;
text-align:left;
font-size:90%;

}
.tickler span img{ /*CSS for enlarged image*/
border: none;
padding: 0;
}

.tickler:hover span{ /*CSS for enlarged image*/
visibility: visible;
width:35em;
min-height:10em;

left: -40em; /*position where enlarged image should offset horizontally */

z-index: 50;
}

#mouse
{
float:left;
margin:0 0.5em 0.5em 0;
}


#left ul
{
list-style:none;
font-size:70%
}






.bpop
{
display: none;
}



.itr
{
position: relative;
background-color: #23415A;
text-decoration: none;
color: #B5CDE1;
padding-left:0.5em;
padding-right:0.5em;
}

.itr:hover .bpop
{
display: block;
position: absolute;
width: 25em;
background-color: #000000;
color:#FF9933;
text-align:left;
padding: 0.5em;
border: 0.4em ridge #FF9933;
border-radius:15px;
-moz-border-radius:15px;
box-shadow: 10px 10px 5px #FF9933;
-webkit-box-shadow:10px 10px 5px #FF9933;
-moz-box-shadow:10px 10px 5px #FF9933;

/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#FF9933')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#FF9933');



padding: 5px 5px 5px 15px;
left: 25em;
top: -0.5em;
z-index:20;
white-space:normal;
}

.itr
{
display: inline-block;
top: 0.15em;
line-height: 1.05;
}



/*II popup*/


#II
{
width:170px;
margin:1em;
min-height:170px;
text-align:center;
}

#II h1
{
color:#FFFFFF;
font-weight:bold;
font-size:120%;
text-align:center;
}

.IIoid
{
display:inline;
position: relative;
height:20em;
}

.IIler img
{
background-color:transparent;
text-decoration:none;
border-style:none !important;
}

.IIler:hover
{
text-decoration:none;
}

.IIler:hover img
{
border-style:none;
}

.IIler span
{
position:absolute;
background-color: #1C092D;
padding: 2em;
border: 0.6em ridge #C0C0C0;
border-radius:12px;
-moz-border-radius:12px;
visibility: hidden;
color: #FFFFFF;
text-decoration: none;
text-align:left;
font-size:90%;

}
.IIler span img
{
border: none;
padding: 0;
}

.IIler:hover span
{
visibility:visible;
width:25em;
min-height:10em;
left: -40em; /*position where enlarged image should offset horizontally */
z-index: 50;
}



/*I popup*/


#I
{
width:170px;
margin:1em;
min-height:170px;
border:1px solid #708090;
text-align:center;
}


.Ioid
{
display:inline;
position: relative;
height:20em;
}

.Iler img
{
background-color:transparent;
text-decoration:none;
border-style:none !important;
}

.Iler:hover
{
text-decoration:none;
}

.Iler:hover img
{
border-style:none;
}

.Iler span
{
position:absolute;
background-color: #385050;
padding: 1em;
border: 0.6em ridge #385050;
visibility: hidden;
color: #FFFFFF;
text-decoration: none;
text-align:left;
font-size:90%;

}
.Iler span img
{
border: none;
padding: 0;
}

.Iler:hover span
{
visibility:visible;
width:25em;
min-height:10em;
left: -40em; /*position where enlarged image should offset horizontally */
z-index: 50;
}





/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/ipad-flyout.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */


ul.toplevel
{
margin:0 0 0 20px;
padding:0;
list-style:none;
 white-space:nowrap;
text-align:left;
background:#23415A;
margin-bottom:1px;
position:relative;
float:left;
clear:left;
height:22px;
width:140px;
z-index:100;
}

ul.toplevel li
{
margin:0;
padding:0;
list-style:none;
}

ul.toplevel li
{
display:inline;
}

ul.toplevel ul
{
margin:0;
padding:0;
list-style:none;
position:absolute;
left:-9999px;

}

ul.toplevel li a
{
display:block;
font:normal 12px verdana,arial,sans-serif;
color:#f3f298;
line-height:22px;
text-decoration:none;
padding:0 20px;

} 

ul.toplevel li a.fly
{
background:#23415A url(arrow.gif) no-repeat right center;

}


ul.toplevel ul li a
{
padding:0 20px 0 10px;
background:#708494;
}

ul.toplevel li a:hover
{
color:#FF9933;
} 

ul.toplevel li:hover > a
{
color:#FF9933;
}

ul.toplevel li:hover > ul
{
left:100%;
margin-top:-23px;

}

ul.toplevel a:hover ul,
ul.toplevel a:hover a:hover ul, 
ul.toplevel a:hover a:hover a:hover ul
{
left:100%;
}

ul.toplevel a:hover ul ul, 
ul.toplevel a:hover a:hover ul ul
{
left:-9999px;
}

ul.toplevel table
{
position:absolute;
left:99%;
height:0;
width:0; border-collapse:collapse;
margin-top:-7px;
}

ul.toplevel li.close
{
position:absolute;
left:0;
top:0;
width:20px;
height:22px;
z-index:-1;
overflow:hidden;
}

ul.toplevel li.close a
{
display:block;
padding:0;
border:0; width:32px;
height:32px;
background:url(ipad/close.png);
}

ul.toplevel li.close a b
{
position:absolute;
left:-9999px;
}

</style>
<style media="only screen and (max-device-width:768px)" type="text/css">
/* for iPhone, iPod Touch and iPad */
ul.toplevel li.liTop:hover + li.close {z-index:200; width:32px; height:32px; left:-15px; top:-10px;}
</style>

#menu
{
margin:auto;
}


.dispimg
{
float:left;
display:inline;
margin-right:2em;
}




.popup
{
display:none;
text-decoration:none ! important;
}

.hilite
{
display:inline-block;
position: relative;
background: #708494;
text-decoration:none ! important;
color: #000000 ! important;

}

a.hilite:hover
{
border-width:0;
}

.hilite:hover .popup
{
display: block;
position: absolute;
width: 25em;
color:#FF9933;
background-color:#333333;
/* IE10 */ 
background-image: -ms-linear-gradient(bottom, #000000 0%, #333333 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #000000 0%, #333333 100%);

/* Opera */ 
background-image: -o-linear-gradient(bottom, #000000 0%, #333333 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #000000), color-stop(1, #333333));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #000000 0%, #333333 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(bottom, #000000 0%, #333333 100%);

padding: 1em;

border: 0.4em ridge #FF7A49;
border-radius:15px;
-moz-border-radius:15px;
box-shadow: 10px 10px 5px #BDC6CE;
-webkit-box-shadow:10px 10px 5px #BDC6CE;
-moz-box-shadow:10px 10px 5px #BDC6CE;

/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#BDC6CE')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color='#BDC6CE');


left: -5em;
top: -15em;
z-index:20;
}



.pic
{
float:left;
display:inline;
position: relative;
min-height:2em;
margin:0.5em 1em 0.5em 0;
}

.picer img
{
background-color:transparent;
text-decoration:none;
border-style:none !important;
}

.picer:hover{
background-color:transparent;
text-decoration:none;
}

.picer:hover img
{
border-style:none;
}

.picer span
{
position: absolute;
background-color: #FFFFFF;
padding: 0;
left: -1000px;
border: 1em outset #000000;
visibility: hidden;
color: #000000;
text-decoration: none;
text-align:left;
font-size:90%;

}
.picer span img
{
border: none;
padding: 0;
}

.picer:hover span
{
visibility: visible;
min-width:3em;
min-height:10em;
left: 10em;
top:-25em;
z-index: 5;
}