/* /css/ sospep.css [-v-008 #2280][2013-08-12][copyright don.sagrott all rights reserved] REF# 1882(public) */
/* 2015-07-30 ] fix-prb-nnnn google errors mobile 
    ] style formatting -
*/

/**********  
HTML ELEMENTS - ALL
***********/
body {
	margin: 0;	
    padding: 0;
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
	/* font: normal 10px ; */
    /*font-family: Tahoma, Verdana, Geneva, sans-serif; width:85%; margin:20px auto;*/
	line-height: 1.8em;
    background: url(../images/bg_body_stuart_range.jpg) #e6e6e6 repeat-x center 0px;
	/*
    background: #1d1d1d url(images/bg_body.jpg);
    
    background: url(../images/28H.jpg) #e6e6e6 repeat-x center 0px;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.24, rgba(30,87,153,1)), color-stop(0.62, rgba(21,127,214,1)));
    background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(21,127,214,1) 20%,rgba(125,185,232,1) 100%);  Chrome10+,Safari5.1+ 
    background-color: #000 !important; 
    */
}
/********* 
HEADINGS * 
**********/
h1 {
    font-size:medium;
    color:White;
    text-align:center; 
}    
h2 {
    font-size:medium;
    color:White;
    text-align:center; 
}
h2 a:visited {
    color:Silver;
}
/*
h2 a,  h2 a:link, h2 a:active, h2 a:visited {
  font: bold 1.22em/75px Arial, Helvetica, sans-serif;
  font-size:small ;
  color: White;
  display: block;
  padding: 0 9px;
  text-transform: lowercase;
  text-decoration: none;
}
*/
h3 {
    font-size:medium;
    color:White;
    text-align:center; 
}
/**********  
FORMS     *
***********/
form {
    position:relative;
    top:10px;
    bottom:10px;
    /*left:0px;*/
    width:66%;
    margin-left: auto; 
    margin-right: auto;  
}
/* [FORM noStyle] */
form.noStyle{
    width:100%;
}
/* [FORM AddSubject] 
] WHAT = input subject record feild data, 
] WHERE = PAGES= /add/{L1},{L2},{L3},{L4},{L5} library, book, ... ; edit/{L1}, {L2}, ... 

] form.AddSubject label.error { padding-left: .5em; float:right; vertical-align: top; color: red; font-size:medium; font-weight:bold }
] see myNotes on cSS form postioning, 2011.03.16 

] TEST var 
var-darkBlue:#2A4795 ;
var-mediumBlue:#8694BB;
var-lightBlue:#BCC2D2;
*/

form.AddSubject { 
    position:relative; 
    display:block; 
    padding: 20px; 
    background-color:lightGray;
}
form.AddSubject legend {
    padding: 2px 4px;  
    margin-bottom: 8px; 
    border: 4px solid; 
    font-weight:bold; 
} 
form.AddSubject fieldset {
    padding: 1em; 
    border: 1px solid;
}
form.AddSubject label { 
    width: 15em;  
    margin-right: 0.5em; 
    float:left; 
    text-align: right; 
    font-weight:bold;
} 
form.AddSubject input { 
    margin-bottom: 8px; 
}
form.AddSubject textarea { 
    margin-bottom: 8px; 
    border: 1px solid; 
}
form.AddSubject select { 
    margin-bottom:8px; 
}

/* [FORM search]
WHAT = input search criteria, submit search
WHERE = find/{L5} pages, articles, items, ..
- v=001, 2011.07.18 - reason width change for fieldset b/c of adding Find buttons after search input boxes
*/
form.search { 
    position:relative; 
    margin-left:auto; 
    margin-right:auto;  
    padding:12px 12px; 
    background-color:#BCC2D2; 
    border: 2px solid; 
    border-color:#2A4795; 
}
form.search legend {
    padding: 2px 4px; 
    font-weight:bold; 
    margin-bottom: 8px;
    border: 4px solid; 
    border-color:#8694BB; 
}
form.search fieldset {
    padding: 1em; 
    border: 1px solid; 
    border-color:#8694BB;
   /* width: 90%; 
    width: 85em;*/
}
form.search label {
    float:left; 
    width: 15em; 
    text-align: right;  
    margin-right: 0.5em; 
    font-weight:bold;
} 
form.search input { 
    margin-bottom: 8px;
}
form.search textarea { 
    border: 1px solid; 
    /*width: 35em;*/ 
    margin-bottom: 8px;     
}
form.search select { 
    padding: 4px;
    margin-bottom: 8px;
}

/*DIV containts right aligned button */
.displayBlock{
    display:block;
}
/*
.themeBlueDark{
    background-color:#BCC2D2; border: 2px solid; border-color:#2A4795;
}
.themeBlueMedium{
   border: 4px solid; border-color:#8694BB;
}
*/

/* [FORM Login] 
WHAT = form to submit login data 
WHERE = ] Account/Login, ?] Account/Register
- renamed from frmLogin to form.Login
*/
form.Login {
    font: bold 1.22em/25px Arial, Helvetica, sans-serif;
    font-size:small;
    background-color:White;
    /* text-align: center;
    text-transform: lowercase;
    color: #000;
    padding: 0 ;
    */
    width:80%;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}
    form.Login legend {
        font-size:medium;
    }
    form.Login label { 
        width: 10em;  
        margin-right: 0.5em; 
        float:left; 
        text-align: right; 
        font-weight:bold;
    } 
    form.Login input { 
        margin-bottom: 8px; 
    }
/* WHAT = displays the 'search' button beside the top of the ta and to the right VS the bottom of ta
WHERE = used on find/{L5} pages (ex beside textArea) b/c  */
input.alignRight {
    float:right; 
    margin-right:80px;
}
/* DIV
-------------------------------------------------------------------------------------------------------------------- */  
/*
- PAGE index.cshtml -  appContainers 
- img div  containers position each of the - invidual app icons 
- they provide a link to the app start page 
- they provide a text description to the app ( ONMOUSEOVER, HOVER )
- copy of orig. style = #subjects_image{border:none;position:absolute;top:100 px;left:200 px}
- REVISED 06.18 
margin-bottom: 8px; margin-bottom: 8px; FROM s, o
revised 77 to 73 
*/
div.left_col{
    background-color:White;
    float: left;
    padding: 8px;
    width: 20%;
    border: 1px solid gray;
}
    div.left_col label {
        /*float:left; 
        width: 15em; 
        text-align: right;  
        margin-right: 0.5em;*/
        font-weight:bold;
    } 
    
     div.left_col.photo {
        width:300px; 
        height:200px;
    } 
    
.photoLeftPanelThumb{
        width:100%; 
        /*height:180px;*/
} 
div.right_col{
    float: right;
    padding: 5px 5px 5px 5px;
    width: 75%;
    margin-bottom:10px;
    border: 1px solid gray;
}
/* [wrapper] 
] WHAT =  this contains the contents of the entire page  
] WHERE = PGs - ? 
*/
div.wrapper {
    display:block;
    width:98%;
}

div#news{
    background-color:White;
    border:1px solid;
    border-color:lightGray;
}

.newsItem{
   background-color:White;
   float:left;
   width:45%;
   margin: 10px;
}
.newsTab {
}

.newsTab a {
        font: bold 1.22em/25px Arial, Helvetica, sans-serif;
    }
 
div#adSiteSponsor {
    border:none;
    position:absolute; 
    top:30px; 
    left:8px;
}
div#terms {
    border:none;
    position:absolute;
    top:500px;
}   
div#footer {
    border:none;  
    margin-left: auto; 
    margin-right: auto; 
    width:50%;
}

/* [navHeader] 
navHeader,   border:none;position:relative;top:30px;left:10px;
] WHAT = this positions and styles the div containing the main page header and navigation links 
] WHERE = pages, almost all , not on index, 
*/
#navHeader {
    background-color:Blue;
    border: 2px solid; 
    border-color:lightGray;
    z-index:3;
    padding-bottom: 20px;
}
    #navHeader a {
        color:#74C2E1;     /*lightBlue*/
    }
    #navHeader a:visited {
        color:Silver;
    }
    #navHeader span { 
    }
    #navHeader h1 {  
    }
    #navHeader h1 span a {
        text-decoration:none; 
        color:White;
    }
    
/* [statsBar] 
] WHAT =  this postions and styles the h3 header which displays cumulative STATS for all of the task in the displayed taskgroup, ?] plan , ....
] WHERE = PG view/tasks
*/
.statsBar {
    position:absolute;
    top:75px; 
    width:100%;
    margin-bottom:0px;
    padding-bottom:0px;
   /* z-index:-1;*/
}
/* [toolbar records] 
] WHAT =  this postions and styles the toolbar which displays cumulative STATS for all of the task in the displayed taskgroup, ?] plan , ....
] WHERE = PGs - L5 - view/article, item, task, ... ( uses only tb class on span) L4 view/articles, /items, /... 
*/
#toolbar_records {
    margin-top:0px; 
    margin-bottom:0px;
    background-color:White;
    height:32px;
    padding: 5px 0px 8px ;
}
#tb {
	padding: 10px 4px ;
}
/* [.buttons]
] WHAT =  this postions the ok,cancel buttons on some pages, GET RID OF THIS 
] WHERE = PGs - ?
*/
div.buttons{
    margin-top:15px;
    margin-left:100px;
}
/* [displayPhoto] 
] WHAT = - this div is used to position & style the photo for the record, - the class is assingned to the div containing -s.list, o.list, ...
] WHERE = on VIEW DETAIL pages
*/
div.displayPhoto {
    display:block; 
    float:right;
    margin-right: 50px;
}
/* [taskDetail3] 
] WHAT =  this postions and styles the/a list of items 
] WHERE = PGs - ?
*/
/* EDIT from div.task... to .task , used on viewDetail page */
.taskDetail3 {
    display:block;
}
    .taskDetail3 label {
        float:left; 
        width: 15em; 
        text-align: right;  
        margin-right: 0.5em; 
        font-weight:bold;
    }
/* [ taskDetail] 
] WHAT =  this postions and styles the/a list of items 
] WHERE = PGs - ?
*/
div.taskDetail label.indent  {
    float:left; 
    width: 15em; 
    text-align: right;  
    margin-right: 0.5em; 
    font-weight:bold; 
    margin-left: 15px; 
} 
/* [displayTwitterFeed] 
] WHAT =  this postions and styles div containing the twitter feed 
] WHERE = PGs - view/person 
*/
.displayTwitter {
    float: right; 
    margin-right:5px;
}
/* [displayFaceBookFeed] 
] WHAT =  this postions and styles div containing the facebook feed 
] WHERE = PGs - view/person
*/
.displayFacebook {
    float: right; 
    margin-right:5px;
    background-color:White;  
}
/* DIV - LISTS
-------------------------------------------------------------------------------------------------------------------- */
/* [displayList] 
] WHAT =  this postions and styles the/a list of items  TOP RIGHT BOTTOM LEFT
] WHERE = PGs - L1/L2/L3/L4 - view/libaries, warehouses, , ... almost all pgs where a list of items is being returned from the db and displayed
*/
.displayList {
    position:relative;
    margin-top: 0px;
    padding:5px;
    /*padding-top:0px;*/
    /*margin-top:0px;*/
    left: 0px;
    background-color:White;
    margin-bottom: 5px;
    padding-bottom: 5px;
    /*border: 1px solid; 
    */
    /*  
    ] view P Detail w/Tabs is showing up behind the tab box, think this might have been set orig b/c of overlap with menu
    z-index:-1;    
    ] TRY position on top of google maps in placesDetail WORKED with abs positioning     */
}
    .displayList h1 {
        font-size:large;
        color:black;
        text-align:left; 
    }
    
    .displayList h2 {
        font-size:medium;
        color:blue;
        text-align:left; 
    }
    .displayList h3 {
        font-size:small;
        color:green;
        text-align:left; 
    }
    /* this AFFECT button displayed within the displayList 
    .displayList span  {font-size:large; font-weight:normal;}
    */
    .displayList button {
        margin-left:20px;
        margin-top:5px;
    }
    .displayList label {
        float:left; 
        width: 15em; 
        text-align: right;  
        margin-right: 0.5em; 
        font-weight:bold;
    } 
    .displayList input:checked{
        background-color: yellow;
    }
    .displayList li.leafImage {
        list-style-type: none;
        background: url('/images/atlas1.jpg') no-repeat top left;
        height: 46px;
        padding-left: 60px;
    }     
    .displayList table {
        margin-left: 95px; 
    }
    .displayList td {
        margin-left: 3px; 
    }
    .displayList td.bold {
        font-weight:bold; 
    }
    .displayList td.alignRight {
        text-align:right; 
    }
/*[displayList2] 
] WHAT =  based on displayList, this postions and styles the/a list of items, ] WHERE = PGs - ? */
.displayList2 {
    position:relative;
    top: 2px;
    left: 0px;
}
/* [addressList] 
] WHAT =  based on displayList,  this postions and styles the/a list of items in the addressList block, ] WHERE = PGs - view/address*/
.addressList {
    position:relative;
    margin-top: 5px;
    padding:5px;
    left: 0px;
    background-color:White;
    border: 1px solid; 
}
/* [addressContent] 
] WHAT =, ] WHERE = PGs - view/address*/
.addressContent {
    position:relative;
    margin-top: 5px;
    padding:5px;
    left: 0px;
    background-color:White;
    border: 1px solid;
}
/* [displayList3] 
] WHAT =  based on displayList, this postions and styles the/a list of items, HAS different FONT, FONT size, color, font for NUMBER and EX =  PG
] WHERE = PGs - view/articles
EDITed ] color ol #bfe1f1 ] ol li a.large
*/
.list2 {}
.list2 ol { 
	font-style:italic; 
	font-family:Georgia, Times, serif; 
	font-size:24px; 
	color:black;  
}
.list2 ol li { 
}
.list2 ol li p {
	padding:8px; 
	font-style:normal; 
	font-family:Arial; 
	font-size:13px; 
	color:black; 
	border-left: 1px solid #999; 
}
.list2 ol li p em { 
	display:block; 
}
.list2 ol li a {
	font-family:Arial; 
	font-size:12px; 
	color:black;
}
.list2 ol li a.large {
	font-family:Georgia; 
	font-size:24px; 
	color:black;
}
.statusDisplay { 
    padding:4px; 
    font-style:normal; 
    font-family:Arial; 
    font-size:13px; 
    color:black; 
}


/* ?FORM ?DLG Login Display usedIn=_SiteLayout  src= startersite.css, */
/* [DIALOGS]
--------------------------------------------------------------------------------------------------------------------*/
/* ] WHAT = used to position the login dialog , ] WHERE = PG index (Deprecated, using seperate login page) 
#dlgLogin {
    display:none;
    background-color:#fff;
    /* label, input  display:block; overflow: hidden; @ServerInfo.GetHtml() 
    input.text margin-bottom:12px; width:95%; padding:.4em; 
    fieldset padding:0; border:0; margin-top:25px; * /
*/
#dlgAbout {
    display:none;
    background-color:#fff;
}
#dlgSignUp{
    display:none;
    background-color:lightGray;
    border: 4px solid;
    padding: 10px;
    margin-bottom: 8px; 
    font: normal 12px/150% console, Arial, Helvetica, sans-serif; 
    /*background: url(../images/sospep_S_180_180-1.jpg) #e6e6e6;*/
}
#dlgSignUp input{
    margin-bottom: 8px; 
}
#dlgSignUp h2 {
    font-size:medium;
    color:Black;
     
}

.dlgConfirm {
    display:none;
    background-color:#fff;
    /*style="float: left;  width:300px;
    margin: 0 7px 20px 0; */ 
}
.dlgSelect {
    display:none;
    background-color:#fff;
    width:300px ;
}
.dlgSelect label { 
    width: 15em;  
    margin-right: 0.5em; 
    float:left; 
    text-align: right; 
    font-weight:bold;
}   
.dlgSelect legend {
    padding: 2px 4px;  
    margin-bottom: 8px; 
    border: 1px solid; 
    font-weight:bold; 
} 
.dlgSelect select { 
    margin-bottom:8px; 
    max-width: 400px;
}
#selCommunity select { 
    margin-bottom:8px; 
    max-width: 200px;
    overflow:hidden;
    }
span#l1
   {font-size:large;} 

/*[MENUS] 
--------------------------------------------------------------------------------------------------------------------*/
/* ] WHAT = main menu options across all pages, displays ] WHERE = PG siteLayout (all pages except ...) */

/* 002 NOW position the 3rd level items to display beside the corresponding 2nd level item */
#nav-one, #nav-one ul {
    padding: 0;
    margin: 0;
    list-style: none; 
    line-height: 1;
}
/* 003 hide the 3rd level from being displayed when the 2nd level is diplayed*/
#nav-one li:hover ul ul, #nav-one li.sfhover ul ul {
    left: -999em;
}
/* 004 display the 3rd level item(s) */
#nav-one li:hover ul, 
#nav-one li li:hover ul, 
#nav-one li.sfhover ul, 
#nav-one li li.sfhover ul {
    left: auto;
}
/**/
#nav-one li:hover a, 
#nav-one li.sfHover a {
  background: #ccc;
  color: #000;
}
#nav-one li:hover ul a, 
#nav-one li.sfHover ul a {
  background: #565656;
  color: #959595;	
}
#nav-one li:hover ul a:hover, 
#nav-one li.sfHover ul a:hover {
  background: #ccc;
  color: #000;	
}
/* 001 YES - 2011.08.17 ADDing for REVISIONS(4) to menu style for adding SUB-MENU  -also added code in */  

/*EDIT from -2.5em to -30px from 10em to 100px, CHANGE UNIT from:em to: px*/
#nav-one li ul ul {
    margin: -20px 0 0 100px;
}

.nav, .nav ul { 
	list-style:none;
	margin: 0;
	padding: 0;
}
 .nav {
  font-family: Arial, Helvetica, sans-serif;
  z-index: 1;
  position: relative;
}
.nav li {
  border-left: 1px solid #000;
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
}
/* >>>>> x] changed color from:#959595 x] removed background property - background: #565656; >>>>>>>>*/
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
  font: bold 1.22em/25px Arial, Helvetica, sans-serif;
  font-size:small ;
  color: White;
  display: block;
  padding: 0 9px;
  text-transform: lowercase;
  text-decoration: none;
}
.nav li a:hover {
  background: #ccc;
  color: #000;	
}
.nav ul {
  background: #565656;
  border-bottom: 1px solid #000;
  list-style: none;
  margin: 0;
  width: 100px;
  position: absolute;
  top: -999em;
  left: -1px;
}
.nav li:hover ul,
.nav li.sfHover ul {
  top: 25px;
}
.nav ul li {
  border: 0;
  float: none;
}
.nav ul a {
  border: 1px solid #000;
  border-bottom: 0;
  padding-right: 20px;
  width: 80px;
  white-space: nowrap;
}
.nav ul a:hover {
  background: #ccc;
  color: #000;
}


/* ] WHAT = provides login,register options, displays ] WHERE = PG siteLayout (all pages except ...) */
#menuAuth {
    float: right;
    font: bold 1.22em/25px Arial, Helvetica, sans-serif;
    font-size:small ;
    text-align: right;
    text-transform: lowercase;
    color: #000;
    padding: 0 ;
    margin: 0;
    margin-right:9px;
}
/* 05.26 REVISION #login
[goal =] align style with menu
] added font, text-transform, padding, margin
] changed from: font-size: 1.1em; 
*/  
#menuAuth ul {
    padding:0px;
    margin:0px;
}
#menuAuth li {
    margin: 0;
    display: inline-block;
    list-style: none;
    padding-left: 5px;
}
#menuAuth a:link, #menuAuth a:visited {
    color: #fff;
    text-decoration: none;
}
#menuAuth a:hover {
    color: #fff;
    text-decoration: underline;
}
/* ] WHAT = sub menu options ON page for custom app ] WHERE = PG view/money/, ... */
/* LIST MENU - HORIZONTAL LIST ITEMS with single line border above and below items EX= add transaction PG */
#submenu-horiz {}
    #submenu-horiz ul { 
        text-align:center; 
        border-top:1px solid #eee; 
        border-bottom:1px solid #eee; 
        padding:10px 0; 
    }
    #submenu-horiz ul li { 
        display:inline; 
        text-transform:uppercase; 
        padding:0 10px; 
        letter-spacing:6px; 
    }
    #submenu-horiz ul li a { 
        text-decoration:none; 
        color:#eee; 
    }
    #submenu-horiz ul li a:hover { 
        text-decoration:underline; 
    }
/* CLASSES - CUSTOM                                                       
--------------------------------------------------------------------------------------------------------------------*/
/*[ERROR]style 
WHAT = for add/{*}, edit/{*} pages 
WHERE = for the AddSubject/Object/... Page validation errors report 
*/
.validation-summary-errors { 
    position:relative; 
    float:right; 
    top:30px; 
    padding-left:20px; 
    width:32%; 
    font-weight:bold; 
    color:red; 
    font-size: 11pt; 
    display:block;
}
/* FORM-Register*/
.validation-error{ 
    position:relative; 
    float:right; 
    
    /*top:30px; 
    padding-left:20px; 
    width:32%;
     */ 
    font-weight:bold; 
    color:red; 
    font-size: 8pt; 
    display:block;
}
/* FUNCTION 1070 client side VALIDATION, using jq validate libary */
#errorDisplay {
	background-color: yellow;
    text-align:left;
    margin-left:16%;
    margin-top: 10px;
    width:45%;
 	/*display: none;*/
}
.invalidEffect {
	background-color: yellow;
    border: 2px solid;
    /*margin-left:15%;
    width:45%;*/
    /*display: none;*/
}
/* style for page title */
.title {text-decoration: none; text-align:center; padding: 0px; margin: 0px;
}
/* style for page footer
.footer {font-size: smaller; color: #ccc; text-align: center;padding: 20px 10px 10px 10px;border-top: 1px solid #e5e5e5;position:relative;}
*/
/* adds a greyed out effect to input text box to indicate that the feild is not editable */
.background {
    background-color:lightGray;
}
/* adds a greyed out effect to input text box to indicate that the feild is not editable and sets the readonly property */
.readonly {
    background-color:lightGray;
}
.error {border: 2px solid;  border-color:Red;  font-size:medium; background-color:White;  padding: 10px;
}

p.info {border: 2px solid;  border-color:Blue;  font-size:medium; background-color:White;  padding: 10px;
}
/* was using this to "highight" the are you sure? prompt, 
    - works BUT some delete pages have multipe p tags and the whole record is "highlighted"
    - can revise each page to use labels OR ...
form.AddSubject p {font-weight:bold;font-size:large} 

left-margin:25%;
*/
p.ruSure {
    font-weight:bold;
    font-size:large;    
}
.error-label { 
    color:red; 
    font-weight:bold;
} 
.error-input { 
    color:red; 
    border:2px;
    border-style:ridge
} 
.fontBold{
    font-weight:bold;
}
.fontLarge{
    font-size: large;
}
.strike{
    text-decoration:line-through;
}
.noStrike{
    text-decoration:none;
}
.highLightGray{
    background-color: #ccc;
}
/* [center] 
] WHAT =  this postions and styles the/a list of items 
] WHERE = PGs - error msg display for ? login, 
*/
.center {
    margin-left: auto; 
    margin-right: auto; 
    width:30%;
}
/* [footerONindexPAGE] 
] WHAT =  this postions and styles the/a list of items 
] WHERE = PGs - error msg display for ? login, 
*/
.indexFooter {
    position:absolute;
    margin-left: auto; 
    margin-right: auto; 
    left:250px;
	top:300px;
    width:50%;
}
/*[msgCenter] 
] WHAT =  this postions and styles the/a list of items 
] WHERE = PGs - ? error msg display for ?
*/
.msgCenter{
	width:300px;
	height:200px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-100px 0 0 -150px;
}
/* REVISED INDEX page */

div#c_image{
    background-color:White;
    float: left;
    padding: 8px;
    width: 95%;
    border: 1px solid gray;
}    
div#c_image h3{
    color:black;
}
/* cells contains each app title, link and description, in the centered table */ 
.indexAppCell{
    background-color:White;
    float: left;
    padding: 8px;
    width: 30%;
    border: 1px solid gray;
}
.indexOuter{ 
    position: absolute;
    top: 50%;
    margin-top: -100px;/* half of #content height*/
    left: 0;
    width: 100%;
}
.indexInner {
   width: 724px;
   margin-left: auto;
   margin-right: auto;
   height: 195px;
}
/* Column Styles
STYLES for LIST  on page view/articles  OR ORIG. menu */
img {
    border: none;
}
img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
} 
.pagination { 
    display: inline;
}
.clear-both{
    clear:both;
}
.clear-left{
    clear:left;
}
.clear-right{
    clear: right;
}