@charset "UTF-8";
body { color: #000000; margin: 0px; font-family: Verdana, Geneva, sans-serif; font-size: 1em; text-align: center; overflow-x: hidden; overflow-y: scroll; width: 100%; padding: 0px; }

body { background-color: #FFF; }
#container { text-align: center; position: relative; width: 700px; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; }
.wrapper { width:85%; text-align:center; margin:0 auto; }
p { font-family: Verdana, Geneva, sans-serif; font-size: 0.8em; font-weight: normal; }
a:active { text-decoration: none; }
a:visited { text-decoration: underline; color: #006600; }
a:link { color: #FF0000; text-decoration: none; }
a:hover { text-decoration: underline; color: #009900;}
#clickMe { font-size: 1.4em; display: block; width: 150px; margin: 0px; padding: 0px; position: relative; left: -30px; }
#clickMe a { background-color: #CCC; width: 200px; display: block; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; margin-top: 3px; border-radius: 3px; }
#clickMe a:hover { background-color: #666; color: #FF3; text-decoration: none; }
.projectBlock { position:relative; display:block; background-color:#CCC; height:263px; font-size:0.8em; width: 288px; float: left; margin-top: 15px; margin-right: 10px; margin-bottom: 15px; margin-left: 10px; }
.projectBlock a   { text-decoration: none; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; }
a #projectImg { text-decoration: none; }
.banner { position:relative; z-index:99; width: 200px; height: 120px; background-color: #333; opacity:.15; color:#fff; font-size:1em; text-align:center; margin-right: auto; margin-left: auto; -moz-border-radius-topleft: 6px; -moz-border-radius-bottomleft: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; -webkit-border-top-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; top: -160px; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px; margin-bottom: -127px; border-radius: 10px; text-decoration: none; }
.banner h3 { margin-top: 4px; color: #FFF; background-color: #4D5A89; }
.banner p { font-size: 0.9em; margin-right: 10px; margin-left: 10px; font-family: Arial, Helvetica, sans-serif; }
.banner.bannerHover { background-color: #333; opacity: .8; }
#contactMe a { color: #FFF; display: block; background-color: #666; opacity: .7; height: 25px; width: 150px; right: 20px; bottom: 20px; position: fixed; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font-size: 0.9em; color: #FFF; padding-top: 3px; z-index: 25; }
#contactMe a:hover { opacity: .9; background-color: #666; text-decoration: none; }
#jonnyshawCopy { font-size: 0.8em; text-align: left; position: fixed; bottom: 20px; display: block; left: 20px; color: #666; z-index: 25; }
#upDetails  { width: 700px; margin-right: auto; margin-left: auto; position: relative;  margin-top: 15px; }
#upDetails h2 { text-align: left; margin: 0px; font-size: 1.1em; display: block; height: 25px; padding-top: 4px; padding-bottom: 2px; padding-left: 6px; background-color: #666; color: #FFF; -webkit-border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; bottom-right-border-radius: 6px; bottom-left-border-radius: 6px; -moz-border-radius-bottomleft: 6px; -moz-border-radius-bottomleft: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; margin-top: 0px; margin-bottom: 0px; padding-right: 10px; cursor: pointer; border: #666 1px solid; transition-property: all; transition-duration: .5s;}
#upDetails h2:hover { border: #F00 1px solid; background-color: #8C8C8C}

#upDetails h2:hover .whatIs { color: #FFF;  transition-property: all; transition-duration: .5s;}
#upDetails h2 .whatIs { color: #999; }

#specifics ul  { font-size: 0.85em; text-align: left; }
#specifics ul li { font-size: 0.9em; margin-bottom: 6px; }
#imgSweep { width: 679px; position: relative; left: 1200px; z-index: 20; display: block; }
#toolset  { display: block; font-size: 0.9em; color: #333; }
#webPanel { height: 560px; overflow: scroll; }
#webPanel,#webFlip { padding:5px; text-align:center; border:solid 1px #c3c3c3; width:; cursor: auto; }
#printPanel { height: 560px; overflow: scroll; display: none; }
#printPanel,#printFlip { padding:5px; text-align:center; border:solid 1px #c3c3c3; width:; cursor: auto; }
.clearer {clear:both;}
#directionals { position: absolute; bottom: 320px; width: 100%; z-index: 25; }
#directionals #previous { float: left; height: 58px; width: 200px; position: fixed; background-image: url(image/graphics/directionals.png); display: block; left: -140px; }
#directionals #next { position: fixed; right: -140px; background-image: url(image/graphics/directionals.png); height: 58px; width: 200px; }
#fltRt { float: right; }
#specifics { display: none; width: 600px; position: relative; z-index: 40; -moz-border-radius-bottomleft: 6px; -moz-border-radius-bottomright: 6px; -webkit-border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; bottom-right-border-radius: 6px; bottom-left-border-radius: 6px; background-color: #FFF; margin: 0 auto; padding: 4px; color: #666; }
#upDetails #specifics a { color: #FC3; text-decoration: underline; }
#upDetails #specifics p a:hover { color: #FF0; text-decoration: none; }
.flotRt { float: right; }
#imgSweep a #projectImg { position: relative; left: 7px; text-decoration: none; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; }
a #jonnyShawIcon { position: relative; left: 7px; text-decoration: none; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; }
.projectBlock a img { text-decoration: none; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; }
/*Accordion Styling*/
#AccordiWrap { text-align: center; margin-right: auto; margin-left: auto; width: 80%; padding-top: 3px; padding-bottom: 3px; display: block; margin-top: 10px; }
.ui-widget-content { color: #222222; background-color: #C5CADC; padding-top: 5px; padding-bottom: 5px; -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; }
#JSaccordion #whatIdo { font-size: 1 .em; font-style: italic; color: #82819E; font-size: 1.05em; }
.ui-state-default,.ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3; font-weight: normal; color: #555555; background-color: #E9E9E9; }
.ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; min-height: 0; /* support: IE7 */ padding-top: 0.5em; padding-right: 2em; padding-bottom: 0.5em; padding-left: 2em; }
.ui-accordion .ui-accordion-content { border-top: 0; overflow: hidden; background-color: #FFF; text-align: center; padding-top: 2em; padding-right: 2.2em; padding-bottom: 2em; padding-left: 2.2em; margin-right: 2em; margin-left: 2em; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; margin-top: .5em; margin-bottom: 0.5em; }
#JSaccordion div p { width: 90%; margin-right: auto; margin-left: auto; }
#JSaccordion h3 { margin-top: 4px; margin-right: 10px; margin-bottom: 4px; margin-left: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; border-radius: 10px; padding-top: 3px; padding-bottom: 3px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }

#AccordiWrap { display: block; -moz-border-radius-topleft: 6px; -moz-border-radius-bottomleft: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; -webkit-border-top-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; border-radius: 16px; }
#AccordiWrap h3 a:hover { border: 1px solid #d3d3d3; font-weight: normal; color: #555555; background-color: #FFC; }
#accordion-resizer { min-height: 98%; }

@media (max-width: 1000px) { 
.banner { opacity: .63;}
}