/*ArleneBohn.css - My desktop computer size*/
*{
margin:0;
padding:0;
border:0;
outline:0;
}
* {box-sizing: border-box;}
article, aside, figure, footer, header, hgroup, nav, section {
display:block;
}
img {
    max-width: 100%;
    height: auto;
}
body{
background:#000 url(../images/.jpg);
background-color:#585858 !important;
font-family:Arial,Helvetica,sans-serif;
border:0;
margin:0;
}
#main { 
max-width:100%;
width:100%;
height:100%;
margin:0 auto 0 auto;
background-color:#fff; 
font-family:Georgia,Helvetica,serif;
border:thin solid transparent;
}
#navbar{
width:100%;
max-width:100%;
margin:0 auto 0 auto;
height:100%;
background-color:#000;
border:thin solid #000;
}
.welcome h5{
width:100%;
display:block;
margin-top:-1em;
border:none;
}
#navigation{
background:#000;
font-family:Arial,Helvetica,sans-serif;
width:100%;
max-width:100%;
position:relative; 
height:4em;
border-top:1px solid #2b250d; 
border-bottom: 1px solid #2b250d;
background-size:contain;
margin-top:1em;
margin-bottom:1em;
}
#navigation li{
list-style-type:none;
}
#navigation li{
float:left;
position:relative;
}
#navigation a,
#navigation a:link,
#navigation a:visited{
text-decoration:none;
font-family:Verdana,Geneva,Arial,Sans-Serif;
font-size:100%;
color:#ffb600;
background:#000;
display:block;
height:2em;
width:8em;
border-right:solid 1px #000;
line-height:2em;
text-align:center;
outline-style:none;
}
#navigation a:hover,
#navigation a:active,
#navigation li.selected a:link,
#navigation li.selected a:visited{
background:#000; 
color:#8fad49;
}
#navigation li ul{
position:absolute;
z-index:100;
visibility:hidden;
border:solid 2px #000;
border-right: solid 2px #000;
border-bottom: solid 2px #000;
}
#navigation li:hover ul,
#navigation li a:hover ul{ 
visibility:visible;
top:1.6em;
left:0;
}
#navigation li:hover ul li a,
#navigation li a:hover ul li a{ 
background:#5266b6; 
color: #000;
text-align:left;
display:block;
width:12em;
padding:0 2em 0 2em;
height:auto;
}
#navigation li:hover ul li a:hover,
#navigation li a:hover ul li a:hover{ 
background: #000;
color: #8fad49;
}
#navigation ul li::first-child> a{
-webkit-border-top-right-radius:1px;
border-top-right-radius:1px;
}
#navigation ul li::first-child> a{
-webkit-border-top-left-radius:1px;
border-top-left-radius:1px;
}
#navigation li:not(Bio)> a{
-webkit-border-bottom-left-radius:1px;
border-bottom-left-radius:1px;
}
#navigation li:not(Bio)> a{
-webkit-border-bottom-right-radius:1px;
border-bottom-right-radius:1px;
}
#navigation li:not(Bio)> a{
-webkit-border-top-right-radius:1px;
border-top-right-radius:1px;
}
#navigation li:not(Bio)> a{
-webkit-border-top-left-radius:1px;
border-top-left-radius:1px;
}
#navigation ul li::last-child> a{
-webkit-border-bottom-left-radius:6px;
border-bottom-left-radius:6px;
}
#navigation ul li::last-child> a{
-webkit-border-bottom-right-radius:6px;
border-bottom-right-radius:6px;
}
#navigation table{
margin:-1px;
border-collapse:collapse;
position:absolute;
top:0.5em;
left:0;
z-index:100;
}
#top_title{
    width:100%;
    margin:1em 0 0 -1.2em;
    overflow:hidden;
}
#top_title h1{
	font-family:'Sacramento', cursive;
	width:100%;
	color:silver;
	background:transparent;
	font-size:6em;
	 margin:0;
	text-align:center;
	border:none;
}
#frame img{/*About Page */
max-width:100%;
width:100%;
display:block;
margin:0 auto 0 auto;	
}
#frame{
max-width:100%;
width:100%;
height:auto;
display:flex;
justify-content:center;
flex-wrap:wrap;
background-color:transparent;
margin:2em auto 4em auto;
border:none;
}
#frame1 img{/*books,gifts Page */
display:block;
margin:0 auto 0 auto;	
}
#frame1{
width:80%;
display:flex;
justify-content:right;
flex-wrap:wrap;
background-color:transparent;
margin:2em auto 4em auto;
border:none;
}
#frame2 img{/*Portrait Page */
max-width:100%;
width:100%;
display:block;
margin:0 auto 2em auto;	
}
#frame2{
max-width:100%;
width:100%;
height:auto;
display:flex;
justify-content:left;
flex-wrap:wrap;
background-color:transparent;
border:none;
}
#prime{
flex:30%;
max-width:30%;
align-content:space-around;
	border:none;
	display:block;
margin:1.5em auto 1.5em auto;
}
#ribs{
width:100%;
max-width:100%;
	height:auto;
	border:none;	
}
#text{
width:100%;
border:none;
display:block;
}
.pic{
width:100%;
max-width:100%;
padding:1px;
height:auto;
border:none;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
 }
#container{
max-width:100%;
width:100%;
height:auto;
color:grey;
margin:0 auto 0 auto;
border:thin solid transparent;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-o-border-radius: 12px;
-ms-border-radius: 12px;
border-radius: 12px;
}
#container h1,h2,h3,h4,h5,h6{
text-align:center;	
}
#sidebar{
max-width:100%;
margin:0 0 0 auto;
width:100%;
height:100%;
float:right;
position:relative;
border:thick solid transparent;
}
.list-group-item {
    background-color:#f0f0f0 !important;
   transition: background-color .10s !important;
}
.list-group a:hover {
    background-color:#b0b0b0 !important;
}
.content2 a:hover {
    background-color:#b0b0b0 !important;
}
.content3 a:hover {
    background-color:#b0b0b0 !important;
}
.content4 a:hover {
    background-color:#b0b0b0 !important;
}
.list-group-item{
    color:#101010 !important;
}
.portrait{
    background:#fff;
    width:100%;
    padding:6px;
    color:#696969;
}
.portrait th{
    font-size:20px;
    color:#282828;
}
.portrait td{
    font-size:16px;
    color:#383838;
}
.pagination > .active a{
    background-color:#428bca !important;
    border-color:#428bca !important;
}
/*************************************/
.col-3{
    width:100% !important;
    bottom:1em;
    border:none;
    margin:0;
       }
.col-sm-6{
    width:25% !important;
    bottom:1em;
    border:none;
    margin:0;
       }
.col-9 {
max-width:100%;
width:100% !important; 
margin:0em auto 8em auto;
background-color:#fff;
border:none;
}
.col-sm-4{
    width:23% !important;
    float: left;
    position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
box-sizing: border-box;
}
.col-side{
      width:40%;
      float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-sm-9 {
max-width:100%;
width:100%; 
margin:0 auto 4em auto;
background-color:transparent;
border:none;
}
.review{
max-width:100%;
width:100%;
border:none;
margin:0 0 0 0;
}
.wrap {
    position: absolute;/*****did the trick to keep the elements beside each other**********/
max-width:62%;
width:62%; 
background-color:#000;
margin:0em auto 0 28em;
border:none;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-o-border-radius: 12px;
-ms-border-radius: 12px;
border-radius: 12px;
}
.wrap1 {
    position: absolute;/*****did the trick to keep the elements beside each other**********/
max-width:40%;
width:40%; 
background-color:#000;
margin:0 auto 0 26em;
border-top:thick solid #fff;
clear:both;
}
#wrap{
    /**position:absolute;**/
max-width:100%;
width:100%; 
color:grey;
height:auto;
margin:0 auto 0 auto;
border:none;     
}
.popular{
    width:28%;
    position:relative;
    float:right;
    margin-top:-11em;
    margin-right:-2.5em;
     border:none;
    z-index: 1;
}
.popPage{
    width:100%;
    border:none;
}
.cont{
    width:100%;
    height:auto;
    border: 1px solid transparent;
    background:#fff;
    padding:2em;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-o-border-radius: 12px;
-ms-border-radius: 12px;
border-radius: 12px;
}
.content{
max-width:30%;
width:30%; 
height:auto;
margin:0 auto 9em 0;
border:none;  
clear:both;
}
.content1{
max-width:28%;
width:28%; 
height:auto;
margin:1em auto 9em 0;
border:none;  
clear:both;
}
.content2{
max-width:100%;
width:100%; 
height:auto;
margin:0 auto 6em 0;
border:none;   
}
.content3{
max-width:100%;
width:100%; 
height:auto;
margin:0 auto 26em 0;
border:none;   
}
.content4{
margin-bottom:2em;
}
.container {
max-width:100%;
width:100%; 
height:auto;
border:solid 1px transparent;
margin:0 auto 0 auto;
}
.picture{
width:100% !important;
height:220px;
padding:4px;
border:none;
}
.picture2{
width:100%;
padding:4px;
border:none;
}
.pic2{
  height:auto !important; 
  clear:both;
}
.pic3{
width:70% !important;
margin:0 auto 0 auto;
border:none;
clear:both;
}
.caption h3{
color:#000;
}
.caption1{
 margin-top:9em;
}
.caption1 h3{
color:#000;    
}
/**************Form Error Warnings***********************/
.warn{
display:block;
color:#ff7400;
}
.control-label{
display:block;
color:#ffffff;
}
.help-block {
color:#ff7400;
}
.title{
display:block;
color:#808080;    
}
.abc{
display:block;
color:#696969;     
}
.alert-heading{
display:block;
color:#696969;
}
/*************BUTTONS**********************************************/
.col-md-3 .btn{
width:100%;
margin-bottom:1em;
}
.col-md-4 .btn{
width:100%;
margin-bottom:1em;
}
.col-md-5 .btn{
width:100%;
}
/***************BUTTONS MIGHT NOT NEED*****************************************/
.hero-feature{
width:100%;
height:auto;
border:none;	
margin:0 auto 0 auto;
}
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 6px;
  width: 285px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
.button2 {
  display: inline-block;
  border-radius: 4px;
  background-color: #fff;
  border: none;
  color: #000;
  text-align: center;
  font-size: 28px;
  padding: 6px;
  width: 285px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button2 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button2 span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button2:hover span {
  padding-right: 25px;
}

.button2:hover span:after {
  opacity: 1;
  right: 0;
}